diff --git a/apps/www/package.json b/apps/www/package.json
index 3a146d65..0c994fa1 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@morev/vue-transitions": "^2.3.6",
+    "@radix-icons/vue": "^1.0.0",
     "@tanstack/vue-table": "^8.9.9",
     "@unovis/ts": "^1.2.1",
     "@unovis/vue": "1.3.0-alpha.3",
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index 561ae80e..a6d201ff 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -14,9 +14,8 @@ import {
   useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 
 import { Button } from '@/lib/registry/default/ui/button'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
@@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -180,7 +179,7 @@ const table = useVueTable({
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
               <Button variant="outline" class="ml-auto">
-                Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
index fe9002a2..b0274d9b 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -5,8 +5,8 @@ import {
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
 } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
 
@@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
     >
-      <RadixIconsCheck class="w-4 h-4" />
+      <Check class="w-4 h-4" />
     </MenubarItemIndicator>
     <slot />
   </MenubarCheckboxItem>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
index 960389aa..4619f96a 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -5,8 +5,8 @@ import {
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
 } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
 
 const props = defineProps<MenubarRadioItemProps & { class?: string }>()
 
@@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
     >
-      <RiCheckboxBlankCircleFill class="h-2 w-2 fill-curren" />
+      <Circle class="h-2 w-2 fill-curren" />
     </MenubarItemIndicator>
 
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
index 6d74489d..b9af78cf 100644
--- a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
@@ -4,8 +4,8 @@ import {
   RadioGroupItem,
   type RadioGroupItemProps,
 } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
 
 const props = defineProps<RadioGroupItemProps & { class?: string }>()
 </script>
@@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
     <RadioGroupIndicator
       :class="cn('flex items-center justify-center', props.class)"
     >
-      <RiCheckboxBlankCircleFill class="w-2.5 h-2.5 text-foreground" />
+      <Circle class="w-2.5 h-2.5 text-foreground" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
index 5ebbd0be..cae5d6ec 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -5,8 +5,8 @@ import {
   type SelectItemProps,
   SelectItemText,
 } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'
 
 const props = defineProps<SelectItemProps & { class?: string }>()
 </script>
@@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <RadixIconsCheck class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </SelectItemIndicator>
     </span>
 
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
index cd4a8796..ebb70284 100644
--- a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import RadixIconsRocket from '~icons/radix-icons/rocket'
+import { RocketIcon } from '@radix-icons/vue'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
 </script>
 
 <template>
   <Alert>
-    <RadixIconsRocket class="h-4 w-4" />
+    <RocketIcon class="h-4 w-4" />
     <AlertTitle>Heads up!</AlertTitle>
     <AlertDescription>
       You can add components to your app using the cli.
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
index 5f57edd5..6d1b36ce 100644
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import RadixIconsBell from '~icons/radix-icons/bell'
-import RadixIconsCheck from '~icons/radix-icons/check'
-
+import { BellIcon, CheckIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -38,7 +36,7 @@ const notifications = [
     </CardHeader>
     <CardContent class="grid gap-4">
       <div class=" flex items-center space-x-4 rounded-md border p-4">
-        <RadixIconsBell />
+        <BellIcon />
         <div class="flex-1 space-y-1">
           <p class="text-sm font-medium leading-none">
             Push Notifications
@@ -68,7 +66,7 @@ const notifications = [
     </CardContent>
     <CardFooter>
       <Button class="w-full">
-        <RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
+        <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
       </Button>
     </CardFooter>
   </Card>
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index f875dceb..420887d9 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import Minus from '~icons/radix-icons/minus'
-import Plus from '~icons/radix-icons/plus'
+import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
 import {
@@ -54,7 +53,7 @@ const data = [
           :disabled="goal <= 200"
           @click="goal -= 10"
         >
-          <Minus class="h-4 w-4" />
+          <MinusIcon class="h-4 w-4" />
           <span class="sr-only">Decrease</span>
         </Button>
         <div class="flex-1 text-center">
@@ -72,7 +71,7 @@ const data = [
           :disabled="goal >= 400"
           @click="goal += 10 "
         >
-          <Plus class="h-4 w-4" />
+          <PlusIcon class="h-4 w-4" />
           <span class="sr-only">Increase</span>
         </Button>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
index 59f5533d..1cc8c673 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@@ -14,9 +14,8 @@ import {
   useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from '../DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -180,7 +179,7 @@ const table = useVueTable({
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
               <Button variant="outline" class="ml-auto">
-                Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
index c00e2de0..77868bbf 100644
--- a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
+import { CaretSortIcon } from '@radix-icons/vue'
 
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
@@ -23,7 +23,7 @@ const isOpen = ref(false)
       </h4>
       <CollapsibleTrigger as-child>
         <Button variant="ghost" size="sm" class="w-9 p-0">
-          <RadixIconsCaretSort class="h-4 w-4" />
+          <CaretSortIcon class="h-4 w-4" />
           <span class="sr-only">Toggle</span>
         </Button>
       </CollapsibleTrigger>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
index 91a48096..da968601 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import Check from '~icons/radix-icons/check'
-import CaretSort from '~icons/radix-icons/caret-sort'
+import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
@@ -42,7 +41,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
         class="w-[200px] justify-between"
       >
         {{ value ? value.label : 'Select framework...' }}
-        <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -57,7 +56,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
             @select="open = false"
           >
             {{ framework.label }}
-            <Check
+            <CheckIcon
               :class="cn(
                 'ml-auto h-4 w-4',
                 value?.value === framework.value ? 'opacity-100' : 'opacity-0',
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
index a4bd94a9..a83220ab 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -14,9 +14,8 @@ import {
   useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from './DataTableDemoColumn.vue'
-import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
@@ -104,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -173,7 +172,7 @@ const table = useVueTable({
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button variant="outline" class="ml-auto">
-            Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
index bef9f9af..7031caa8 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
@@ -19,7 +19,7 @@ function copy(id: string) {
     <DropdownMenuTrigger as-child>
       <Button variant="ghost" class="h-8 w-8 p-0">
         <span class="sr-only">Open menu</span>
-        <RadixIconsDotsHorizontal class="h-4 w-4" />
+        <DotsHorizontalIcon class="h-4 w-4" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index a39c9af3..685f17cb 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import { ref } from 'vue'
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
@@ -25,7 +25,7 @@ const date = ref<Date>()
           !date && 'text-muted-foreground',
         )"
       >
-        <RadixIconsCalendar class="mr-2 h-4 w-4" />
+        <CalendarIcon class="mr-2 h-4 w-4" />
         <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
       </Button>
     </PopoverTrigger>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
index 910a8f13..2d6c7784 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { addDays, format } from 'date-fns'
 import { ref } from 'vue'
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'
 
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
@@ -30,7 +30,7 @@ const date = ref({
             !date && 'text-muted-foreground',
           )"
         >
-          <RadixIconsCalendar class="mr-2 h-4 w-4" />
+          <CalendarIcon class="mr-2 h-4 w-4" />
 
           <span>
             {{ date.start ? (
diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
index 45b6cf9e..57ea45c8 100644
--- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
+import { CalendarIcon } from '@radix-icons/vue'
 
 import {
   Avatar,
@@ -35,7 +35,7 @@ import {
             Progressive JavaScript framework for building modern web interfaces.
           </p>
           <div class="flex items-center pt-2">
-            <RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
+            <CalendarIcon class="mr-2 h-4 w-4 opacity-70" />
             <span class="text-xs text-muted-foreground">
               Joined January 2014
             </span>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
index 3d653a62..4ef6f4a1 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import RadixIconsFontBold from '~icons/radix-icons/font-bold'
+import { FontBoldIcon } from '@radix-icons/vue'
 
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
 </script>
 
 <template>
   <Toggle aria-label="Toggle italic">
-    <RadixIconsFontBold class="h-4 w-4" />
+    <FontBoldIcon class="h-4 w-4" />
   </Toggle>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
index c9bf4816..264aa7f6 100644
--- a/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/accordion/AccordionTrigger.vue
@@ -4,7 +4,7 @@ import {
   AccordionTrigger,
   type AccordionTriggerProps,
 } from 'radix-vue'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionTriggerProps & { class?: string }>()
@@ -22,7 +22,7 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
       "
     >
       <slot />
-      <RadixIconsChevronDown
+      <ChevronDownIcon
         class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
       />
     </AccordionTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
index 321b3c88..7bdf655b 100644
--- a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps>()
@@ -18,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
          $attrs.class ?? '')"
   >
     <CheckboxIndicator class="flex items-center justify-center text-current">
-      <RadixIconsCheck class="h-4 w-4" />
+      <CheckIcon class="h-4 w-4" />
     </CheckboxIndicator>
   </CheckboxRoot>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index e3abb007..86a2e731 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -5,7 +5,7 @@ import {
   type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
 } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
@@ -26,7 +26,7 @@ const emits = defineEmits<ContextMenuCheckboxItemEmits>()
       <ContextMenuItemIndicator
         class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
       >
-        <RadixIconsCheck class="h-4 w-4" />
+        <CheckIcon class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index ea9aa8aa..da9fb25a 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -5,7 +5,7 @@ import {
   type ContextMenuRadioItemEmits,
   type ContextMenuRadioItemProps,
 } from 'radix-vue'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
@@ -24,7 +24,7 @@ const emits = defineEmits<ContextMenuRadioItemEmits>()
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="h-4 w-4 fill-current" />
       </ContextMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index a7797fcb..086c1da0 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -7,7 +7,7 @@ import {
   DialogOverlay,
   DialogPortal,
 } from 'radix-vue'
-import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { Cross2Icon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: string }>()
@@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
       <DialogClose
         class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
       >
-        <RadixIconsCross2 class="w-4 h-4" />
+        <Cross2Icon class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 10490662..08460d4f 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
 } from 'radix-vue'
-import RadixIconsCheck from '~icons/radix-icons/check'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
@@ -22,7 +22,7 @@ const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <RadixIconsCheck class="w-4 h-4" />
+        <CheckIcon class="w-4 h-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index d5721a6d..22e33660 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
 } from 'radix-vue'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
@@ -24,7 +24,7 @@ const emits = defineEmits<DropdownMenuRadioItemEmits>()
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 
       <DropdownMenuItemIndicator>
-        <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="h-4 w-4 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 90d376a3..9dfe76d5 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -3,7 +3,7 @@ import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
 } from 'radix-vue'
-import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
@@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
     ]"
   >
     <slot />
-    <RadixIconsChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index fe9002a2..53d1ceb2 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -5,8 +5,8 @@ import {
   type MenubarCheckboxItemProps,
   MenubarItemIndicator,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
 
@@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
     >
-      <RadixIconsCheck class="w-4 h-4" />
+      <CheckIcon class="w-4 h-4" />
     </MenubarItemIndicator>
     <slot />
   </MenubarCheckboxItem>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index 4a1f5961..2c832661 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -5,8 +5,8 @@ import {
   type MenubarRadioItemEmits,
   type MenubarRadioItemProps,
 } from 'radix-vue'
+import { DotFilledIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
 
 const props = defineProps<MenubarRadioItemProps & { class?: string }>()
 
@@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
     <MenubarItemIndicator
       class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
     >
-      <RadixIconsDotFilled class="h-4 w-4 fill-current" />
+      <DotFilledIcon class="h-4 w-4 fill-current" />
     </MenubarItemIndicator>
 
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index a9ffee31..29ac7207 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -3,8 +3,8 @@ import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
 } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { navigationMenuTriggerStyle } from '.'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
@@ -16,7 +16,7 @@ const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
     v-bind="props"
   >
     <slot />
-    <RadixIconsChevronDown
+    <ChevronDownIcon
       class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
index 153d720e..4780263a 100644
--- a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -4,8 +4,8 @@ import {
   RadioGroupItem,
   type RadioGroupItemProps,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'
 
 const props = defineProps<RadioGroupItemProps & { class?: string }>()
 </script>
@@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
     <RadioGroupIndicator
       :class="cn('flex items-center justify-center', props.class)"
     >
-      <RadixIconsCheck class="h-3.5 w-3.5 fill-primary" />
+      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index 5ebbd0be..e5c533c3 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -5,8 +5,8 @@ import {
   type SelectItemProps,
   SelectItemText,
 } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
-import RadixIconsCheck from '~icons/radix-icons/check'
 
 const props = defineProps<SelectItemProps & { class?: string }>()
 </script>
@@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <RadixIconsCheck class="h-4 w-4" />
+        <CheckIcon class="h-4 w-4" />
       </SelectItemIndicator>
     </span>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index 2811c5bc..15219cd1 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
-import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
@@ -27,7 +27,7 @@ const props = withDefaults(
   >
     <slot />
     <SelectIcon as-child>
-      <RadixIconsChevronDown class="w-4 h-4 opacity-50" />
+      <ChevronDownIcon class="w-4 h-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index d8aa1e5b..cd84d134 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -8,7 +8,7 @@ import {
   DialogPortal,
 } from 'radix-vue'
 import { cva } from 'class-variance-authority'
-import RadixIconsCross2 from '~icons/radix-icons/cross-2'
+import { Cross2Icon } from '@radix-icons/vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
@@ -56,7 +56,7 @@ const sheetVariants = cva(
       <DialogClose
         class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
       >
-        <RadixIconsCross2 class="w-4 h-4 text-muted-foreground" />
+        <Cross2Icon class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9baa2e89..857952c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@morev/vue-transitions':
         specifier: ^2.3.6
         version: 2.3.6(vue@3.3.4)
+      '@radix-icons/vue':
+        specifier: ^1.0.0
+        version: 1.0.0(vue@3.3.4)
       '@tanstack/vue-table':
         specifier: ^8.9.9
         version: 8.9.9(vue@3.3.4)
@@ -1779,6 +1782,14 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
+  /@radix-icons/vue@1.0.0(vue@3.3.4):
+    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
+    peerDependencies:
+      vue: '>= 3'
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /@rollup/pluginutils@5.0.4:
     resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
     engines: {node: '>=14.0.0'}