diff --git a/src/components/common/mode-toggle.tsx b/src/components/common/mode-toggle.tsx
index 5bf20ce..bb952bd 100644
--- a/src/components/common/mode-toggle.tsx
+++ b/src/components/common/mode-toggle.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 
@@ -12,6 +11,8 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
+import { Icon } from '@/icon'
+
 export function ModeToggle() {
   const { setTheme } = useTheme()
 
@@ -19,8 +20,14 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' className='h-9 w-9 px-0'>
-          <SunIcon className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
-          <MoonIcon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+          <Icon
+            name='SunIcon'
+            className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'
+          />
+          <Icon
+            name='MoonIcon'
+            className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
+          />
           <span className='sr-only'>Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index e1a78fe..095fb05 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,10 +1,11 @@
-import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
@@ -33,7 +34,10 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className='h-4 w-4 shrink-0 transition-transform duration-200' />
+      <Icon
+        name='ChevronDown'
+        className='h-4 w-4 shrink-0 transition-transform duration-200'
+      />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 637a114..c9e6fd2 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,4 +1,3 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react'
 import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 
@@ -6,6 +5,8 @@ import { buttonVariants } from '@/components/ui/button'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({
@@ -51,8 +52,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className='h-4 w-4' />,
-        IconRight: ({ ...props }) => <ChevronRight className='h-4 w-4' />,
+        IconLeft: () => <Icon name='ChevronLeft' className='h-4 w-4' />,
+        IconRight: () => <Icon name='ChevronRight' className='h-4 w-4' />,
       }}
       {...props}
     />
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 8c8d7fb..c1af98e 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,10 +1,11 @@
-import { Check } from 'lucide-react'
 import * as React from 'react'
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
@@ -20,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <Check className='h-4 w-4' />
+      <Icon name='Check' className='h-4 w-4' />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index f4aa5e3..3534cf0 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,5 +1,4 @@
 import { Command as CommandPrimitive } from 'cmdk'
-import { Search } from 'lucide-react'
 import * as React from 'react'
 
 import { Dialog, DialogContent } from '@/components/ui/dialog'
@@ -8,6 +7,8 @@ import { DialogProps } from '@radix-ui/react-dialog'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
@@ -42,7 +43,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className='flex items-center border-b px-3'>
-    <Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />
+    <Icon name='Search' className='mr-2 h-4 w-4 shrink-0 opacity-50' />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index ce3d4ae..d5d02c8 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,10 +1,11 @@
-import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const ContextMenu = ContextMenuPrimitive.Root
 
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger
@@ -33,7 +34,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className='ml-auto h-4 w-4' />
+    <Icon name='ChevronRight' className='ml-auto h-4 w-4' />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -103,7 +104,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <ContextMenuPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
+        <Icon name='Check' className='h-4 w-4' />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -126,7 +127,7 @@ const ContextMenuRadioItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <ContextMenuPrimitive.ItemIndicator>
-        <Circle className='h-2 w-2 fill-current' />
+        <Icon name='Circle' className='h-2 w-2 fill-current' />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index a98c6c2..8e1c47e 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,10 +1,11 @@
-import { X } from 'lucide-react'
 import * as React from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
@@ -45,7 +46,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
-        <X className='h-4 w-4' />
+        <Icon name='X' className='h-4 w-4' />
         <span className='sr-only'>Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 12d13bf..f7ca631 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,10 +1,11 @@
-import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const DropdownMenu = DropdownMenuPrimitive.Root
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
@@ -33,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className='ml-auto h-4 w-4' />
+    <Icon name='ChevronRight' className='ml-auto h-4 w-4' />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -106,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
+        <Icon name='Check' className='h-4 w-4' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -129,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className='h-2 w-2 fill-current' />
+        <Icon name='Circle' className='h-2 w-2 fill-current' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index aab4385..4b7c82d 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,10 +1,11 @@
-import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 import * as MenubarPrimitive from '@radix-ui/react-menubar'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const MenubarMenu = MenubarPrimitive.Menu
 
 const MenubarGroup = MenubarPrimitive.Group
@@ -61,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className='ml-auto h-4 w-4' />
+    <Icon name='ChevronRight' className='ml-auto h-4 w-4' />
   </MenubarPrimitive.SubTrigger>
 ))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
@@ -139,7 +140,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
+        <Icon name='Check' className='h-4 w-4' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -161,7 +162,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <Circle className='h-2 w-2 fill-current' />
+        <Icon name='Circle' className='h-2 w-2 fill-current' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 884a48f..94ffe18 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,11 +1,12 @@
 import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
 
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
@@ -55,7 +56,8 @@ const NavigationMenuTrigger = React.forwardRef<
     {...props}
   >
     {children}{' '}
-    <ChevronDown
+    <Icon
+      name='ChevronDown'
       className='relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180'
       aria-hidden='true'
     />
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 172e8fb..1af72dc 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,10 +1,11 @@
-import { Circle } from 'lucide-react'
 import * as React from 'react'
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
@@ -33,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
-        <Circle className='h-2.5 w-2.5 fill-current text-current' />
+        <Icon name='Circle' className='h-2.5 w-2.5 fill-current text-current' />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index f48e3b4..89fadca 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,10 +1,11 @@
-import { Check, ChevronDown } from 'lucide-react'
 import * as React from 'react'
 
 import * as SelectPrimitive from '@radix-ui/react-select'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Select = SelectPrimitive.Root
 
 const SelectGroup = SelectPrimitive.Group
@@ -25,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className='h-4 w-4 opacity-50' />
+      <Icon name='ChevronDown' className='h-4 w-4 opacity-50' />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -87,7 +88,7 @@ const SelectItem = React.forwardRef<
   >
     <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <SelectPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
+        <Icon name='Check' className='h-4 w-4' />
       </SelectPrimitive.ItemIndicator>
     </span>
 
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 5702532..d978071 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,11 +1,12 @@
 import { type VariantProps, cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
 import * as React from 'react'
 
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const Sheet = SheetPrimitive.Root
 
 const SheetTrigger = SheetPrimitive.Trigger
@@ -68,7 +69,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
-        <X className='h-4 w-4' />
+        <Icon name='X' className='h-4 w-4' />
         <span className='sr-only'>Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 7c9eaa9..ed4b96e 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,11 +1,12 @@
 import { type VariantProps, cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
 import * as React from 'react'
 
 import * as ToastPrimitives from '@radix-ui/react-toast'
 
 import { cn } from '@/utils/cn'
 
+import { Icon } from '@/icon'
+
 const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
@@ -82,7 +83,7 @@ const ToastClose = React.forwardRef<
     toast-close=''
     {...props}
   >
-    <X className='h-4 w-4' />
+    <Icon name='X' className='h-4 w-4' />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
diff --git a/src/icon/index.tsx b/src/icon/index.tsx
index dfd9ae1..c512031 100644
--- a/src/icon/index.tsx
+++ b/src/icon/index.tsx
@@ -1,9 +1,30 @@
+import {
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  MoonIcon,
+  Search,
+  SunIcon,
+  X,
+} from 'lucide-react'
+
 import Github from './assets/github'
 import Spinner from './assets/spinner'
 
 const iconComponents = {
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  MoonIcon,
+  SunIcon,
+  Circle,
   Github,
   Spinner,
+  X,
+  Search,
 }
 
 export const Icon = (props) => {