diff --git a/src/common/toast.tsx b/src/common/toast.tsx
index 3530911b..cb7668e6 100644
--- a/src/common/toast.tsx
+++ b/src/common/toast.tsx
@@ -2,9 +2,7 @@ import React, { ReactNode } from 'react'
 import toast from 'react-hot-toast'
 import { playAlarm } from './playAlarm'
 import { translateError } from '@/utils/translate-error'
-import { TfiAlert, TfiCheck } from 'react-icons/tfi'
-import { TiInfo } from 'react-icons/ti'
-import { LuX } from 'react-icons/lu'
+import { Icon } from '../icons'
 
 type ToastType = 'success' | 'error' | 'info' | 'warning'
 
@@ -29,25 +27,25 @@ const TT: Record<
 		borderColor: 'border-r-success border-br-success',
 		iconBg: 'bg-success/10',
 		iconColor: 'text-success',
-		icon: <TfiCheck />,
+		icon: <Icon name="check" />,
 	},
 	error: {
 		borderColor: 'border-r-error',
 		iconBg: 'bg-error/10',
 		iconColor: 'text-error',
-		icon: <TfiAlert />,
+		icon: <Icon name="alert" />,
 	},
 	info: {
 		borderColor: 'border-r-info',
 		iconBg: 'bg-info/10',
 		iconColor: 'text-info',
-		icon: <TiInfo />,
+		icon: <Icon name="info" />,
 	},
 	warning: {
 		borderColor: 'border-r-warning',
 		iconBg: 'bg-warning/10',
 		iconColor: 'text-warning',
-		icon: <TfiAlert />,
+		icon: <Icon name="alert" />,
 	},
 }
 
@@ -80,7 +78,7 @@ export function showToast(message: string, type: ToastType, options?: ToastOptio
 					onClick={() => toast.remove(t.id, t.toasterId)}
 					className="rounded-full btn text-base-content/80 btn-xs btn-ghost"
 				>
-					<LuX size={15} className="" />
+					<Icon name="close" size={15} />
 				</button>
 			</div>
 		),
@@ -117,7 +115,7 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string
 			>
 				<div className="flex items-center gap-1.5 min-w-0">
 					<div className="relative flex items-center justify-center w-6 h-6 rounded-xl bg-primary/10 shrink-0">
-						<TiInfo className="text-base text-primary" />
+						<Icon name="info" className="text-base text-primary" />
 						<span className="absolute -top-0.5 -right-0.5 flex h-2 w-2">
 							<span className="absolute inline-flex w-full h-full rounded-full animate-ping bg-primary opacity-60" />
 							<span className="relative inline-flex w-2 h-2 rounded-full bg-primary" />
@@ -139,7 +137,7 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string
 					}}
 					className="shrink-0 flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-xl bg-base-200 hover:bg-error/10 hover:text-error text-base-content/60 transition-all duration-150 cursor-pointer border border-base-content/8 active:scale-95"
 				>
-					<LuX size={11} />
+					<Icon name="close" size={11} />
 					بازگشت
 				</button>
 			</div>
diff --git a/src/components/UpdateReleaseNotesModal.tsx b/src/components/UpdateReleaseNotesModal.tsx
index f1bc59ce..aa8c129c 100644
--- a/src/components/UpdateReleaseNotesModal.tsx
+++ b/src/components/UpdateReleaseNotesModal.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { RiThumbUpLine } from 'react-icons/ri'
 import { Button } from './button/button'
 import Modal from './modal'
 
@@ -92,8 +91,7 @@ export const UpdateReleaseNotesModal = ({
 					</div>
 
 					<div className="flex items-center justify-center gap-2 py-1 text-muted">
-						<RiThumbUpLine size={14} />
-						<span className="text-xs">دمت گرم که همراه مایی</span>
+						💙<span className="text-xs">دمت گرم که همراه مایی</span>
 					</div>
 				</div>
 
diff --git a/src/components/auth/AuthRequiredModal.tsx b/src/components/auth/AuthRequiredModal.tsx
index e8e813c5..495be0f8 100644
--- a/src/components/auth/AuthRequiredModal.tsx
+++ b/src/components/auth/AuthRequiredModal.tsx
@@ -1,7 +1,7 @@
 import { callEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
 import { Button } from '../button/button'
-import { FiLock } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface AuthRequiredModalProps {
 	isOpen: boolean
@@ -40,7 +40,10 @@ export function AuthRequiredModal({
 						className="absolute inset-0 rounded-full bg-primary/5 animate-ping"
 						style={{ animationDuration: '2s' }}
 					/>
-					<FiLock className="relative text-2xl md:text-3xl text-primary" />
+					<Icon
+						name="lock"
+						className="relative text-2xl md:text-3xl text-primary"
+					/>
 				</div>
 				{title && <h3 className="text-lg font-semibold text-content">{title}</h3>}
 				<p className={'text-muted text-xs font-medium'}>{message}</p>
diff --git a/src/components/auth/require-verification.tsx b/src/components/auth/require-verification.tsx
index b0ea7494..e1f72a35 100644
--- a/src/components/auth/require-verification.tsx
+++ b/src/components/auth/require-verification.tsx
@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion'
 import type { ReactNode } from 'react'
-import { MdOutlineVerifiedUser } from 'react-icons/md'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
 import { Button } from '../button/button'
+import { Icon } from '@/src/icons'
 
 interface RequireVerificationProps {
 	children: ReactNode
@@ -43,7 +43,7 @@ export const RequireVerification = ({
 							'absolute inset-0 p-2 flex flex-col items-center justify-center gap-y-2 bg-base-300/5 backdrop-blur-xs rounded-xl'
 						}
 					>
-						<MdOutlineVerifiedUser size={20} className="text-success/80" />
+						<Icon name="verifyUser" size={20} className="text-success/80" />
 						<h3 className="text-lg font-semibold">نیاز به تأیید حساب</h3>
 						<p className={'text-xs text-content text-center'}>
 							برای دسترسی به این بخش، لطفاً حساب کاربری خود را تأیید کنید.
diff --git a/src/components/blur-mode/blur-mode.button.tsx b/src/components/blur-mode/blur-mode.button.tsx
index d9d3fe4a..7da24c8b 100644
--- a/src/components/blur-mode/blur-mode.button.tsx
+++ b/src/components/blur-mode/blur-mode.button.tsx
@@ -1,6 +1,6 @@
 import { useGeneralSetting } from '@/context/general-setting.context'
 import Tooltip from '../toolTip'
-import { HiOutlineEye, HiOutlineEyeSlash } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 export function BlurModeButton() {
 	const { blurMode, updateSetting } = useGeneralSetting()
@@ -16,7 +16,11 @@ export function BlurModeButton() {
 				onClick={handleBlurModeToggle}
 				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 			>
-				{blurMode ? <HiOutlineEye size={15} /> : <HiOutlineEyeSlash size={15} />}
+				{blurMode ? (
+					<Icon name="outlineEye" size={15} />
+				) : (
+					<Icon name="outlineEyeSlash" size={15} />
+				)}
 			</div>
 		</Tooltip>
 	)
diff --git a/src/components/bottom-sheet/bottom-sheet.tsx b/src/components/bottom-sheet/bottom-sheet.tsx
index 1a3f530d..417b7389 100644
--- a/src/components/bottom-sheet/bottom-sheet.tsx
+++ b/src/components/bottom-sheet/bottom-sheet.tsx
@@ -1,8 +1,7 @@
-import { useState, useRef, type ReactNode } from 'react'
-import { motion, AnimatePresence, PanInfo } from 'framer-motion'
-import { MdClose } from 'react-icons/md'
+import { useState, type ReactNode } from 'react'
+import { motion, AnimatePresence, type PanInfo } from 'framer-motion'
 import { Portal } from '../portal/Portal'
-import { HiChevronRight } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 type SheetSize = 'small' | 'medium' | 'large' | 'full' | 'screen'
 
@@ -107,7 +106,8 @@ export function BottomSheet({
 											className="absolute p-2 transition-all duration-200 rounded-full right-6 active:scale-95"
 											aria-label="بستن"
 										>
-											<HiChevronRight
+											<Icon
+												name="chevronRight"
 												size={20}
 												className="text-base-content/60"
 											/>
diff --git a/src/components/bottom-sheet/confirmation-sheet.tsx b/src/components/bottom-sheet/confirmation-sheet.tsx
deleted file mode 100644
index a9f27c84..00000000
--- a/src/components/bottom-sheet/confirmation-sheet.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { FiAlertTriangle, FiCheck, FiInfo, FiTrash2 } from 'react-icons/fi'
-
-import { BottomSheet } from '../bottom-sheet/bottom-sheet'
-import { Button } from '../button/button'
-
-interface ConfirmationSheetProps {
-	isOpen: boolean
-	onClose: () => void
-	onConfirm: () => void | Promise<void>
-	title?: string
-	message?: string | ReactNode
-	confirmText?: ReactNode
-	cancelText?: string
-	variant?: 'danger' | 'warning' | 'info' | 'success'
-	isLoading?: boolean
-	icon?: ReactNode
-	loadingText?: string
-	disableCancelWhileLoading?: boolean
-	autoCloseOnConfirm?: boolean
-}
-
-const variantConfig = {
-	danger: {
-		icon: <FiTrash2 size={20} />,
-		iconBg: 'bg-error/10',
-		iconColor: 'text-error',
-		confirmBg: 'bg-error hover:bg-error/90 shadow-sm shadow-error/20',
-	},
-	warning: {
-		icon: <FiAlertTriangle size={20} />,
-		iconBg: 'bg-warning/10',
-		iconColor: 'text-warning',
-		confirmBg: 'bg-warning hover:bg-warning/90 shadow-sm shadow-warning/20',
-	},
-	info: {
-		icon: <FiInfo size={20} />,
-		iconBg: 'bg-info/10',
-		iconColor: 'text-info',
-		confirmBg: 'bg-info hover:bg-info/90 shadow-sm shadow-info/20',
-	},
-	success: {
-		icon: <FiCheck size={20} />,
-		iconBg: 'bg-success/10',
-		iconColor: 'text-success',
-		confirmBg: 'bg-success hover:bg-success/90 shadow-sm shadow-success/20',
-	},
-} as const
-
-export function ConfirmationSheet({
-	isOpen,
-	onClose,
-	onConfirm,
-	title = 'تاییدیه',
-	message = 'آیا از انجام این عملیات اطمینان دارید؟',
-	confirmText = 'تأیید',
-	cancelText = 'انصراف',
-	variant = 'danger',
-	isLoading = false,
-	icon,
-	loadingText = 'در حال پردازش...',
-	disableCancelWhileLoading = true,
-	autoCloseOnConfirm = false,
-}: ConfirmationSheetProps) {
-	const config = variantConfig[variant]
-
-	const handleConfirm = async () => {
-		if (isLoading) return
-		try {
-			await onConfirm()
-			if (autoCloseOnConfirm) onClose()
-		} catch (error) {
-			console.error('Confirmation error:', error)
-		}
-	}
-
-	const handleCancel = () => {
-		if (isLoading && disableCancelWhileLoading) return
-		onClose()
-	}
-
-	return (
-		<BottomSheet
-			isOpen={isOpen}
-			onClose={handleCancel}
-			size="medium"
-			closeOnBackdrop={!isLoading}
-			showCloseButton={false}
-		>
-			<div className="flex flex-col items-center justify-between h-full gap-4 px-4 py-1 ">
-				<div></div>
-				<div className="flex flex-col items-center">
-					<div className="flex items-center gap-3">
-						{title && (
-							<h3 className="text-lg font-bold text-content">{title}</h3>
-						)}
-					</div>
-
-					<div className="text-sm leading-relaxed text-center w-60 text-muted">
-						{typeof message === 'string' ? <p>{message}</p> : message}
-					</div>
-				</div>
-
-				<div className="flex flex-col self-start w-full gap-2">
-					<Button
-						type="button"
-						onClick={handleConfirm}
-						size="sm"
-						disabled={isLoading}
-						loading={isLoading}
-						className={`w-full ${config.confirmBg} rounded-2xl border-none`}
-					>
-						{confirmText}
-					</Button>
-
-					<Button
-						type="button"
-						size="sm"
-						onClick={onClose}
-						disabled={isLoading}
-						className="w-full bg-base-300 hover:bg-base-300/90 rounded-2xl"
-					>
-						{cancelText}
-					</Button>
-				</div>
-			</div>
-		</BottomSheet>
-	)
-}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 984e42b7..5ac12d5d 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,5 +1,5 @@
+import { Icon } from '@/src/icons'
 import type React from 'react'
-import { FaSpinner } from 'react-icons/fa'
 
 interface ButtonProps {
 	onClick?: () => void
@@ -38,7 +38,7 @@ export function Button(prop: ButtonProps) {
 			{prop.loading
 				? prop.loadingText || (
 						<div className="flex items-center gap-1">
-							<FaSpinner className="animate-spin" />
+							<Icon name="spinner" className="animate-spin" />
 							<span className="text-xs">صبر کنید...</span>
 						</div>
 					)
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
index 2d67a1eb..ce556a90 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/date-picker/date-picker.tsx
@@ -1,7 +1,6 @@
+import { Icon } from '@/src/icons'
 import jalaliMoment from 'jalali-moment'
 import { useState } from 'react'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import { TfiBackRight } from 'react-icons/tfi'
 
 interface DatePickerProps {
 	onDateSelect: (date: jalaliMoment.Moment) => void
@@ -202,20 +201,20 @@ export function DatePicker({
 							onClick={goToToday}
 							className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 						>
-							<TfiBackRight size={12} />
+							<Icon name="backRight" size={12} />
 						</button>
 					)}
 					<button
 						onClick={() => changeMonth(-1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronRight size={12} />
+						<Icon name="chevronRight" size={12} />
 					</button>
 					<button
 						onClick={() => changeMonth(1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronLeft size={12} />
+						<Icon name="chevronLeft" size={12} />
 					</button>
 				</div>
 			</div>
diff --git a/src/components/extension-installed-modal.tsx b/src/components/extension-installed-modal.tsx
index ac583819..9af84311 100644
--- a/src/components/extension-installed-modal.tsx
+++ b/src/components/extension-installed-modal.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import { FaExternalLinkAlt } from 'react-icons/fa'
 import keepItImage from '@/assets/keep-it.png'
 import { Button } from './button/button'
 import Checkbox from './checkbox'
 import Modal from './modal'
+import { Icon } from '../icons'
 
 interface ExtensionInstalledModalProps {
 	show: boolean
@@ -149,7 +149,7 @@ const StepFirefoxConsent = ({ onGetStarted }: StepFirefoxConsentProps) => {
 					rel="noopener noreferrer"
 					className="flex items-center justify-center font-medium underline text-primary gap-0.5 mb-2"
 				>
-					<FaExternalLinkAlt />
+					<Icon name="externalLink" />
 					سیاست کامل حریم خصوصی
 				</a>
 			</div>
diff --git a/src/components/filter-tooltip/filter-tooltip.tsx b/src/components/filter-tooltip/filter-tooltip.tsx
index dfc7a4b7..08f4839d 100644
--- a/src/components/filter-tooltip/filter-tooltip.tsx
+++ b/src/components/filter-tooltip/filter-tooltip.tsx
@@ -1,5 +1,4 @@
 import { useState, useRef, ReactNode } from 'react'
-import { FaFilter } from 'react-icons/fa'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import Tooltip from '../toolTip'
 import { Button } from '../button/button'
diff --git a/src/components/loading/icon-loading.tsx b/src/components/loading/icon-loading.tsx
index 7b1cc393..8eccd78f 100644
--- a/src/components/loading/icon-loading.tsx
+++ b/src/components/loading/icon-loading.tsx
@@ -1,4 +1,4 @@
-import { FiLoader } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 import Tooltip from '../toolTip'
 
 interface IconLoadingProps {
@@ -8,14 +8,16 @@ interface IconLoadingProps {
 export function IconLoading({ title, className }: IconLoadingProps) {
 	if (!title) {
 		return (
-			<FiLoader
+			<Icon
+				name="loader"
 				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
 			/>
 		)
 	}
 	return (
 		<Tooltip content={title} position="bottom">
-			<FiLoader
+			<Icon
+				name="loader"
 				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
 			/>
 		</Tooltip>
diff --git a/src/components/market/title/title-render-preview.tsx b/src/components/market/title/title-render-preview.tsx
index a056b2c5..59a0fa7d 100644
--- a/src/components/market/title/title-render-preview.tsx
+++ b/src/components/market/title/title-render-preview.tsx
@@ -1,4 +1,4 @@
-import { IoMdClose } from 'react-icons/io'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	template: string
@@ -11,7 +11,7 @@ export function renderBrowserTitlePreview(item: Prop) {
 			className={`flex items-center justify-between w-40 p-1.5 text-xs font-medium border shadow-sm text-content bg-content border-content rounded-t-md max-w-40 ${item.className || ''} font-sans`}
 		>
 			<div className="flex items-center gap-1">
-				<IoMdClose />
+				<Icon name="close" />
 				{isPersian && (
 					<span className="text-[10px] truncate">{item.template}</span>
 				)}
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 5e32fe10..f328805b 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactNode, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { LuX } from 'react-icons/lu'
+import { Icon } from '../icons'
 
 type ModalProps = {
 	isOpen: boolean
@@ -135,8 +135,12 @@ export default function Modal({
 								className="flex items-center justify-center transition-all rounded-full cursor-pointer w-7 h-7 md:w-8 md:h-8 bg-base-300 text-muted hover:bg-base-content/10 hover:scale-105 active:scale-95 shrink-0 outline-0! border-0!"
 								aria-label="Close modal"
 							>
-								<LuX size={16} className="md:hidden" />
-								<LuX size={18} className="hidden md:block" />
+								<Icon name="close" size={16} className="md:hidden" />
+								<Icon
+									name="close"
+									size={18}
+									className="hidden md:block"
+								/>
 							</button>
 						)}
 					</div>
diff --git a/src/components/modal/confirmation-modal.tsx b/src/components/modal/confirmation-modal.tsx
index 9a2c02db..1244b141 100644
--- a/src/components/modal/confirmation-modal.tsx
+++ b/src/components/modal/confirmation-modal.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import { FiAlertTriangle, FiCheck, FiTrash2 } from 'react-icons/fi'
 import { Button } from '../button/button'
 import Modal from '../modal'
 import { IconLoading } from '../loading/icon-loading'
+import { Icon } from '@/src/icons'
 
 interface ConfirmationModalProps {
 	isOpen: boolean
@@ -20,21 +20,21 @@ interface ConfirmationModalProps {
 
 const variantConfig = {
 	danger: {
-		icon: <FiTrash2 size={24} />,
+		icon: <Icon name="trash" size={24} />,
 		iconBg: 'bg-error/10',
 		iconColor: 'text-error',
 		confirmBg: 'bg-error hover:bg-error/90',
 		confirmText: 'text-white',
 	},
 	warning: {
-		icon: <FiAlertTriangle size={24} />,
+		icon: <Icon name="alert" size={24} />,
 		iconBg: 'bg-warning/10',
 		iconColor: 'text-warning',
 		confirmBg: 'bg-warning hover:bg-warning/90',
 		confirmText: 'text-white',
 	},
 	info: {
-		icon: <FiCheck size={24} />,
+		icon: <Icon name="info" size={24} />,
 		iconBg: 'bg-info/10',
 		iconColor: 'text-info',
 		confirmBg: 'bg-info/80 hover:bg-info/90',
diff --git a/src/components/offline-indicator.tsx b/src/components/offline-indicator.tsx
index 455ce664..663b2a54 100644
--- a/src/components/offline-indicator.tsx
+++ b/src/components/offline-indicator.tsx
@@ -1,4 +1,4 @@
-import { TbCloudOff } from 'react-icons/tb'
+import { Icon } from '../icons'
 
 type OfflineIndicatorMode = 'badge' | 'status' | 'notification'
 
@@ -11,7 +11,7 @@ export const OfflineIndicator = ({ mode, message }: OfflineIndicatorProps) => {
 	if (mode === 'badge') {
 		return (
 			<div className="absolute flex items-center justify-center w-5 h-5 border-2 rounded-full -top-2 -right-2 offline-indicator-badge">
-				<TbCloudOff className="text-xs text-white" />
+				<Icon name="offline" className="text-xs text-white" />
 			</div>
 		)
 	}
@@ -19,7 +19,7 @@ export const OfflineIndicator = ({ mode, message }: OfflineIndicatorProps) => {
 	if (mode === 'status') {
 		return (
 			<div className="text-xs mt-1 py-0.5 px-2 rounded border offline-indicator-status inline-flex items-center gap-1">
-				<TbCloudOff className="text-xs" />
+				<Icon name="offline" className="text-xs" />
 				<span className="font-light">{message || 'حالت آفلاین'}</span>
 			</div>
 		)
@@ -27,7 +27,7 @@ export const OfflineIndicator = ({ mode, message }: OfflineIndicatorProps) => {
 
 	return (
 		<div className="flex items-center gap-2 p-3 text-sm font-bold border rounded-lg bg-error/20 text-error border-error/20">
-			<TbCloudOff className="flex-shrink-0 text-lg" />
+			<Icon name="offline" className="text-lg shrink-0" />
 			<p>
 				{message ||
 					'اطلاعات کاربری از حافظه محلی بارگذاری شده‌اند. اتصال اینترنت خود را بررسی کنید.'}
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 84db5529..c8a20e36 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -1,5 +1,5 @@
-import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
+import { Icon } from '@/src/icons'
 
 export interface PaginationProps {
 	currentPage: number
@@ -31,7 +31,8 @@ export function Pagination({
 				className="btn-soft rounded-2xl"
 				isPrimary={currentPage !== 1}
 			>
-				<FiChevronRight
+				<Icon
+					name="chevronRight"
 					size={18}
 					className={`${currentPage === 1 ? 'text-muted' : 'text-primary'}`}
 				/>
@@ -48,7 +49,7 @@ export function Pagination({
 				isPrimary={true}
 				size="xs"
 			>
-				<FiChevronLeft size={18} className="text-primary" />
+				<Icon name="chevronLeft" size={18} className="text-primary" />
 			</Button>
 		</div>
 	)
diff --git a/src/components/priority-options/priority-options.tsx b/src/components/priority-options/priority-options.tsx
deleted file mode 100644
index 569324eb..00000000
--- a/src/components/priority-options/priority-options.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { PRIORITY_OPTIONS } from '@/common/constant/priority_options'
-import Tooltip from '../toolTip'
-import { FiFlag } from 'react-icons/fi'
-
-export const PriorityButton = ({
-	option,
-	isSelected,
-	onClick,
-}: {
-	option: (typeof PRIORITY_OPTIONS)[0]
-	isSelected: boolean
-	onClick: () => void
-}) => (
-	<Tooltip content={option.ariaLabel}>
-		<button
-			type="button"
-			onClick={onClick}
-			className={`
-				flex items-center justify-center w-4 h-4 rounded-full
-				transition-all duration-150 cursor-pointer 
-				${option.bgColor} ${option.hoverBgColor}
-				${isSelected ? 'ring-2 ring-offset-0 ring-primary' : ''}
-			`}
-		>
-			{isSelected && <FiFlag size={8} className="text-white" />}
-		</button>
-	</Tooltip>
-)
diff --git a/src/components/updater/updater.tsx b/src/components/updater/updater.tsx
index 8acabdd7..db7456a1 100644
--- a/src/components/updater/updater.tsx
+++ b/src/components/updater/updater.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
-import { LuDownload, LuX } from 'react-icons/lu'
 import Modal from '@/components/modal'
 import { Button } from '@/components/button/button'
 import { getMainClient } from '@/services/api'
+import { Icon } from '@/src/icons'
 
 let updateInfo = null
 
@@ -96,7 +96,10 @@ export function UpdateChecker() {
 						className="absolute right-0 flex items-center justify-center gap-2 px-1 py-6 transition-all duration-300 shadow-2xl cursor-pointer bg-gradient-to-br from-primary to-primary/90 rounded-l-2xl group-hover:opacity-0"
 					>
 						<div className="flex flex-col items-center gap-2">
-							<LuDownload className="w-4 h-4 text-white animate-bounce" />
+							<Icon
+								name="download"
+								className="w-4 h-4 text-white animate-bounce"
+							/>
 							<div className="text-xs font-semibold text-white rotate-180 writing-mode-vertical whitespace-nowrap">
 								نسخه جدید رسید!
 							</div>
@@ -113,12 +116,15 @@ export function UpdateChecker() {
 								className="absolute top-2 left-2 p-1.5 rounded-lg hover:bg-white/20 transition-colors z-10"
 								aria-label="بستن"
 							>
-								<LuX className="w-4 h-4 text-white" />
+								<Icon name="close" className="w-4 h-4 text-white" />
 							</button>
 
 							<div className="flex items-start gap-2">
 								<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 bg-white/20 rounded-xl">
-									<LuDownload className="w-6 h-6 text-white" />
+									<Icon
+										name="download"
+										className="w-6 h-6 text-white"
+									/>
 								</div>
 								<div className="flex-1">
 									<h4 className="mb-2 text-sm font-semibold text-white">
@@ -184,7 +190,7 @@ export function UpdateChecker() {
 							isPrimary
 							rounded="xl"
 						>
-							<LuDownload className="w-4 h-4" />
+							<Icon name="download" className="w-4 h-4" />
 							<span>دانلود و نصب</span>
 						</Button>
 						{!updateInfo.force && (
diff --git a/src/components/user/user-card.tsx b/src/components/user/user-card.tsx
index ae5658b8..7485eabd 100644
--- a/src/components/user/user-card.tsx
+++ b/src/components/user/user-card.tsx
@@ -1,4 +1,3 @@
-import { TbUsersPlus } from 'react-icons/tb'
 import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friendService.hook'
 import { translateError } from '@/utils/translate-error'
@@ -6,6 +5,7 @@ import { AvatarComponent } from '../avatar.component'
 import { Button } from '../button/button'
 import type { UserCardUser } from './user-card-portal'
 import { showToast } from '@/common/toast'
+import { Icon } from '@/src/icons'
 
 interface UserCardProps {
 	user: UserCardUser
@@ -70,7 +70,7 @@ export function UserCard({ user, className = '' }: UserCardProps) {
 												loadingText="در حال ارسال..."
 												onClick={() => onAddClick()}
 											>
-												<TbUsersPlus size={14} />
+												<Icon name="usersPlus" size={14} />
 												درخواست
 											</Button>
 										)}
diff --git a/src/components/welcome-wizard.tsx b/src/components/welcome-wizard.tsx
index 205ad273..fb03c628 100644
--- a/src/components/welcome-wizard.tsx
+++ b/src/components/welcome-wizard.tsx
@@ -5,7 +5,6 @@ import {
 	useGetOccupations,
 	useGetInterests,
 } from '@/services/hooks/profile/getProfileMeta.hook'
-import { LuChevronLeft } from 'react-icons/lu'
 import { TextInput } from '@/components/text-input'
 import { sleep } from '@/common/utils/timeout'
 import { Chip } from '@/components/chip.component'
@@ -14,6 +13,7 @@ import { useSetupWizard } from '@/services/hooks/auth/authService.hook'
 import { showToast } from '@/common/toast'
 import { safeAwait } from '@/services/api'
 import Analytics from '@/analytics'
+import { Icon } from '../icons'
 
 export enum ReferralSource {
 	Social = 'social',
@@ -381,7 +381,7 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 						onClick={prevStep}
 						className="absolute z-20 p-2 transition-colors rounded-full top-10 right-96 bg-base-200/50 text-content hover:bg-base-300"
 					>
-						<LuChevronLeft size={20} />
+						<Icon name="chevronLeft" size={20} />
 					</button>
 				)}
 				{renderStepContent()}
diff --git a/src/icons/icon.tsx b/src/icons/icon.tsx
new file mode 100644
index 00000000..d5899f66
--- /dev/null
+++ b/src/icons/icon.tsx
@@ -0,0 +1,23 @@
+import { defaultIcons } from './packs/default'
+
+import type { IconBaseProps } from 'react-icons'
+import type { IconName } from './types'
+import { useIconPack } from './icons.context'
+
+const packs = {
+	default: defaultIcons,
+}
+
+interface Props extends IconBaseProps {
+	name: IconName
+}
+
+export function Icon({ name, ...props }: Props) {
+	const { pack } = useIconPack()
+
+	const Component = packs[pack][name] ?? defaultIcons[name]
+
+	if (!Component) return null
+
+	return <Component {...props} />
+}
diff --git a/src/icons/icons.context.tsx b/src/icons/icons.context.tsx
new file mode 100644
index 00000000..2dc9f2d4
--- /dev/null
+++ b/src/icons/icons.context.tsx
@@ -0,0 +1,39 @@
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react'
+
+export type IconPackName = 'default' //| 'pack_name'
+
+interface IconContextValue {
+	pack: IconPackName
+	setPack: (pack: IconPackName) => void
+}
+
+const IconContext = createContext<IconContextValue | null>(null)
+
+interface IconProviderProps {
+	children: ReactNode
+	defaultTheme?: IconPackName
+}
+
+export function IconProvider({ children, defaultTheme = 'default' }: IconProviderProps) {
+	const [pack, setPack] = useState<IconPackName>(defaultTheme)
+
+	const value = useMemo(
+		() => ({
+			pack,
+			setPack,
+		}),
+		[pack]
+	)
+
+	return <IconContext.Provider value={value}>{children}</IconContext.Provider>
+}
+
+export function useIconPack() {
+	const context = useContext(IconContext)
+
+	if (!context) {
+		throw new Error('useIconPack must be used inside IconProvider')
+	}
+
+	return context
+}
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
new file mode 100644
index 00000000..0af80388
--- /dev/null
+++ b/src/icons/index.tsx
@@ -0,0 +1 @@
+export * from './icon'
diff --git a/src/icons/packs/default.tsx b/src/icons/packs/default.tsx
new file mode 100644
index 00000000..3660d8e7
--- /dev/null
+++ b/src/icons/packs/default.tsx
@@ -0,0 +1,252 @@
+import {
+	FiAtSign,
+	FiBell,
+	FiClock,
+	FiCoffee,
+	FiGift,
+	FiInbox,
+	FiKey,
+	FiLoader,
+	FiLock,
+	FiLogOut,
+	FiMail,
+	FiMaximize,
+	FiMinimize,
+	FiPhone,
+	FiPlay,
+	FiRefreshCw,
+	FiRotateCcw,
+	FiSave,
+	FiSettings,
+	FiShoppingBag,
+	FiShoppingCart,
+	FiTarget,
+	FiTrash2,
+	FiUser,
+	FiUserCheck,
+	FiUsers,
+	FiUserX,
+} from 'react-icons/fi'
+import type { IconMap } from '../types'
+import { TfiAlert, TfiBackRight, TfiCheck, TfiCup } from 'react-icons/tfi'
+import {
+	LuBriefcase,
+	LuCalendarDays,
+	LuChevronDown,
+	LuChevronLeft,
+	LuChevronRight,
+	LuChevronUp,
+	LuDownload,
+	LuHeart,
+	LuHistory,
+	LuLayers,
+	LuLayoutTemplate,
+	LuPen,
+	LuPlus,
+	LuX,
+} from 'react-icons/lu'
+import {
+	FaCoins,
+	FaCrown,
+	FaExternalLinkAlt,
+	FaGithub,
+	FaGlobe,
+	FaGlobeAsia,
+	FaImage,
+	FaMoon,
+	FaPaintBrush,
+	FaSortAmountDown,
+	FaSpinner,
+	FaTelegramPlane,
+	FaUpload,
+} from 'react-icons/fa'
+import {
+	TbCloudOff,
+	TbUsersPlus,
+	TbBookmarkPlus,
+	TbCameraPlus,
+	TbWind,
+	TbEdit,
+	TbArrowsUpDown,
+	TbCalendarUser,
+	TbApps,
+	TbNotebook,
+	TbArrowsRightLeft,
+} from 'react-icons/tb'
+import {
+	MdDragIndicator,
+	MdFolderSpecial,
+	MdLink,
+	MdMic,
+	MdOutlineFilterList,
+	MdOutlineFilterListOff,
+	MdOutlineNetworkWifi,
+	MdOutlinePrivacyTip,
+	MdOutlineVerifiedUser,
+	MdOutlineWallpaper,
+	MdPets,
+	MdSearch,
+} from 'react-icons/md'
+import {
+	HiHome,
+	HiOutlineBookmark,
+	HiOutlineCurrencyBangladeshi,
+	HiOutlineEye,
+	HiOutlineEyeSlash,
+	HiOutlineFire,
+	HiOutlineFolder,
+	HiOutlineGlobeAlt,
+	HiOutlineHome,
+	HiOutlineInbox,
+	HiOutlineInformationCircle,
+	HiOutlineNewspaper,
+	HiOutlineShoppingBag,
+	HiOutlineSquares2X2,
+	HiOutlineUserGroup,
+	HiOutlineVideoCamera,
+	HiSquares2X2,
+} from 'react-icons/hi2'
+import { FaFolder, FaFolderOpen } from 'react-icons/fa'
+import { GoArchive, GoKebabHorizontal, GoTasklist } from 'react-icons/go'
+import { IoMdAddCircle, IoMdHelp } from 'react-icons/io'
+import { FaArrowDownLong, FaArrowUpLong, FaPhotoFilm, FaTreeCity } from 'react-icons/fa6'
+import { BiCalendar, BiLogoGoogle, BiRss } from 'react-icons/bi'
+import { FcGoogle } from 'react-icons/fc'
+import { CiLocationOn, CiPause1 } from 'react-icons/ci'
+import { WiCloudy, WiHumidity } from 'react-icons/wi'
+import { RiApps2AiLine, RiQuillPenAiLine } from 'react-icons/ri'
+import { AiOutlineDrag } from 'react-icons/ai'
+import { HiOutlineViewGridAdd } from 'react-icons/hi'
+import { BsFilterLeft, BsGenderAmbiguous } from 'react-icons/bs'
+import { IoPricetagOutline } from 'react-icons/io5'
+import { VscColorMode, VscMegaphone, VscRecordKeys } from 'react-icons/vsc'
+
+export const defaultIcons = {
+	home: HiHome,
+	calendar: BiCalendar,
+	settings: FiSettings,
+	search: MdSearch,
+	user: FiUser,
+	clock: FiClock,
+	notification: FiBell,
+	alert: TfiAlert,
+	check: TfiCheck,
+	close: LuX,
+	info: HiOutlineInformationCircle,
+	externalLink: FaExternalLinkAlt,
+	offline: TbCloudOff,
+	chevronUp: LuChevronUp,
+	chevronDown: LuChevronDown,
+	chevronLeft: LuChevronLeft,
+	chevronRight: LuChevronRight,
+	lock: FiLock,
+	verifyUser: MdOutlineVerifiedUser,
+	outlineEye: HiOutlineEye,
+	outlineEyeSlash: HiOutlineEyeSlash,
+	trash: FiTrash2,
+	spinner: FaSpinner,
+	backRight: TfiBackRight,
+	loader: FiLoader,
+	usersPlus: TbUsersPlus,
+	bookmarkPlus: TbBookmarkPlus,
+	folder: FaFolder,
+	folderOpen: FaFolderOpen,
+	menuOption: GoKebabHorizontal,
+	uploadImage: FaUpload,
+	image: FaImage,
+	help: IoMdHelp,
+	outlineBookmark: HiOutlineBookmark,
+	outlineFolder: HiOutlineFolder,
+	reload: FiRotateCcw,
+	plus: LuPlus,
+	pen: LuPen,
+	users: FiUsers,
+	userCheck: FiUserCheck,
+	userX: FiUserX,
+	outlineInbox: HiOutlineInbox,
+	inbox: FiInbox,
+	brush: FaPaintBrush,
+	photoFilm: FaPhotoFilm,
+	coin: FaCoins,
+	shoppingCart: FiShoppingCart,
+	shoppingBag: FiShoppingBag,
+	maximize: FiMaximize,
+	minimize: FiMinimize,
+	googleCalendar: BiLogoGoogle,
+	briefcase: LuBriefcase,
+	mail: FiMail,
+	key: FiKey,
+	friends: HiOutlineUserGroup,
+	outlineShoppingBag: HiOutlineShoppingBag,
+	outlinePrivacyTip: MdOutlinePrivacyTip,
+	link: MdLink,
+	googleLogo: FcGoogle,
+	telegramLogo: FaTelegramPlane,
+	globe: FaGlobe,
+	calendarDays: LuCalendarDays,
+	cameraPlus: TbCameraPlus,
+	githubLogo: FaGithub,
+	location: CiLocationOn,
+	archive: GoArchive,
+	wind: TbWind,
+	cloudy: WiCloudy,
+	humidity: WiHumidity,
+	download: LuDownload,
+	penAI: RiQuillPenAiLine,
+	outlineDrag: AiOutlineDrag,
+	outlineGlobe: HiOutlineGlobeAlt,
+	outlineHome: HiOutlineHome,
+	outlineSquares2X2: HiOutlineSquares2X2,
+	squares2X2: HiSquares2X2,
+	viewGridAdd: HiOutlineViewGridAdd,
+	folderSpecial: MdFolderSpecial,
+	history: LuHistory,
+	mic: MdMic,
+	gender: BsGenderAmbiguous,
+	phone: FiPhone,
+	atSign: FiAtSign,
+	outlineHeart: LuHeart,
+	outlineAddCircle: IoMdAddCircle,
+	treeCity: FaTreeCity,
+	edit: TbEdit,
+	target: FiTarget,
+	logOut: FiLogOut,
+	play: FiPlay,
+	globeAsia: FaGlobeAsia,
+	moon: FaMoon,
+	outlineNewspaper: HiOutlineNewspaper,
+	currency: HiOutlineCurrencyBangladeshi,
+	rss: BiRss,
+	tags: IoPricetagOutline,
+	save: FiSave,
+	sortDown: FaSortAmountDown,
+	outlineFilterListOff: MdOutlineFilterListOff,
+	outlineFilterList: MdOutlineFilterList,
+	crown: FaCrown,
+	filterLeft: BsFilterLeft,
+	upDown: TbArrowsUpDown,
+	coffee: FiCoffee,
+	refresh: FiRefreshCw,
+	cup: TfiCup,
+	pause: CiPause1,
+	dragIndicator: MdDragIndicator,
+	upLong: FaArrowUpLong,
+	downLong: FaArrowDownLong,
+	pets: MdPets,
+	wigiPad: TbCalendarUser,
+	appsPlus: TbApps,
+	taskList: GoTasklist,
+	strike: HiOutlineFire,
+	notebook: TbNotebook,
+	gift: FiGift,
+	platforms: RiApps2AiLine,
+	wallpapers: MdOutlineWallpaper,
+	lastUpdate: VscMegaphone,
+	shortcuts: VscRecordKeys,
+	theme: VscColorMode,
+	network: MdOutlineNetworkWifi,
+	videoCamera: HiOutlineVideoCamera,
+	advanced_ui: LuLayers,
+	simple_ui: LuLayoutTemplate,
+	arrowRightLeft: TbArrowsRightLeft,
+} satisfies IconMap
diff --git a/src/icons/types.ts b/src/icons/types.ts
new file mode 100644
index 00000000..2d2a34cf
--- /dev/null
+++ b/src/icons/types.ts
@@ -0,0 +1,132 @@
+import type { IconType } from 'react-icons'
+
+export type IconName =
+	| 'home'
+	| 'settings'
+	| 'search'
+	| 'user'
+	| 'clock'
+	| 'notification'
+	| 'alert'
+	| 'check'
+	| 'close'
+	| 'info'
+	| 'externalLink'
+	| 'offline'
+	| 'chevronLeft'
+	| 'chevronRight'
+	| 'chevronDown'
+	| 'chevronUp'
+	| 'lock'
+	| 'verifyUser'
+	| 'outlineEye'
+	| 'outlineEyeSlash'
+	| 'trash'
+	| 'spinner'
+	| 'backRight'
+	| 'loader'
+	| 'usersPlus'
+	| 'bookmarkPlus'
+	| 'folder'
+	| 'folderSpecial'
+	| 'folderOpen'
+	| 'menuOption'
+	| 'uploadImage'
+	| 'image'
+	| 'help'
+	| 'outlineBookmark'
+	| 'outlineFolder'
+	| 'reload'
+	| 'plus'
+	| 'pen'
+	| 'users'
+	| 'userCheck'
+	| 'userX'
+	| 'outlineInbox'
+	| 'inbox'
+	| 'brush'
+	| 'photoFilm'
+	| 'coin'
+	| 'shoppingCart'
+	| 'shoppingBag'
+	| 'outlineShoppingBag'
+	| 'maximize'
+	| 'minimize'
+	| 'googleCalendar'
+	| 'calendar'
+	| 'briefcase'
+	| 'mail'
+	| 'key'
+	| 'friends'
+	| 'outlinePrivacyTip'
+	| 'link'
+	| 'googleLogo'
+	| 'telegramLogo'
+	| 'githubLogo'
+	| 'globe'
+	| 'calendarDays'
+	| 'cameraPlus'
+	| 'location'
+	| 'archive'
+	| 'wind'
+	| 'cloudy'
+	| 'humidity'
+	| 'download'
+	| 'penAI'
+	| 'outlineDrag'
+	| 'outlineGlobe'
+	| 'outlineHome'
+	| 'squares2X2'
+	| 'outlineSquares2X2'
+	| 'viewGridAdd'
+	| 'search'
+	| 'history'
+	| 'mic'
+	| 'gender'
+	| 'phone'
+	| 'atSign'
+	| 'outlineHeart'
+	| 'outlineAddCircle'
+	| 'treeCity'
+	| 'edit'
+	| 'target'
+	| 'logOut'
+	| 'play'
+	| 'globeAsia'
+	| 'moon'
+	| 'outlineNewspaper'
+	| 'currency'
+	| 'rss'
+	| 'tags'
+	| 'save'
+	| 'sortDown'
+	| 'outlineFilterList'
+	| 'outlineFilterListOff'
+	| 'crown'
+	| 'filterLeft'
+	| 'upDown'
+	| 'coffee'
+	| 'refresh'
+	| 'cup'
+	| 'pause'
+	| 'dragIndicator'
+	| 'upLong'
+	| 'downLong'
+	| 'pets'
+	| 'wigiPad'
+	| 'appsPlus'
+	| 'taskList'
+	| 'strike'
+	| 'notebook'
+	| 'gift'
+	| 'platforms'
+	| 'wallpapers'
+	| 'lastUpdate'
+	| 'shortcuts'
+	| 'theme'
+	| 'network'
+	| 'videoCamera'
+	| 'advanced_ui'
+	| 'simple_ui'
+	| 'arrowRightLeft'
+export type IconMap = Record<IconName, IconType>
diff --git a/src/layouts/bookmark/components/bookmark-emptySlot.tsx b/src/layouts/bookmark/components/bookmark-emptySlot.tsx
index bf507d50..5c2cfc0d 100644
--- a/src/layouts/bookmark/components/bookmark-emptySlot.tsx
+++ b/src/layouts/bookmark/components/bookmark-emptySlot.tsx
@@ -1,4 +1,4 @@
-import { TbBookmarkPlus } from 'react-icons/tb'
+import { Icon } from '@/src/icons'
 
 export function EmptyBookmarkSlot({
 	onClick,
@@ -28,7 +28,7 @@ export function EmptyBookmarkSlot({
 			<div className="relative flex items-center justify-center w-14 h-14">
 				{canAdd ? (
 					<div className="flex items-center justify-center ">
-						<TbBookmarkPlus size={38} className="opacity-50" />
+						<Icon name="bookmarkPlus" size={38} className="opacity-50" />
 					</div>
 				) : (
 					<div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-500/20"></div>
diff --git a/src/layouts/bookmark/components/bookmark-folder.tsx b/src/layouts/bookmark/components/bookmark-folder.tsx
index 2035fee9..9b4ef2e5 100644
--- a/src/layouts/bookmark/components/bookmark-folder.tsx
+++ b/src/layouts/bookmark/components/bookmark-folder.tsx
@@ -1,12 +1,11 @@
 import { useState } from 'react'
-import { FaFolder, FaFolderOpen } from 'react-icons/fa'
-import { SlOptions } from 'react-icons/sl'
 import { addOpacityToColor } from '@/common/color'
 import type { Bookmark } from '../types/bookmark.types'
 import { RenderStickerPattern } from './bookmark/bookmark-sticker'
 import { BookmarkTitle } from './bookmark/bookmark-title'
 import { useBookmarkStore } from '../context/bookmark.context'
 import { BookmarkIcon } from './bookmark/bookmark-icon'
+import { Icon } from '@/src/icons'
 
 export function FolderBookmarkItem({
 	bookmark,
@@ -48,9 +47,9 @@ export function FolderBookmarkItem({
 		}
 
 		return isHovered ? (
-			<FaFolderOpen className="w-8 h-8 text-blue-400" />
+			<Icon name="folderOpen" className="w-8 h-8 text-blue-400" />
 		) : (
-			<FaFolder className="w-8 h-8 text-blue-400" />
+			<Icon name="folder" className="w-8 h-8 text-blue-400" />
 		)
 	}
 
@@ -111,7 +110,7 @@ export function FolderBookmarkItem({
 							'absolute cursor-pointer top-0.5 right-0.5 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-base-content/10 z-10'
 						}
 					>
-						<SlOptions size={12} />
+						<Icon name="menuOption" size={12} strokeWidth={2} />
 					</div>
 				)}
 			</button>
diff --git a/src/layouts/bookmark/components/bookmark-icon.picker.tsx b/src/layouts/bookmark/components/bookmark-icon.picker.tsx
index 612e0fc3..a6b69aac 100644
--- a/src/layouts/bookmark/components/bookmark-icon.picker.tsx
+++ b/src/layouts/bookmark/components/bookmark-icon.picker.tsx
@@ -1,9 +1,8 @@
 import { showToast } from '@/common/toast'
 import { getFaviconFromUrl } from '@/common/utils/icon'
+import { Icon } from '@/src/icons'
 import type React from 'react'
 import { useRef, useState } from 'react'
-import { FaUpload, FaImage } from 'react-icons/fa'
-import { LuX } from 'react-icons/lu'
 
 type Props = {
 	value: File | string | null
@@ -85,11 +84,11 @@ export function BookmarkIconPicker({ value, url, onChange }: Props) {
 						onError={() => setError(true)}
 					/>
 				) : (
-					<FaImage />
+					<Icon name="image" />
 				)}
 
 				<div className="absolute inset-0 flex items-center justify-center transition opacity-0 hover:opacity-100">
-					<FaUpload />
+					<Icon name="uploadImage" />
 				</div>
 
 				{isFile && (
@@ -97,7 +96,7 @@ export function BookmarkIconPicker({ value, url, onChange }: Props) {
 						onClick={handleRemove}
 						className="absolute top-0 right-0 flex items-center justify-center w-5 h-5 rounded-full bg-base-300"
 					>
-						<LuX size={12} />
+						<Icon name="close" size={12} />
 					</button>
 				)}
 			</div>
diff --git a/src/layouts/bookmark/components/bookmark-item.tsx b/src/layouts/bookmark/components/bookmark-item.tsx
index 79b39014..4ab82590 100644
--- a/src/layouts/bookmark/components/bookmark-item.tsx
+++ b/src/layouts/bookmark/components/bookmark-item.tsx
@@ -1,9 +1,9 @@
-import { SlOptions } from 'react-icons/sl'
-import { addOpacityToColor } from '@/common/color'
+import { addOpacityToColor, getContrastingTextColor } from '@/common/color'
 import type { Bookmark } from '../types/bookmark.types'
 import { BookmarkIcon } from './bookmark/bookmark-icon'
 import { RenderStickerPattern } from './bookmark/bookmark-sticker'
 import { BookmarkTitle } from './bookmark/bookmark-title'
+import { Icon } from '@/src/icons'
 
 interface BookmarkItemProps {
 	bookmark: Bookmark
@@ -51,11 +51,16 @@ export function BookmarkItem({
 							e.stopPropagation()
 							onMenuClick(e)
 						}}
+						style={{
+							color: bookmark.customBackground
+								? getContrastingTextColor(bookmark.customBackground)
+								: undefined,
+						}}
 						className={
 							'absolute cursor-pointer top-0.5 right-0.5 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-base-content/10 z-10'
 						}
 					>
-						<SlOptions size={12} />
+						<Icon name="menuOption" size={12} strokeWidth={2} />
 					</div>
 				)}
 				{RenderStickerPattern(bookmark)}
diff --git a/src/layouts/bookmark/components/bookmark-suggestions.tsx b/src/layouts/bookmark/components/bookmark-suggestions.tsx
index 5b2ba108..d56caa27 100644
--- a/src/layouts/bookmark/components/bookmark-suggestions.tsx
+++ b/src/layouts/bookmark/components/bookmark-suggestions.tsx
@@ -1,5 +1,3 @@
-import { FaGlobe } from 'react-icons/fa'
-import { getFaviconFromUrl } from '@/common/utils/icon'
 import { SectionPanel } from '@/components/section-panel'
 import {
 	type BookmarkSuggestion,
@@ -28,34 +26,18 @@ export function BookmarkSuggestions({ onSelect }: BookmarkSuggestionsProps) {
 							className="p-2 flex flex-col items-center gap-y-0.5 text-center transition-colors duration-200 bg-content hover:!bg-base-300/75 border border-base-300/40 rounded-xl cursor-pointer"
 						>
 							<div className="flex items-center justify-center flex-shrink-0 w-6 h-6 mb-1">
-								{suggestion.icon ? (
-									<img
-										src={suggestion.icon}
-										alt={suggestion.title}
-										className="object-contain w-6 h-6 rounded-md"
-										onError={(e) => {
-											const target = e.target as HTMLImageElement
-											target.style.display = 'none'
-											target.nextElementSibling?.classList.remove(
-												'hidden'
-											)
-										}}
-									/>
-								) : (
-									<img
-										src={getFaviconFromUrl(suggestion.url)}
-										alt={suggestion.title}
-										className="object-contain w-6 h-6 rounded-md"
-										onError={(e) => {
-											const target = e.target as HTMLImageElement
-											target.style.display = 'none'
-											target.nextElementSibling?.classList.remove(
-												'hidden'
-											)
-										}}
-									/>
-								)}
-								<FaGlobe className="hidden w-4 h-4 text-content/60" />
+								<img
+									src={suggestion.icon || ''}
+									alt={suggestion.title}
+									className="object-contain w-6 h-6 rounded-md"
+									onError={(e) => {
+										const target = e.target as HTMLImageElement
+										target.style.display = 'none'
+										target.nextElementSibling?.classList.remove(
+											'hidden'
+										)
+									}}
+								/>
 							</div>
 							<p className="w-full text-[11px] font-medium truncate text-muted">
 								{suggestion.title}
diff --git a/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx b/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx
index 71c9fb55..4c3f969c 100644
--- a/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx
+++ b/src/layouts/bookmark/components/bookmark/bookmark-icon.tsx
@@ -1,7 +1,7 @@
-import { FaFolder } from 'react-icons/fa'
 import { getFaviconFromUrl } from '@/common/utils/icon'
 import type { Bookmark } from '../../types/bookmark.types'
 import { useState } from 'react'
+import { Icon } from '@/src/icons'
 const colors = [
 	'bg-blue-500/60',
 	'bg-purple-500/60',
@@ -48,7 +48,7 @@ export function BookmarkIcon({ bookmark }: { bookmark: Bookmark }) {
 			displayIcon = bookmark.icon
 		}
 	} else {
-		displayIcon = <FaFolder className="w-6 h-6 text-blue-400" />
+		displayIcon = <Icon name="folder" className="w-6 h-6 text-blue-400" />
 	}
 
 	if (displayIcon === '') {
diff --git a/src/layouts/bookmark/components/folder-header.tsx b/src/layouts/bookmark/components/folder-header.tsx
index 9326153c..a2109f00 100644
--- a/src/layouts/bookmark/components/folder-header.tsx
+++ b/src/layouts/bookmark/components/folder-header.tsx
@@ -1,12 +1,11 @@
 import { useState } from 'react'
-import { IoMdHelp } from 'react-icons/io'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import Tooltip from '@/components/toolTip'
 import type { FolderPathItem } from '../types/bookmark.types'
 import { FolderPath } from './folder-path'
-import { LuX } from 'react-icons/lu'
+import { Icon } from '@/src/icons'
 
 interface FolderHeaderProps {
 	folderPath: FolderPathItem[]
@@ -34,7 +33,7 @@ export function FolderHeader({ folderPath, onNavigate }: FolderHeaderProps) {
 						size="xs"
 						className={`h-7 w-7 text-xs font-medium rounded-[0.55rem] transition-colors border-none shadow-none text-muted hover:bg-base-300`}
 					>
-						<IoMdHelp size={12} />
+						<Icon name="help" size={12} />
 					</Button>
 				</Tooltip>
 				<Tooltip content={'بستن'}>
@@ -43,7 +42,7 @@ export function FolderHeader({ folderPath, onNavigate }: FolderHeaderProps) {
 						size="xs"
 						className={`h-7 w-7 mr-1 text-xs font-medium rounded-[0.55rem] transition-colors border-none shadow-none text-muted hover:bg-base-300`}
 					>
-						<LuX size={12} />
+						<Icon name="close" size={12} />
 					</Button>
 				</Tooltip>
 			</div>
diff --git a/src/layouts/bookmark/components/folder-path.tsx b/src/layouts/bookmark/components/folder-path.tsx
index c8c77983..25fc08c3 100644
--- a/src/layouts/bookmark/components/folder-path.tsx
+++ b/src/layouts/bookmark/components/folder-path.tsx
@@ -1,4 +1,4 @@
-import { RiArrowLeftSLine } from 'react-icons/ri'
+import { Icon } from '@/src/icons'
 import type { FolderPathItem } from '../types/bookmark.types'
 
 type FolderPathProps = {
@@ -30,7 +30,7 @@ export function FolderPath({ folderPath, onNavigate, className }: FolderPathProp
 
 				{folderPath.map((item, index) => (
 					<li key={item.id} className="flex items-center">
-						<RiArrowLeftSLine className="text-content" size={14} />
+						<Icon name="chevronLeft" className="text-content" size={14} />
 						<button
 							onClick={() => onNavigate(item.id, index)}
 							className={
diff --git a/src/layouts/bookmark/components/modal/advanced.modal.tsx b/src/layouts/bookmark/components/modal/advanced.modal.tsx
index c45ebc29..317396f0 100644
--- a/src/layouts/bookmark/components/modal/advanced.modal.tsx
+++ b/src/layouts/bookmark/components/modal/advanced.modal.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { FiRotateCcw } from 'react-icons/fi'
 import Analytics from '@/analytics'
-import { getFaviconFromUrl } from '@/common/utils/icon'
 import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import PopoverColorPicker from '@/components/PopoverColorPicker'
@@ -9,6 +7,7 @@ import { TextInput } from '@/components/text-input'
 import { getEmojiList } from '@/services/emoji/emoji-api'
 import { BookmarkItem } from '../bookmark-item'
 import type { BookmarkType } from '../../types/bookmark.types'
+import { Icon } from '@/src/icons'
 
 interface AdvancedModalProps {
 	title: string
@@ -164,12 +163,12 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 					<label className={'block text-sm font-medium mb-1.5 text-content'}>
 						رنگ پس زمینه (اختیاری)
 					</label>
-					<div className="relative flex flex-1">
+					<div className="relative flex flex-1 gap-0.5">
 						<TextInput
 							type="text"
 							value={background || ''}
 							onChange={setBackground}
-							className="w-full px-3 py-2 pr-10 pl-24 !rounded-md"
+							className="w-full px-3 py-2 pl-24 pr-10 rounded-2xl"
 							placeholder="#000000"
 							debounce={true}
 						/>
@@ -179,8 +178,13 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 								onChange={setBackground}
 							/>
 						</div>
-						<Button type="button" onClick={resetBackground} size="md">
-							<FiRotateCcw className="w-4 h-4" />
+						<Button
+							type="button"
+							onClick={resetBackground}
+							size="md"
+							className="rounded-2xl p-3!"
+						>
+							<Icon name="reload" className="w-4 h-4" />
 						</Button>
 					</div>
 				</div>
@@ -189,12 +193,12 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 					<label className={'block text-sm  font-medium mb-1.5 text-content'}>
 						رنگ متن (اختیاری)
 					</label>
-					<div className="relative flex flex-1">
+					<div className="relative flex flex-1 gap-0.5">
 						<TextInput
 							type="text"
 							value={textColor || ''}
 							onChange={setTextColor}
-							className="w-full px-3 py-2 pr-10 pl-24 !rounded-md"
+							className="w-full px-3 py-2 pl-24 pr-10 rounded-2xl"
 							placeholder="#000000"
 							debounce={true}
 						/>
@@ -204,8 +208,13 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 								onChange={setTextColor}
 							/>
 						</div>
-						<Button type="button" onClick={resetTextColor} size="md">
-							<FiRotateCcw className="w-4 h-4" />
+						<Button
+							type="button"
+							onClick={resetTextColor}
+							size="md"
+							className="rounded-2xl p-3!"
+						>
+							<Icon name="reload" className="w-4 h-4" />
 						</Button>
 					</div>
 				</div>
diff --git a/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx b/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
index ab16a847..cf7a4bc1 100644
--- a/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
+++ b/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
@@ -1,5 +1,5 @@
 import { ContextMenu } from '@/components/contextMenu.component'
-import { LuPen, LuPlus, LuTrash } from 'react-icons/lu'
+import { Icon } from '@/src/icons'
 
 interface BookmarkContextMenuProps {
 	position: { x: number; y: number }
@@ -30,7 +30,7 @@ export function BookmarkContextMenu({
 					onClick={onOpenInNewTab}
 					className={`w-full px-3 py-1 flex items-center gap-x-1.5 cursor-pointer rounded-lg transition-colors duration-200 ${getMenuItemStyle()}`}
 				>
-					<LuPlus size={15} />
+					<Icon name="plus" size={15} />
 					<span className="font-medium">در تب جدید</span>
 				</button>
 			)}
@@ -39,7 +39,7 @@ export function BookmarkContextMenu({
 				onClick={onEdit}
 				className={`w-full px-3 py-1 flex items-center gap-x-[9px] cursor-pointer rounded-lg transition-colors duration-200 ${getMenuItemStyle()}`}
 			>
-				<LuPen size={13} />
+				<Icon name="pen" size={13} />
 				<span className="font-medium">ویرایش</span>
 			</button>
 
@@ -47,7 +47,7 @@ export function BookmarkContextMenu({
 				onClick={onDelete}
 				className={`w-full px-3 py-1 flex items-center gap-x-2.5 cursor-pointer rounded-lg transition-colors duration-200 ${getMenuItemStyle(true)}`}
 			>
-				<LuTrash size={14} />
+				<Icon name="trash" size={14} />
 				<span className="font-medium">حذف</span>
 			</button>
 		</ContextMenu>
diff --git a/src/layouts/bookmark/components/shared.tsx b/src/layouts/bookmark/components/shared.tsx
index ccac5071..497183fd 100644
--- a/src/layouts/bookmark/components/shared.tsx
+++ b/src/layouts/bookmark/components/shared.tsx
@@ -1,32 +1,9 @@
-import { FiChevronUp } from 'react-icons/fi'
 import type { BookmarkType } from '../types/bookmark.types'
-import { HiOutlineBookmark, HiOutlineFolder } from 'react-icons/hi2'
 import { TabNavigation } from '@/components/tab-navigation'
+import { Icon } from '@/src/icons'
 
 export type IconSourceType = 'auto' | 'upload' | 'url'
 
-export function IconSourceSelector({
-	iconSource,
-	setIconSource,
-}: {
-	iconSource: IconSourceType
-	setIconSource: (source: IconSourceType) => void
-	theme?: string
-}) {
-	return (
-		<TabNavigation<IconSourceType>
-			size="small"
-			tabMode="simple"
-			tabs={[
-				{ id: 'auto', label: 'آیکون خودکار' },
-				{ id: 'upload', label: 'آپلود آیکون' },
-			]}
-			activeTab={iconSource}
-			onTabClick={(tab) => setIconSource(tab)}
-		/>
-	)
-}
-
 export function TypeSelector({
 	type,
 	setType,
@@ -43,9 +20,13 @@ export function TypeSelector({
 				{
 					id: 'BOOKMARK',
 					label: 'بوکمارک',
-					icon: <HiOutlineBookmark size={14} />,
+					icon: <Icon name="outlineBookmark" size={14} />,
+				},
+				{
+					id: 'FOLDER',
+					label: 'پوشه',
+					icon: <Icon name="outlineFolder" size={14} />,
 				},
-				{ id: 'FOLDER', label: 'پوشه', icon: <HiOutlineFolder size={14} /> },
 			]}
 			activeTab={type}
 			onTabClick={(tab) => setType(tab)}
@@ -70,7 +51,8 @@ export function ShowAdvancedButton({
 			}
 		>
 			<span>{showAdvanced ? 'گزینه‌های کمتر' : 'گزینه‌های بیشتر'}</span>
-			<FiChevronUp
+			<Icon
+				name="chevronUp"
 				size={16}
 				className={`transition-all duration-300 ${showAdvanced ? 'rotate-0' : 'rotate-180'}`}
 			/>
diff --git a/src/layouts/friends/components/activity-card/empty-activity-card.tsx b/src/layouts/friends/components/activity-card/empty-activity-card.tsx
index 40d415c9..1c8d9e2c 100644
--- a/src/layouts/friends/components/activity-card/empty-activity-card.tsx
+++ b/src/layouts/friends/components/activity-card/empty-activity-card.tsx
@@ -1,5 +1,5 @@
 import { AvatarComponent } from '@/components/avatar.component'
-import { RiQuillPenAiLine } from 'react-icons/ri'
+import { Icon } from '@/src/icons'
 
 interface EmptyActivityCardProps {
 	avatar: string
@@ -26,7 +26,7 @@ export const EmptyActivityCard = ({ avatar, name, onClick }: EmptyActivityCardPr
 						`}
 						>
 							<div className="flex items-center justify-center w-full h-full overflow-y-auto wrap-break-word scrollbar-none">
-								<RiQuillPenAiLine className="w-5 h-5" />
+								<Icon name="penAI" className="w-5 h-5" />
 							</div>
 						</div>
 
diff --git a/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx b/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
index 12311346..e63fdac1 100644
--- a/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
+++ b/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
-import { FiTrash2 } from 'react-icons/fi'
 import Modal from '@/components/modal'
 import { useRemoveActivity, useSetActivity } from '@/services/hooks/user/userService.hook'
 import { translateError } from '@/utils/translate-error'
@@ -16,8 +15,8 @@ import { AvatarComponent } from '@/components/avatar.component'
 import { callEvent } from '@/common/utils/call-event'
 import { Chip } from '@/components/chip.component'
 import { SelectBox } from '@/components/selectbox/selectbox'
-import { BsInfoCircle } from 'react-icons/bs'
 import Tooltip from '@/components/toolTip'
+import { Icon } from '@/src/icons'
 
 interface ManageActivityBottomSheetProps {
 	isOpen: boolean
@@ -108,7 +107,7 @@ export function ManageActivityBottomSheet({
 							loading={isRemoving}
 						>
 							<div className="flex items-center justify-center gap-1 text-error-content leading-1">
-								<FiTrash2 />
+								<Icon name="trash" />
 								حذف نوشته
 							</div>
 						</Button>
@@ -188,7 +187,10 @@ export function ManageActivityBottomSheet({
 							<p className="flex text-sm font-medium text-content">
 								متن نوشته
 								<Tooltip content="نوشته فقط برای دوستان نمایش داده میشه!">
-									<BsInfoCircle className="mr-1 text-muted mt-0.5" />
+									<Icon
+										name="info"
+										className="mr-1 text-muted mt-0.5"
+									/>
 								</Tooltip>
 							</p>
 							<SelectBox
diff --git a/src/layouts/friends/components/add-friend.bottomSheet.tsx b/src/layouts/friends/components/add-friend.bottomSheet.tsx
index fc8a899b..bcf617bb 100644
--- a/src/layouts/friends/components/add-friend.bottomSheet.tsx
+++ b/src/layouts/friends/components/add-friend.bottomSheet.tsx
@@ -5,8 +5,8 @@ import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friendService.hook'
 import { translateError } from '@/utils/translate-error'
 import { showToast } from '@/common/toast'
-import { FiUserPlus, FiAlertCircle } from 'react-icons/fi'
 import Modal from '@/components/modal'
+import { Icon } from '@/src/icons'
 
 interface AddFriendBottomSheetProps {
 	isOpen: boolean
@@ -80,7 +80,7 @@ export function AddFriendBottomSheet({ isOpen, onClose }: AddFriendBottomSheetPr
 				<div className="flex items-center justify-center">
 					<div className="relative mb-2">
 						<div className="flex items-center justify-center w-16 h-16 rounded-xl bg-content">
-							<FiUserPlus className="text-content" size={26} />
+							<Icon name="usersPlus" className="text-content" size={26} />
 						</div>
 						<div className="absolute inset-0 rounded-full bg-content blur-xl opacity-40" />
 					</div>
@@ -94,7 +94,10 @@ export function AddFriendBottomSheet({ isOpen, onClose }: AddFriendBottomSheetPr
 
 				{!canSendRequest && (
 					<div className="flex items-start gap-3 p-4 border rounded-xl bg-yellow-500/10 border-yellow-500/20">
-						<FiAlertCircle className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" />
+						<Icon
+							name="alert"
+							className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5"
+						/>
 						<p className="text-sm leading-relaxed text-warning">
 							برای ارسال درخواست دوستی، ابتدا باید نام کاربری خود را در بخش
 							پروفایل تنظیم کنید.
@@ -125,7 +128,7 @@ export function AddFriendBottomSheet({ isOpen, onClose }: AddFriendBottomSheetPr
 
 						{translatedError && (
 							<p className="flex items-center gap-1 text-sm text-red-500">
-								<FiAlertCircle className="w-4 h-4" />
+								<Icon name="alert" className="w-4 h-4" />
 								{translatedError}
 							</p>
 						)}
diff --git a/src/layouts/friends/components/buttons/friend-requests.button.tsx b/src/layouts/friends/components/buttons/friend-requests.button.tsx
index 7f4794e3..3a822448 100644
--- a/src/layouts/friends/components/buttons/friend-requests.button.tsx
+++ b/src/layouts/friends/components/buttons/friend-requests.button.tsx
@@ -1,6 +1,5 @@
-import { FiInbox } from 'react-icons/fi'
 import { FriendRequestsBottomSheet } from '../friend-requests.bottomSheet'
-import { HiOutlineInbox } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	size: 'small' | 'large'
@@ -17,7 +16,7 @@ export function FriendRequestsButton({ size, pendingCount }: Prop) {
 					className="flex items-center relative gap-2 px-3 py-1.5 transition-all border cursor-pointer rounded-xl bg-content text-content border-content active:scale-95"
 					aria-label="درخواست‌های دوستی"
 				>
-					<FiInbox className="w-4 h-4" />
+					<Icon name="inbox" className="w-4 h-4" />
 					<span className="text-sm font-medium">درخواست‌ها</span>
 					{pendingCount ? (
 						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-red-500 rounded-full -top-1 -right-1 p-0.5 text-center ">
@@ -32,7 +31,10 @@ export function FriendRequestsButton({ size, pendingCount }: Prop) {
 					onClick={() => setIsRequestsOpen(true)}
 					className="flex relative items-center gap-1 px-2 py-1.5 transition-all border cursor-pointer rounded-xl bg-content text-content border-content active:scale-95 group group-hover:opacity-85"
 				>
-					<HiOutlineInbox className="w-4 h-4 text-base-content/90 group-hover:text-base-content/70" />
+					<Icon
+						name="outlineInbox"
+						className="w-4 h-4 text-base-content/90 group-hover:text-base-content/70"
+					/>
 					{pendingCount ? (
 						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-red-500 rounded-full -top-1 -right-1 p-0.5 text-center ">
 							{pendingCount}
diff --git a/src/layouts/friends/components/empty-list.friend.tsx b/src/layouts/friends/components/empty-list.friend.tsx
index 8c6e4441..497b41ea 100644
--- a/src/layouts/friends/components/empty-list.friend.tsx
+++ b/src/layouts/friends/components/empty-list.friend.tsx
@@ -1,4 +1,4 @@
-import { FiUsers } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	emptyMessage?: string
@@ -8,7 +8,7 @@ export function FriendEmptyList({ emptyMessage }: Prop) {
 		<div className="flex flex-col items-center justify-center px-6 py-12 text-center">
 			<div className="relative mb-5">
 				<div className="flex items-center justify-center w-16 h-16 rounded-xl bg-content">
-					<FiUsers className="text-content" size={26} />
+					<Icon name="users" className="text-content" size={26} />
 				</div>
 				<div className="absolute inset-0 rounded-full bg-content blur-xl opacity-40" />
 			</div>
diff --git a/src/layouts/friends/components/friend-requests.bottomSheet.tsx b/src/layouts/friends/components/friend-requests.bottomSheet.tsx
index 2cbfb193..4c17c558 100644
--- a/src/layouts/friends/components/friend-requests.bottomSheet.tsx
+++ b/src/layouts/friends/components/friend-requests.bottomSheet.tsx
@@ -1,5 +1,3 @@
-import { FiUserCheck } from 'react-icons/fi'
-
 import {
 	type Friend,
 	useHandleFriendRequest,
@@ -10,6 +8,7 @@ import { FriendsList } from './friends-List'
 import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
 import Modal from '@/components/modal'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	isOpen: boolean
@@ -53,7 +52,7 @@ export const FriendRequestsBottomSheet = ({ isOpen, onClose }: Prop) => {
 				rounded-lg transition-all
 				active:scale-[0.97]"
 					>
-						<FiUserCheck size={18} />
+						<Icon name="userCheck" size={18} />
 						<span className="text-xs font-medium">دوست شیم</span>
 					</Button>
 					<RemoveFriendButton
diff --git a/src/layouts/friends/components/friends-List.tsx b/src/layouts/friends/components/friends-List.tsx
index 7b23c166..b8f36b18 100644
--- a/src/layouts/friends/components/friends-List.tsx
+++ b/src/layouts/friends/components/friends-List.tsx
@@ -1,6 +1,5 @@
 import { AvatarComponent } from '@/components/avatar.component'
 import { type Friend, useGetFriends } from '@/services/hooks/friends/friendService.hook'
-import { FiUsers } from 'react-icons/fi'
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
 import { FriendEmptyList } from './empty-list.friend'
 
diff --git a/src/layouts/friends/components/remove-button.tsx b/src/layouts/friends/components/remove-button.tsx
index 75d3ea63..3b79e942 100644
--- a/src/layouts/friends/components/remove-button.tsx
+++ b/src/layouts/friends/components/remove-button.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/components/button/button'
 import type { Friend } from '@/services/hooks/friends/friendService.hook'
-import { FiUserX } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 type Props = {
 	friend: Friend
@@ -26,7 +26,7 @@ export function RemoveFriendButton({ friend, onClick, disabled, label }: Props)
 				disabled:opacity-50 disabled:cursor-not-allowed
 			"
 		>
-			<FiUserX size={16} />
+			<Icon name="userX" size={16} />
 			<span className="text-xs font-medium">{label || 'حذف'}</span>
 		</Button>
 	)
diff --git a/src/layouts/friends/friends.tsx b/src/layouts/friends/friends.tsx
index 0970690d..acfafa48 100644
--- a/src/layouts/friends/friends.tsx
+++ b/src/layouts/friends/friends.tsx
@@ -4,11 +4,11 @@ import { translateError } from '@/utils/translate-error'
 import { showToast } from '@/common/toast'
 import { RemoveFriendButton } from './components/remove-button'
 import { FriendsList } from './components/friends-List'
-import { FiUserPlus } from 'react-icons/fi'
 import { AddFriendBottomSheet } from './components/add-friend.bottomSheet'
 import { ConfirmationModal } from '@/components/modal/confirmation-modal'
 import { FriendRequestsButton } from './components/buttons/friend-requests.button'
 import { useAuth } from '@/context/auth.context'
+import { Icon } from '@/src/icons'
 
 export const FriendsLayout = () => {
 	const { user } = useAuth()
@@ -60,7 +60,7 @@ export const FriendsLayout = () => {
 							aria-label="افزودن دوست جدید"
 							type="button"
 						>
-							<FiUserPlus className="w-4 h-4" />
+							<Icon name="usersPlus" className="w-4 h-4" />
 							<span className="hidden text-sm font-medium sm:inline">
 								افزودن دوست
 							</span>
diff --git a/src/layouts/market/market-coins/components/coin-package-card.tsx b/src/layouts/market/market-coins/components/coin-package-card.tsx
index aff71f0f..971553c3 100644
--- a/src/layouts/market/market-coins/components/coin-package-card.tsx
+++ b/src/layouts/market/market-coins/components/coin-package-card.tsx
@@ -1,7 +1,7 @@
-import { FiShoppingCart } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
 import { ConfigKey } from '@/common/constant/config.key'
 import { CoinPackage } from '@/services/hooks/market/market-coins.interface'
+import { Icon } from '@/src/icons'
 
 interface CoinPackageCardProps {
 	package: CoinPackage
@@ -13,36 +13,48 @@ const fmt = (n: number) => new Intl.NumberFormat('fa-IR').format(n)
 
 export function CoinPackageCard({ package: pkg, onPurchase }: CoinPackageCardProps) {
 	return (
-		<div className="flex flex-col bg-base-100/80 rounded-2xl border border-base-content/8 hover:border-primary/30 hover:shadow-sm transition-all duration-200 overflow-hidden group">
+		<div className="flex flex-col overflow-hidden transition-all duration-200 border bg-base-100/80 rounded-2xl border-base-content/8 hover:border-primary/30 hover:shadow-sm group">
 			{/* Coin visual area */}
 			<div className="flex items-center justify-center py-6 bg-base-200/40">
 				<div className="flex flex-col items-center gap-2">
 					<div className="relative">
-						<div className="absolute inset-0 rounded-full bg-warning/20 blur-md scale-125" />
+						<div className="absolute inset-0 scale-125 rounded-full bg-warning/20 blur-md" />
 						<img
 							src={ConfigKey.WIG_COIN_ICON}
 							alt="ویج‌کوین"
-							className="relative w-10 h-10 group-hover:scale-105 transition-transform duration-200"
+							className="relative w-10 h-10 transition-transform duration-200 group-hover:scale-105"
 						/>
 					</div>
-					<p className="text-2xl font-bold text-primary tabular-nums leading-none">{fmt(pkg.coin)}</p>
-					<p className="text-[10px] text-base-content/40 font-medium">ویج‌کوین</p>
+					<p className="text-2xl font-bold leading-none text-primary tabular-nums">
+						{fmt(pkg.coin)}
+					</p>
+					<p className="text-[10px] text-base-content/40 font-medium">
+						ویج‌کوین
+					</p>
 				</div>
 			</div>
 
 			{/* Info */}
 			<div className="flex flex-col gap-2.5 px-3 py-2.5 border-t border-base-content/5">
 				<div>
-					<p className="text-[12px] font-semibold text-base-content leading-snug truncate">{pkg.title}</p>
+					<p className="text-[12px] font-semibold text-base-content leading-snug truncate">
+						{pkg.title}
+					</p>
 					{pkg.description && (
-						<p className="text-[10px] text-base-content/40 mt-0.5 line-clamp-1">{pkg.description}</p>
+						<p className="text-[10px] text-base-content/40 mt-0.5 line-clamp-1">
+							{pkg.description}
+						</p>
 					)}
 				</div>
 
 				<div className="flex items-center justify-between">
 					<div className="flex items-baseline gap-0.5">
-						<span className="text-sm font-bold text-base-content tabular-nums">{fmt(pkg.price)}</span>
-						<span className="text-[10px] text-base-content/40 mr-0.5">تومان</span>
+						<span className="text-sm font-bold text-base-content tabular-nums">
+							{fmt(pkg.price)}
+						</span>
+						<span className="text-[10px] text-base-content/40 mr-0.5">
+							تومان
+						</span>
 					</div>
 
 					<Button
@@ -51,7 +63,7 @@ export function CoinPackageCard({ package: pkg, onPurchase }: CoinPackageCardPro
 						className="h-6 px-2.5 text-[11px] font-medium text-white rounded-lg bg-primary/90 hover:bg-primary active:scale-95 transition-all"
 					>
 						<div className="flex items-center gap-1">
-							<FiShoppingCart size={10} />
+							<Icon name="shoppingCart" size={10} />
 							<span>خرید</span>
 						</div>
 					</Button>
diff --git a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
index a73aef10..3f974da6 100644
--- a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
+++ b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
@@ -1,4 +1,3 @@
-import { FiCheck } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
@@ -7,6 +6,7 @@ import { showToast } from '@/common/toast'
 import { ConfigKey } from '@/common/constant/config.key'
 import type { CoinPackage } from '@/services/hooks/market/market-coins.interface'
 import { usePurchaseCoinPackage } from '@/services/hooks/market/market-coints.hook'
+import { Icon } from '@/src/icons'
 
 interface CoinPackagePurchaseModalProps {
 	isOpen: boolean
@@ -60,7 +60,7 @@ export function CoinPackagePurchaseModal({
 			showCloseButton={!isPending}
 		>
 			<div className="space-y-3">
-				<div className="rounded-2xl border border-base-300/60 overflow-hidden bg-base-100">
+				<div className="overflow-hidden border rounded-2xl border-base-300/60 bg-base-100">
 					<div className="flex items-center justify-center py-8 bg-base-200/40">
 						<div className="flex flex-col items-center gap-2">
 							<img
@@ -77,14 +77,16 @@ export function CoinPackagePurchaseModal({
 						</div>
 					</div>
 					<div className="px-3 py-2.5">
-						<h3 className="text-sm font-semibold text-content">{pkg.title}</h3>
+						<h3 className="text-sm font-semibold text-content">
+							{pkg.title}
+						</h3>
 						{pkg.description && (
 							<p className="mt-0.5 text-xs text-muted">{pkg.description}</p>
 						)}
 					</div>
 				</div>
 
-				<div className="rounded-2xl border border-base-300/60 bg-base-100 divide-y divide-base-200/60">
+				<div className="border divide-y rounded-2xl border-base-300/60 bg-base-100 divide-base-200/60">
 					<div className="flex items-center justify-between px-3 py-3">
 						<span className="text-xs text-muted">مبلغ قابل پرداخت</span>
 						<div className="flex items-baseline gap-1">
@@ -103,7 +105,8 @@ export function CoinPackagePurchaseModal({
 
 				<div className="px-3 py-2.5 rounded-2xl border border-info/20 bg-info/5">
 					<p className="text-[11px] text-info/85">
-						💡 سکه‌های خریداری شده بلافاصله پس از پرداخت موفق به حساب شما اضافه می‌شوند.
+						💡 سکه‌های خریداری شده بلافاصله پس از پرداخت موفق به حساب شما اضافه
+						می‌شوند.
 					</p>
 				</div>
 
@@ -124,7 +127,7 @@ export function CoinPackagePurchaseModal({
 						loadingText="در حال انتقال..."
 						className="flex-1 text-white rounded-2xl bg-primary hover:bg-primary/90"
 					>
-						<FiCheck size={15} className="ml-1" />
+						<Icon name="check" size={15} className="ml-1" />
 						تایید و پرداخت
 					</Button>
 				</div>
diff --git a/src/layouts/market/market-coins/index.tsx b/src/layouts/market/market-coins/index.tsx
index 9d15a98e..0d0ee409 100644
--- a/src/layouts/market/market-coins/index.tsx
+++ b/src/layouts/market/market-coins/index.tsx
@@ -5,9 +5,9 @@ import { useAuth } from '@/context/auth.context'
 import { CoinPackageCard } from './components/coin-package-card'
 import { CoinPackagePurchaseModal } from './components/coin-package-purchase-modal'
 import { showToast } from '@/common/toast'
-import { FaCoins } from 'react-icons/fa'
 import type { CoinPackage } from '@/services/hooks/market/market-coins.interface'
 import { useGetCoinPackages } from '@/services/hooks/market/market-coints.hook'
+import { Icon } from '@/src/icons'
 
 export function MarketCoins() {
 	const { isAuthenticated, refetchUser } = useAuth()
@@ -75,7 +75,7 @@ export function MarketCoins() {
 			) : (
 				<div className="flex flex-col items-center justify-center h-48 gap-3">
 					<div className="flex items-center justify-center w-12 h-12 rounded-2xl bg-base-200/60">
-						<FaCoins size={20} className="text-base-content/20" />
+						<Icon name="coin" size={20} className="text-base-content/20" />
 					</div>
 					<p className="text-xs text-base-content/40">
 						فعلا چیزی برای خرید نیست
diff --git a/src/layouts/market/market-container.tsx b/src/layouts/market/market-container.tsx
index 3f96857c..a72841ad 100644
--- a/src/layouts/market/market-container.tsx
+++ b/src/layouts/market/market-container.tsx
@@ -1,6 +1,4 @@
 import { useState, useEffect } from 'react'
-import { FaCoins, FaPaintBrush } from 'react-icons/fa'
-import { FaPhotoFilm } from 'react-icons/fa6'
 import { useAuth } from '@/context/auth.context'
 import { MarketWallpaper } from './marketWallpaper'
 import { MarketOtherItems } from './other-items'
@@ -9,24 +7,25 @@ import Analytics from '@/analytics'
 import { TabNavigation } from '@/components/tab-navigation'
 import { MarketCoins } from './market-coins'
 import { listenEvent } from '@/common/utils/call-event'
+import { Icon } from '@/src/icons'
 
 const tabs = [
 	{
 		id: 'other',
 		label: 'شخصی‌سازی',
-		icon: <FaPaintBrush />,
+		icon: <Icon name="brush" />,
 		element: <MarketOtherItems />,
 	},
 	{
 		id: 'wallpapers',
 		label: 'تصویر زمینه‌ها',
-		icon: <FaPhotoFilm />,
+		icon: <Icon name="photoFilm" />,
 		element: <MarketWallpaper />,
 	},
 	{
 		id: 'coins',
 		label: 'خرید ویج‌‌کوین',
-		icon: <FaCoins />,
+		icon: <Icon name="coin" />,
 		element: <MarketCoins />,
 	},
 ]
diff --git a/src/layouts/market/other-items/components/market-item-card.tsx b/src/layouts/market/other-items/components/market-item-card.tsx
index 2ab10a5f..bc6c9bf9 100644
--- a/src/layouts/market/other-items/components/market-item-card.tsx
+++ b/src/layouts/market/other-items/components/market-item-card.tsx
@@ -1,10 +1,10 @@
-import { FiCheck, FiShoppingCart, FiEye } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
 import { ItemPrice } from '@/components/item-price/item-price'
 import { getItemTypeEmoji } from '@/components/market/getItemTypeEmoji'
 import { type MarketItem, MarketItemType } from '@/services/hooks/market/market.interface'
 import { showToast } from '@/common/toast'
 import { RenderPreview } from './renderPreview'
+import { Icon } from '@/src/icons'
 
 interface MarketItemCardProps {
 	item: MarketItem
@@ -61,19 +61,12 @@ export function MarketItemCard({
 					</span>
 				</div>
 
-				{isOwned && (
-					<div className="absolute top-2 left-2 flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-success/15 border border-success/20 text-success">
-						<FiCheck size={9} />
-						<span className="text-[9px] font-semibold">دارید</span>
-					</div>
-				)}
-
 				{!canPreview && (
 					<button
 						onClick={handlePreview}
 						className="absolute bottom-1.5 left-1.5 flex items-center gap-1 px-2 py-1 rounded-lg bg-base-100/85 border border-base-content/10 text-base-content/60 hover:text-primary transition-colors text-[10px] font-medium backdrop-blur-sm cursor-pointer opacity-0 group-hover:opacity-100"
 					>
-						<FiEye size={10} />
+						<Icon name="outlineEye" size={10} />
 						<span>پیش‌نمایش</span>
 					</button>
 				)}
@@ -90,7 +83,7 @@ export function MarketItemCard({
 
 					{isOwned ? (
 						<span className="text-[10px] text-success font-medium flex items-center gap-1">
-							<FiCheck size={10} />
+							<Icon name="check" size={10} />
 							خریداری‌شده
 						</span>
 					) : (
@@ -100,7 +93,7 @@ export function MarketItemCard({
 							className="h-6 px-2.5 rounded-lg text-[11px] font-medium bg-primary/90 text-white hover:bg-primary active:scale-95 transition-all"
 						>
 							<div className="flex items-center gap-1">
-								<FiShoppingCart size={10} />
+								<Icon name="shoppingCart" size={10} />
 								<span>خرید</span>
 							</div>
 						</Button>
diff --git a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
index 0fdf754e..b5361d80 100644
--- a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
+++ b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
@@ -1,4 +1,3 @@
-import { FiCheck, FiAlertCircle } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
 import { ItemPrice } from '@/components/item-price/item-price'
@@ -8,6 +7,7 @@ import { usePurchaseMarketItem } from '@/services/hooks/market/purchaseMarketIte
 import { translateError } from '@/utils/translate-error'
 import { showToast } from '@/common/toast'
 import { RenderPreview } from './renderPreview'
+import { Icon } from '@/src/icons'
 
 interface MarketItemPurchaseModalProps {
 	isOpen: boolean
@@ -101,7 +101,10 @@ export function MarketItemPurchaseModal({
 
 				{!canAfford && (
 					<div className="flex items-start gap-2.5 px-3 py-2.5 rounded-2xl border border-error/20 bg-error/5">
-						<FiAlertCircle className="w-4 h-4 mt-0.5 text-error flex-shrink-0" />
+						<Icon
+							name="alert"
+							className="w-4 h-4 mt-0.5 text-error flex-shrink-0"
+						/>
 						<div>
 							<p className="text-xs font-medium text-error">
 								موجودی ناکافی
@@ -135,7 +138,7 @@ export function MarketItemPurchaseModal({
 								: 'bg-base-300 text-muted cursor-not-allowed'
 						}`}
 					>
-						<FiCheck size={15} className="ml-1" />
+						<Icon name="check" size={15} className="ml-1" />
 						تایید خرید
 					</Button>
 				</div>
diff --git a/src/layouts/market/other-items/index.tsx b/src/layouts/market/other-items/index.tsx
index 0bebacd6..482a2293 100644
--- a/src/layouts/market/other-items/index.tsx
+++ b/src/layouts/market/other-items/index.tsx
@@ -10,9 +10,9 @@ import { MarketItemCard } from './components/market-item-card'
 import { MarketItemPurchaseModal } from './components/market-item-purchase-modal'
 import { showToast } from '@/common/toast'
 import { Chip } from '@/components/chip.component'
-import { FiShoppingBag } from 'react-icons/fi'
 import { useAppearanceSetting } from '@/context/appearance.context'
 import { usePreviewHandler } from '@/hooks/usePreviewHandler'
+import { Icon } from '@/src/icons'
 
 const FILTER_OPTIONS = [
 	{ id: 'all', label: 'همه' },
@@ -124,7 +124,11 @@ export function MarketOtherItems() {
 			{error ? (
 				<div className="flex flex-col items-center justify-center h-48 gap-3">
 					<div className="flex items-center justify-center w-12 h-12 rounded-2xl bg-base-200/60">
-						<FiShoppingBag size={20} className="text-base-content/20" />
+						<Icon
+							name="shoppingBag"
+							size={20}
+							className="text-base-content/20"
+						/>
 					</div>
 					<p className="text-xs text-base-content/40">خطا در بارگذاری آیتم‌ها</p>
 				</div>
@@ -162,7 +166,11 @@ export function MarketOtherItems() {
 			) : (
 				<div className="flex flex-col items-center justify-center h-48 gap-3">
 					<div className="flex items-center justify-center w-12 h-12 rounded-2xl bg-base-200/60">
-						<FiShoppingBag size={20} className="text-base-content/20" />
+						<Icon
+							name="shoppingBag"
+							size={20}
+							className="text-base-content/20"
+						/>
 					</div>
 					<p className="text-xs text-base-content/40">
 						آیتمی در این دسته‌بندی وجود ندارد
diff --git a/src/layouts/mini-apps/components/header/runner.header.tsx b/src/layouts/mini-apps/components/header/runner.header.tsx
index 8b0a2c39..f4831413 100644
--- a/src/layouts/mini-apps/components/header/runner.header.tsx
+++ b/src/layouts/mini-apps/components/header/runner.header.tsx
@@ -1,8 +1,6 @@
 import { callEvent } from '@/common/utils/call-event'
 import type { MiniApp } from '@/services/hooks/mini-apps/mini-apps-interface'
-import { FiMaximize, FiMinimize } from 'react-icons/fi'
-import { HiChevronRight } from 'react-icons/hi2'
-import { TbRefresh } from 'react-icons/tb'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	onClickToBack: any
@@ -35,7 +33,8 @@ export function MiniAppRunnerHeader({
 						aria-label="بازگشت"
 						onClick={() => onClickToBack()}
 					>
-						<HiChevronRight
+						<Icon
+							name="chevronRight"
 							size={20}
 							className="transition-colors duration-200 text-base-content/60 group-hover:text-base-content"
 						/>
@@ -77,12 +76,14 @@ export function MiniAppRunnerHeader({
 						className="flex items-center justify-center w-8 h-8 transition-all duration-200 border rounded-lg cursor-pointer bg-base-200/50 active:scale-95 group border-base-content/5 disabled:opacity-40"
 					>
 						{isFullScreen ? (
-							<FiMinimize
+							<Icon
+								name="minimize"
 								size={18}
 								className={`transition-colors duration-200 text-base-content/60 group-hover:text-base-content`}
 							/>
 						) : (
-							<FiMaximize
+							<Icon
+								name="maximize"
 								size={18}
 								className={`transition-colors duration-200 text-base-content/60 group-hover:text-base-content`}
 							/>
@@ -93,7 +94,8 @@ export function MiniAppRunnerHeader({
 						onClick={handleReload}
 						className="flex items-center justify-center w-8 h-8 transition-all duration-200 border rounded-lg cursor-pointer bg-base-200/50 active:scale-95 group border-base-content/5 disabled:opacity-40"
 					>
-						<TbRefresh
+						<Icon
+							name="refresh"
 							size={18}
 							className={`transition-colors duration-200 text-base-content/60 group-hover:text-base-content ${isLoading || isConnecting ? 'animate-spin' : ''}`}
 						/>
diff --git a/src/layouts/mini-apps/mini-apps.layout.tsx b/src/layouts/mini-apps/mini-apps.layout.tsx
index 167efae9..5f20e916 100644
--- a/src/layouts/mini-apps/mini-apps.layout.tsx
+++ b/src/layouts/mini-apps/mini-apps.layout.tsx
@@ -5,9 +5,9 @@ import { useEffect, useRef } from 'react'
 import { MiniAppRunner } from './mini-app-runner'
 import { listenEvent } from '@/common/utils/call-event'
 import Analytics from '@/analytics'
-import { HiOutlineInformationCircle } from 'react-icons/hi2'
 import Modal from '@/components/modal'
 import { Button } from '@/components/button/button'
+import { Icon } from '@/src/icons'
 const EmptyMiniAppImage = 'https://cdn.widgetify.ir/extension/empty-mini-app.png'
 export function MiniAppsLayout() {
 	const { data, isLoading, isFetchingNextPage, fetchNextPage, hasNextPage, isError } =
@@ -78,7 +78,7 @@ export function MiniAppsLayout() {
 							onClick={() => onClickToShowInfo()}
 							className="p-1 text-lg font-bold cursor-pointer text-base-content/80 hover:text-base-content active:scale-95"
 						>
-							<HiOutlineInformationCircle className="m-auto text-center" />
+							<Icon name="info" className="m-auto text-center" />
 						</div>
 					</div>
 					<div className="flex flex-col gap-1 mt-4 overflow-y-auto  h-[calc(100vh-10rem)]">
diff --git a/src/layouts/mini-apps/states/mini-app.auth.tsx b/src/layouts/mini-apps/states/mini-app.auth.tsx
index 9309922d..667ff864 100644
--- a/src/layouts/mini-apps/states/mini-app.auth.tsx
+++ b/src/layouts/mini-apps/states/mini-app.auth.tsx
@@ -3,7 +3,7 @@ import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
 import { useAuth } from '@/context/auth.context'
 import type { MiniAppScopeEnum } from '@/services/hooks/mini-apps/mini-apps-interface'
-import { CiCircleAlert } from 'react-icons/ci'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	scopes: MiniAppScopeEnum[]
@@ -27,7 +27,7 @@ export function WebAppAuthGate({ scopes, onConfirm }: Prop) {
 			<div className="flex flex-col items-center w-full max-w-sm gap-6 p-6 text-center rounded-2xl bg-background">
 				<div className="flex items-center justify-center w-12 h-12 rounded-xl bg-warning/10">
 					<span className="text-2xl text-warning">
-						<CiCircleAlert />
+						<Icon name="alert" />
 					</span>
 				</div>
 
diff --git a/src/layouts/navbar/components/settingsDropdown.tsx b/src/layouts/navbar/components/settingsDropdown.tsx
index 9888ecf1..6950ca10 100644
--- a/src/layouts/navbar/components/settingsDropdown.tsx
+++ b/src/layouts/navbar/components/settingsDropdown.tsx
@@ -1,11 +1,9 @@
 import { useCallback, useState, useRef } from 'react'
-import { HiCog, HiViewGridAdd } from 'react-icons/hi'
 import { callEvent } from '@/common/utils/call-event'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import { useAppearanceSetting } from '@/context/appearance.context'
-import { AiOutlineDrag } from 'react-icons/ai'
 import { showToast } from '@/common/toast'
-import { HiOutlineCog6Tooth } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 interface SettingsProps {
 	setShowSettings: (value: boolean) => void
@@ -44,7 +42,11 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 				}}
 				className="flex items-center w-full gap-3 px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
 			>
-				<HiCog size={16} className="text-muted group-hover:!text-primary" />
+				<Icon
+					name="settings"
+					size={14}
+					className="text-muted group-hover:text-primary!"
+				/>
 				<span>تنظیمات</span>
 			</button>
 
@@ -55,7 +57,8 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 				className="flex items-center justify-between w-full px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
 			>
 				<div className="flex items-center gap-3">
-					<HiViewGridAdd
+					<Icon
+						name="appsPlus"
 						size={16}
 						className="text-muted group-hover:!text-primary"
 					/>
@@ -68,7 +71,8 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 				onClick={() => onClick()}
 			>
 				<div className="flex items-center gap-3">
-					<AiOutlineDrag
+					<Icon
+						name="outlineDrag"
 						size={16}
 						className="text-muted group-hover:!text-primary"
 					/>
@@ -89,7 +93,7 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 				id="settings-button"
 			>
-				<HiOutlineCog6Tooth size={15} />
+				<Icon name="settings" size={14} />
 			</div>
 			<ClickableTooltip
 				triggerRef={triggerRef}
diff --git a/src/layouts/navbar/friends-list/friends.navbar.tsx b/src/layouts/navbar/friends-list/friends.navbar.tsx
index 62b65d70..bf35879d 100644
--- a/src/layouts/navbar/friends-list/friends.navbar.tsx
+++ b/src/layouts/navbar/friends-list/friends.navbar.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import { AuthRequiredModal } from '@/components/auth/AuthRequiredModal'
 import { useAuth } from '@/context/auth.context'
-import { HiOutlineUserGroup, HiOutlineUserPlus } from 'react-icons/hi2'
 import { BottomSheet } from '@/components/bottom-sheet/bottom-sheet'
 import { ActiveFriendsHorizontal } from '@/layouts/friends/components/activities'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { FriendRequestsButton } from '@/layouts/friends/components/buttons/friend-requests.button'
 import Analytics from '@/analytics'
+import { Icon } from '@/src/icons'
 
 const renderPendingNotification = (pendingCount: number) => (
 	<div className="absolute flex items-center justify-center w-2 h-2 text-[.4rem] z-20 font-bold text-white bg-red-500 rounded-full top-1 right-1 p-0.5 text-center">
@@ -57,7 +57,7 @@ export function FriendsListNavbar() {
 				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 				onClick={() => clickToOpenSheet()}
 			>
-				<HiOutlineUserGroup size={15} />
+				<Icon name="friends" size={15} />
 				{hasPendingRequests &&
 					renderPendingNotification(user?.friendshipStats?.pending || 0)}
 			</div>
@@ -72,7 +72,8 @@ export function FriendsListNavbar() {
 						}}
 						className="flex items-center gap-1 px-2 py-1.5 transition-all border cursor-pointer rounded-xl bg-content text-content border-content active:scale-95 group group-hover:opacity-85"
 					>
-						<HiOutlineUserPlus
+						<Icon
+							name="usersPlus"
 							size={14}
 							className="text-base-content/90 group-hover:text-base-content/70"
 						/>
diff --git a/src/layouts/navbar/market/market-button.tsx b/src/layouts/navbar/market/market-button.tsx
index 1cceffea..8a8e8d07 100644
--- a/src/layouts/navbar/market/market-button.tsx
+++ b/src/layouts/navbar/market/market-button.tsx
@@ -3,7 +3,7 @@ import Analytics from '@/analytics'
 import { listenEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
 import { MarketContainer } from '@/layouts/market/market-container'
-import { HiOutlineShoppingBag } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 export function MarketButton() {
 	const [showMarket, setShowMarket] = useState(false)
@@ -26,7 +26,7 @@ export function MarketButton() {
 				onClick={() => handleClick()}
 				className="p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 			>
-				<HiOutlineShoppingBag size={15} />
+				<Icon name="outlineShoppingBag" size={15} />
 			</button>
 			<Modal
 				isOpen={showMarket}
diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx
index 55db49dd..f5189669 100644
--- a/src/layouts/navbar/navbar.layout.tsx
+++ b/src/layouts/navbar/navbar.layout.tsx
@@ -1,7 +1,4 @@
 import { type JSX, useCallback, useEffect, useState } from 'react'
-import { HiX } from 'react-icons/hi'
-import { FiChevronDown } from 'react-icons/fi'
-import { AiOutlineDrag } from 'react-icons/ai'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { SettingModal } from '../setting/setting-modal'
@@ -11,14 +8,6 @@ import { ProfileNav } from './profile/profile'
 import { useAppearanceSetting } from '@/context/appearance.context'
 import { MarketButton } from './market/market-button'
 import Analytics from '@/analytics'
-import {
-	HiGlobeAlt,
-	HiHome,
-	HiOutlineGlobeAlt,
-	HiOutlineHome,
-	HiOutlineSquares2X2,
-	HiSquares2X2,
-} from 'react-icons/hi2'
 import { Page, usePage } from '@/context/page.context'
 import { useAuth } from '@/context/auth.context'
 import { BlurModeButton } from '@/components/blur-mode/blur-mode.button'
@@ -27,6 +16,7 @@ import Tooltip from '@/components/toolTip'
 import { SyncAccount } from './sync'
 import { getCurrentDate } from '../widgets/calendar/utils'
 import { useBirthdayConfetti } from '@/hooks/useBirthdayConfetti'
+import { Icon } from '@/src/icons'
 
 const WIDGETIFY_URLS = {
 	website: 'https://widgetify.ir',
@@ -35,21 +25,21 @@ const WIDGETIFY_URLS = {
 const tabs = [
 	{
 		id: Page.Home,
-		icon: <HiOutlineHome />,
-		activeIcon: <HiHome />,
+		icon: <Icon name="outlineHome" />,
+		activeIcon: <Icon name="home" />,
 		label: 'ویجتیفای',
 	},
 
 	{
 		id: Page.Explorer,
-		icon: <HiOutlineGlobeAlt size={22} />,
-		activeIcon: <HiGlobeAlt size={22} />,
+		icon: <Icon name="outlineGlobe" size={22} />,
+		activeIcon: <Icon name="globe" size={22} />,
 		label: 'کاوش',
 	},
 	{
 		id: Page.MiniApps,
-		icon: <HiOutlineSquares2X2 size={22} />,
-		activeIcon: <HiSquares2X2 size={22} />,
+		icon: <Icon name="outlineSquares2X2" size={22} />,
+		activeIcon: <Icon name="squares2X2" size={22} />,
 		label: 'برنامک‌ها',
 	},
 ]
@@ -136,10 +126,11 @@ export function NavbarLayout(): JSX.Element {
 	return (
 		<>
 			{canReOrderWidget && (
-				<div className="fixed z-[100] transform -translate-x-1/2 top-4 left-1/2 w-max">
+				<div className="fixed transform -translate-x-1/2 z-100 top-4 left-1/2 w-max">
 					<div className="px-4 py-2 border shadow-2xl shadow-warning bg-warning border-warning rounded-2xl">
 						<div className="flex items-center gap-3 text-xs font-bold text-warning-content">
-							<AiOutlineDrag
+							<Icon
+								name="outlineDrag"
 								size={16}
 								className="animate-bounce text-warning"
 							/>
@@ -148,7 +139,7 @@ export function NavbarLayout(): JSX.Element {
 								onClick={() => toggleCanReOrderWidget()}
 								className="transition-colors hover:text-red-400"
 							>
-								<HiX size={16} />
+								<Icon name="close" size={16} />
 							</button>
 						</div>
 					</div>
@@ -206,7 +197,7 @@ export function NavbarLayout(): JSX.Element {
 								onClick={() => onToggleNavbar()}
 								className="p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 							>
-								<FiChevronDown size={15} />
+								<Icon name="chevronDown" size={15} />
 							</button>
 						</Tooltip>
 						<BlurModeButton />
diff --git a/src/layouts/navbar/profile/profile.tsx b/src/layouts/navbar/profile/profile.tsx
index cec8bc31..66206e7d 100644
--- a/src/layouts/navbar/profile/profile.tsx
+++ b/src/layouts/navbar/profile/profile.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react'
-import { LuCircleUser } from 'react-icons/lu'
 import { listenEvent } from '@/common/utils/call-event'
 import { AvatarComponent } from '@/components/avatar.component'
 import Tooltip from '@/components/toolTip'
 import { useAuth } from '@/context/auth.context'
 import { UserAccountModal } from '../../setting/tabs/account/user-account.modal'
 import { WelcomeWizard } from '@/components/welcome-wizard'
+import { Icon } from '@/src/icons'
 
 const renderUserAvatar = (user: any) => {
 	if (user?.avatar) {
@@ -69,7 +69,7 @@ export function ProfileNav() {
 						id="profile-and-friends-list"
 						onClick={() => handleProfileClick()}
 					>
-						<LuCircleUser size={15} />
+						<Icon name="user" size={15} />
 					</div>
 				</Tooltip>
 			) : (
diff --git a/src/layouts/search/browser-bookmark/bookmark-list-item.tsx b/src/layouts/search/browser-bookmark/bookmark-list-item.tsx
deleted file mode 100644
index bfa50eb8..00000000
--- a/src/layouts/search/browser-bookmark/bookmark-list-item.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { FiChevronRight, FiFolder, FiExternalLink } from 'react-icons/fi'
-import { getFaviconFromUrl } from '@/common/utils/icon'
-import type { FetchedBrowserBookmark } from '@/layouts/bookmark/utils/browser-bookmarks.util'
-
-interface Props {
-	item: FetchedBrowserBookmark
-	onClick: (item: FetchedBrowserBookmark) => void
-}
-
-export function BookmarkListItem({ item, onClick }: Props) {
-	const isFolder = item.type === 'FOLDER'
-
-	return (
-		<div
-			onClick={() => onClick(item)}
-			className="flex items-center gap-2.5 p-2 hover:bg-primary/5 rounded-xl cursor-pointer transition-all group"
-		>
-			{isFolder ? (
-				<FiFolder className="text-warning shrink-0" size={18} />
-			) : (
-				<img
-					src={getFaviconFromUrl(item.url || '')}
-					className="w-4 h-4 rounded-sm shrink-0"
-					alt=""
-				/>
-			)}
-
-			<span className="flex-1 text-xs font-medium truncate transition-colors text-base-content/80 group-hover:text-base-content">
-				{item.title || (isFolder ? 'پوشه بدون نام' : 'بدون عنوان')}
-			</span>
-
-			{isFolder ? (
-				<FiChevronRight
-					size={12}
-					className="transition-opacity opacity-20 group-hover:opacity-60"
-				/>
-			) : (
-				<FiExternalLink
-					size={12}
-					className="transition-opacity opacity-0 group-hover:opacity-40"
-				/>
-			)}
-		</div>
-	)
-}
diff --git a/src/layouts/search/browser-bookmark/bookmark-popover.tsx b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
index 62538173..f6cfc935 100644
--- a/src/layouts/search/browser-bookmark/bookmark-popover.tsx
+++ b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { FiChevronRight, FiFolder, FiExternalLink, FiLock } from 'react-icons/fi'
 import { getFaviconFromUrl } from '@/common/utils/icon'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import {
@@ -9,7 +8,7 @@ import {
 } from '@/layouts/bookmark/utils/browser-bookmarks.util'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
-import { HiChevronRight } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 interface BookmarkPopoverProps {
 	isOpen: boolean
@@ -87,7 +86,7 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 			{!browserBookmarksEnabled ? (
 				<div className="p-5 text-center">
 					<div className="flex items-center justify-center w-8 h-8 mx-auto mb-3 rounded-full bg-primary/10">
-						<FiLock className="text-primary" size={18} />
+						<Icon name="lock" className="text-primary" size={18} />
 					</div>
 					<p className="mb-1 text-sm font-bold">دسترسی به بوکمارک‌ها</p>
 					<p className="mb-4 text-xs leading-relaxed text-muted">
@@ -113,7 +112,7 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 								onClick={handleGoBack}
 								className="text-[10px] btn-ghost text-muted rounded-xl flex items-center gap-1!"
 							>
-								<HiChevronRight />
+								<Icon name="chevronRight" />
 								بازگشت
 							</Button>
 						)}
@@ -128,7 +127,8 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 									className="flex items-center gap-2.5 p-2 hover:bg-primary/5 hover:text-primary/80 rounded-xl cursor-pointer transition-all group"
 								>
 									{item.type === 'FOLDER' ? (
-										<FiFolder
+										<Icon
+											name="folder"
 											className="text-primary/80 shrink-0"
 											size={18}
 										/>
@@ -143,12 +143,14 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 										{item.title}
 									</span>
 									{item.type === 'FOLDER' ? (
-										<FiChevronRight
+										<Icon
+											name="chevronLeft"
 											size={12}
 											className="opacity-20 group-hover:opacity-50"
 										/>
 									) : (
-										<FiExternalLink
+										<Icon
+											name="externalLink"
 											size={12}
 											className="opacity-0 group-hover:opacity-30"
 										/>
diff --git a/src/layouts/search/browser-bookmark/browser-bookmark.tsx b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
index 6d35d2af..f60aa9df 100644
--- a/src/layouts/search/browser-bookmark/browser-bookmark.tsx
+++ b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
@@ -2,12 +2,11 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { useGetSearchboxData } from '@/services/hooks/trends/getTrends'
 import { getFaviconFromUrl } from '@/common/utils/icon'
 import Tooltip from '@/components/toolTip'
-import { HiGlobeAlt } from 'react-icons/hi2'
-import { MdFolderSpecial } from 'react-icons/md'
 import { BookmarkPopover } from './bookmark-popover'
 import { Page, usePage } from '@/context/page.context'
 import Analytics from '@/analytics'
 import { NewBadge } from '@/components/badges/new.badge'
+import { Icon } from '@/src/icons'
 
 export function BrowserBookmark() {
 	const { data } = useGetSearchboxData({ enabled: true })
@@ -71,7 +70,11 @@ export function BrowserBookmark() {
 						onClick={() => onClickToExplorer()}
 					>
 						<div className="relative flex items-center justify-center w-fit px-1 gap-1 h-6 p-0.5 rounded-xl bg-base-300 group-hover:scale-95 transition-transform">
-							<HiGlobeAlt size={20} className="text-base-content/60" />
+							<Icon
+								name="outlineGlobe"
+								size={14}
+								className="text-base-content/60"
+							/>
 							<p className="font-medium text-base-content/60">کاوش</p>
 							{fetchedSearchbox?.explorer?.newBadge && (
 								<NewBadge className="top-0 left-0" />
@@ -92,7 +95,7 @@ export function BrowserBookmark() {
 									: 'bg-base-300  text-base-content/60'
 							}`}
 						>
-							<MdFolderSpecial size={20} />
+							<Icon name="folderSpecial" size={14} />
 							<p className="font-medium">بوکمارک مرورگر</p>
 						</div>
 					</div>
diff --git a/src/layouts/search/history.portal.tsx b/src/layouts/search/history.portal.tsx
index 0485160e..8f09d3e7 100644
--- a/src/layouts/search/history.portal.tsx
+++ b/src/layouts/search/history.portal.tsx
@@ -6,7 +6,7 @@ import { AutocompleteConsentModal } from './suggestion/autocomplete-consent.moda
 import { Portal } from '@/components/portal/Portal'
 import { useSearchHistory } from './hooks/useSearchHistory'
 import { Suggestions } from './suggestion/suggestions'
-import { MdSearch } from 'react-icons/md'
+import { Icon } from '@/src/icons'
 
 interface SearchHistoryPortalProps {
 	onClose: () => void
@@ -102,7 +102,11 @@ export function SearchHistoryPortal({
 					{showEnableButton && (
 						<div className="flex flex-col items-center gap-3 px-4 py-5 text-center">
 							<div className="flex items-center justify-center w-8 h-8 rounded-xl bg-base-content/5">
-								<MdSearch size={15} className="text-base-content/40" />
+								<Icon
+									name="search"
+									size={15}
+									className="text-base-content/40"
+								/>
 							</div>
 							<div className="space-y-1">
 								<p className="text-xs font-medium text-base-content/70">
diff --git a/src/layouts/search/image/image-search.portal.tsx b/src/layouts/search/image/image-search.portal.tsx
index d4eddda0..0d7ff85a 100644
--- a/src/layouts/search/image/image-search.portal.tsx
+++ b/src/layouts/search/image/image-search.portal.tsx
@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react'
-import { MdClose, MdLink, MdOutlinePrivacyTip } from 'react-icons/md'
 import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
 import { TextInput } from '@/components/text-input'
@@ -8,6 +7,7 @@ import { RequireAuth } from '@/components/auth/require-auth'
 import { getMainClient } from '@/services/api'
 import { translateError } from '@/utils/translate-error'
 import { Portal } from '@/components/portal/Portal'
+import { Icon } from '@/src/icons'
 
 interface ImageSearchPortalProps {
 	onClose: () => void
@@ -99,13 +99,13 @@ export function ImageSearchPortal({
 							target="_blank"
 							rel="noreferrer"
 						>
-							<MdOutlinePrivacyTip size={18} />
+							<Icon name="outlinePrivacyTip" size={18} />
 						</a>
 						<button
 							onClick={onClose}
 							className="p-1 transition-colors rounded-full cursor-pointer hover:bg-base-200 text-base-content/50"
 						>
-							<MdClose size={22} />
+							<Icon name="close" size={22} />
 						</button>
 					</div>
 				</div>
@@ -202,7 +202,7 @@ export function ImageSearchPortal({
 					</RequireAuth>
 					<div className="flex items-center gap-2 p-1 border bg-base-200 rounded-xl border-base-content/5">
 						<div className="pl-3 text-base-content/30">
-							<MdLink size={20} />
+							<Icon name="link" size={20} />
 						</div>
 						<TextInput
 							type="url"
diff --git a/src/layouts/search/search.tsx b/src/layouts/search/search.tsx
index da5fd953..251951b5 100644
--- a/src/layouts/search/search.tsx
+++ b/src/layouts/search/search.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react'
-import { MdOutlineClear, MdOutlineSearch } from 'react-icons/md'
 import Analytics from '@/analytics'
 import { BrowserBookmark } from './browser-bookmark/browser-bookmark'
 import { VoiceSearchButton } from './voice/voice-search.button'
@@ -11,6 +10,7 @@ import { SearchHistoryPortal } from './history.portal'
 import type { EngineMeta } from '@/services/hooks/trends/getTrends'
 import { useSearchHistory } from './hooks/useSearchHistory'
 import { useAuth } from '@/context/auth.context'
+import { Icon } from '@/src/icons'
 
 const DEFAULT_ENGINE: EngineMeta = {
 	id: 'google',
@@ -186,7 +186,7 @@ export function SearchLayout() {
 							onClick={handleClearSearch}
 							className={`h-9 w-9 shrink-0 flex items-center justify-center rounded-full cursor-pointer transition-all duration-300 ${searchQuery ? 'opacity-70 hover:opacity-100 hover:bg-base-300' : 'opacity-0 pointer-events-none'}`}
 						>
-							<MdOutlineClear size={20} className="opacity-50" />
+							<Icon name="close" size={20} className="opacity-50" />
 						</button>
 						<div
 							className={`${searchQuery ? 'opacity-0 hidden' : 'flex'} items-center gap-0.5 ml-1 transition-all duration-300 `}
@@ -198,7 +198,7 @@ export function SearchLayout() {
 							className={`${searchQuery ? 'flex' : 'opacity-0 hidden'} h-9 w-9 shrink-0 flex items-center justify-center rounded-full cursor-pointer  hover:bg-base-300`}
 							onClick={() => onSearchButtonClick()}
 						>
-							<MdOutlineSearch size={20} className="opacity-50" />
+							<Icon name="search" size={20} className="opacity-50" />
 						</div>
 						<div
 							className={
diff --git a/src/layouts/search/select-engine/engine-selector.tsx b/src/layouts/search/select-engine/engine-selector.tsx
index 2afdb2bb..7ca048c5 100644
--- a/src/layouts/search/select-engine/engine-selector.tsx
+++ b/src/layouts/search/select-engine/engine-selector.tsx
@@ -5,10 +5,9 @@ import { Dropdown } from '@/components/dropdown'
 import { useAuth } from '@/context/auth.context'
 import { useChangeSearchEngine } from '@/services/hooks/extension/updateSetting.hook'
 import { type EngineMeta, useGetSearchboxData } from '@/services/hooks/trends/getTrends'
+import { Icon } from '@/src/icons'
 import type { ReactNode } from 'react'
 import { useState, useEffect, useMemo } from 'react'
-import { FcGoogle } from 'react-icons/fc'
-import { HiChevronDown } from 'react-icons/hi2'
 
 const GOOGLE: EngineMeta = {
 	id: 'google',
@@ -98,8 +97,9 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 							icon={currentEngine.icon}
 						/>
 						{showNewBadge && <NewBadge className="right-1 bottom-1" />}
-						<HiChevronDown
-							className={` text-muted transition-transform duration-300 ${clicked ? 'rotate-180' : ''}`}
+						<Icon
+							name="chevronDown"
+							className={`text-muted transition-transform duration-300 ${clicked ? 'rotate-180' : ''}`}
 							size={12}
 						/>
 					</button>
@@ -161,7 +161,7 @@ interface EngineIconProps {
 
 function EngineIcon({ engineId, icon, label }: EngineIconProps) {
 	if (engineId === 'google') {
-		return <FcGoogle size={20} opacity={0.8} />
+		return <Icon name="googleLogo" size={20} opacity={0.8} />
 	}
 	return (
 		<img
diff --git a/src/layouts/search/suggestion/suggestions.tsx b/src/layouts/search/suggestion/suggestions.tsx
index af053aec..b6553604 100644
--- a/src/layouts/search/suggestion/suggestions.tsx
+++ b/src/layouts/search/suggestion/suggestions.tsx
@@ -1,6 +1,5 @@
 import { useGeneralSetting } from '@/context/general-setting.context'
-import { LuHistory } from 'react-icons/lu'
-import { MdSearch } from 'react-icons/md'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	combinedSuggestions: { text: string; isRecent: boolean }[]
@@ -20,9 +19,17 @@ export function Suggestions({ combinedSuggestions, handleSearch }: Prop) {
 					className={`flex items-center w-full gap-2 px-3 py-2 text-right transition-colors cursor-pointer rounded-xl hover:bg-base-content/5 ${item.isRecent && blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
 				>
 					{item.isRecent ? (
-						<LuHistory size={15} className="text-base-content/30 shrink-0" />
+						<Icon
+							name="history"
+							size={15}
+							className="text-base-content/30 shrink-0"
+						/>
 					) : (
-						<MdSearch size={15} className="text-base-content/30 shrink-0" />
+						<Icon
+							name="search"
+							size={15}
+							className="text-base-content/30 shrink-0"
+						/>
 					)}
 					<span className="text-sm font-medium truncate text-base-content/80">
 						{item.text}
diff --git a/src/layouts/search/voice/voice-search.portal.tsx b/src/layouts/search/voice/voice-search.portal.tsx
index 600a8b39..b7e02eda 100644
--- a/src/layouts/search/voice/voice-search.portal.tsx
+++ b/src/layouts/search/voice/voice-search.portal.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import { MdClose, MdMic, MdSettings } from 'react-icons/md'
 import { useVoiceSearch } from './useVoiceSearch'
 import { Portal } from '@/components/portal/Portal'
+import { Icon } from '@/src/icons'
 
 interface VoiceSearchPortalProps {
 	onClose: () => void
@@ -69,7 +69,7 @@ export function VoiceSearchPortal({
 						onClick={onClose}
 						className="p-2 transition-colors rounded-full cursor-pointer hover:bg-base-200 text-base-content/60"
 					>
-						<MdClose size={22} />
+						<Icon name="close" size={22} />
 					</button>
 				</div>
 
@@ -91,7 +91,7 @@ export function VoiceSearchPortal({
 								onClick={() => setIsLanguageMenuOpen(!isLanguageMenuOpen)}
 								className="flex cursor-pointer items-center gap-2 px-3 py-1.5 hover:bg-base-200 rounded-xl transition-colors text-xs font-bold text-base-content/60"
 							>
-								<MdSettings size={18} />
+								<Icon name="settings" size={14} />
 								{languages.find((l) => l.code === selectedLanguage)?.name}
 							</button>
 
@@ -119,7 +119,8 @@ export function VoiceSearchPortal({
 							}
 							className={`w-12 h-12 cursor-pointer flex items-center justify-center rounded-full transition-all ${isListening ? 'bg-error text-white shadow-lg shadow-error/20' : 'bg-primary text-white shadow-lg shadow-primary/20'}`}
 						>
-							<MdMic
+							<Icon
+								name="mic"
 								size={24}
 								className={isListening ? 'animate-pulse' : ''}
 							/>
diff --git a/src/layouts/setting/setting-modal.tsx b/src/layouts/setting/setting-modal.tsx
index 9ffa14c6..64c2b0e5 100644
--- a/src/layouts/setting/setting-modal.tsx
+++ b/src/layouts/setting/setting-modal.tsx
@@ -1,13 +1,3 @@
-import { MdApps, MdOutlinePrivacyTip } from 'react-icons/md'
-import { TbApps } from 'react-icons/tb'
-import {
-	VscColorMode,
-	VscInfo,
-	VscMegaphone,
-	VscPaintcan,
-	VscRecordKeys,
-	VscSettingsGear,
-} from 'react-icons/vsc'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
@@ -19,13 +9,10 @@ import { GeneralSettingTab } from './tabs/general/general'
 import { PrivacySettings } from './tabs/privacy/privacy-settings'
 import { ShortcutsTab } from './tabs/shortcuts/shortcuts'
 import { WallpaperSetting } from './tabs/wallpapers/wallpapers'
-import { BiUserCircle } from 'react-icons/bi'
 import { AccountTab } from './tabs/account/account'
-import { FiGift, FiUsers } from 'react-icons/fi'
 import { AllFriendsTab, RewardsTab } from './tabs/account/tabs'
-import { RiApps2AiLine } from 'react-icons/ri'
-import { Connections } from './tabs/account/tabs/user-profile/connections/connections'
 import { ConnectionPlatformsTab } from './tabs/account/tabs/connection/connectionsTab'
+import { Icon } from '@/src/icons'
 
 interface SettingModalProps {
 	isOpen: boolean
@@ -40,25 +27,25 @@ const tabs: TabItem[] = [
 			{
 				label: 'پروفایل من',
 				value: 'profile',
-				icon: <BiUserCircle size={20} />,
+				icon: <Icon name="user" size={20} />,
 				element: <AccountTab />,
 			},
 			{
 				label: 'پلتفرم‌ها',
 				value: 'platforms',
-				icon: <RiApps2AiLine size={20} />,
+				icon: <Icon name="platforms" size={20} />,
 				element: <ConnectionPlatformsTab />,
 			},
 			{
 				label: 'ماموریت‌ها و پاداش',
 				value: 'tasks',
-				icon: <FiGift size={20} />,
+				icon: <Icon name="gift" size={20} />,
 				element: <RewardsTab />,
 			},
 			{
 				label: 'دوستان',
 				value: 'friends',
-				icon: <FiUsers size={20} />,
+				icon: <Icon name="friends" size={20} />,
 				element: <AllFriendsTab />,
 			},
 		],
@@ -69,32 +56,32 @@ const tabs: TabItem[] = [
 			{
 				label: 'عمومی',
 				value: 'general',
-				icon: <VscSettingsGear size={20} />,
+				icon: <Icon name="settings" size={18} />,
 				element: <GeneralSettingTab />,
 			},
 
 			{
 				label: 'حریم خصوصی',
 				value: 'access',
-				icon: <MdOutlinePrivacyTip size={20} />,
+				icon: <Icon name="outlinePrivacyTip" size={20} />,
 				element: <PrivacySettings key="privacy" />,
 			},
 			{
 				label: 'ظاهری',
 				value: 'appearance',
-				icon: <VscColorMode size={20} />,
+				icon: <Icon name="theme" size={20} />,
 				element: <AppearanceSettingTab />,
 			},
 			{
-				label: 'تصویر زمینه ها',
+				label: 'تصویر زمینه‌ها',
 				value: 'wallpapers',
-				icon: <VscPaintcan size={20} />,
+				icon: <Icon name="wallpapers" size={20} />,
 				element: <WallpaperSetting />,
 			},
 			{
 				label: 'میانبرها',
 				value: 'shortcuts',
-				icon: <VscRecordKeys size={20} />,
+				icon: <Icon name="shortcuts" size={20} />,
 				element: <ShortcutsTab />,
 			},
 		],
@@ -105,7 +92,7 @@ const tabs: TabItem[] = [
 			{
 				label: 'درباره ما',
 				value: 'about',
-				icon: <VscInfo size={20} />,
+				icon: <Icon name="info" size={20} />,
 				element: <AboutUsTab />,
 			},
 		],
@@ -148,14 +135,14 @@ export const SettingModal = ({ isOpen, onClose, selectedTab }: SettingModalProps
 						className={`relative items-center  flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
 						onClick={() => openWidgetSettings()}
 					>
-						<TbApps size={20} className="text-muted" />
+						<Icon name="appsPlus" size={20} className="text-muted" />
 						<span className="text-sm font-light">مدیریت ویجت ها</span>
 					</button>
 					<button
 						className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
 						onClick={() => setUpdateModalOpen(true)}
 					>
-						<VscMegaphone size={20} />
+						<Icon name="lastUpdate" size={20} />
 						<span className="text-sm font-light">تغییرات اخیر</span>
 					</button>
 				</div>
diff --git a/src/layouts/setting/tabs/about-us/about-us.tsx b/src/layouts/setting/tabs/about-us/about-us.tsx
index 8bfbf413..64f2c905 100644
--- a/src/layouts/setting/tabs/about-us/about-us.tsx
+++ b/src/layouts/setting/tabs/about-us/about-us.tsx
@@ -1,7 +1,6 @@
-import { FaExternalLinkAlt, FaGlobe, FaHeart, FaTelegramPlane } from 'react-icons/fa'
 import { SectionPanel } from '@/components/section-panel'
 import { ConfigKey } from '../../../../common/constant/config.key'
-import { RiArticleLine } from 'react-icons/ri'
+import { Icon } from '@/src/icons'
 
 export function AboutUsTab() {
 	return (
@@ -38,7 +37,7 @@ export function AboutUsTab() {
 					>
 						<div className="flex items-center gap-3">
 							<div className="flex items-center justify-center w-10 h-10 transition-transform rounded-xl bg-primary/10 text-primary group-hover:scale-110">
-								<FaGlobe size={18} />
+								<Icon name="globe" size={18} />
 							</div>
 							<div className="text-right">
 								<h3 className="text-xs font-bold text-base-content">
@@ -49,7 +48,8 @@ export function AboutUsTab() {
 								</p>
 							</div>
 						</div>
-						<FaExternalLinkAlt
+						<Icon
+							name="externalLink"
 							size={12}
 							className="transition-colors text-base-content/20 group-hover:text-primary"
 						/>
@@ -63,7 +63,7 @@ export function AboutUsTab() {
 					>
 						<div className="flex items-center gap-3">
 							<div className="flex items-center justify-center w-10 h-10 transition-transform rounded-xl bg-secondary/10 text-secondary group-hover:scale-110">
-								<RiArticleLine size={18} />
+								<Icon name="externalLink" size={18} />
 							</div>
 							<div className="text-right">
 								<h3 className="text-xs font-bold text-base-content">
@@ -74,7 +74,8 @@ export function AboutUsTab() {
 								</p>
 							</div>
 						</div>
-						<FaExternalLinkAlt
+						<Icon
+							name="externalLink"
 							size={12}
 							className="transition-colors text-base-content/20 group-hover:text-secondary"
 						/>
@@ -88,7 +89,7 @@ export function AboutUsTab() {
 					>
 						<div className="flex items-center gap-3">
 							<div className="flex items-center justify-center w-10 h-10 transition-transform rounded-xl bg-info/10 text-info group-hover:scale-110">
-								<FaTelegramPlane size={18} />
+								<Icon name="telegramLogo" size={18} />
 							</div>
 							<div className="text-right">
 								<h3 className="text-xs font-bold text-base-content">
@@ -99,7 +100,8 @@ export function AboutUsTab() {
 								</p>
 							</div>
 						</div>
-						<FaExternalLinkAlt
+						<Icon
+							name="externalLink"
 							size={12}
 							className="transition-colors text-base-content/20 group-hover:text-info"
 						/>
@@ -135,7 +137,8 @@ export function AboutUsTab() {
 								</p>
 							</div>
 						</div>
-						<FaExternalLinkAlt
+						<Icon
+							name="externalLink"
 							size={12}
 							className="transition-colors text-base-content/20 group-hover:text-success"
 						/>
@@ -149,9 +152,7 @@ export function AboutUsTab() {
 					'flex items-center justify-center mt-8 space-x-1 space-x-reverse text-sm text-content opacity-75'
 				}
 			>
-				<span>ساخته شده با</span>
-				<FaHeart className="mx-1 text-red-500 animate-pulse" size={14} />
-				<span>در ایران</span>
+				<span>ساخته شده با</span>💙<span>در ایران</span>
 			</div>
 
 			<div className={'mt-2 mb-4 text-xs text-center text-content opacity-55'}>
diff --git a/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx b/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
index 3db9055a..636e8793 100644
--- a/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { FiKey, FiArrowRight, FiRefreshCw } from 'react-icons/fi'
 import { TextInput } from '@/components/text-input'
 import { Button } from '@/components/button/button'
 import {
@@ -14,8 +13,7 @@ import InputTextError from './components/input-text-error'
 import OtpInput from './components/otp-input'
 import { callEvent } from '@/common/utils/call-event'
 import { sleep } from '@/common/utils/timeout'
-import { MdDoorSliding } from 'react-icons/md'
-import { TiWarningOutline } from 'react-icons/ti'
+import { Icon } from '@/src/icons'
 
 type AuthOtpProps = {
 	step: 'enter-email' | 'enter-otp'
@@ -136,7 +134,7 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 			<section>
 				<div className="flex items-center gap-2.5 md:gap-3">
 					<div className="flex items-center justify-center rounded-lg shrink-0 w-9 h-9 md:rounded-xl bg-primary/10">
-						<MdDoorSliding className="w-5 h-5 text-primary" />
+						<Icon name="lock" className="w-5 h-5 text-primary" />
 					</div>
 					<div>
 						<h3 className="text-base font-semibold md:text-lg text-content">
@@ -150,7 +148,7 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 
 				{authStatus?.content && (
 					<div className="my-4 alert alert-warning rounded-2xl ring-4 ring-warning/10">
-						<TiWarningOutline className="w-6 h-6" />
+						<Icon name="alert" className="w-6 h-6" />
 						{authStatus.content}
 					</div>
 				)}
@@ -204,7 +202,7 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 					aria-hidden="true"
 					className="flex items-center justify-center rounded-lg shrink-0 w-9 h-9 md:w-10 md:h-10 md:rounded-xl bg-primary/10"
 				>
-					<FiKey className="w-4 h-4 md:w-5 md:h-5 text-primary" />
+					<Icon name="key" className="w-4 h-4 md:w-5 md:h-5 text-primary" />
 				</div>
 
 				<div className="flex-1 min-w-0">
@@ -245,7 +243,10 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 					<span className="transition-all duration-200 group-hover:scale-105">
 						ارسال دوباره کد؟
 					</span>
-					<FiRefreshCw className="w-3.5 h-3.5 md:w-4 md:h-4 transition-all duration-200 group-hover:rotate-180 group-hover:scale-110" />
+					<Icon
+						name="refresh"
+						className="w-3.5 h-3.5 md:w-4 md:h-4 transition-all duration-200 group-hover:rotate-180 group-hover:scale-110"
+					/>
 					{/* TODO: add timer component for resending */}
 				</button>
 				<Button
@@ -271,7 +272,10 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 				aria-label="بازگشت به صفحه ایمیل"
 				className="flex items-center mx-auto gap-1 md:gap-1.5 my-2.5 md:my-3 text-xs md:text-sm font-medium cursor-pointer group text-muted hover:text-primary hover:bg-base-200 px-3 py-1.5 rounded-lg duration-200 active:scale-95"
 			>
-				<FiArrowRight className="w-3.5 h-3.5 md:w-4 md:h-4 transition-all duration-200 group-hover:translate-x-1 group-hover:scale-110" />
+				<Icon
+					name="backRight"
+					className="w-3.5 h-3.5 md:w-4 md:h-4 transition-all duration-200 group-hover:translate-x-1 group-hover:scale-110"
+				/>
 				<span className="transition-all duration-200 group-hover:scale-105">
 					بازگشت
 				</span>
diff --git a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
index 562f77c1..3f95ee73 100644
--- a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { FiLock } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
 import { TextInput } from '@/components/text-input'
@@ -8,6 +7,7 @@ import { useSignIn } from '@/services/hooks/auth/authService.hook'
 import { translateError } from '@/utils/translate-error'
 import InputTextError from './components/input-text-error'
 import { isEmail, isEmpty, isLessThan } from '@/utils/validators'
+import { Icon } from '@/src/icons'
 
 export default function AuthPassword() {
 	const [email, setEmail] = useState('')
@@ -99,7 +99,7 @@ export default function AuthPassword() {
 					aria-hidden="true"
 					className="flex items-center justify-center flex-shrink-0 rounded-lg w-9 h-9 md:w-10 md:h-10 md:rounded-xl bg-primary/10"
 				>
-					<FiLock className="w-4 h-4 md:w-5 md:h-5 text-primary" />
+					<Icon name="lock" className="w-4 h-4 md:w-5 md:h-5 text-primary" />
 				</div>
 				<div>
 					<h3 className="text-base font-semibold md:text-lg text-content">
diff --git a/src/layouts/setting/tabs/account/auth-form/components/login-otp-button.tsx b/src/layouts/setting/tabs/account/auth-form/components/login-otp-button.tsx
index eba2c872..a5690c5b 100644
--- a/src/layouts/setting/tabs/account/auth-form/components/login-otp-button.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/components/login-otp-button.tsx
@@ -1,5 +1,5 @@
 import Analytics from '@/analytics'
-import { FiMail } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 type LoginOtpButtonProps = {
 	setShowPasswordForm: (show: boolean) => void
@@ -17,7 +17,10 @@ const LoginOtpButton: React.FC<LoginOtpButtonProps> = ({ setShowPasswordForm })
 			onClick={handleShowOtpForm}
 			className="group px-4 md:px-8 py-2.5 md:py-3 rounded-2xl text-sm md:text-base font-medium shadow-md hover:shadow-lg w-full flex items-center justify-center border-2 border-content bg-content hover:bg-base-200 transition-all duration-200 gap-1.5 md:gap-2 cursor-pointer active:scale-95 group"
 		>
-			<FiMail className="flex-shrink-0 w-4 h-4 transition-all duration-200 md:w-5 md:h-5 group-hover:scale-110" />
+			<Icon
+				name="mail"
+				className="flex-shrink-0 w-4 h-4 transition-all duration-200 md:w-5 md:h-5 group-hover:scale-110"
+			/>
 			<span className="transition-all duration-200 group-hover:scale-105 whitespace-nowrap text-base-content/80 group-hover:text-base-content">
 				ورود با کد موقت
 			</span>
diff --git a/src/layouts/setting/tabs/account/auth-form/components/login-password.button.tsx b/src/layouts/setting/tabs/account/auth-form/components/login-password.button.tsx
index a1069588..1d61b23c 100644
--- a/src/layouts/setting/tabs/account/auth-form/components/login-password.button.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/components/login-password.button.tsx
@@ -1,5 +1,5 @@
 import Analytics from '@/analytics'
-import { FiLock } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 type LoginPasswordButtonProps = {
 	setShowPasswordForm: (show: boolean) => void
@@ -19,7 +19,10 @@ const LoginPasswordButton: React.FC<LoginPasswordButtonProps> = ({
 			onClick={handleShowPasswordForm}
 			className="group px-4 md:px-8 py-2.5 md:py-3 rounded-2xl text-sm md:text-base font-medium shadow-md hover:shadow-lg w-full flex items-center justify-center border-2 border-content bg-content hover:bg-base-200 transition-all duration-200 gap-1.5 md:gap-2 cursor-pointer active:scale-95 group"
 		>
-			<FiLock className="flex-shrink-0 w-4 h-4 transition-all duration-200 md:w-5 md:h-5 group-hover:scale-110" />
+			<Icon
+				name="lock"
+				className="flex-shrink-0 w-4 h-4 transition-all duration-200 md:w-5 md:h-5 group-hover:scale-110"
+			/>
 			<span className="transition-all duration-200 group-hover:scale-105 whitespace-nowrap text-base-content/80 group-hover:text-base-content">
 				ورود با رمز عبور
 			</span>
diff --git a/src/layouts/setting/tabs/account/components/account-verification-status.tsx b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
index 46119bf1..5cf3e8c3 100644
--- a/src/layouts/setting/tabs/account/components/account-verification-status.tsx
+++ b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
@@ -1,6 +1,6 @@
-import { FiMail } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
 import { SectionPanel } from '@/components/section-panel'
+import { Icon } from '@/src/icons'
 
 interface AccountVerificationStatusProps {
 	sendVerificationMutation: {
@@ -17,7 +17,7 @@ export const AccountVerificationStatus = ({
 		<SectionPanel title="وضعیت تایید حساب" size="xs" delay={0.1}>
 			<div className="flex items-center justify-between p-3 border rounded-2xl bg-warning/10 border-warning/20">
 				<div className="flex items-center gap-3">
-					<FiMail className="text-warning" size={24} />
+					<Icon name="mail" className="text-warning" size={24} />
 					<div>
 						<p className="text-sm font-medium text-warning">
 							⚠️ حساب شما تایید نشده است
@@ -40,7 +40,7 @@ export const AccountVerificationStatus = ({
 						</>
 					) : (
 						<>
-							<FiMail size={16} />
+							<Icon name="mail" size={16} />
 							ارسال ایمیل تایید
 						</>
 					)}
diff --git a/src/layouts/setting/tabs/account/components/interests-selector.tsx b/src/layouts/setting/tabs/account/components/interests-selector.tsx
index c2e9d7ce..95279b37 100644
--- a/src/layouts/setting/tabs/account/components/interests-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/interests-selector.tsx
@@ -2,7 +2,7 @@ import { useState, useRef } from 'react'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import type { ProfileMetaItem } from '@/services/hooks/profile/getProfileMeta.hook'
 import { Button } from '@/components/button/button'
-import { FiCheck } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface InterestsSelectorProps {
 	interests: ProfileMetaItem[]
@@ -73,7 +73,7 @@ export const InterestsSelector = ({
 					size="sm"
 					className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
 				>
-					<FiCheck size={16} className="ml-1" />
+					<Icon name="check" size={16} className="ml-1" />
 					تایید{' '}
 				</Button>
 				<Button
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
index 0e79b5d9..da1762a0 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useEffect, useState } from 'react'
 import JalaliDatePicker from '../profile-date-picker'
 import moment from 'jalali-moment'
 import { SectionPanel } from '@/components/section-panel'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -56,26 +56,11 @@ export function ChangeBirthdayModal({ show, onClose, currentValue }: Prop) {
 					/>
 				</SectionPanel>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-city.tsx b/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
index f2919db9..2205b587 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { SelectCity } from '../../../general/components/select-city'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -32,25 +32,11 @@ export function ChangeCityModal({ show, onClose }: Prop) {
 					<SelectCity size="xs" />
 				</div>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						ذخیره
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					isPending={false}
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
index 837f2abd..0e3c1c19 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
@@ -1,8 +1,8 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { SectionPanel } from '@/components/section-panel'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useState } from 'react'
+import { FooterButtons } from './footer-buttons'
 
 const options = {
 	MALE: {
@@ -83,26 +83,11 @@ export function ChangeGenderModal({ show, onClose, currentValue }: Prop) {
 					</div>
 				</SectionPanel>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
index cef3a592..24e795ee 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useEffect, useState } from 'react'
 import { InterestsSelector } from '../interests-selector'
 import { useGetInterests } from '@/services/hooks/profile/getProfileMeta.hook'
 import { SectionPanel } from '@/components/section-panel'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -76,26 +76,11 @@ export function ChangeInterestsModal({ show, onClose, currentValue }: Prop) {
 					/>
 				</SectionPanel>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-name.tsx b/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
index 4d135407..efc7750c 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
@@ -1,9 +1,9 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { SectionPanel } from '@/components/section-panel'
 import { TextInput } from '@/components/text-input'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useState } from 'react'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -48,26 +48,11 @@ export function ChangeNameModal({ show, onClose, currentValue }: Prop) {
 					/>
 				</SectionPanel>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx b/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
index 75924989..656bf0c4 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
@@ -1,11 +1,11 @@
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useState } from 'react'
 import { OccupationSelector } from '../occupation-selector'
 import { useGetOccupations } from '@/services/hooks/profile/getProfileMeta.hook'
-import { LuBriefcase, LuChevronRight } from 'react-icons/lu'
 import { SectionPanel } from '@/components/section-panel'
+import { Icon } from '@/src/icons'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -53,7 +53,11 @@ export function ChangeOccupationModal({ show, onClose, currentValue }: Prop) {
 						triggerElement={
 							<div className="flex items-center justify-between w-full h-12 p-3 transition-colors border cursor-pointer border-content rounded-xl hover:border-primary/50!">
 								<div className="flex items-center gap-3">
-									<LuBriefcase size={14} className="text-primary" />
+									<Icon
+										name="briefcase"
+										size={14}
+										className="text-primary"
+									/>
 									<span
 										className={`text-sm ${occupation ? 'text-content' : 'text-muted'}`}
 									>
@@ -64,31 +68,21 @@ export function ChangeOccupationModal({ show, onClose, currentValue }: Prop) {
 											: 'انتخاب شغل'}
 									</span>
 								</div>
-								<LuChevronRight size={18} className="text-muted" />
+								<Icon
+									name="chevronRight"
+									size={18}
+									className="text-muted"
+								/>
 							</div>
 						}
 					/>
 				</SectionPanel>
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-username.tsx b/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
index 6f10f708..3a2cd2d7 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
@@ -1,5 +1,4 @@
 import { showToast } from '@/common/toast'
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { SectionPanel } from '@/components/section-panel'
 import { TextInput } from '@/components/text-input'
@@ -9,6 +8,7 @@ import type { UserProfile } from '@/services/hooks/user/userService.hook'
 import { translateError } from '@/utils/translate-error'
 import type { AxiosError } from 'axios'
 import { useState } from 'react'
+import { FooterButtons } from './footer-buttons'
 
 interface Prop {
 	show: boolean
@@ -66,26 +66,11 @@ export function ChangeUsernameModal({ show, onClose, currentValue }: Prop) {
 					/>
 				</SectionPanel>
 
-				<div className="flex gap-2">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateUsernameMutation.isPending}
-						isPrimary={true}
-						onClick={() => onClickSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateUsernameMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						onClick={onCancel}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+				<FooterButtons
+					handleCancel={onCancel}
+					handleConfirm={onClickSave}
+					isPending={updateUsernameMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/edit.avatar.tsx b/src/layouts/setting/tabs/account/components/modals/edit.avatar.tsx
index 00c18baa..a8e44ffc 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit.avatar.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit.avatar.tsx
@@ -1,13 +1,13 @@
 import Analytics from '@/analytics'
 import { showToast } from '@/common/toast'
 import { AvatarComponent } from '@/components/avatar.component'
-import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { SectionPanel } from '@/components/section-panel'
 import { useAuth } from '@/context/auth.context'
 import { useUpdateUserProfile } from '@/services/hooks/auth/authService.hook'
 import { useRef, useState } from 'react'
-import { TbCameraPlus } from 'react-icons/tb'
+import { FooterButtons } from './footer-buttons'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	show: boolean
@@ -66,7 +66,7 @@ export function EditAvatarModal({ show, onClose }: Prop) {
 								className="transition-all cursor-pointer ring-4 ring-primary/5"
 							/>
 						) : (
-							<TbCameraPlus />
+							<Icon name="cameraPlus" />
 						)}
 					</div>
 
@@ -78,27 +78,12 @@ export function EditAvatarModal({ show, onClose }: Prop) {
 						className="hidden"
 					/>
 				</SectionPanel>
-				<div className="flex gap-2 ">
-					<Button
-						size="sm"
-						type="submit"
-						disabled={updateProfileMutation.isPending}
-						isPrimary={true}
-						onClick={() => onSave()}
-						className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
-					>
-						{updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
-					</Button>
-					<Button
-						size="sm"
-						type="button"
-						disabled={updateProfileMutation.isPending}
-						onClick={() => onClose()}
-						className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
-					>
-						انصراف
-					</Button>
-				</div>
+
+				<FooterButtons
+					handleConfirm={onSave}
+					handleCancel={onClose}
+					isPending={updateProfileMutation.isPending}
+				/>
 			</div>
 		</Modal>
 	)
diff --git a/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx b/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx
new file mode 100644
index 00000000..3b3ca329
--- /dev/null
+++ b/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@/components/button/button'
+
+interface Prop {
+	handleConfirm: any
+	handleCancel: any
+	isPending: boolean
+}
+export function FooterButtons({ handleCancel, handleConfirm, isPending }: Prop) {
+	return (
+		<div className="flex gap-2">
+			<Button
+				size="sm"
+				type="submit"
+				disabled={isPending}
+				isPrimary={true}
+				onClick={() => handleConfirm()}
+				className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
+			>
+				{isPending ? 'در حال ذخیره...' : 'ذخیره'}
+			</Button>
+			<Button
+				size="sm"
+				type="button"
+				onClick={() => handleCancel()}
+				className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
+			>
+				انصراف
+			</Button>
+		</div>
+	)
+}
diff --git a/src/layouts/setting/tabs/account/components/occupation-selector.tsx b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
index 8a9cb70e..ac8d8d3a 100644
--- a/src/layouts/setting/tabs/account/components/occupation-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
@@ -2,7 +2,7 @@ import { useState, useRef } from 'react'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import type { ProfileMetaItem } from '@/services/hooks/profile/getProfileMeta.hook'
 import { Button } from '@/components/button/button'
-import { FiCheck } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface OccupationSelectorProps {
 	occupations: ProfileMetaItem[]
@@ -70,7 +70,7 @@ export const OccupationSelector = ({
 					size="sm"
 					className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
 				>
-					<FiCheck size={16} className="ml-1" />
+					<Icon name="check" size={16} className="ml-1" />
 					تایید{' '}
 				</Button>
 				<Button
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
index 4eab16ae..3f3bf919 100644
--- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
@@ -1,8 +1,7 @@
 import { Button } from '@/components/button/button'
 import { ClickableTooltip } from '@/components/clickableTooltip'
+import { Icon } from '@/src/icons'
 import { useRef, useState, useEffect } from 'react'
-import { FiCheck } from 'react-icons/fi'
-import { LuCalendarDays, LuChevronRight } from 'react-icons/lu'
 
 const PERSIAN_MONTHS = [
 	'فروردین',
@@ -112,12 +111,12 @@ export default function JalaliDatePicker({
 					className={`flex items-center justify-between w-full h-12 p-3 transition-colors border  border-content rounded-xl  ${!enable ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary/50! cursor-pointer'}`}
 				>
 					<div className="flex items-center gap-3">
-						<LuCalendarDays size={14} className="text-primary" />
+						<Icon name="calendarDays" size={14} className="text-primary" />
 						<span className={value ? 'text-content' : 'text-muted'}>
 							{value || 'انتخاب تاریخ'}
 						</span>
 					</div>
-					<LuChevronRight size={18} className="text-muted" />
+					<Icon name="chevronRight" size={18} className="text-muted" />
 				</div>
 			</button>
 
@@ -158,7 +157,7 @@ export default function JalaliDatePicker({
 								size="sm"
 								className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
 							>
-								<FiCheck size={16} className="ml-1" />
+								<Icon name="check" size={16} className="ml-1" />
 								تایید{' '}
 							</Button>
 							<Button
diff --git a/src/layouts/setting/tabs/account/components/profile-display.tsx b/src/layouts/setting/tabs/account/components/profile-display.tsx
index 334d881f..ff674400 100644
--- a/src/layouts/setting/tabs/account/components/profile-display.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-display.tsx
@@ -1,7 +1,4 @@
 import moment from 'jalali-moment'
-import { BsGenderAmbiguous } from 'react-icons/bs'
-import { FiCalendar, FiMail, FiPhone, FiUser } from 'react-icons/fi'
-import { LuAtSign, LuBriefcase, LuCamera, LuHeart } from 'react-icons/lu'
 import { AvatarComponent } from '@/components/avatar.component'
 import { Button } from '@/components/button/button'
 import { OfflineIndicator } from '@/components/offline-indicator'
@@ -10,10 +7,7 @@ import type React from 'react'
 import { Chip } from '@/components/chip.component'
 import { AddPhoneModal } from './modals/add-phone.modal'
 import { useAuth } from '@/context/auth.context'
-import { IoMdAddCircle } from 'react-icons/io'
 import Analytics from '@/analytics'
-import { FaTreeCity } from 'react-icons/fa6'
-import { TbEdit } from 'react-icons/tb'
 import { ChangeGenderModal } from './modals/edit-gender'
 import { ChangeBirthdayModal } from './modals/edit-birthday'
 import { ChangeOccupationModal } from './modals/edit-occupation'
@@ -23,6 +17,7 @@ import { ChangeCityModal } from './modals/edit-city'
 import { EditAvatarModal } from './modals/edit.avatar'
 import { AddEmailModal } from './modals/add-email.modal'
 import { ChangeUsernameModal } from './modals/edit-username'
+import { Icon } from '@/src/icons'
 
 const getGenderInfo = (gender: 'MALE' | 'FEMALE' | 'OTHER' | null | undefined) => {
 	if (gender === 'MALE') return { label: 'آقا هستم' }
@@ -90,7 +85,7 @@ export const ProfileDisplay = () => {
 							onClick={() => onClick()}
 							className="absolute p-0.5 cursor-pointer text-white transition-all rounded-full shadow-xl -bottom-1 right-1 bg-primary hover:scale-110 active:scale-95"
 						>
-							<LuCamera size={12} />
+							<Icon name="cameraPlus" size={12} />
 						</button>
 						{showEditBadge('avatar') && (
 							<span className="absolute w-2 h-2 rounded-full right-4 -bottom-0.5 bg-error animate-pulse"></span>
@@ -120,7 +115,7 @@ export const ProfileDisplay = () => {
 
 			<div className="overflow-hidden border border-base-300/50 rounded-2xl bg-base-100/30">
 				<DisplayRow
-					icon={<FiUser className="text-primary" />}
+					icon={<Icon name="user" className="text-primary" />}
 					label="نام و نام خانوادگی"
 					value={user?.name}
 					editable
@@ -130,7 +125,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<LuAtSign className="text-primary/60" />}
+					icon={<Icon name="atSign" className="text-primary/60" />}
 					label="نام کاربری (یوزرنیم)"
 					value={user?.username}
 					editable
@@ -141,7 +136,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<FiMail className="text-secondary" />}
+					icon={<Icon name="mail" className="text-secondary" />}
 					label="ایمیل"
 					value={user?.email}
 					isLtr
@@ -152,7 +147,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<FiPhone className="text-secondary" />}
+					icon={<Icon name="phone" className="text-secondary" />}
 					label="شماره موبایل"
 					value={
 						user?.phone ? (
@@ -164,7 +159,7 @@ export const ProfileDisplay = () => {
 								onClick={() => clickToShow()}
 							>
 								<div className="flex items-center gap-1">
-									<IoMdAddCircle />
+									<Icon name="outlineAddCircle" />
 									افزودن شماره موبایل
 								</div>
 							</Button>
@@ -177,7 +172,7 @@ export const ProfileDisplay = () => {
 				<DisplayRow
 					icon={
 						<div className="text-accent">
-							<BsGenderAmbiguous />
+							<Icon name="gender" />
 						</div>
 					}
 					label="جنسیت"
@@ -190,7 +185,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<FiCalendar className="text-warning" />}
+					icon={<Icon name="calendar" className="text-warning" />}
 					label="تاریخ تولد"
 					value={formatJalaliDate(user?.birthDate)}
 					showBadge={showEditBadge('birthDate')}
@@ -201,7 +196,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<LuBriefcase className="text-info" />}
+					icon={<Icon name="briefcase" className="text-info" />}
 					label="شغل"
 					value={user?.occupation?.label}
 					showBadge={showEditBadge('occupation')}
@@ -212,7 +207,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<LuHeart className="text-error" />}
+					icon={<Icon name="outlineHeart" className="text-error" />}
 					label="علایق"
 					editable
 					value={
@@ -236,7 +231,7 @@ export const ProfileDisplay = () => {
 				/>
 
 				<DisplayRow
-					icon={<FaTreeCity className="text-primary/50" />}
+					icon={<Icon name="treeCity" className="text-primary/50" />}
 					label="شهر"
 					value={user?.city?.name || '-'}
 					showBadge={showEditBadge('city')}
@@ -321,7 +316,7 @@ const DisplayRow = ({
 						className="absolute p-1 -translate-y-1/2 cursor-pointer text-muted -right-4 top-1/2 active:scale-95"
 						onClick={onClickEdit}
 					>
-						<TbEdit />
+						<Icon name="edit" />
 					</div>
 				)}
 			</div>
diff --git a/src/layouts/setting/tabs/account/components/remove-button.tsx b/src/layouts/setting/tabs/account/components/remove-button.tsx
deleted file mode 100644
index 7eaffbdb..00000000
--- a/src/layouts/setting/tabs/account/components/remove-button.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Tooltip from '@/components/toolTip'
-import type { Friend } from '@/services/hooks/friends/friendService.hook'
-import { FiUserX } from 'react-icons/fi'
-
-type Props = {
-	type: 'REMOVE' | 'REJECT'
-	friend: Friend
-	onClick: (friendId: string) => void
-	disabled?: boolean
-}
-export function RemoveFriendButton({ type, friend, onClick, disabled }: Props) {
-	return (
-		<Tooltip content={type === 'REMOVE' ? 'حذف دوست' : 'رد درخواست دوستی'}>
-			<button
-				onClick={() => onClick(friend.id)}
-				disabled={disabled}
-				className="p-2 mr-2 text-red-500 rounded-lg cursor-pointer hover:bg-red-50 dark:hover:bg-red-900/20"
-			>
-				<FiUserX size={18} />
-			</button>
-		</Tooltip>
-	)
-}
diff --git a/src/layouts/setting/tabs/account/tabs/connection/connectionsTab.tsx b/src/layouts/setting/tabs/account/tabs/connection/connectionsTab.tsx
index 87c62b2c..d87cddeb 100644
--- a/src/layouts/setting/tabs/account/tabs/connection/connectionsTab.tsx
+++ b/src/layouts/setting/tabs/account/tabs/connection/connectionsTab.tsx
@@ -1,6 +1,6 @@
-import { FiInfo } from 'react-icons/fi'
 import { SectionPanel } from '@/components/section-panel'
 import { Connections } from '../user-profile/connections/connections'
+import { Icon } from '@/src/icons'
 
 export const ConnectionPlatformsTab = () => {
 	return (
@@ -9,7 +9,7 @@ export const ConnectionPlatformsTab = () => {
 				<div className="relative p-2 border rounded-2xl bg-base-200/40 border-base-300/40">
 					<div className="flex items-start gap-3">
 						<div className="flex items-center justify-center w-8 h-8 rounded-xl bg-primary/10 shrink-0">
-							<FiInfo className="w-4 h-4 text-primary" />
+							<Icon name="info" className="w-4 h-4 text-primary" />
 						</div>
 
 						<p className="text-xs leading-6 text-base-content/80">
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx b/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
index f258aa32..c1514ef5 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
@@ -1,27 +1,13 @@
-import { BiLinkExternal } from 'react-icons/bi'
-import { FaExternalLinkAlt } from 'react-icons/fa'
-import { FiBookmark, FiCheck, FiStar, FiTarget, FiUser, FiUserPlus } from 'react-icons/fi'
 import { ConfigKey } from '@/common/constant/config.key'
 import { SectionPanel } from '@/components/section-panel'
 import type { Task } from '@/services/hooks/user/referralsService.hook'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	tasks: Task[]
 	isLoading: boolean
 }
 
-const getTaskIcon = (iconName: string) => {
-	const iconMap: Record<string, any> = {
-		'user-plus': FiUserPlus,
-		user: FiUser,
-		bookmark: FiBookmark,
-		star: FiStar,
-		target: FiTarget,
-	}
-
-	return iconMap[iconName] || FiTarget
-}
-
 export function RewardTasks({ tasks, isLoading }: Prop) {
 	return (
 		<SectionPanel title={'ماموریت‌ها'} size="xs">
@@ -33,7 +19,6 @@ export function RewardTasks({ tasks, isLoading }: Prop) {
 					</div>
 				) : tasks.length > 0 ? (
 					tasks.map((taskItem, index) => {
-						const IconComponent = getTaskIcon(taskItem.icon)
 						return (
 							<div
 								key={index}
@@ -54,11 +39,17 @@ export function RewardTasks({ tasks, isLoading }: Prop) {
 										>
 											{taskItem.isDone ? (
 												<div className="relative">
-													<FiCheck className="w-5 h-5 text-white drop-shadow-lg" />
+													<Icon
+														name="check"
+														className="w-5 h-5 text-white drop-shadow-lg"
+													/>
 													<div className="absolute inset-0 rounded-full bg-white/20 animate-ping"></div>
 												</div>
 											) : (
-												<IconComponent className="w-5 h-5 text-white" />
+												<Icon
+													name="target"
+													className="w-5 h-5 text-white"
+												/>
 											)}
 										</div>
 										<div className="flex-1 min-w-0">
@@ -80,7 +71,10 @@ export function RewardTasks({ tasks, isLoading }: Prop) {
 															rel="noopener noreferrer"
 															className="inline-flex items-center px-3 py-1 text-xs font-medium transition-all duration-200 rounded-lg bg-primary/10 text-primary hover:bg-primary/20"
 														>
-															<BiLinkExternal className="w-3.5 h-3.5 ml-2" />
+															<Icon
+																name="externalLink"
+																className="w-3.5 h-3.5 ml-2"
+															/>
 															{taskItem.button.label}
 														</a>
 													)}
@@ -117,7 +111,7 @@ export function RewardTasks({ tasks, isLoading }: Prop) {
 				) : (
 					<div className="py-12 text-center">
 						<div className="relative flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-base-200 to-base-300">
-							<FiCheck className="w-8 h-8 text-muted" />
+							<Icon name="check" className="w-8 h-8 text-muted" />
 							<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-transparent to-white/5"></div>
 						</div>
 						<p className="text-sm font-medium text-muted">
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/rewardsTab.tsx b/src/layouts/setting/tabs/account/tabs/rewards/rewardsTab.tsx
index f73c9040..8c37102f 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/rewardsTab.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/rewardsTab.tsx
@@ -1,4 +1,3 @@
-import { FiInfo } from 'react-icons/fi'
 import { ConfigKey } from '@/common/constant/config.key'
 import { SectionPanel } from '@/components/section-panel'
 import { useGetReferrals } from '@/services/hooks/user/referralsService.hook'
@@ -6,6 +5,7 @@ import { ReferralCodeSection } from './components/ReferralCodeSection'
 import { RewardTasks } from './components/tasks'
 import { RequireVerification } from '@/components/auth/require-verification'
 import { useAuth } from '@/context/auth.context'
+import { Icon } from '@/src/icons'
 
 export const RewardsTab = () => {
 	const { user } = useAuth()
@@ -36,7 +36,10 @@ export const RewardsTab = () => {
 				>
 					<div className="p-2 border rounded-2xl bg-gradient-to-br from-primary/5 to-purple-500/5 border-primary/20">
 						<div className="flex items-start gap-3">
-							<FiInfo className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
+							<Icon
+								name="info"
+								className="w-5 h-5 text-primary mt-0.5 flex-shrink-0"
+							/>
 							<div className="flex-1">
 								<p className="mb-2 text-sm font-medium text-content">
 									ویج‌کوین، سکه ویژه ویجتیفای است که می‌توانید آن را
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/platform-data.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/platform-data.tsx
index 36f0b86e..6f10c2f6 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/platform-data.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/platform-data.tsx
@@ -1,4 +1,3 @@
-import { FaGithub } from 'react-icons/fa'
 import type { Platform } from './platform-config'
 import GoogleCalendar from '@/assets/google-calendar.png'
 
@@ -23,14 +22,4 @@ export const PLATFORM_CONFIGS: Omit<Platform, 'connected' | 'isLoading'>[] = [
 		permissions: ['مشاهده تقویم (سرویس گوگل کلندر)'],
 		isOptionalPermissions: true,
 	},
-	{
-		id: 'github',
-		name: 'گیت‌هاب',
-		description: 'اتصال به گیت‌هاب برای مشاهده مخازن، کامیت‌ها و فعالیت‌های پروژه',
-		bgColor: 'bg-gray-800',
-		isActive: false,
-		icon: <FaGithub size={20} className="text-white" />,
-		features: [],
-		permissions: [],
-	},
 ]
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
index 2f1b2640..ff9607bf 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from 'react'
-import { FiLogOut } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
 import { SectionPanel } from '@/components/section-panel'
 import { useAuth } from '@/context/auth.context'
@@ -14,6 +13,7 @@ import { ReferralCodeSection } from '../rewards/components/ReferralCodeSection'
 import { showToast } from '@/common/toast'
 import { translateError } from '@/utils/translate-error'
 import { ConfirmationModal } from '@/components/modal/confirmation-modal'
+import { Icon } from '@/src/icons'
 
 export const UserProfile = () => {
 	const { logout } = useAuth()
@@ -74,7 +74,7 @@ export const UserProfile = () => {
 					className="text-white/90 btn-error"
 					size="md"
 				>
-					<FiLogOut size={16} />
+					<Icon name="logOut" size={16} />
 					خروج از حساب کاربری
 				</Button>
 			</div>
@@ -108,7 +108,7 @@ export const UserProfile = () => {
 						className="text-white/90 btn-error rounded-2xl"
 						size="md"
 					>
-						<FiLogOut size={16} />
+						<Icon name="logOut" size={16} />
 						خروج از حساب کاربری
 					</Button>{' '}
 				</div>
diff --git a/src/layouts/setting/tabs/appearance/components/browserTitle-selector.tsx b/src/layouts/setting/tabs/appearance/components/browserTitle-selector.tsx
index aa2b7916..95832dbc 100644
--- a/src/layouts/setting/tabs/appearance/components/browserTitle-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/browserTitle-selector.tsx
@@ -1,6 +1,5 @@
 import type { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
-import { FiShoppingBag } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
@@ -12,6 +11,7 @@ import { useChangeBrowserTitle } from '@/services/hooks/extension/updateSetting.
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
 import { translateError } from '@/utils/translate-error'
 import { showToast } from '@/common/toast'
+import { Icon } from '@/src/icons'
 
 interface BrowserTitle {
 	id: string
@@ -116,7 +116,7 @@ export function BrowserTitleSelector({ fetched_browserTitles, isAuthenticated }:
 						className="flex items-center justify-center w-full h-20 text-xs border border-content border-muted gap-0.5  text-muted hover:!text-primary cursor-pointer hover:!border-primary transition-all duration-200  rounded-xl"
 						onClick={() => handleMoreClick()}
 					>
-						<FiShoppingBag size={18} />
+						<Icon name="shoppingBag" size={18} />
 						<span>فروشگاه</span>
 					</div>
 				</div>
diff --git a/src/layouts/setting/tabs/appearance/components/font-selector.tsx b/src/layouts/setting/tabs/appearance/components/font-selector.tsx
index 60e05590..f5e0bc1b 100644
--- a/src/layouts/setting/tabs/appearance/components/font-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/font-selector.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
-import { FiShoppingBag } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import { ItemSelector } from '@/components/item-selector'
 import { SectionPanel } from '@/components/section-panel'
 import { useAppearanceSetting } from '@/context/appearance.context'
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
+import { Icon } from '@/src/icons'
 
 interface FontItem {
 	label: string
@@ -88,7 +88,7 @@ export function FontSelector({ fetched_fonts }: FontSelectorProps) {
 						className="flex items-center justify-center w-full h-20 text-xs border border-content border-muted gap-0.5 text-muted hover:!text-primary cursor-pointer hover:!border-primary transition-all duration-200 rounded-xl"
 						onClick={() => handleMoreClick()}
 					>
-						<FiShoppingBag size={18} />
+						<Icon name="shoppingBag" size={18} />
 						<span>فروشگاه</span>
 					</div>
 				</div>
diff --git a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
index 91ce2aa7..dde4cedb 100644
--- a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
@@ -1,19 +1,16 @@
 import type React from 'react'
 import { useEffect, useState } from 'react'
-import { FiShoppingBag } from 'react-icons/fi'
-import { IoMdMoon, IoMdStar, IoMdSunny } from 'react-icons/io'
-import { MdOutlineBlurOn } from 'react-icons/md'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import { ItemSelector } from '@/components/item-selector'
 import { SectionPanel } from '@/components/section-panel'
 import { useTheme } from '@/context/theme.context'
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
+import { Icon } from '@/src/icons'
 
 interface ThemeItem {
 	id: string
 	name: string
-	icon: React.ReactElement
 	description?: string
 }
 
@@ -21,31 +18,26 @@ const defaultThemes: ThemeItem[] = [
 	{
 		id: 'light',
 		name: 'روشن',
-		icon: <IoMdSunny size={14} />,
 		description: 'تم کلاسیک روشن',
 	},
 	{
 		id: 'dark',
 		name: 'تیره',
-		icon: <IoMdMoon size={14} />,
 		description: 'تم کلاسیک تیره',
 	},
 	{
 		id: 'glass',
 		name: 'شیشه‌ای',
-		icon: <MdOutlineBlurOn size={14} />,
 		description: 'تم شفاف با افکت شیشه‌ای',
 	},
 	{
 		id: 'icy',
 		name: 'یخی',
-		icon: <MdOutlineBlurOn size={14} />,
 		description: 'تم سفید شفاف با حالت یخی',
 	},
 	{
 		id: 'zarna',
 		name: 'زرنا',
-		icon: <IoMdStar size={14} />,
 		description: 'تم زرنا با رنگ‌های گرم',
 	},
 ]
@@ -77,7 +69,6 @@ export function ThemeSelector({ fetched_themes }: Props) {
 			const mapped: ThemeItem[] = fetched_themes.map((item) => ({
 				id: item.value,
 				name: item.name ?? 'بدون نام',
-				icon: <IoMdStar size={14} />,
 				description: item?.description || 'تم خریداری شده',
 			}))
 			setThemes([...defaultThemes, ...mapped])
@@ -104,10 +95,10 @@ export function ThemeSelector({ fetched_themes }: Props) {
 						/>
 					))}
 					<div
-						className="flex items-center justify-center w-full h-10 text-xs border border-content border-muted gap-0.5 text-muted hover:!text-primary cursor-pointer hover:!border-primary transition-all duration-200 rounded-xl"
+						className="flex items-center gap-1 justify-center w-full h-full text-xs border border-content border-muted   text-muted hover:text-primary! cursor-pointer hover:border-primary! transition-all duration-200 rounded-xl"
 						onClick={() => handleMoreClick()}
 					>
-						<FiShoppingBag size={18} />
+						<Icon name="shoppingBag" size={18} />
 						<span>فروشگاه</span>
 					</div>
 				</div>
diff --git a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx b/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
index 0df31271..e701eeeb 100644
--- a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
@@ -1,7 +1,7 @@
 import { ItemSelector } from '@/components/item-selector'
 import { SectionPanel } from '@/components/section-panel'
-import { LuLayers, LuLayoutTemplate } from 'react-icons/lu'
 import { useAppearanceSetting } from '@/context/appearance.context'
+import { Icon } from '@/src/icons'
 
 export function UISelector() {
 	const { setUI, ui } = useAppearanceSetting()
@@ -34,7 +34,11 @@ export function UISelector() {
 						onClick={() => onClick('ADVANCED')}
 						label={
 							<div className="flex items-center gap-2">
-								<LuLayers size={16} className="text-primary/80" />
+								<Icon
+									name="advanced_ui"
+									size={16}
+									className="text-primary/80"
+								/>
 								<span> پیشفرض</span>
 							</div>
 						}
@@ -45,7 +49,11 @@ export function UISelector() {
 						onClick={() => onClick('SIMPLE')}
 						label={
 							<div className="flex items-center gap-2">
-								<LuLayoutTemplate size={16} className="text-primary/80" />
+								<Icon
+									name="simple_ui"
+									size={16}
+									className="text-primary/80"
+								/>
 								<span>ساده و خلوت</span>
 							</div>
 						}
diff --git a/src/layouts/setting/tabs/general/components/select-city.tsx b/src/layouts/setting/tabs/general/components/select-city.tsx
index b5be64aa..cddea537 100644
--- a/src/layouts/setting/tabs/general/components/select-city.tsx
+++ b/src/layouts/setting/tabs/general/components/select-city.tsx
@@ -1,5 +1,4 @@
 import { useState, useMemo } from 'react'
-import { CiLocationOn } from 'react-icons/ci'
 import Analytics from '@/analytics'
 import { IconLoading } from '@/components/loading/icon-loading'
 import Modal from '@/components/modal'
@@ -11,6 +10,7 @@ import { useSetCity } from '@/services/hooks/user/userService.hook'
 import { TextInput } from '@/components/text-input'
 import { showToast } from '@/common/toast'
 import { translateError } from '@/utils/translate-error'
+import { Icon } from '@/src/icons'
 
 interface SelectedCity {
 	city: string
@@ -98,7 +98,7 @@ export function SelectCity({ size }: Prop) {
 					{isSettingCity ? (
 						<IconLoading />
 					) : (
-						<CiLocationOn className="w-5 h-5 text-primary" />
+						<Icon name="location" className="w-5 h-5 text-primary" />
 					)}
 				</button>
 
@@ -139,7 +139,10 @@ export function SelectCity({ size }: Prop) {
 							ref={searchInputRef}
 							onChange={(value) => setSearchTerm(value)}
 						/>
-						<CiLocationOn className="absolute w-5 h-5 transform -translate-y-1/2 left-3 top-1/2 text-base-content/40" />
+						<Icon
+							name="location"
+							className="absolute w-5 h-5 transform -translate-y-1/2 left-3 top-1/2 text-base-content/40"
+						/>
 					</div>
 
 					<div className="overflow-y-auto min-h-52 max-h-52 custom-scrollbar">
@@ -155,7 +158,10 @@ export function SelectCity({ size }: Prop) {
 									onClick={() => handleSelectCity(city)}
 									className="flex items-center w-full p-3 text-right transition-all duration-200 border-b cursor-pointer border-base-200/30 last:border-b-0 group rounded-2xl hover:bg-primary/20 hover:text-primary"
 								>
-									<CiLocationOn className="flex-shrink-0 w-5 h-5 ml-3 transition-transform text-primary group-hover:scale-110" />
+									<Icon
+										name="location"
+										className="flex-shrink-0 w-5 h-5 ml-3 transition-transform text-primary group-hover:scale-110"
+									/>
 									<span className="flex-1 font-medium">
 										{city.city}
 									</span>
diff --git a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
index 51d33088..0ddf24d9 100644
--- a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
@@ -1,9 +1,9 @@
 import { useRef } from 'react'
-import { FiEdit, FiUploadCloud } from 'react-icons/fi'
 import type { Wallpaper } from '@/common/wallpaper.interface'
 import { Button } from '@/components/button/button'
 import { useWallpaperUpload } from '../hooks/use-wallpaper-upload'
 import { MediaPreview } from './media-preview.component'
+import { Icon } from '@/src/icons'
 
 interface UploadAreaProps {
 	customWallpaper: Wallpaper | null
@@ -39,7 +39,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 					className="flex items-center justify-center w-full gap-2 p-4 cursor-pointer"
 					onClick={handleFileSelect}
 				>
-					<FiUploadCloud size={18} className={'text-content'} />
+					<Icon name="uploadImage" size={18} className={'text-content'} />
 					<p className={'text-sm font-medium text-content'}>
 						برای آپلود از سیستم کلیک کنید
 					</p>
@@ -80,7 +80,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 
 				<div className="flex gap-2">
 					<Button onClick={() => handleFileSelect()} size="sm">
-						<FiEdit size={14} />
+						<Icon name="edit" size={14} />
 						<span>تغییر</span>
 					</Button>
 				</div>
diff --git a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
index abc2fefa..86a6744b 100644
--- a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
+++ b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
@@ -1,4 +1,4 @@
-import { FiFolder } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface CategoryFolderProps {
 	id: string
@@ -19,7 +19,7 @@ export function CategoryFolder({
 			className="flex flex-col h-32 px-2 py-1 transition-all border cursor-pointer rounded-2xl bg-content border-content max-h-32 hover:border-primary/20! active:scale-98"
 		>
 			<div className="flex items-center gap-2 mb-2">
-				<FiFolder className="text-base-content/10" size={12} />
+				<Icon name="folder" className="text-base-content/10" size={12} />
 				<p className="font-medium truncate text-muted">{name}</p>
 			</div>
 
@@ -42,7 +42,7 @@ export function CategoryFolder({
 					</div>
 				) : (
 					<div className="flex flex-col items-center justify-center h-full rounded">
-						<FiFolder className="mb-2 text-content/40" size={32} />
+						<Icon name="folder" className="mb-2 text-content/40" size={32} />
 						<p className="text-xs text-gray-400">بدون تصویر</p>
 					</div>
 				)}
diff --git a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
index 49082f7a..c342a326 100644
--- a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
+++ b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { FiCheck, FiEye, FiHeart, FiPlay, FiShoppingBag } from 'react-icons/fi'
 import type { Wallpaper } from '@/common/wallpaper.interface'
 import { UserCoin } from '@/layouts/setting/tabs/account/components/user-coin'
 import { CoinPurchaseModal } from '@/layouts/setting/tabs/wallpapers/components/coin-purchase-modal'
 import { useLazyLoad } from '../../../../hooks/use-lazy-load'
-import { LuLayers, LuLayoutTemplate } from 'react-icons/lu'
 import Tooltip from '@/components/toolTip'
 import { HoverPlayVideo } from '../hover-play-video'
+import { Icon } from '@/src/icons'
 
 interface WallpaperItemProps {
 	wallpaper: Wallpaper
@@ -96,7 +95,7 @@ function WallpaperItemFu({
 				)}
 				{error && (
 					<div className="flex flex-col items-center justify-center w-full h-full bg-red-500/10">
-						<FiHeart className="text-red-400" />
+						<Icon name="outlineHeart" className="text-red-400" />
 						<p className="mt-2 text-xs text-gray-400">خطا در بارگذاری</p>
 					</div>
 				)}
@@ -164,12 +163,17 @@ function WallpaperItemFu({
 									}
 								>
 									{wallpaper.extensionUI === 'SIMPLE' ? (
-										<LuLayoutTemplate
+										<Icon
+											name="simple_ui"
 											size={14}
 											className="text-white/80"
 										/>
 									) : (
-										<LuLayers size={14} className="text-white/80" />
+										<Icon
+											name="advanced_ui"
+											size={14}
+											className="text-white/80"
+										/>
 									)}
 								</Tooltip>
 							</div>
@@ -177,20 +181,20 @@ function WallpaperItemFu({
 
 						{isSelected && (
 							<div className="absolute p-1 text-white rounded-full shadow-sm top-2 left-2 bg-primary/80">
-								<FiCheck size={12} />
+								<Icon name="check" size={12} />
 							</div>
 						)}
 
 						{!isSelected && wallpaper.isOwned && (
 							<div className="absolute flex gap-0.5 px-1 rounded-tl-xl rounded-r-md bg-success text-success-content shadow-sm  items-center top-0 left-0 w-max h-4">
-								<FiShoppingBag size={10} />
+								<Icon name="shoppingBag" size={10} />
 								<span className="text-[10px]! font-normal">باز شده</span>
 							</div>
 						)}
 
 						{isAnimated && (
 							<div className="absolute flex gap-0.5 px-1 rounded-t-none rounded-b-lg bg-info text-info-content shadow-sm  items-center top-0 right-0 m- inset-x-0 m-auto w-max h-4">
-								<FiPlay size={12} />
+								<Icon name="play" size={12} />
 								<span className="text-[10px]! font-normal">متحرک</span>
 							</div>
 						)}
@@ -205,7 +209,7 @@ function WallpaperItemFu({
 								}}
 								className="absolute bottom-1.5 right-1.5 flex items-center gap-1 px-2 py-1 rounded-lg bg-black/60 border border-white/10 text-white/80 hover:text-white transition-colors text-[10px] font-medium backdrop-blur-sm cursor-pointer opacity-0 group-hover:opacity-100"
 							>
-								<FiEye size={10} />
+								<Icon name="outlineEye" size={10} />
 								<span>پیش‌نمایش</span>
 							</button>
 						)}
diff --git a/src/layouts/simplify/tools-simplify.tsx b/src/layouts/simplify/tools-simplify.tsx
index 39b20b48..a6e71e4d 100644
--- a/src/layouts/simplify/tools-simplify.tsx
+++ b/src/layouts/simplify/tools-simplify.tsx
@@ -1,17 +1,11 @@
 import Analytics from '@/analytics'
 import { WidgetContainer } from '../widgets/widget-container'
 import { TabNavigation } from '@/components/tab-navigation'
-import {
-	HiOutlineCheckCircle,
-	HiOutlineDocumentText,
-	HiOutlineNewspaper,
-} from 'react-icons/hi2'
-import { MdOutlineCalendarMonth, MdOutlineNetworkWifi, MdPets } from 'react-icons/md'
-import { HiOutlineCurrencyBangladeshi } from 'react-icons/hi'
 import React, { useState, Suspense } from 'react'
 import { DateProvider } from '@/context/date.context'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { TodosLayout } from '../widgets/todos/todos'
+import { Icon } from '@/src/icons'
 
 const Calendar = React.lazy(() =>
 	import('./widgets/calendar-simplify').then((module) => ({
@@ -47,38 +41,38 @@ const tabs = [
 	{
 		id: 'todos',
 		label: 'تسک ها',
-		icon: <HiOutlineCheckCircle />,
+		icon: <Icon name="taskList" />,
 		element: TodosLayout,
 	},
 	{
 		id: 'notes',
 		label: 'یادداشت',
-		icon: <HiOutlineDocumentText />,
+		icon: <Icon name="notebook" />,
 		element: NotesLayout,
 	},
 	{
 		id: 'calendar',
 		label: 'تقویم',
-		icon: <MdOutlineCalendarMonth />,
+		icon: <Icon name="calendar" />,
 		element: Calendar,
 	},
 
 	{
 		id: 'currency',
 		label: 'ارزها',
-		icon: <HiOutlineCurrencyBangladeshi />,
+		icon: <Icon name="currency" />,
 		element: ArzSimplify,
 	},
 	{
 		id: 'news',
 		label: 'اخبار',
-		icon: <HiOutlineNewspaper />,
+		icon: <Icon name="outlineNewspaper" />,
 		element: NewsSimplify,
 	},
 	{
 		id: 'network',
 		label: 'شبکه',
-		icon: <MdOutlineNetworkWifi />,
+		icon: <Icon name="network" />,
 		element: NetworkSimplify,
 	},
 ]
diff --git a/src/layouts/simplify/widgets/calendar-simplify.tsx b/src/layouts/simplify/widgets/calendar-simplify.tsx
index 8f3354bf..24efe925 100644
--- a/src/layouts/simplify/widgets/calendar-simplify.tsx
+++ b/src/layouts/simplify/widgets/calendar-simplify.tsx
@@ -3,7 +3,7 @@ import { CalendarGrid } from '../../widgets/calendar/components/calendar-grid'
 import { useDate } from '@/context/date.context'
 import Analytics from '@/analytics'
 import { GoogleCalendarView } from '@/layouts/widgets/calendar/components/google-calendar/google-calendar-view'
-import { BiCalendar, BiLogoGoogle } from 'react-icons/bi'
+import { Icon } from '@/src/icons'
 
 export function SimplifyCalendar() {
 	const { currentDate, selectedDate, setCurrentDate, setSelectedDate, goToToday } =
@@ -68,7 +68,7 @@ const CalendarTabSelector: React.FC<CalendarTabSelectorProps> = ({
 							: 'text-base-content/60 hover:text-base-content'
 					}`}
 			>
-				<BiCalendar size={12} />
+				<Icon name="calendar" size={12} />
 				<span>تقویم</span>
 			</button>
 
@@ -81,7 +81,7 @@ const CalendarTabSelector: React.FC<CalendarTabSelectorProps> = ({
 							: 'text-base-content/60 hover:text-base-content'
 					}`}
 			>
-				<BiLogoGoogle size={12} />
+				<Icon name="googleCalendar" size={12} />
 				<span>گوگل‌کلندر</span>
 			</button>
 		</div>
diff --git a/src/layouts/simplify/widgets/news-simplify.tsx b/src/layouts/simplify/widgets/news-simplify.tsx
index 0bd9921f..57b219c0 100644
--- a/src/layouts/simplify/widgets/news-simplify.tsx
+++ b/src/layouts/simplify/widgets/news-simplify.tsx
@@ -2,7 +2,7 @@ import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
 import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { NewsLayout } from '@/layouts/widgets/news/news.layout'
-import { FaGear } from 'react-icons/fa6'
+import { Icon } from '@/src/icons'
 
 export function NewsSimplify() {
 	const onClick = () => {
@@ -18,7 +18,7 @@ export function NewsSimplify() {
 					size="xs"
 					className="absolute left-0 flex items-center justify-center w-6 h-6 p-0 rounded-full"
 				>
-					<FaGear size={12} className="text-muted" />
+					<Icon name="settings" size={12} className="text-muted" />
 				</Button>
 			</div>
 
diff --git a/src/layouts/widgetify-card/daily-mood.tsx b/src/layouts/widgetify-card/daily-mood.tsx
index 64cf2227..e92a2b7e 100644
--- a/src/layouts/widgetify-card/daily-mood.tsx
+++ b/src/layouts/widgetify-card/daily-mood.tsx
@@ -9,10 +9,9 @@ import {
 	type MoodType,
 	useUpsertMoodLog,
 } from '@/services/hooks/moodLog/upsert-moodLog.hook'
-import { translateError } from '@/utils/translate-error'
+import { Icon } from '@/src/icons'
 import { useIsMutating, useQueryClient } from '@tanstack/react-query'
 import type { AxiosError } from 'axios'
-import { HiXMark } from 'react-icons/hi2'
 
 export function DailyMoodNotification() {
 	const queryClient = useQueryClient()
@@ -90,7 +89,7 @@ export function DailyMoodNotification() {
 							onRemoveNotif()
 						}}
 					>
-						<HiXMark size={14} />
+						<Icon name="close" size={14} />
 					</button>
 				</div>
 				<div className="flex justify-around w-full h-10 gap-1 mt-2">
diff --git a/src/layouts/widgetify-card/notification-center/components/notification-item.tsx b/src/layouts/widgetify-card/notification-center/components/notification-item.tsx
index e3ddab49..b8586c0e 100644
--- a/src/layouts/widgetify-card/notification-center/components/notification-item.tsx
+++ b/src/layouts/widgetify-card/notification-center/components/notification-item.tsx
@@ -1,8 +1,8 @@
 import { callEvent } from '@/common/utils/call-event'
-import { HiChevronDown, HiXMark } from 'react-icons/hi2'
 import { useState } from 'react'
 import Analytics from '@/analytics'
 import type { NotificationItem } from '@/services/hooks/extension/getNotifications.hook'
+import { Icon } from '@/src/icons'
 
 interface NotificationItemProps {
 	onClose(e: any, id: string): any
@@ -145,7 +145,8 @@ export function NotificationCardItem(prop: NotificationItemProps) {
 								className="mt-1 flex items-center gap-1 border border-base-content/4 rounded-xl px-1 hover:border-base-content/10 text-[10px] font-light text-muted hover:underline cursor-pointer"
 							>
 								{isExpanded ? 'نمایش کمتر' : 'مشاهده بیشتر'}
-								<HiChevronDown
+								<Icon
+									name="chevronDown"
 									className={`transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
 									size={12}
 								/>
@@ -173,7 +174,7 @@ export function NotificationCardItem(prop: NotificationItemProps) {
 						prop?.onClose(e, id)
 					}}
 				>
-					<HiXMark size={14} />
+					<Icon name="close" size={14} />
 				</button>
 			)}
 		</Wrapper>
diff --git a/src/layouts/widgetify-card/profile-progress.tsx b/src/layouts/widgetify-card/profile-progress.tsx
index a216ad3b..f9d690e2 100644
--- a/src/layouts/widgetify-card/profile-progress.tsx
+++ b/src/layouts/widgetify-card/profile-progress.tsx
@@ -1,7 +1,7 @@
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
-import { HiXMark } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 export function ProfileProgressNotification() {
 	const { profilePercentage } = useAuth()
@@ -37,7 +37,7 @@ export function ProfileProgressNotification() {
 						onRemoveNotif()
 					}}
 				>
-					<HiXMark size={14} />
+					<Icon name="close" size={14} />
 				</button>
 			</div>
 		</div>
diff --git a/src/layouts/widgets-settings/widget-settings-modal.tsx b/src/layouts/widgets-settings/widget-settings-modal.tsx
index ab6cecff..833e13a7 100644
--- a/src/layouts/widgets-settings/widget-settings-modal.tsx
+++ b/src/layouts/widgets-settings/widget-settings-modal.tsx
@@ -1,12 +1,7 @@
-import type { JSX } from 'react'
-import { MdPets } from 'react-icons/md'
-import { TbApps, TbCalendarUser, TbCurrencyDollar, TbNews } from 'react-icons/tb'
-import { TiWeatherCloudy } from 'react-icons/ti'
-import { VscSettings } from 'react-icons/vsc'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
-import { TabItem, TabManager } from '@/components/tab-manager'
+import { type TabItem, TabManager } from '@/components/tab-manager'
 import { PetSettings } from '../widgetify-card/pets/setting/pet-setting'
 import { RssFeedSetting } from '../widgets/news/rss-feed-setting'
 import { WeatherSetting } from '../widgets/weather/weather-setting'
@@ -14,6 +9,7 @@ import { WigiArzSetting } from '../widgets/wigiArz/wigiArz-setting'
 import { WigiPadSetting } from '../widgets/wigiPad/wigiPad-setting'
 import { WidgetTabKeys } from './constant/tab-keys'
 import { ManageWidgets } from './manage-widgets/manage-widgets'
+import { Icon } from '@/src/icons'
 
 interface WidgetSettingsModalProps {
 	isOpen: boolean
@@ -28,36 +24,36 @@ const tabs: TabItem[] = [
 				label: 'مدیریت ویجت ها',
 				element: <ManageWidgets />,
 				value: WidgetTabKeys.widget_management,
-				icon: <TbApps size={20} />,
+				icon: <Icon name="appsPlus" size={20} />,
 			},
 			{
 				label: 'ویجی پد',
 				element: <WigiPadSetting />,
 				value: WidgetTabKeys.wigiPad,
-				icon: <TbCalendarUser size={20} />,
+				icon: <Icon name="wigiPad" size={20} />,
 			},
 			{
 				label: 'ویجی ارز',
 				element: <WigiArzSetting />,
 				value: WidgetTabKeys.wigiArz,
-				icon: <TbCurrencyDollar size={20} />,
+				icon: <Icon name="currency" size={20} />,
 			},
 			{
 				label: 'ویجی نیوز',
 				element: <RssFeedSetting />,
 				value: WidgetTabKeys.news_settings,
-				icon: <TbNews size={20} />,
+				icon: <Icon name="rss" size={20} />,
 			},
 			{
 				label: 'ویجت آب و هوا',
 				element: <WeatherSetting />,
 				value: WidgetTabKeys.weather_settings,
-				icon: <TiWeatherCloudy size={20} />,
+				icon: <Icon name="cloudy" size={20} />,
 			},
 			{
 				label: 'حیوان خانگی',
 				value: WidgetTabKeys.Pet,
-				icon: <MdPets size={20} />,
+				icon: <Icon name="pets" size={20} />,
 				element: <PetSettings />,
 			},
 		],
@@ -96,7 +92,7 @@ export function WidgetSettingsModal({
 						onClickSettings()
 					}}
 				>
-					<VscSettings size={20} className="text-muted" />
+					<Icon name="settings" size={14} className="text-muted" />
 					<span className="text-sm font-light">تنظیمات</span>
 				</button>
 			</TabManager>
diff --git a/src/layouts/widgets/calendar/calendar.tsx b/src/layouts/widgets/calendar/calendar.tsx
index b9e39e43..bd022497 100644
--- a/src/layouts/widgets/calendar/calendar.tsx
+++ b/src/layouts/widgets/calendar/calendar.tsx
@@ -5,7 +5,7 @@ import { CalendarGrid } from './components/calendar-grid'
 import { CalendarHeader } from './components/calendar-header'
 import { GoogleCalendarView } from './components/google-calendar/google-calendar-view'
 import Analytics from '@/analytics'
-import { BiCalendar, BiLogoGoogle } from 'react-icons/bi'
+import { Icon } from '@/src/icons'
 
 interface CalendarTabSelectorProps {
 	activeTab: string
@@ -27,7 +27,7 @@ const CalendarTabSelector: React.FC<CalendarTabSelectorProps> = ({
 							: 'text-base-content/60 hover:text-base-content'
 					}`}
 			>
-				<BiCalendar size={12} />
+				<Icon name="calendar" size={12} />
 				<span>تقویم</span>
 			</button>
 
@@ -40,7 +40,7 @@ const CalendarTabSelector: React.FC<CalendarTabSelectorProps> = ({
 							: 'text-base-content/60 hover:text-base-content'
 					}`}
 			>
-				<BiLogoGoogle size={12} />
+				<Icon name="googleCalendar" size={12} />
 				<span>گوگل‌کلندر</span>
 			</button>
 		</div>
diff --git a/src/layouts/widgets/calendar/components/calendar-header.tsx b/src/layouts/widgets/calendar/components/calendar-header.tsx
index bd71c757..ad59401e 100644
--- a/src/layouts/widgets/calendar/components/calendar-header.tsx
+++ b/src/layouts/widgets/calendar/components/calendar-header.tsx
@@ -1,8 +1,7 @@
 import { useGeneralSetting } from '@/context/general-setting.context'
 import type React from 'react'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import { TfiBackRight } from 'react-icons/tfi'
 import { type WidgetifyDate, getCurrentDate } from '../utils'
+import { Icon } from '@/src/icons'
 
 interface CalendarHeaderProps {
 	currentDate: WidgetifyDate
@@ -56,7 +55,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
 							'h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 text-muted hover:bg-base-300 duration-300 hover:opacity-100 animate-in fade-in-0 zoom-in-95'
 						}
 					>
-						<TfiBackRight size={12} strokeWidth={1} />
+						<Icon name="backRight" size={12} strokeWidth={1} />
 					</button>
 				)}
 
@@ -66,7 +65,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
 						'h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 hover:bg-base-300 hover:opacity-100 duration-300'
 					}
 				>
-					<FaChevronRight size={12} strokeWidth={1} />
+					<Icon name="chevronRight" size={12} strokeWidth={1} />
 				</button>
 
 				<button
@@ -75,7 +74,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
 						'h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 hover:bg-base-300 hover:opacity-100 duration-300'
 					}
 				>
-					<FaChevronLeft size={12} strokeWidth={1} />
+					<Icon name="chevronLeft" size={12} strokeWidth={1} />
 				</button>
 			</div>
 		</div>
diff --git a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
index 1df0618a..931e6a76 100644
--- a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
+++ b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
@@ -1,5 +1,3 @@
-import { FaGlobeAsia } from 'react-icons/fa'
-import { FaMoon } from 'react-icons/fa6'
 import { useState } from 'react'
 import type { FetchedAllEvents } from '@/services/hooks/date/getEvents.hook'
 import {
@@ -22,7 +20,7 @@ import { autoFormatErrorToast, showToast } from '@/common/toast'
 import type { MoodEntry } from '@/services/hooks/moodLog/get-moods.hook'
 import Analytics from '@/analytics'
 import { moodOptions } from '@/common/constant/moods'
-import { TbMoodHappy } from 'react-icons/tb'
+import { Icon } from '@/src/icons'
 
 interface CalendarDayDetailsProps {
 	events: FetchedAllEvents
@@ -150,13 +148,13 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 			<div className="p-2 space-y-2">
 				<div className="flex items-center justify-between px-1 text-xs text-muted">
 					<div className="flex items-center gap-1">
-						<FaMoon size={10} />
+						<Icon name="moon" size={10} />
 						<span>
 							{hijriDate} {hijriMonthName}
 						</span>
 					</div>
 					<div className="flex items-center gap-1">
-						<FaGlobeAsia size={10} />
+						<Icon name="globeAsia" size={10} />
 						<span>{gregorian}</span>
 					</div>
 				</div>
@@ -164,7 +162,6 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 				{selectedDate.isBefore() && (
 					<div className="p-1.5 rounded-2xl bg-content">
 						<div className="flex items-center gap-1 mb-1.5 px-0.5">
-							<TbMoodHappy className="text-secondary" size={12} />
 							<span className="text-[10px] font-medium text-content">
 								حس و حال{' '}
 								{jalaliDay === today.format('dddd') ? 'امروز' : 'روز'}
diff --git a/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx b/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
index a14eecff..350b4440 100644
--- a/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
+++ b/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
@@ -1,7 +1,6 @@
 import type React from 'react'
 import { useState, useEffect } from 'react'
 import Analytics from '@/analytics'
-import { HiChevronLeft, HiChevronRight, HiOutlineCalendar } from 'react-icons/hi2'
 import { useGetGoogleCalendarEvents } from '@/services/hooks/date/getGoogleCalendarEvents.hook'
 import { useDate } from '@/context/date.context'
 import { CalendarEvent } from './google-event.item'
@@ -10,6 +9,7 @@ import { Button } from '@/components/button/button'
 import { callEvent } from '@/common/utils/call-event'
 import type { WidgetifyDate } from '../../utils'
 import { GoogleEventItemSkeleton } from './google-event.item-skeleton'
+import { Icon } from '@/src/icons'
 
 export const GoogleCalendarView: React.FC = () => {
 	const { user, isAuthenticated } = useAuth()
@@ -86,7 +86,7 @@ export const GoogleCalendarView: React.FC = () => {
 		return (
 			<div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
 				<div className="p-3 rounded-2xl bg-primary/10 text-primary">
-					<HiOutlineCalendar size={24} />
+					<Icon name="calendar" size={24} />
 				</div>
 				<p className="text-[11px] text-base-content/60 leading-relaxed">
 					{isAuthenticated
@@ -125,7 +125,7 @@ export const GoogleCalendarView: React.FC = () => {
 					onClick={() => handlePrevDay()}
 					className="flex items-center justify-center transition-colors rounded-lg cursor-pointer w-7 h-7 hover:bg-base-200 text-base-content/40 hover:text-base-content"
 				>
-					<HiChevronRight size={16} />
+					<Icon name="chevronRight" size={16} />
 				</button>
 
 				<button
@@ -150,7 +150,7 @@ export const GoogleCalendarView: React.FC = () => {
 					onClick={() => handleNextDay()}
 					className="flex items-center justify-center transition-colors rounded-lg cursor-pointer w-7 h-7 hover:bg-base-200 text-base-content/40 hover:text-base-content"
 				>
-					<HiChevronLeft size={16} />
+					<Icon name="chevronLeft" size={16} />
 				</button>
 			</div>
 
@@ -162,7 +162,7 @@ export const GoogleCalendarView: React.FC = () => {
 
 				{!isLoading && classified.length === 0 && (
 					<div className="flex flex-col items-center justify-center flex-1 gap-2 py-8 opacity-25">
-						<HiOutlineCalendar size={28} strokeWidth={1.5} />
+						<Icon name="calendar" size={28} strokeWidth={1.5} />
 						<p className="text-[10px] font-medium text-base-content">
 							رویدادی وجود ندارد
 						</p>
diff --git a/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx b/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
index 34a63586..70fbb477 100644
--- a/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
+++ b/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
@@ -1,5 +1,5 @@
 import Tooltip from '@/components/toolTip'
-import { HiOutlineMapPin, HiOutlineVideoCamera } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 interface CalendarEventProps {
 	event: any
@@ -58,7 +58,7 @@ export const CalendarEvent = ({
 								}}
 								className="flex items-center gap-1 px-2 py-0.5 mb-1 rounded-lg bg-primary text-white text-[9px]  cursor-pointer transition-all hover:brightness-110 active:scale-95 shrink-0 font-medium"
 							>
-								<HiOutlineVideoCamera size={9} />
+								<Icon name="videoCamera" size={9} />
 								ورود به جلسه
 							</button>
 						) : event.location ? (
@@ -129,13 +129,15 @@ export const CalendarEvent = ({
 						{event.summary || 'بدون عنوان'}
 					</span>
 					{event.hangoutLink && (
-						<HiOutlineVideoCamera
+						<Icon
+							name="videoCamera"
 							size={11}
 							className="shrink-0 text-base-content/30"
 						/>
 					)}
 					{!event.hangoutLink && event.location && (
-						<HiOutlineMapPin
+						<Icon
+							name="location"
 							size={11}
 							className="shrink-0 text-base-content/30"
 						/>
diff --git a/src/layouts/widgets/comboWidget/combo-widget.layout.tsx b/src/layouts/widgets/comboWidget/combo-widget.layout.tsx
index 03f512f5..4056d3f0 100644
--- a/src/layouts/widgets/comboWidget/combo-widget.layout.tsx
+++ b/src/layouts/widgets/comboWidget/combo-widget.layout.tsx
@@ -8,8 +8,7 @@ import { NewsLayout } from '../news/news.layout'
 import { WidgetContainer } from '../widget-container'
 import { WigiArzLayout } from '../wigiArz/wigi_arz.layout'
 import { TabNavigation } from '@/components/tab-navigation'
-import { HiOutlineCurrencyBangladeshi, HiOutlineNewspaper } from 'react-icons/hi2'
-import { CgOptions } from 'react-icons/cg'
+import { Icon } from '@/src/icons'
 
 export type ComboTabType = 'news' | 'currency'
 
@@ -58,12 +57,12 @@ export function ComboWidget() {
 						{
 							id: 'currency',
 							label: 'ارزها',
-							icon: <HiOutlineCurrencyBangladeshi size={14} />,
+							icon: <Icon name="currency" size={14} />,
 						},
 						{
 							id: 'news',
 							label: 'اخبار',
-							icon: <HiOutlineNewspaper size={14} />,
+							icon: <Icon name="outlineNewspaper" size={14} />,
 						},
 					]}
 					size="small"
@@ -86,7 +85,7 @@ export function ComboWidget() {
 				onClick={handleSettingsClick}
 				className={`px-2 py-0! border-none! rounded-lg text-base-content/40 shrink-0 active:scale-95 h-7!`}
 			>
-				<CgOptions className="w-4 h-4" />
+				<Icon name="menuOption" className="w-4 h-4" />
 			</Button>
 		</WidgetContainer>
 	)
diff --git a/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx b/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
index ab139e2b..0a87580e 100644
--- a/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
+++ b/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import { TfiBackRight } from 'react-icons/tfi'
 import jalaliMoment from 'jalali-moment'
 import moment from 'moment'
 import { HabitComparison, type Habit } from '@/services/hooks/habit/habit.interface'
@@ -10,6 +8,7 @@ import { autoFormatErrorToast, showToast } from '@/common/toast'
 import { HABIT_UNIT_STEP } from '@/common/constant/habit-options'
 import { useQueryClient } from '@tanstack/react-query'
 import { IconLoading } from '@/components/loading/icon-loading'
+import { Icon } from '@/src/icons'
 
 interface HabitCalendarProps {
 	habit: Habit
@@ -236,20 +235,20 @@ export function HabitCalendar({ habit, color }: HabitCalendarProps) {
 							onClick={goToToday}
 							className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 						>
-							<TfiBackRight size={12} />
+							<Icon name="backRight" size={12} />
 						</button>
 					)}
 					<button
 						onClick={() => changeMonth(-1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronRight size={12} />
+						<Icon name="chevronRight" size={12} />
 					</button>
 					<button
 						onClick={() => changeMonth(1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronLeft size={12} />
+						<Icon name="chevronLeft" size={12} />
 					</button>
 				</div>
 			</div>
diff --git a/src/layouts/widgets/habit/components/habit-detail.modal.tsx b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
index ca1a741d..6bd9e05f 100644
--- a/src/layouts/widgets/habit/components/habit-detail.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/button/button'
 import { Dropdown } from '@/components/dropdown'
 import type { Habit } from '@/services/hooks/habit/habit.interface'
 import { callEvent } from '@/common/utils/call-event'
-import { GoArchive, GoKebabHorizontal, GoPencil } from 'react-icons/go'
+import { Icon } from '@/src/icons'
 
 interface ModalProps {
 	isOpen: boolean
@@ -76,7 +76,11 @@ export function HabitDetailModal({
 									size="xs"
 									className="text-xs border-none py-1! rounded-xl"
 								>
-									<GoKebabHorizontal size={15} strokeWidth={0.35} />
+									<Icon
+										name="menuOption"
+										size={15}
+										strokeWidth={0.35}
+									/>
 								</Button>
 							}
 							dropdownClassName="p-2"
@@ -85,7 +89,7 @@ export function HabitDetailModal({
 								className={`w-full px-3 py-1 flex items-center gap-x-2.25 cursor-pointer rounded-lg transition-colors duration-200 text-content hover:text-content/90 hover:bg-base-300/70! `}
 								onClick={onClickEdit}
 							>
-								<GoPencil size={13} />
+								<Icon name="pen" size={13} />
 								<span className="font-medium">ویرایش</span>
 							</button>
 
@@ -93,7 +97,7 @@ export function HabitDetailModal({
 								className={`w-full px-3 py-1 flex items-center gap-x-2.5 cursor-pointer rounded-lg transition-colors duration-200 text-error hover:text-error/90 hover:bg-error/10!`}
 								onClick={onClickArchive}
 							>
-								<GoArchive size={14} />
+								<Icon name="archive" size={14} />
 								<span className="font-medium">بایگانی</span>
 							</button>
 						</Dropdown>
diff --git a/src/layouts/widgets/habit/components/habit-form.modal.tsx b/src/layouts/widgets/habit/components/habit-form.modal.tsx
index 6ad0dc65..0bcf9ad4 100644
--- a/src/layouts/widgets/habit/components/habit-form.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-form.modal.tsx
@@ -24,9 +24,9 @@ import {
 import { useUpdateHabit } from '@/services/hooks/habit/update-habit.hook'
 import { translateError } from '@/utils/translate-error'
 import Tooltip from '@/components/toolTip'
-import { BiChevronDown, BiInfoCircle } from 'react-icons/bi'
 import type { HabitIcon } from '@/services/hooks/habit/get-habits.hook'
 import { AnimatePresence, motion } from 'framer-motion'
+import { Icon } from '@/src/icons'
 
 interface HabitFormModalProps {
 	isOpen: boolean
@@ -195,7 +195,7 @@ export function HabitFormModal({
 							animate={{ rotate: showAdvanced ? 180 : 0 }}
 							transition={{ duration: 0.2 }}
 						>
-							<BiChevronDown className="w-4 h-4 text-muted" />
+							<Icon name="chevronDown" className="w-4 h-4 text-muted" />
 						</motion.div>
 					</button>
 
@@ -216,8 +216,8 @@ export function HabitFormModal({
 													واحد اندازه‌گیری
 												</label>
 												<Tooltip content="واحد شمارش کار شما چیه؟ مثلاً 'لیوان' برای آب یا 'دقیقه' برای ورزش.">
-													<BiInfoCircle
-														name="info-circle"
+													<Icon
+														name="info"
 														className="w-3 h-3 cursor-pointer text-muted"
 													/>
 												</Tooltip>
@@ -240,8 +240,8 @@ export function HabitFormModal({
 													نحوه رسیدن به هدف
 												</label>
 												<Tooltip content="می‌خوای حداقل به این مقدار برسی یا دقیقاً همین مقدار؟">
-													<BiInfoCircle
-														name="info-circle"
+													<Icon
+														name="info"
 														className="w-3 h-3 cursor-pointer text-muted"
 													/>
 												</Tooltip>
@@ -281,8 +281,8 @@ export function HabitFormModal({
 													مقدار هدف
 												</label>
 												<Tooltip content="یعنی می‌خوای در نهایت چقدر از اون واحد رو انجام بدی؟ مثلا اگه واحد رو 'لیوان' انتخاب کردی و اینجا عدد 8 رو بزنی، یعنی هدفت نوشیدن 8 لیوان آبه.">
-													<BiInfoCircle
-														name="info-circle"
+													<Icon
+														name="info"
 														className="w-3 h-3 cursor-pointer text-muted"
 													/>
 												</Tooltip>
@@ -306,8 +306,8 @@ export function HabitFormModal({
 													تکرار برنامه
 												</label>
 												<Tooltip content="تعیین کن که می‌خوای این عادت رو به صورت روزانه پیگیری کنی یا قصد داری فقط در روزهای خاصی از هفته یا ماه انجامش بدی؟">
-													<BiInfoCircle
-														name="info-circle"
+													<Icon
+														name="info"
 														className="w-3 h-3 cursor-pointer text-muted"
 													/>
 												</Tooltip>
@@ -335,8 +335,8 @@ export function HabitFormModal({
 												<Tooltip
 													content={`توی هر ${form.frequency === HabitFrequency.WEEKLY ? 'هفته' : 'ماه'}، چند بار می‌خوای این کار رو تکرار کنی؟`}
 												>
-													<BiInfoCircle
-														name="info-circle"
+													<Icon
+														name="info"
 														className="w-3 h-3 cursor-pointer text-muted"
 													/>
 												</Tooltip>
diff --git a/src/layouts/widgets/habit/components/item/habit.item.tsx b/src/layouts/widgets/habit/components/item/habit.item.tsx
index a92940de..b9a7f88c 100644
--- a/src/layouts/widgets/habit/components/item/habit.item.tsx
+++ b/src/layouts/widgets/habit/components/item/habit.item.tsx
@@ -1,4 +1,3 @@
-import { FiCheck, FiPlus } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { getContrastingTextColor } from '@/common/color'
 import { HABIT_UNIT_STEP } from '@/common/constant/habit-options'
@@ -12,6 +11,7 @@ import { translateError } from '@/utils/translate-error'
 import { formatHabitGoal } from '../../utils'
 import { SegmentedProgressRing } from './button.progress-ring'
 import { SimpleProgressRing } from './button.simple-progress-ring'
+import { Icon } from '@/src/icons'
 
 interface HabitItemProps {
 	habit: Habit
@@ -109,11 +109,11 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 
 					<div className="relative z-10 flex items-center justify-center w-8 h-8 rounded-full">
 						{habit.today.isDone ? (
-							<FiCheck size={18} strokeWidth={3} />
+							<Icon name="check" size={12} strokeWidth={3} />
 						) : isSimpleHabit ? (
-							<FiCheck size={18} strokeWidth={3} />
+							<Icon name="check" size={12} strokeWidth={3} />
 						) : (
-							<FiPlus size={18} strokeWidth={3} />
+							<Icon name="plus" size={12} strokeWidth={3} />
 						)}
 					</div>
 				</button>
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index 42866c57..a6c14b96 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { MdRefresh } from 'react-icons/md'
 import Analytics from '@/analytics'
 import { autoFormatErrorToast, showToast } from '@/common/toast'
 import { Button } from '@/components/button/button'
@@ -16,9 +15,9 @@ import { WidgetContainer } from '../widget-container'
 import { HabitDetailModal } from './components/habit-detail.modal'
 import { HabitFormModal } from './components/habit-form.modal'
 import { HabitItem } from './components/item/habit.item'
-import { BiPlus } from 'react-icons/bi'
 import { callEvent } from '@/common/utils/call-event'
 import { HabitItemSkeleton } from './components/item/habit-item.skeleton'
+import { Icon } from '@/src/icons'
 
 export function HabitsContent() {
 	const { isAuthenticated } = useAuth()
@@ -110,7 +109,8 @@ export function HabitsContent() {
 								onClick={onRefresh}
 								disabled={isWaiting}
 							>
-								<MdRefresh
+								<Icon
+									name="refresh"
 									className={`text-content opacity-50 hover:opacity-100 ${
 										isLoading ? 'animate-spin' : ''
 									}`}
@@ -168,7 +168,7 @@ export function HabitsContent() {
 				onClick={handleAddHabit}
 				className="px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!"
 			>
-				<BiPlus className="w-4 h-4" />
+				<Icon name="plus" className="w-4 h-4" />
 				افزودن
 			</Button>
 
diff --git a/src/layouts/widgets/network/network.layout.tsx b/src/layouts/widgets/network/network.layout.tsx
index ec267d18..f71f2abb 100644
--- a/src/layouts/widgets/network/network.layout.tsx
+++ b/src/layouts/widgets/network/network.layout.tsx
@@ -1,6 +1,5 @@
 import type { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
-import { MdRefresh } from 'react-icons/md'
 import Analytics from '@/analytics'
 import { RequireAuth } from '@/components/auth/require-auth'
 import { AvatarComponent } from '@/components/avatar.component'
@@ -10,8 +9,8 @@ import { useAuth } from '@/context/auth.context'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { getMainClient, safeAwait } from '@/services/api'
 import { WidgetContainer } from '../widget-container'
-import { NetworkIPCard, NetworkLoadingSkeleton, NetworkPingCard } from './components'
-import { IoRefreshOutline } from 'react-icons/io5'
+import { NetworkIPCard, NetworkPingCard } from './components'
+import { Icon } from '@/src/icons'
 
 interface NetworkInfo {
 	status: 'online' | 'offline'
@@ -129,7 +128,8 @@ export function NetworkLayout({ enableBackground, inComboWidget }: Prop) {
 									size="xs"
 									className="h-6 w-6 p-0 flex items-center justify-center rounded-full !border-none !shadow-none"
 								>
-									<MdRefresh
+									<Icon
+										name="refresh"
 										size={12}
 										className="text-content opacity-70 hover:opacity-100"
 									/>
@@ -198,7 +198,8 @@ export function NetworkLayout({ enableBackground, inComboWidget }: Prop) {
 							className="w-full h-8 border border-content rounded-2xl"
 							onClick={handleRefresh}
 						>
-							<IoRefreshOutline
+							<Icon
+								name="refresh"
 								size={14}
 								className={isLoading ? 'animate-spin' : ''}
 							/>
diff --git a/src/layouts/widgets/news/components/news-header.tsx b/src/layouts/widgets/news/components/news-header.tsx
index 1ad63973..49dac729 100644
--- a/src/layouts/widgets/news/components/news-header.tsx
+++ b/src/layouts/widgets/news/components/news-header.tsx
@@ -1,5 +1,5 @@
-import { FaGear, FaRss } from 'react-icons/fa6'
 import { Button } from '@/components/button/button'
+import { Icon } from '@/src/icons'
 
 interface NewsHeaderProps {
 	title: string
@@ -11,7 +11,7 @@ export const NewsHeader = ({ title, onSettingsClick }: NewsHeaderProps) => {
 		<div className={'top-0 z-20 flex items-center justify-between w-full pb-2'}>
 			<div className="flex flex-col">
 				<div className="flex items-center gap-1.5">
-					<FaRss className="w-3.5 h-3.5 opacity-70" />
+					<Icon name="rss" className="w-3.5 h-3.5 opacity-70" />
 					<p className="text-base font-medium">{title}</p>
 				</div>
 			</div>
@@ -22,7 +22,8 @@ export const NewsHeader = ({ title, onSettingsClick }: NewsHeaderProps) => {
 					size="xs"
 					className="h-6 w-6 p-0 flex items-center justify-center rounded-full !border-none !shadow-none"
 				>
-					<FaGear
+					<Icon
+						name="settings"
 						size={12}
 						className="text-content opacity-70 hover:opacity-100"
 					/>
diff --git a/src/layouts/widgets/news/rss-feed-setting.tsx b/src/layouts/widgets/news/rss-feed-setting.tsx
index cb904562..6c975f5d 100644
--- a/src/layouts/widgets/news/rss-feed-setting.tsx
+++ b/src/layouts/widgets/news/rss-feed-setting.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react'
-import { BiRss } from 'react-icons/bi'
-import { VscAdd, VscTrash } from 'react-icons/vsc'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
@@ -11,6 +9,7 @@ import { TextInput } from '@/components/text-input'
 import { ToggleSwitch } from '@/components/toggle-switch.component'
 import { WidgetSettingWrapper } from '@/layouts/widgets-settings/widget-settings-wrapper'
 import type { WigiNewsSetting } from './rss.interface'
+import { Icon } from '@/src/icons'
 
 const SUGGESTED_FEEDS = [
 	{
@@ -224,7 +223,7 @@ export const RssFeedSetting = () => {
 						className="text-white rounded-xl btn-primary"
 						onClick={addNewFeed}
 					>
-						<VscAdd size={16} />
+						<Icon name="plus" size={16} />
 						<span>افزودن فید جدید</span>
 					</Button>
 				</div>
@@ -282,7 +281,11 @@ const FeedsList = ({ feeds, onToggleFeed, onRemoveFeed }: FeedsListProps) => {
 						'flex flex-col items-center justify-center p-2 text-center border border-dashed rounded-lg border-content'
 					}
 				>
-					<BiRss className={'mb-3 opacity-50 text-content'} size={32} />
+					<Icon
+						name="rss"
+						className={'mb-3 opacity-50 text-content'}
+						size={32}
+					/>
 					<p className={'mb-1 text-sm font-medium opacity-70 text-content'}>
 						هیچ فید RSS اضافه نشده است
 					</p>
@@ -351,7 +354,7 @@ const FeedItem = ({ feed, disabled = false, onToggle, onRemove }: FeedItemProps)
 				onClick={onRemove}
 				disabled={disabled}
 			>
-				<VscTrash size={18} />
+				<Icon name="trash" size={18} />
 			</Button>
 		</div>
 	)
diff --git a/src/layouts/widgets/notes/components/note-editor.tsx b/src/layouts/widgets/notes/components/note-editor.tsx
index 7360e8e6..df4076f5 100644
--- a/src/layouts/widgets/notes/components/note-editor.tsx
+++ b/src/layouts/widgets/notes/components/note-editor.tsx
@@ -4,8 +4,8 @@ import { IconLoading } from '@/components/loading/icon-loading'
 import Tooltip from '@/components/toolTip'
 import { useNotes } from '@/context/notes.context'
 import type { FetchedNote } from '@/services/hooks/note/note.interface'
+import { Icon } from '@/src/icons'
 import { useEffect, useRef, useState } from 'react'
-import { FiFlag } from 'react-icons/fi'
 
 interface NoteEditorProps {
 	note: FetchedNote
@@ -149,7 +149,7 @@ const PriorityButton = ({
 				${isSelected ? 'ring-2 ring-offset-0 ring-primary' : ''}
 			`}
 		>
-			{isSelected && <FiFlag size={8} className="text-white" />}
+			{isSelected && <Icon name="check" size={8} className="text-white" />}
 		</button>
 	</Tooltip>
 )
diff --git a/src/layouts/widgets/notes/components/note-item.tsx b/src/layouts/widgets/notes/components/note-item.tsx
index f704208f..016b085b 100644
--- a/src/layouts/widgets/notes/components/note-item.tsx
+++ b/src/layouts/widgets/notes/components/note-item.tsx
@@ -1,10 +1,9 @@
-import { useState } from 'react' // اضافه شد
+import { useState } from 'react'
 import { PRIORITY_OPTIONS } from '@/common/constant/priority_options'
 import type { FetchedNote } from '@/services/hooks/note/note.interface'
 import moment from 'jalali-moment'
-import { FiCalendar } from 'react-icons/fi'
-import { HiChevronDown } from 'react-icons/hi2' // آیکون برای dropdown
 import Analytics from '@/analytics'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	note: FetchedNote
@@ -38,7 +37,7 @@ export function NoteItem({ note, handleNoteClick }: Prop) {
 					</h3>
 				</div>
 				<div className="flex items-center gap-1 shrink-0">
-					<FiCalendar size={10} />
+					<Icon name="calendarDays" size={10} />
 					<span className="text-[10px]">
 						{moment(note.createdAt).locale('fa').format('jD jMMM')}
 					</span>
@@ -60,7 +59,8 @@ export function NoteItem({ note, handleNoteClick }: Prop) {
 							onClick={toggleExpand}
 							className="flex items-center gap-1 mt-1 text-xs font-medium cursor-pointer text-muted hover:bg-base-300 p-0.5 rounded-full"
 						>
-							<HiChevronDown
+							<Icon
+								name="chevronDown"
 								className={`transition-transform duration-300 ${
 									isExpanded ? 'rotate-180' : ''
 								}`}
diff --git a/src/layouts/widgets/notes/components/note-navigation.tsx b/src/layouts/widgets/notes/components/note-navigation.tsx
index 0131ea4a..283917c4 100644
--- a/src/layouts/widgets/notes/components/note-navigation.tsx
+++ b/src/layouts/widgets/notes/components/note-navigation.tsx
@@ -1,13 +1,12 @@
 import { useMemo } from 'react'
-import { FiChevronLeft, FiTrash2 } from 'react-icons/fi'
 import { Button } from '@/components/button/button'
 import Tooltip from '@/components/toolTip'
 import { useNotes } from '@/context/notes.context'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
 import { IconLoading } from '@/components/loading/icon-loading'
-import { MdEdit, MdRefresh } from 'react-icons/md'
 import { callEvent } from '@/common/utils/call-event'
+import { Icon } from '@/src/icons'
 
 export function NoteNavigation() {
 	const { isAuthenticated } = useAuth()
@@ -78,7 +77,7 @@ export function NoteNavigation() {
 							onClick={() => setShowDeleteConfirm(true)}
 							className="h-7 w-7 p-0 text-muted !bg-transparent hover:!bg-error/20 hover:!text-error border-none rounded-full disabled:opacity-75 transition-all duration-300 shadow-none"
 						>
-							<FiTrash2 size={14} />
+							<Icon name="trash" size={14} />
 						</Button>
 					</Tooltip>
 					<Tooltip content="لیست یادداشت ها" position="top">
@@ -86,7 +85,7 @@ export function NoteNavigation() {
 							className={`h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 hover:bg-base-300 hover:opacity-100 ${activeNoteIndex > 0 ? 'opacity-100' : 'opacity-30 cursor-not-allowed'} duration-300`}
 							onClick={() => onBackToList()}
 						>
-							<FiChevronLeft size={18} className="text-content" />
+							<Icon name="trash" size={18} className="text-content" />
 						</button>
 					</Tooltip>
 				</>
@@ -101,7 +100,7 @@ export function NoteNavigation() {
 						className={`h-6 w-fit px-2! text-xs font-medium  hover:scale-95 rounded-xl`}
 						isPrimary={true}
 					>
-						<MdEdit size={12} />
+						<Icon name="pen" size={12} />
 						چیزی بنویس
 					</Button>
 					<div className="space-x-1">
@@ -111,7 +110,8 @@ export function NoteNavigation() {
 								className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 								onClick={onRefresh}
 							>
-								<MdRefresh
+								<Icon
+									name="refresh"
 									className={`text-content opacity-50 hover:opacity-100 ${isRefetching ? 'animate-spin' : ''}`}
 								/>
 							</Button>
diff --git a/src/layouts/widgets/todos/components/friend-item.todo.tsx b/src/layouts/widgets/todos/components/friend-item.todo.tsx
index ef3e8c5a..c4a3c242 100644
--- a/src/layouts/widgets/todos/components/friend-item.todo.tsx
+++ b/src/layouts/widgets/todos/components/friend-item.todo.tsx
@@ -1,6 +1,6 @@
 import { AvatarComponent } from '@/components/avatar.component'
 import Tooltip from '@/components/toolTip'
-import { FaCheck, FaCrown } from 'react-icons/fa'
+import { Icon } from '@/src/icons'
 
 interface UserItemProp {
 	avatar: string
@@ -28,13 +28,13 @@ export function UserItem({ avatar, completed, isOwner, name }: UserItemProp) {
 
 					{completed && (
 						<div className="absolute inset-0 flex items-center justify-center rounded-full bg-success/20">
-							<FaCheck className="text-success text-[8px]" />
+							<Icon name="check" className="text-success text-[8px]" />
 						</div>
 					)}
 
 					{isOwner && (
 						<div className="absolute flex items-center justify-center w-2 h-2 -translate-x-1/2 rounded-full shadow-md left-1/2 -bottom-1.5 bg-warning text-warning-content ring-2 ring-base-100">
-							<FaCrown size={6} />
+							<Icon name="crown" size={6} />
 						</div>
 					)}
 				</div>
diff --git a/src/layouts/widgets/todos/components/priority.dropdown.tsx b/src/layouts/widgets/todos/components/priority.dropdown.tsx
index c8cea9c7..3dd2b480 100644
--- a/src/layouts/widgets/todos/components/priority.dropdown.tsx
+++ b/src/layouts/widgets/todos/components/priority.dropdown.tsx
@@ -1,7 +1,7 @@
-import { BsFilterLeft } from 'react-icons/bs'
 import { Dropdown } from '@/components/dropdown'
 import { Button } from '@/components/button/button'
 import { TodoPriority } from '@/services/hooks/todo/todo.interface'
+import { Icon } from '@/src/icons'
 
 const priorityOptions = [
 	{
@@ -46,7 +46,7 @@ export function PriorityDropdown({ priority, setPriority }: PriorityDropdownProp
 							: 'text-base-content/40 hover:text-primary/60'
 					}`}
 				>
-					<BsFilterLeft size={18} />
+					<Icon name="filterLeft" size={18} />
 				</Button>
 			}
 			dropdownClassName="p-1.5"
diff --git a/src/layouts/widgets/todos/components/select-friends.todo.tsx b/src/layouts/widgets/todos/components/select-friends.todo.tsx
index e5ea9ff8..b31de2ad 100644
--- a/src/layouts/widgets/todos/components/select-friends.todo.tsx
+++ b/src/layouts/widgets/todos/components/select-friends.todo.tsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/button/button'
 import { Dropdown } from '@/components/dropdown'
 import { SelectFriendLayout } from '@/layouts/friends/components/select-friend.layout'
 import type { Friend } from '@/services/hooks/friends/friendService.hook'
-import { FiUserPlus } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	selectedFriends: Friend[]
@@ -25,7 +25,11 @@ export function TodoSelectFriends({ selectedFriends, setSelectedFriends }: Prop)
 						</div>
 					) : (
 						<div className="flex gap-0.5 text-base-content/40">
-							<FiUserPlus size={16} className="text-base-content/40" />
+							<Icon
+								name="friends"
+								size={16}
+								className="text-base-content/40"
+							/>
 							دوستان
 						</div>
 					)}
diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index a323d9e0..b026ce10 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -10,12 +10,9 @@ import { Chip } from '@/components/chip.component'
 import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 import { useAuth } from '@/context/auth.context'
 import { useDate } from '@/context/date.context'
-import { IoCalendarOutline, IoPricetagOutline, IoAddOutline } from 'react-icons/io5'
 import { DatePicker } from '@/components/date-picker/date-picker'
 import { PriorityDropdown } from './components/priority.dropdown'
-import { FiPlus, FiSave } from 'react-icons/fi'
 import type { FetchedTodo, TodoPriority } from '@/services/hooks/todo/todo.interface'
-import { LuX } from 'react-icons/lu'
 import { type TodoCreationPayload, useAddTodo } from '@/services/hooks/todo/add-todo.hook'
 import { useUpdateTodo } from '@/services/hooks/todo/update-todo.hook'
 import { translateError } from '@/utils/translate-error'
@@ -24,6 +21,7 @@ import type { Friend } from '@/services/hooks/friends/friendService.hook'
 import { TodoSelectFriends } from './components/select-friends.todo'
 import { callEvent } from '@/common/utils/call-event'
 import { twMerge } from 'tailwind-merge'
+import { Icon } from '@/src/icons'
 interface ExpandableTodoInputProps {
 	editTodo?: FetchedTodo
 	onClose: any
@@ -260,7 +258,7 @@ export function ExpandableTodoInput({
 								size="sm"
 								className="rounded-full px-0! w-8 btn-ghost"
 							>
-								<LuX size={12} className="" />
+								<Icon name="close" size={12} className="" />
 							</Button>
 						)}
 						<Button
@@ -272,7 +270,11 @@ export function ExpandableTodoInput({
 							isPrimary={true}
 							className="rounded-full px-0! w-8"
 						>
-							{isEdit ? <FiSave size={16} /> : <FiPlus size={16} />}
+							{isEdit ? (
+								<Icon name="save" size={16} />
+							) : (
+								<Icon name="plus" size={16} />
+							)}
 						</Button>
 					</div>
 				</div>
@@ -319,7 +321,7 @@ export function ExpandableTodoInput({
 											onClick={() => setShowDatePicker(true)}
 											ref={dateButtonRef}
 										>
-											<IoCalendarOutline size={18} />
+											<Icon name="calendarDays" size={18} />
 											<p className="truncate max-w-14 min-w-5">
 												{selectedDate
 													? formatJalaliDateForDisplay(
@@ -334,7 +336,7 @@ export function ExpandableTodoInput({
 											ref={categoryInputRef}
 											onClick={() => setIsTagTooltipOpen(true)}
 										>
-											<IoPricetagOutline size={16} />
+											<Icon name="tags" size={16} />
 											<p className="truncate max-w-14 min-w-5">
 												{category || 'دسته‌بندی'}
 											</p>
@@ -363,7 +365,7 @@ export function ExpandableTodoInput({
 														setIsTagTooltipOpen(false)
 													}
 												>
-													<IoAddOutline size={18} />
+													<Icon name="plus" size={18} />
 												</Button>
 											</div>
 											<div className="flex flex-wrap w-full gap-1 overflow-x-hidden overflow-y-auto max-h-32 scrollbar-none">
@@ -378,7 +380,8 @@ export function ExpandableTodoInput({
 															}
 															className="flex gap-1 text-xs px-2! py-1!e"
 														>
-															<IoPricetagOutline
+															<Icon
+																name="tags"
 																size={16}
 																className="text-base-content/40"
 															/>
diff --git a/src/layouts/widgets/todos/todo.item.tsx b/src/layouts/widgets/todos/todo.item.tsx
index 3c0f05a0..de42364b 100644
--- a/src/layouts/widgets/todos/todo.item.tsx
+++ b/src/layouts/widgets/todos/todo.item.tsx
@@ -1,6 +1,5 @@
 import type React from 'react'
 import { useState } from 'react'
-import { FiChevronDown, FiTrash2, FiEdit3, FiTag, FiUsers } from 'react-icons/fi'
 import CustomCheckbox from '@/components/checkbox'
 import type { FetchedTodo, Todo } from '@/services/hooks/todo/todo.interface'
 import { ConfirmationModal } from '@/components/modal/confirmation-modal'
@@ -13,11 +12,11 @@ import { validate } from 'uuid'
 import Analytics from '@/analytics'
 import { IconLoading } from '@/components/loading/icon-loading'
 import { parseTodoDate } from './tools/parse-date'
-import { IoCalendarOutline } from 'react-icons/io5'
 import { useUpdateTodo } from '@/services/hooks/todo/update-todo.hook'
 import { playAlarm } from '@/common/playAlarm'
 import Tooltip from '@/components/toolTip'
 import { TodoFriends } from './components/friends.todo'
+import { Icon } from '@/src/icons'
 
 interface Prop {
 	todo: Todo
@@ -152,7 +151,7 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 					{isPending && <IconLoading />}
 					{hasFriends && (
 						<Tooltip content="مشترک">
-							<FiUsers size={12} className="text-muted" />
+							<Icon name="users" size={12} className="text-muted" />
 						</Tooltip>
 					)}
 					<div className="hidden transition-all duration-150 group-hover:flex">
@@ -162,14 +161,14 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 									onClick={handleEdit}
 									className="p-1 rounded-lg cursor-pointer text-blue-500/60 hover:bg-blue-500/10 hover:text-blue-500"
 								>
-									<FiEdit3 size={13} />
+									<Icon name="edit" size={13} />
 								</button>
 							)}
 							<button
 								onClick={handleDelete}
 								className="p-1 rounded-lg cursor-pointer text-error/60 hover:bg-error/10 hover:text-error"
 							>
-								<FiTrash2 size={13} />
+								<Icon name="trash" size={13} />
 							</button>
 						</div>
 					</div>
@@ -180,7 +179,7 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 							expanded ? 'rotate-180' : ''
 						} hover:scale-110`}
 					>
-						<FiChevronDown size={15} />
+						<Icon name="chevronDown" size={15} />
 					</button>
 				</div>
 			</div>
@@ -202,7 +201,7 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 					<div className="flex items-center gap-2 text-[10px]">
 						{currentTodo.category && (
 							<span className="flex text-[10px] items-center gap-1 rounded-lg border border-dashed border-base-content/20 px-1.5 text-muted">
-								<FiTag size={9} />
+								<Icon name="tags" size={9} />
 								{currentTodo.category}
 							</span>
 						)}
@@ -215,8 +214,8 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 							</span>
 						)}
 
-						<span className="flex items-center gap-1 mr-auto text-muted/60">
-							<IoCalendarOutline size={12} />
+						<span className="flex items-center gap-1 mr-auto text-base-content/60">
+							<Icon name="calendar" size={12} />
 							{parseTodoDate(currentTodo.date)
 								.locale('fa')
 								.format('jD jMMMM')}
diff --git a/src/layouts/widgets/todos/todos.tsx b/src/layouts/widgets/todos/todos.tsx
index 092da2e9..5d86a844 100644
--- a/src/layouts/widgets/todos/todos.tsx
+++ b/src/layouts/widgets/todos/todos.tsx
@@ -4,16 +4,15 @@ import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
 import { IconLoading } from '@/components/loading/icon-loading'
 import { FilterTooltip } from '@/components/filter-tooltip'
-import { FaSortAmountDown, FaTags } from 'react-icons/fa'
 import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 import type { Todo } from '@/services/hooks/todo/todo.interface'
 import { getFromStorage, setToStorage } from '@/common/storage'
-import { MdOutlineFilterList, MdOutlineFilterListOff, MdRefresh } from 'react-icons/md'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { Button } from '@/components/button/button'
 import Tooltip from '@/components/toolTip'
 import { useGetTodos } from '@/services/hooks/todo/get-todos.hook'
 import { TodoItem } from './todo.item'
+import { Icon } from '@/src/icons'
 
 const filterOptions = [
 	{ value: 'all', label: 'همه' },
@@ -186,12 +185,14 @@ export function TodosLayout() {
 								value={dateFilter}
 								icon={
 									dateFilter !== 'all' ? (
-										<MdOutlineFilterList
+										<Icon
+											name="outlineFilterList"
 											size={10}
 											className="text-primary"
 										/>
 									) : (
-										<MdOutlineFilterListOff
+										<Icon
+											name="outlineFilterListOff"
 											size={10}
 											className="text-muted"
 										/>
@@ -203,7 +204,8 @@ export function TodosLayout() {
 							/>
 							<FilterTooltip
 								icon={
-									<FaTags
+									<Icon
+										name="tags"
 										size={10}
 										className={
 											TagList.includes(tagFilter)
@@ -219,7 +221,8 @@ export function TodosLayout() {
 							/>
 							<FilterTooltip
 								icon={
-									<FaSortAmountDown
+									<Icon
+										name="sortDown"
 										size={10}
 										className={
 											sort !== 'def'
@@ -244,7 +247,8 @@ export function TodosLayout() {
 								className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 								onClick={onRefresh}
 							>
-								<MdRefresh
+								<Icon
+									name="refresh"
 									className={`text-content opacity-50 hover:opacity-100 ${isLoading ? 'animate-spin' : ''}`}
 								/>
 							</Button>
diff --git a/src/layouts/widgets/tools/currency/currency-converter.tsx b/src/layouts/widgets/tools/currency/currency-converter.tsx
index d739b469..b1477eca 100644
--- a/src/layouts/widgets/tools/currency/currency-converter.tsx
+++ b/src/layouts/widgets/tools/currency/currency-converter.tsx
@@ -1,11 +1,11 @@
 import { motion } from 'framer-motion'
 import type React from 'react'
 import { useEffect, useState } from 'react'
-import { TbArrowsUpDown, TbInfoCircle } from 'react-icons/tb'
 import { SelectBox } from '@/components/selectbox/selectbox'
 import { TextInput } from '@/components/text-input'
 import { useGetCurrencyByCode } from '@/services/hooks/currency/getCurrencyByCode.hook'
 import { useGetSupportCurrencies } from '@/services/hooks/currency/getSupportCurrencies.hook'
+import { Icon } from '@/src/icons'
 
 export const CurrencyConverter: React.FC = () => {
 	const [fromCurrency, setFromCurrency] = useState<string>('EUR')
@@ -66,7 +66,7 @@ export const CurrencyConverter: React.FC = () => {
 						}))}
 						value={fromCurrency}
 						onChange={setFromCurrency}
-						className="!w-24 !h-11 !rounded-2xl !bg-base-100 border border-base-300 shadow-sm font-bold text-xs"
+						className="!w-24 !h-11 rounded-2xl! !bg-base-100 border border-base-300 shadow-sm font-bold text-xs"
 					/>
 				</div>
 
@@ -76,7 +76,7 @@ export const CurrencyConverter: React.FC = () => {
 						className="flex items-center justify-center transition-all border rounded-full shadow-lg cursor-pointer bg-base-300 w-11 h-11 border-primary/10 text-content hover:text-primary active:scale-90 hover:scale-105 backdrop-blur-md"
 					>
 						<motion.div animate={{ rotate: isSwapping ? 180 : 0 }}>
-							<TbArrowsUpDown size={20} />
+							<Icon name="upDown" size={20} />
 						</motion.div>
 					</button>
 				</div>
@@ -132,7 +132,7 @@ export const CurrencyConverter: React.FC = () => {
 						</div>
 					</div>
 					<div className="flex items-center gap-1.5 text-[11px] font-black text-primary bg-background/50 px-2 py-1 rounded-lg">
-						<TbInfoCircle size={14} className="opacity-40" />۱ ={' '}
+						<Icon name="info" size={14} className="opacity-40" />۱ ={' '}
 						{fromCurrencyData && toCurrencyData
 							? formatNumber(
 									fromCurrencyData.rialPrice / toCurrencyData.rialPrice
diff --git a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
index 01b0c769..68e43b01 100644
--- a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
+++ b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
@@ -1,6 +1,5 @@
 import type React from 'react'
 import { useEffect, useMemo, useState } from 'react'
-import { FiCheckCircle, FiCoffee, FiRefreshCw } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { getFromStorage, removeFromStorage, setToStorage } from '@/common/storage'
 import { SelectBox } from '@/components/selectbox/selectbox'
@@ -15,10 +14,8 @@ import { TimerDisplay } from './components/timer-display'
 import { TopUsersTab } from './topUsers/top-users'
 import type { PomodoroSettings, TimerMode } from './types'
 import { TabNavigation } from '@/components/tab-navigation'
-import { GoGear } from 'react-icons/go'
-import { TfiCup } from 'react-icons/tfi'
-import { CiPause1, CiPlay1 } from 'react-icons/ci'
 import { Button } from '@/components/button/button'
+import { Icon } from '@/src/icons'
 
 interface PomodoroTimerProps {
 	onComplete?: () => void
@@ -337,7 +334,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 							}
 							className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 						>
-							<TfiCup size={12} />
+							<Icon name="cup" size={12} />
 						</Button>
 					</Tooltip>
 					<Tooltip content="تنظیمات">
@@ -346,7 +343,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 							onClick={() => setShowSettings(!showSettings)}
 							className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 						>
-							<GoGear className="w-4 h-4" />
+							<Icon name="settings" className="w-4 h-4" />
 						</Button>
 					</Tooltip>
 				</div>
@@ -359,20 +356,20 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 					<div className="flex justify-center gap-x-4">
 						<ControlButton
 							mode={'reset'}
-							icon={<FiRefreshCw size={16} strokeWidth={1} />}
+							icon={<Icon name="refresh" size={16} strokeWidth={1} />}
 							onClick={handleReset}
 						/>
 
 						{isRunning ? (
 							<ControlButton
 								mode={'pause'}
-								icon={<CiPause1 size={16} strokeWidth={0.55} />}
+								icon={<Icon name="pause" size={16} strokeWidth={0.55} />}
 								onClick={handlePause}
 							/>
 						) : (
 							<ControlButton
 								mode={'play'}
-								icon={<CiPlay1 size={24} strokeWidth={0.55} />}
+								icon={<Icon name="play" size={24} strokeWidth={1.4} />}
 								onClick={handleStart}
 							/>
 						)}
@@ -380,7 +377,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 						{mode.includes('break') && (
 							<ControlButton
 								mode={'check'}
-								icon={<FiCheckCircle size={16} strokeWidth={0.55} />}
+								icon={<Icon name="check" size={16} strokeWidth={0.55} />}
 								onClick={() => handleModeChange('work')}
 							/>
 						)}
@@ -388,7 +385,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 						{mode === 'work' && (
 							<ControlButton
 								mode={'coffee'}
-								icon={<FiCoffee size={16} strokeWidth={1} />}
+								icon={<Icon name="coffee" size={16} strokeWidth={1} />}
 								onClick={() => handleModeChange('short-break')}
 							/>
 						)}
diff --git a/src/layouts/widgets/tools/pomodoro/topUsers/top-user-item.tsx b/src/layouts/widgets/tools/pomodoro/topUsers/top-user-item.tsx
index c9476012..4eda4bc9 100644
--- a/src/layouts/widgets/tools/pomodoro/topUsers/top-user-item.tsx
+++ b/src/layouts/widgets/tools/pomodoro/topUsers/top-user-item.tsx
@@ -1,7 +1,7 @@
-import { FaCrown } from 'react-icons/fa'
 import { AvatarComponent } from '@/components/avatar.component'
 import { UserCardPortal } from '@/components/user/user-card-portal'
 import type { TopUser } from '@/services/hooks/pomodoro/getTopUsers.hook'
+import { Icon } from '@/src/icons'
 
 interface TopUserItemProps {
 	user: TopUser
@@ -42,7 +42,8 @@ export function TopUserItem({
 				ref={containerRef}
 			>
 				{rank <= 3 && (
-					<FaCrown
+					<Icon
+						name="crown"
 						className={`absolute top-1 rotate-12 right-1 w-4 h-4 ${crownColors[rank]} shadow-md`}
 					/>
 				)}
diff --git a/src/layouts/widgets/tools/religious/religious-time.tsx b/src/layouts/widgets/tools/religious/religious-time.tsx
index c5338cce..71319a0e 100644
--- a/src/layouts/widgets/tools/religious/religious-time.tsx
+++ b/src/layouts/widgets/tools/religious/religious-time.tsx
@@ -2,11 +2,8 @@ import { useEffect } from 'react'
 import { FiClock, FiMoon, FiSun, FiSunrise, FiSunset } from 'react-icons/fi'
 import { useReligiousTime } from '@/services/hooks/date/getReligiousTime.hook'
 import { useAuth } from '@/context/auth.context'
-import { Button } from '@/components/button/button'
-import { callEvent } from '@/common/utils/call-event'
-import Analytics from '@/analytics'
 
-const DAILY_ZIKRS = [
+const DAILY_LIST = [
 	{ day: 'شنبه', zikr: 'یا رَبَّ الْعَالَمِینَ', meaning: 'ای پروردگار جهانیان' },
 	{
 		day: 'یک‌شنبه',
@@ -54,7 +51,7 @@ export function ReligiousTime({ currentDate }: { currentDate: any }) {
 		}
 	}, [user?.city?.id, isAuthenticated, refetch])
 
-	const dailyZikr = DAILY_ZIKRS.find((item) => item.day === weekDay)
+	const dailyZikr = DAILY_LIST.find((item) => item.day === weekDay)
 
 	const prayerTimeBoxes = [
 		{ title: 'اذان صبح', value: religiousTimeData?.azan_sobh, icon: FiClock },
diff --git a/src/layouts/widgets/tools/translate/components/platform-modal.tsx b/src/layouts/widgets/tools/translate/components/platform-modal.tsx
deleted file mode 100644
index 2d1131fa..00000000
--- a/src/layouts/widgets/tools/translate/components/platform-modal.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { FiInfo } from 'react-icons/fi'
-import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-
-interface PlatformModalProps {
-	isOpen: boolean
-	onClose: () => void
-	platform: {
-		name: string
-		link: string
-	}
-}
-
-export function PlatformModal({ isOpen, onClose, platform }: PlatformModalProps) {
-	const handleOpenLink = () => {
-		window.open(platform.link, '_blank', 'noopener,noreferrer')
-	}
-
-	useEffect(() => {
-		if (isOpen) {
-			Analytics.event('open_translate_platform_modal')
-		}
-	}, [isOpen])
-
-	return (
-		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			size="sm"
-			direction="rtl"
-			closeOnBackdropClick={true}
-			showCloseButton={true}
-		>
-			<div className="space-y-4 text-center">
-				<div className="flex justify-center">
-					<div className="flex items-center justify-center rounded-full w-14 h-14 bg-info/10">
-						<div className="text-info">
-							<FiInfo size={24} />
-						</div>
-					</div>
-				</div>
-
-				<h3 className="text-lg font-semibold text-content">حریم خصوصی ترجمه</h3>
-
-				<div className="space-y-2 text-sm leading-relaxed text-content/80">
-					<p>
-						ویجتیفای هیچگونه نقشی در ترجمه ندارد. ترجمه توسط{' '}
-						<button
-							onClick={handleOpenLink}
-							className="font-medium text-blue-400 underline cursor-pointer hover:text-blue-500"
-						>
-							{platform.name}
-						</button>{' '}
-						انجام می‌شود.
-					</p>
-					<p className="text-xs text-content/60">
-						داده‌های شما (فقط متن ورودی) مستقیماً به سرویس ترجمه ارسال می‌شود و
-						ویجتیفای دسترسی به آن ندارد.
-					</p>
-				</div>
-
-				<div className="pt-2">
-					<Button
-						onClick={onClose}
-						size="md"
-						className="w-full text-white border-none bg-primary hover:bg-primary/90 rounded-2xl"
-					>
-						متوجه شدم
-					</Button>
-				</div>
-			</div>
-		</Modal>
-	)
-}
diff --git a/src/layouts/widgets/tools/translate/components/translation-input.tsx b/src/layouts/widgets/tools/translate/components/translation-input.tsx
deleted file mode 100644
index 0d9f7cd3..00000000
--- a/src/layouts/widgets/tools/translate/components/translation-input.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { TbVolume } from 'react-icons/tb'
-import { Button } from '@/components/button/button'
-import Tooltip from '@/components/toolTip'
-import { speakTextInLanguage } from '../shared'
-
-interface TranslationInputProp {
-	inputText: string
-	fromLanguage: string
-	onChangeInputText: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-}
-export function TranslationInput({
-	inputText,
-	fromLanguage,
-	onChangeInputText,
-}: TranslationInputProp) {
-	return (
-		<div className="relative">
-			<textarea
-				value={inputText}
-				onChange={(e) => onChangeInputText(e)}
-				placeholder="متن برای ترجمه..."
-				className="w-full h-16 p-2 text-xs resize-none textarea textarea-bordered bg-content text-content placeholder:text-content/60 !border-none !outline-none focus:ring-1 focus:ring-primary rounded-xl"
-				maxLength={500}
-			/>
-			<div className="absolute flex items-center gap-1 bottom-1 left-1">
-				<span className="text-[10px] text-content/60">
-					{inputText.length}/500
-				</span>
-				{inputText && (
-					<Tooltip content="پخش صوتی" position="top">
-						<Button
-							size="xs"
-							onClick={() => speakTextInLanguage(inputText, fromLanguage)}
-							className="!btn-xs !w-5 !h-5 !min-h-5 !p-0 btn-ghost"
-						>
-							<TbVolume className="w-3 h-3" />
-						</Button>
-					</Tooltip>
-				)}
-			</div>
-		</div>
-	)
-}
diff --git a/src/layouts/widgets/tools/translate/components/translation-result.tsx b/src/layouts/widgets/tools/translate/components/translation-result.tsx
deleted file mode 100644
index 4d32701b..00000000
--- a/src/layouts/widgets/tools/translate/components/translation-result.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { TbCopy, TbVolume } from 'react-icons/tb'
-import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
-import Tooltip from '@/components/toolTip'
-import { speakTextInLanguage } from '../shared'
-
-interface TranslationResultProps {
-	translatedText: string
-	validationError: string
-	translateMutation: any
-	errorMessage: string
-	toLanguage: string
-}
-
-const handleCopy = async (text: string) => {
-	try {
-		await navigator.clipboard.writeText(text)
-		Analytics.event('translate_copy_text')
-	} catch (err) {
-		console.error('Failed to copy text:', err)
-	}
-}
-
-export function TranslationResult({
-	translatedText,
-	validationError,
-	translateMutation,
-	errorMessage,
-	toLanguage,
-}: TranslationResultProps) {
-	return (
-		<div className="relative">
-			<div className="h-20 p-2 overflow-y-auto border rounded-xl bg-content border-base-300 text-content">
-				{validationError || translateMutation.error ? (
-					<div className="pb-4 text-xs leading-tight text-error">
-						{errorMessage}
-					</div>
-				) : (
-					<div className="pb-4 text-sm leading-tight">{translatedText}</div>
-				)}
-				{translatedText &&
-					!translateMutation.isPending &&
-					!(validationError || translateMutation.error) && (
-						<div className="absolute flex items-center gap-1 bottom-1 left-1">
-							<Tooltip content="کپی" position="top">
-								<Button
-									size="xs"
-									onClick={() => handleCopy(translatedText)}
-									className="!btn-xs !w-5 !h-5 !min-h-5 !p-0 btn-ghost"
-								>
-									<TbCopy className="w-3 h-3" />
-								</Button>
-							</Tooltip>
-							<Tooltip content="پخش صوتی" position="top">
-								<Button
-									size="xs"
-									onClick={() =>
-										speakTextInLanguage(translatedText, toLanguage)
-									}
-									className="!btn-xs !w-5 !h-5 !min-h-5 !p-0 btn-ghost"
-								>
-									<TbVolume className="w-3 h-3" />
-								</Button>
-							</Tooltip>
-						</div>
-					)}
-			</div>
-		</div>
-	)
-}
diff --git a/src/layouts/widgets/tools/translate/shared.ts b/src/layouts/widgets/tools/translate/shared.ts
deleted file mode 100644
index a530a03d..00000000
--- a/src/layouts/widgets/tools/translate/shared.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import Analytics from '@/analytics'
-import type {
-	TranslateRequestInput,
-	TranslateValidationResult,
-} from '@/services/hooks/translate'
-
-export function speakTextInLanguage(text: string, lang: string) {
-	if ('speechSynthesis' in window) {
-		const utterance = new SpeechSynthesisUtterance(text)
-		utterance.lang = lang === 'fa' ? 'fa-IR' : lang === 'en' ? 'en-US' : lang
-		speechSynthesis.speak(utterance)
-		Analytics.event(`translate_speak_${lang}`)
-	}
-}
-
-export function validateTranslateRequest(
-	request: TranslateRequestInput
-): TranslateValidationResult {
-	if (!request.text || request.text.trim().length === 0) {
-		return {
-			isValid: false,
-			error: 'EMPTY_TEXT',
-		}
-	}
-
-	if (request.text.length > 5000) {
-		return {
-			isValid: false,
-			error: 'TEXT_TOO_LONG',
-		}
-	}
-
-	if (request.from === request.to) {
-		return {
-			isValid: false,
-			error: 'SOURCE_AND_TARGET_LANG_MUST_BE_DIFFERENT',
-		}
-	}
-
-	if (request.to === 'auto') {
-		return {
-			isValid: false,
-			error: 'TARGET_LANG_CANNOT_BE_AUTO',
-		}
-	}
-
-	return { isValid: true }
-}
diff --git a/src/layouts/widgets/tools/translate/translate.tsx b/src/layouts/widgets/tools/translate/translate.tsx
deleted file mode 100644
index ffa24b21..00000000
--- a/src/layouts/widgets/tools/translate/translate.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import type React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { GoArrowSwitch } from 'react-icons/go'
-import { MdOutlinePrivacyTip } from 'react-icons/md'
-import { TbLanguage } from 'react-icons/tb'
-import Analytics from '@/analytics'
-import { RequireAuth } from '@/components/auth/require-auth'
-import { RequireVerification } from '@/components/auth/require-verification'
-import { Button } from '@/components/button/button'
-import { SelectBox } from '@/components/selectbox/selectbox'
-import { useAuth } from '@/context/auth.context'
-import {
-	getLanguageDisplayName,
-	type TranslateRequestInput,
-	useAvailableLanguages,
-	useTranslate,
-} from '@/services/hooks/translate'
-import { translateError } from '@/utils/translate-error'
-import { PlatformModal } from './components/platform-modal'
-import { TranslationInput } from './components/translation-input'
-import { TranslationResult } from './components/translation-result'
-import { validateTranslateRequest } from './shared'
-import { showToast } from '@/common/toast'
-
-export const TranslateComponent: React.FC = () => {
-	const { isAuthenticated, user } = useAuth()
-	const [toLanguage, setToLanguage] = useState<string>('fa')
-	const [inputText, setInputText] = useState<string>('')
-	const [translatedText, setTranslatedText] = useState<string>('')
-	const [validationError, setValidationError] = useState<string>('')
-	const [rateLimitTimer, setRateLimitTimer] = useState<number>(0)
-	const [showPlatformModal, setShowPlatformModal] = useState<boolean>(false)
-
-	const isEnabled = (isAuthenticated && user?.verified) || false
-
-	const { data: fetchedLanguages, isLoading: isLoadingLanguages } =
-		useAvailableLanguages({ enabled: isEnabled })
-
-	const translateMutation = useTranslate()
-
-	const errorMessage = useMemo(() => {
-		if (!validationError) return ''
-		return translateError(validationError) as string
-	}, [validationError])
-
-	const handleTranslate = async () => {
-		if (!isEnabled) {
-			showToast('برای استفاده از مترجم لطفا وارد شوید', 'error')
-			return
-		}
-
-		if (translateMutation.isPending) {
-			return
-		}
-
-		if (!inputText.trim()) {
-			setValidationError('EMPTY_TEXT')
-			return
-		}
-
-		const request: TranslateRequestInput = {
-			from: 'auto',
-			to: toLanguage,
-			text: inputText,
-		}
-
-		const validation = validateTranslateRequest(request)
-		if (!validation.isValid) {
-			setValidationError(validation.error || '')
-			return
-		}
-
-		setValidationError('')
-		setRateLimitTimer(0)
-		translateMutation.mutate(request, {
-			onSuccess: (data) => {
-				setTranslatedText(data.translated)
-				Analytics.event(`translate_success_auto_to_${toLanguage}`)
-			},
-			onError: (error: any) => {
-				const errorData = error.response?.data
-				const tryAfter = errorData?.tryAfter
-				if (tryAfter && typeof tryAfter === 'number') {
-					setRateLimitTimer(tryAfter)
-				}
-
-				setValidationError(errorData.message || 'TRANSLATE_ERROR')
-				Analytics.event(`translate_error_auto_to_${toLanguage}`)
-			},
-		})
-	}
-
-	const onChangeInputText = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-		if (e.target.value === '') {
-			setTranslatedText('')
-		}
-
-		setInputText(e.target.value)
-	}
-
-	useEffect(() => {
-		if (validationError && rateLimitTimer === 0) {
-			setValidationError('')
-		}
-	}, [toLanguage, inputText, validationError, rateLimitTimer])
-
-	const decrementTimer = useCallback(() => {
-		setRateLimitTimer((prev) => {
-			if (prev <= 1) {
-				setValidationError('')
-				return 0
-			}
-			return prev - 1
-		})
-	}, [])
-
-	useEffect(() => {
-		let interval: NodeJS.Timeout
-		if (rateLimitTimer > 0) {
-			interval = setInterval(decrementTimer, 1000)
-		}
-
-		return () => {
-			if (interval) clearInterval(interval)
-		}
-	}, [rateLimitTimer, decrementTimer])
-
-	if (isLoadingLanguages) {
-		return (
-			<div className="flex flex-col items-center justify-center h-64 space-y-3">
-				<div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
-					<TbLanguage className="w-6 h-6 text-primary animate-pulse" />
-				</div>
-				<p className="text-sm text-content">بارگذاری زبان‌ها...</p>
-			</div>
-		)
-	}
-
-	const languageOptions =
-		fetchedLanguages?.languages?.map((lang) => ({
-			label: getLanguageDisplayName(lang),
-			value: lang,
-		})) || []
-
-	return (
-		<RequireAuth mode="preview">
-			<RequireVerification mode="preview">
-				<div className="flex flex-col gap-2 p-1">
-					<div className="flex items-center gap-1">
-						<div className="flex-1">
-							<SelectBox
-								options={languageOptions}
-								disabled={true}
-								value={'auto'}
-								onChange={() => {}}
-								className="!w-full !h-6 !text-xs !bg-content hover:!bg-base-200"
-								optionClassName="!bg-base-100"
-							/>
-						</div>
-
-						<Button
-							size="xs"
-							className="btn btn-ghost !btn-xs !w-6 !h-6 !min-h-6 !p-0"
-							disabled={true}
-						>
-							<div className={`transition-transform duration-300`}>
-								<GoArrowSwitch className="w-3 h-3" />
-							</div>
-						</Button>
-
-						<div className="flex-1">
-							<SelectBox
-								options={languageOptions.filter(
-									(lang) => lang.value !== 'auto'
-								)}
-								value={toLanguage}
-								onChange={setToLanguage}
-								className="!w-full !h-6 !text-xs !bg-content hover:!bg-base-200"
-								optionClassName="!bg-base-100"
-							/>
-						</div>
-					</div>
-
-					<TranslationInput
-						inputText={inputText}
-						fromLanguage={'auto'}
-						onChangeInputText={onChangeInputText}
-					/>
-
-					<TranslationResult
-						translatedText={translatedText}
-						validationError={validationError}
-						errorMessage={errorMessage}
-						toLanguage={toLanguage}
-						translateMutation={translateMutation}
-					/>
-
-					<div className="flex flex-row justify-between w-full gap-1">
-						<Button
-							onClick={handleTranslate}
-							disabled={
-								!inputText.trim() ||
-								translateMutation.isPending ||
-								rateLimitTimer > 0 ||
-								fetchedLanguages?.isAvailableService === false
-							}
-							className="flex-1 !h-7 !min-h-7 !text-xs rounded-2xl"
-							isPrimary={true}
-							size="sm"
-						>
-							{fetchedLanguages?.isAvailableService === false ? (
-								<div className="flex items-center gap-1 text-muted">
-									<TbLanguage className="w-3 h-3" />
-									خدمات در دسترس نیست.
-								</div>
-							) : translateMutation.isPending ? (
-								<>
-									<div className="loading loading-spinner loading-xs"></div>
-									ترجمه...
-								</>
-							) : rateLimitTimer > 0 ? (
-								<>
-									<TbLanguage className="w-3 h-3" />
-									{rateLimitTimer}ثانیه
-								</>
-							) : (
-								<>
-									<TbLanguage className="w-3 h-3" />
-									ترجمه
-								</>
-							)}
-						</Button>
-						<Button
-							className="!text-xs btn-ghost !p-0 !w-7 !h-7"
-							isPrimary={false}
-							rounded="full"
-							size="sm"
-							onClick={() => setShowPlatformModal(true)}
-						>
-							<MdOutlinePrivacyTip size={14} />
-						</Button>
-					</div>
-					<PlatformModal
-						isOpen={showPlatformModal}
-						onClose={() => setShowPlatformModal(false)}
-						platform={{
-							link: fetchedLanguages?.platform.link || '-',
-							name: fetchedLanguages?.platform.name || '-',
-						}}
-					/>
-				</div>
-			</RequireVerification>
-		</RequireAuth>
-	)
-}
diff --git a/src/layouts/widgets/weather/current/current-box.weather.tsx b/src/layouts/widgets/weather/current/current-box.weather.tsx
index cffadac6..c5d99cf7 100644
--- a/src/layouts/widgets/weather/current/current-box.weather.tsx
+++ b/src/layouts/widgets/weather/current/current-box.weather.tsx
@@ -1,8 +1,7 @@
 import type { FetchedWeather } from '@/layouts/widgets/weather/weather.interface'
 import { unitsFlag } from '../unitSymbols'
 import Tooltip from '@/components/toolTip'
-import { TbWind } from 'react-icons/tb'
-import { WiCloudy, WiHumidity } from 'react-icons/wi'
+import { Icon } from '@/src/icons'
 
 interface CurrentWeatherBoxProps {
 	fetchedWeather: FetchedWeather | null
@@ -70,7 +69,7 @@ export function CurrentWeatherBox({
 				<div className="grid grid-cols-3 gap-1.5">
 					<Tooltip content={'باد'}>
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
-							<TbWind className="w-4 h-4 text-muted" />
+							<Icon name="wind" className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
 								{Math.round(
 									fetchedWeather?.weather?.temperature?.wind_speed || 0
@@ -82,7 +81,7 @@ export function CurrentWeatherBox({
 
 					<Tooltip content={'رطوبت'}>
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
-							<WiHumidity className="w-4 h-4 text-muted" />
+							<Icon name="humidity" className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
 								{fetchedWeather?.weather?.temperature?.humidity || 0}%
 							</span>
@@ -91,7 +90,7 @@ export function CurrentWeatherBox({
 
 					<Tooltip content="پوشش ابری">
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
-							<WiCloudy className="w-4 h-4 text-muted" />
+							<Icon name="cloudy" className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
 								{fetchedWeather?.weather?.temperature?.clouds || 0}%
 							</span>
diff --git a/src/layouts/widgets/wigiArz/components/arz-header.tsx b/src/layouts/widgets/wigiArz/components/arz-header.tsx
index 936e666c..215b288b 100644
--- a/src/layouts/widgets/wigiArz/components/arz-header.tsx
+++ b/src/layouts/widgets/wigiArz/components/arz-header.tsx
@@ -1,6 +1,5 @@
-import { BsCurrencyExchange } from 'react-icons/bs'
-import { FaGear } from 'react-icons/fa6'
 import { Button } from '@/components/button/button'
+import { Icon } from '@/src/icons'
 
 interface ArzHeaderProps {
 	title: string
@@ -11,7 +10,6 @@ export const ArzHeader = ({ title, onSettingsClick }: ArzHeaderProps) => {
 	return (
 		<div className={'top-0 z-20 pb-2 flex items-center justify-between w-full'}>
 			<div className="flex items-center gap-1.5">
-				<BsCurrencyExchange className="w-3.5 h-3.5 opacity-70" />
 				<p className="text-base font-medium">{title}</p>
 			</div>
 
@@ -21,7 +19,8 @@ export const ArzHeader = ({ title, onSettingsClick }: ArzHeaderProps) => {
 					size="xs"
 					className="h-6 w-6 p-0 flex items-center justify-center rounded-full !border-none !shadow-none"
 				>
-					<FaGear
+					<Icon
+						name="settings"
 						size={12}
 						className="text-content opacity-70 hover:opacity-100"
 					/>
diff --git a/src/layouts/widgets/wigiArz/components/currency-box.tsx b/src/layouts/widgets/wigiArz/components/currency-box.tsx
index b4d0cff1..29c73333 100644
--- a/src/layouts/widgets/wigiArz/components/currency-box.tsx
+++ b/src/layouts/widgets/wigiArz/components/currency-box.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 import toast from 'react-hot-toast'
-import { FaArrowDownLong, FaArrowUpLong } from 'react-icons/fa6'
-import { MdDragIndicator } from 'react-icons/md'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { CurrencyColorMode } from '@/context/currency.context'
@@ -13,6 +11,7 @@ import {
 import { GetPrice } from '../utils/getPrice'
 import { CurrencyModalComponent } from './currency-modal'
 import { showToast } from '@/common/toast'
+import { Icon } from '@/src/icons'
 
 interface CurrencyBoxProps {
 	code: string
@@ -108,7 +107,7 @@ export const CurrencyBox = ({
 								{...dragHandle}
 								className="flex items-center justify-center w-4 h-4 transition-colors cursor-grab active:cursor-grabbing text-muted hover:bg-primary/10"
 							>
-								<MdDragIndicator size={14} />
+								<Icon name="dragIndicator" size={14} />
 							</div>
 						)}
 						<div className="relative">
@@ -146,9 +145,9 @@ export const CurrencyBox = ({
 						{priceChange !== 0 && (
 							<span className={`text-xs ${priceChangeColor}`}>
 								{priceChange > 0 ? (
-									<FaArrowUpLong className="inline" />
+									<Icon name="upLong" className="inline" />
 								) : (
-									<FaArrowDownLong className="inline" />
+									<Icon name="downLong" className="inline" />
 								)}
 							</span>
 						)}
diff --git a/src/layouts/widgets/wigiArz/components/currency-modal.tsx b/src/layouts/widgets/wigiArz/components/currency-modal.tsx
index 21577005..694b6bb1 100644
--- a/src/layouts/widgets/wigiArz/components/currency-modal.tsx
+++ b/src/layouts/widgets/wigiArz/components/currency-modal.tsx
@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react'
-import { FaArrowDownLong, FaArrowUpLong } from 'react-icons/fa6'
-import { TbArrowsRightLeft } from 'react-icons/tb'
 import Analytics from '@/analytics'
 import Modal from '@/components/modal'
 import { TextInput } from '@/components/text-input'
 import { CurrencyColorMode } from '@/context/currency.context'
 import { GetPrice } from '../utils/getPrice'
+import { Icon } from '@/src/icons'
 
 interface CurrencyModalComponentProps {
 	code: string
@@ -116,7 +115,7 @@ export const CurrencyModalComponent = ({
 							className="cursor-pointer hover:text-primary"
 							onClick={() => onClickConverter()}
 						>
-							<TbArrowsRightLeft />
+							<Icon name="arrowRightLeft" />
 						</div>
 					</div>
 				</div>
@@ -132,9 +131,9 @@ export const CurrencyModalComponent = ({
 								className={`flex items-center text-sm transition-all duration-300 ease-out ${priceChangeColor}`}
 							>
 								{priceChange > 0 ? (
-									<FaArrowUpLong className="mr-1" />
+									<Icon name="upLong" className="mr-1" />
 								) : (
-									<FaArrowDownLong className="mr-1" />
+									<Icon name="downLong" className="mr-1" />
 								)}
 
 								<span>
diff --git a/src/layouts/widgets/wigiArz/utils/getPrice.tsx b/src/layouts/widgets/wigiArz/utils/getPrice.tsx
index 54f1b800..50547827 100644
--- a/src/layouts/widgets/wigiArz/utils/getPrice.tsx
+++ b/src/layouts/widgets/wigiArz/utils/getPrice.tsx
@@ -1,5 +1,4 @@
 import type React from 'react'
-import { FaDollarSign } from 'react-icons/fa'
 import type { FetchedCurrency } from '@/services/hooks/currency/getCurrencyByCode.hook'
 export interface GetPriceResult {
 	price: number
@@ -9,12 +8,7 @@ export function GetPrice(code: string, currency: FetchedCurrency): GetPriceResul
 	if (code.toLowerCase() === 'btc' || currency.useDollar) {
 		return {
 			price: currency.price,
-			label: (
-				<>
-					<FaDollarSign className="inline" />
-					{currency.price?.toLocaleString()}
-				</>
-			),
+			label: <>💲{currency.price?.toLocaleString()}</>,
 		}
 	} else {
 		return {
diff --git a/src/layouts/widgets/wigiArz/wigi_arz.layout.tsx b/src/layouts/widgets/wigiArz/wigi_arz.layout.tsx
index a976952b..d190ffe3 100644
--- a/src/layouts/widgets/wigiArz/wigi_arz.layout.tsx
+++ b/src/layouts/widgets/wigiArz/wigi_arz.layout.tsx
@@ -11,7 +11,6 @@ import {
 	SortableContext,
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
-import { FiDollarSign } from 'react-icons/fi'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
@@ -83,7 +82,7 @@ export function WigiArzLayout({
 									'flex items-center justify-center w-12 h-12 mx-auto rounded-full bg-base-300/70 border-base/70'
 								}
 							>
-								<FiDollarSign className="text-content" size={24} />
+								💲
 							</div>
 							<p className="mt-1 text-center text-content">
 								ارزهای مورد نظر خود را اضافه کنید
@@ -132,7 +131,7 @@ export function WigiArzLayout({
 					className={'flex flex-col gap-1'}
 				>
 					<ArzHeader
-						title="ویجی‌ ارز"
+						title="ویجی ارز"
 						onSettingsClick={() => onSettingClick()}
 					/>
 
@@ -147,7 +146,7 @@ export function WigiArzLayout({
 									'mt-1 flex items-center justify-center w-12 h-12 mx-auto rounded-full bg-base-300'
 								}
 							>
-								<FiDollarSign className="text-content" size={24} />
+								💲
 							</div>
 							<p className="text-center text-content">
 								ارزهای مورد نظر خود را اضافه کنید.
diff --git a/src/layouts/widgets/wigiPad/clock-display/clock-display.tsx b/src/layouts/widgets/wigiPad/clock-display/clock-display.tsx
index fecd2fdf..73f33047 100644
--- a/src/layouts/widgets/wigiPad/clock-display/clock-display.tsx
+++ b/src/layouts/widgets/wigiPad/clock-display/clock-display.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { FaCog } from 'react-icons/fa'
 import { getFromStorage } from '@/common/storage'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
@@ -8,6 +7,7 @@ import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { type ClockSettings, ClockType } from './clock-setting.interface'
 import { AnalogClock } from './clocks/analog.clock'
 import { DigitalClock } from './clocks/digital.clock'
+import { Icon } from '@/src/icons'
 
 export function ClockDisplay() {
 	const [clockSettings, setClockSettings] = useState<ClockSettings | null>(null)
@@ -60,7 +60,7 @@ export function ClockDisplay() {
 					className="m-1.5 h-5 w-5 p-0 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 !border-none !shadow-none transition-all duration-300 delay-200"
 					onClick={onClickSettings}
 				>
-					<FaCog size={12} className="text-content" />
+					<Icon name="settings" size={12} className="text-content" />
 				</Button>
 			</div>
 
diff --git a/src/layouts/widgets/wigiPad/date-display/date.display.tsx b/src/layouts/widgets/wigiPad/date-display/date.display.tsx
index 89cf3156..e644c0f9 100644
--- a/src/layouts/widgets/wigiPad/date-display/date.display.tsx
+++ b/src/layouts/widgets/wigiPad/date-display/date.display.tsx
@@ -1,4 +1,3 @@
-import { FaCog } from 'react-icons/fa'
 import { getFromStorage } from '@/common/storage'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
@@ -6,6 +5,7 @@ import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { type WigiPadDateSetting, WigiPadDateType } from './date-setting.interface'
 import { GregorianDate } from './dates/gregorian.date'
 import { JalaliDate } from './dates/jalali.date'
+import { Icon } from '@/src/icons'
 
 export function DateDisplay() {
 	const [wigiPadDateSettings, setWigiPadDateSettings] =
@@ -53,7 +53,7 @@ export function DateDisplay() {
 					size="xs"
 					className="m-1.5 h-5 w-5 p-0 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 !border-none !shadow-none transition-all duration-300 delay-200"
 				>
-					<FaCog size={12} className="text-content" />
+					<Icon name="settings" size={12} className="text-content" />
 				</Button>
 			</div>
 
diff --git a/src/layouts/widgets/yadkar/yadkar.tsx b/src/layouts/widgets/yadkar/yadkar.tsx
index b397828a..d9124f13 100644
--- a/src/layouts/widgets/yadkar/yadkar.tsx
+++ b/src/layouts/widgets/yadkar/yadkar.tsx
@@ -3,15 +3,11 @@ import Analytics from '@/analytics'
 import { NotesLayout } from '../notes/notes.layout'
 import { TodosLayout } from '../todos/todos'
 import { TabNavigation } from '@/components/tab-navigation'
-import {
-	HiOutlineCheckCircle,
-	HiOutlineDocumentText,
-	HiOutlineFire,
-} from 'react-icons/hi2'
 import { WidgetContainer } from '../widget-container'
 import { HabitsContent } from '../habit/habits.layout'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { useEffect } from 'react'
+import { Icon } from '@/src/icons'
 
 type Tab = 'todos' | 'notes' | 'rabbit'
 export function YadkarWidget() {
@@ -47,17 +43,17 @@ export function YadkarWidget() {
 								{
 									id: 'todos',
 									label: 'تسک‌ها',
-									icon: <HiOutlineCheckCircle size={14} />,
+									icon: <Icon name="taskList" size={14} />,
 								},
 								{
 									id: 'notes',
 									label: 'یادداشت',
-									icon: <HiOutlineDocumentText size={14} />,
+									icon: <Icon name="notebook" size={14} />,
 								},
 								{
 									id: 'rabbit',
 									label: 'عادت‌ها (بتا)',
-									icon: <HiOutlineFire size={14} />,
+									icon: <Icon name="strike" size={14} />,
 								},
 							]}
 							size="small"
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index d4dbb307..953df47b 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -16,6 +16,7 @@ import { HomePage } from './home/home.page'
 import { useEffect } from 'react'
 import { useWallpaperApply } from '@/layouts/setting/tabs/wallpapers/hooks/use-wallpaper-apply'
 import { WallpaperProvider } from '@/context/wallpaper.context'
+import { IconProvider } from '../icons/icons.context'
 
 export function RootLayout() {
 	const [showWidgetSettings, setShowWidgetSettings] = useState(false)
@@ -48,69 +49,70 @@ export function RootLayout() {
 
 	return (
 		<div className="w-full min-h-screen mx-auto md:px-4 lg:px-0 max-w-[1080px] flex flex-col h-[100vh] overflow-y-auto scrollbar-none">
-			<GeneralSettingProvider>
-				<WallpaperProvider>
-					<WidgetVisibilityProvider>
-						<NavbarLayout />
+			<IconProvider defaultTheme="default">
+				<GeneralSettingProvider>
+					<WallpaperProvider>
+						<WidgetVisibilityProvider>
+							<NavbarLayout />
 
-						<AnimatePresence mode="wait">
-							<motion.div
-								key={page}
-								initial={{ opacity: 0 }}
-								animate={{ opacity: 1 }}
-								exit={{ opacity: 0 }}
-								transition={{
-									duration: 0.15,
-									ease: 'linear',
+							<AnimatePresence mode="wait">
+								<motion.div
+									key={page}
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									exit={{ opacity: 0 }}
+									transition={{
+										duration: 0.15,
+										ease: 'linear',
+									}}
+									className="flex w-full h-full"
+								>
+									{page === Page.Home ? (
+										<HomePage />
+									) : page === Page.Explorer ? (
+										<ExplorerPage />
+									) : (
+										<MiniAppPage />
+									)}
+								</motion.div>
+							</AnimatePresence>
+							<WidgetSettingsModal
+								isOpen={showWidgetSettings}
+								onClose={() => {
+									setShowWidgetSettings(false)
+									setTab(null)
 								}}
-								className="flex w-full h-full"
-							>
-								{page === Page.Home ? (
-									<HomePage />
-								) : page === Page.Explorer ? (
-									<ExplorerPage />
-								) : (
-									<MiniAppPage />
-								)}
-							</motion.div>
-						</AnimatePresence>
-						<WidgetSettingsModal
-							isOpen={showWidgetSettings}
-							onClose={() => {
-								setShowWidgetSettings(false)
-								setTab(null)
-							}}
-							selectedTab={tab}
-						/>
-					</WidgetVisibilityProvider>
-				</WallpaperProvider>
-			</GeneralSettingProvider>
-
-			<Toaster
-				toastOptions={{
-					error: {
-						style: {
-							backgroundColor: '#f8d7da',
-							color: '#721c24',
+								selectedTab={tab}
+							/>
+						</WidgetVisibilityProvider>
+					</WallpaperProvider>
+				</GeneralSettingProvider>
+				<Toaster
+					toastOptions={{
+						error: {
+							style: {
+								backgroundColor: '#f8d7da',
+								color: '#721c24',
+							},
 						},
-					},
-					success: {
-						style: {
-							backgroundColor: '#d4edda',
-							color: '#155724',
+						success: {
+							style: {
+								backgroundColor: '#d4edda',
+								color: '#155724',
+							},
 						},
-					},
-					duration: 5000,
-				}}
-			/>
-			{/* <UpdateChecker /> */}
-
-			{showAuthRequired && (
-				<AuthRequiredModal
-					isOpen={showAuthRequired}
-					onClose={() => setAuthRequired(false)}
+						duration: 5000,
+					}}
 				/>
-			)}
+				{/* <UpdateChecker /> */}
+
+				{showAuthRequired && (
+					<AuthRequiredModal
+						isOpen={showAuthRequired}
+						onClose={() => setAuthRequired(false)}
+					/>
+				)}
+			</IconProvider>
 		</div>
 	)
 }