feat(theme)!: migrate from heroicons to lucide (#2540)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/app.vue

@@ -23,27 +23,27 @@ const searchTerm = ref('')
 const links = computed(() => {
   return [{
     label: 'Docs',
-    icon: 'i-heroicons-book-open',
+    icon: 'i-lucide-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
   }, ...(navigation.value?.find(item => item.path === '/pro')
     ? [{
         label: 'Pro',
-        icon: 'i-heroicons-square-3-stack-3d',
+        icon: 'i-lucide-layers-3',
         to: '/pro',
         active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
       }, {
         label: 'Pricing',
-        icon: 'i-heroicons-credit-card',
+        icon: 'i-lucide-credit-card',
         to: '/pro/pricing'
       }, {
         label: 'Templates',
-        icon: 'i-heroicons-computer-desktop',
+        icon: 'i-lucide-monitor',
         to: '/pro/templates'
       }]
     : []), {
     label: 'Releases',
-    icon: 'i-heroicons-rocket-launch',
+    icon: 'i-lucide-rocket',
     to: '/releases'
   }].filter(Boolean)
 })

docs/app/components/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :close="false">
+  <UBanner icon="i-lucide-wrench" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-lucide-arrow-right' }]" :close="false">
     <template #title>
       You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
     </template>

docs/app/components/content/examples/accordion/AccordionBodySlotExample.vue

@@ -2,15 +2,15 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile'
+    icon: 'i-lucide-smile'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch'
+    icon: 'i-lucide-swatch-book'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent'
+    icon: 'i-lucide-box'
   }
 ]
 </script>

docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

@@ -2,15 +2,15 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile'
+    icon: 'i-lucide-smile'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch'
+    icon: 'i-lucide-swatch-book'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent'
+    icon: 'i-lucide-box'
   }
 ]
 </script>

docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

@@ -2,18 +2,18 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile',
+    icon: 'i-lucide-smile',
     content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch',
+    icon: 'i-lucide-swatch-book',
     slot: 'colors',
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
   }
 ]

docs/app/components/content/examples/accordion/AccordionModelValueExample.vue

@@ -2,17 +2,17 @@
 const items = [
   {
     label: 'Icons',
-    icon: 'i-heroicons-face-smile',
+    icon: 'i-lucide-smile',
     content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
   },
   {
     label: 'Colors',
-    icon: 'i-heroicons-swatch',
+    icon: 'i-lucide-swatch-book',
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
   }
 ]

docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue

@@ -4,7 +4,7 @@ const items = [{
   to: '/'
 }, {
   slot: 'dropdown',
-  icon: 'i-heroicons-ellipsis-horizontal',
+  icon: 'i-lucide-ellipsis',
   children: [{
     label: 'Documentation'
   }, {

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 const items = [{
   label: 'Team',
-  icon: 'i-heroicons-users'
+  icon: 'i-lucide-users'
 }, {
   label: 'Invite users',
-  icon: 'i-heroicons-user-plus',
+  icon: 'i-lucide-user-plus',
   children: [{
     label: 'Invite by email',
-    icon: 'i-heroicons-paper-airplane'
+    icon: 'i-lucide-send-horizontal'
   }, {
     label: 'Invite by link',
-    icon: 'i-heroicons-link'
+    icon: 'i-lucide-link'
   }]
 }, {
   label: 'New team',
-  icon: 'i-heroicons-plus'
+  icon: 'i-lucide-plus'
 }]
 </script>
 
@@ -26,7 +26,7 @@ const items = [{
       <UButton
         color="neutral"
         variant="outline"
-        icon="i-heroicons-chevron-down-20-solid"
+        icon="i-lucide-chevron-down"
       />
     </UDropdownMenu>
   </UButtonGroup>

docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue

@@ -6,7 +6,7 @@
       <UButton
         color="neutral"
         variant="subtle"
-        icon="i-heroicons-clipboard-document"
+        icon="i-lucide-clipboard"
       />
     </UTooltip>
   </UButtonGroup>

docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue

@@ -5,7 +5,7 @@
       label="Open"
       color="neutral"
       variant="subtle"
-      trailing-icon="i-heroicons-chevron-down-20-solid"
+      trailing-icon="i-lucide-chevron-down"
       :ui="{
         trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
       }"

docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue

@@ -12,7 +12,7 @@ defineShortcuts({
       label="Open"
       color="neutral"
       variant="subtle"
-      trailing-icon="i-heroicons-chevron-down-20-solid"
+      trailing-icon="i-lucide-chevron-down"
       block
     />
 

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -4,22 +4,22 @@ const groups = [{
   items: [
     {
       label: 'Profile',
-      icon: 'i-heroicons-user',
+      icon: 'i-lucide-user',
       kbds: ['meta', 'P']
     },
     {
       label: 'Billing',
-      icon: 'i-heroicons-credit-card',
+      icon: 'i-lucide-credit-card',
       kbds: ['meta', 'B'],
       slot: 'billing'
     },
     {
       label: 'Notifications',
-      icon: 'i-heroicons-bell'
+      icon: 'i-lucide-bell'
     },
     {
       label: 'Security',
-      icon: 'i-heroicons-lock-closed'
+      icon: 'i-lucide-lock'
     }
   ]
 }, {

docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue

@@ -60,7 +60,7 @@ const users = [
       label="Search users..."
       color="neutral"
       variant="subtle"
-      icon="i-heroicons-magnifying-glass"
+      icon="i-lucide-search"
     />
 
     <template #content>

docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue

@@ -84,7 +84,7 @@ const groups = ref([
       {
         label: 'Add new file',
         suffix: 'Create a new file in the current directory or workspace.',
-        icon: 'i-heroicons-document-plus',
+        icon: 'i-lucide-file-plus',
         kbds: [
           'meta',
           'N'
@@ -96,7 +96,7 @@ const groups = ref([
       {
         label: 'Add new folder',
         suffix: 'Create a new folder in the current directory or workspace.',
-        icon: 'i-heroicons-folder-plus',
+        icon: 'i-lucide-folder-plus',
         kbds: [
           'meta',
           'F'
@@ -108,7 +108,7 @@ const groups = ref([
       {
         label: 'Add hashtag',
         suffix: 'Add a hashtag to the current item.',
-        icon: 'i-heroicons-hashtag',
+        icon: 'i-lucide-hash',
         kbds: [
           'meta',
           'H'
@@ -120,7 +120,7 @@ const groups = ref([
       {
         label: 'Add label',
         suffix: 'Add a label to the current item.',
-        icon: 'i-heroicons-tag',
+        icon: 'i-lucide-tag',
         kbds: [
           'meta',
           'L'

docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue

@@ -3,22 +3,22 @@ const items = [
   [
     {
       label: 'View',
-      icon: 'i-heroicons-eye'
+      icon: 'i-lucide-eye'
     },
     {
       label: 'Copy',
-      icon: 'i-heroicons-document-duplicate'
+      icon: 'i-lucide-copy'
     },
     {
       label: 'Edit',
-      icon: 'i-heroicons-pencil'
+      icon: 'i-lucide-pencil'
     }
   ],
   [
     {
       label: 'Delete',
       color: 'error' as const,
-      icon: 'i-heroicons-trash'
+      icon: 'i-lucide-trash'
     }
   ]
 ]

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -22,7 +22,7 @@ const items = [{
     </template>
 
     <template #refresh-trailing>
-      <UIcon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
+      <UIcon v-if="loading" name="i-lucide-refresh-ccw" class="shrink-0 size-5 text-[var(--ui-primary)] animate-spin" />
     </template>
   </UContextMenu>
 </template>

docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue

@@ -23,7 +23,7 @@ const groups = computed(() => [{
       label="Search users..."
       color="neutral"
       variant="subtle"
-      icon="i-heroicons-magnifying-glass"
+      icon="i-lucide-search"
     />
 
     <template #content>

docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue

@@ -4,7 +4,7 @@ const open = ref(false)
 
 <template>
   <UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer." :ui="{ container: 'max-w-xl mx-auto' }">
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #body>
       <Placeholder class="h-48" />

docs/app/components/content/examples/drawer/DrawerOpenExample.vue

@@ -8,7 +8,7 @@ defineShortcuts({
 
 <template>
   <UDrawer v-model:open="open">
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #content>
       <Placeholder class="h-48 m-4" />

docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue

@@ -5,13 +5,13 @@ const showDownloads = ref(false)
 
 const items = computed(() => [{
   label: 'Interface',
-  icon: 'i-heroicons-window',
+  icon: 'i-lucide-app-window',
   type: 'label' as const
 }, {
   type: 'separator' as const
 }, {
   label: 'Show Bookmarks',
-  icon: 'i-heroicons-bookmark',
+  icon: 'i-lucide-bookmark',
   type: 'checkbox' as const,
   checked: showBookmarks.value,
   onUpdateChecked(checked: boolean) {
@@ -22,7 +22,7 @@ const items = computed(() => [{
   }
 }, {
   label: 'Show History',
-  icon: 'i-heroicons-clock',
+  icon: 'i-lucide-clock',
   type: 'checkbox' as const,
   checked: showHistory.value,
   onUpdateChecked(checked: boolean) {
@@ -30,7 +30,7 @@ const items = computed(() => [{
   }
 }, {
   label: 'Show Downloads',
-  icon: 'i-heroicons-arrow-down-on-square',
+  icon: 'i-lucide-download',
   type: 'checkbox' as const,
   checked: showDownloads.value,
   onUpdateChecked(checked: boolean) {
@@ -41,6 +41,6 @@ const items = computed(() => [{
 
 <template>
   <UDropdownMenu :items="items" :content="{ align: 'start' }" class="w-48">
-    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+    <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue

@@ -3,22 +3,22 @@ const items = [
   [
     {
       label: 'View',
-      icon: 'i-heroicons-eye'
+      icon: 'i-lucide-eye'
     },
     {
       label: 'Copy',
-      icon: 'i-heroicons-document-duplicate'
+      icon: 'i-lucide-copy'
     },
     {
       label: 'Edit',
-      icon: 'i-heroicons-pencil'
+      icon: 'i-lucide-pencil'
     }
   ],
   [
     {
       label: 'Delete',
       color: 'error' as const,
-      icon: 'i-heroicons-trash'
+      icon: 'i-lucide-trash'
     }
   ]
 ]
@@ -26,10 +26,10 @@ const items = [
 
 <template>
   <UDropdownMenu :items="items" class="w-48">
-    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+    <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
     <template #profile-trailing>
-      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
+      <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
     </template>
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 const items = [{
   label: 'Profile',
-  icon: 'i-heroicons-user',
+  icon: 'i-lucide-user',
   slot: 'profile'
 }, {
   label: 'Billing',
-  icon: 'i-heroicons-credit-card'
+  icon: 'i-lucide-credit-card'
 }, {
   label: 'Settings',
-  icon: 'i-heroicons-cog'
+  icon: 'i-lucide-cog'
 }]
 </script>
 
 <template>
   <UDropdownMenu :items="items" class="w-48">
-    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+    <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
     <template #profile-trailing>
-      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
+      <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-[var(--ui-primary)]" />
     </template>
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/dropdown-menu/DropdownMenuOpenExample.vue

@@ -7,18 +7,18 @@ defineShortcuts({
 
 const items = [{
   label: 'Profile',
-  icon: 'i-heroicons-user'
+  icon: 'i-lucide-user'
 }, {
   label: 'Billing',
-  icon: 'i-heroicons-credit-card'
+  icon: 'i-lucide-credit-card'
 }, {
   label: 'Settings',
-  icon: 'i-heroicons-cog'
+  icon: 'i-lucide-cog'
 }]
 </script>
 
 <template>
   <UDropdownMenu v-model:open="open" :items="items" class="w-48">
-    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+    <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue

@@ -15,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   <UInputMenu
     :items="users || []"
     :loading="status === 'pending'"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
   >
     <template #leading="{ modelValue, ui }">

docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue

@@ -21,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :items="users || []"
     :loading="status === 'pending'"
     :filter="false"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
   >
     <template #leading="{ modelValue, ui }">

docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

@@ -17,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :items="users || []"
     :loading="status === 'pending'"
     :filter="['name', 'email']"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
     class="w-80"
   >

docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue

@@ -3,22 +3,22 @@ const items = ref([
   {
     label: 'Backlog',
     value: 'backlog',
-    icon: 'i-heroicons-question-mark-circle'
+    icon: 'i-lucide-circle-help'
   },
   {
     label: 'Todo',
     value: 'todo',
-    icon: 'i-heroicons-plus-circle'
+    icon: 'i-lucide-circle-plus'
   },
   {
     label: 'In Progress',
     value: 'in_progress',
-    icon: 'i-heroicons-arrow-up-circle'
+    icon: 'i-lucide-circle-arrow-up'
   },
   {
     label: 'Done',
     value: 'done',
-    icon: 'i-heroicons-check-circle'
+    icon: 'i-lucide-circle-check'
   }
 ])
 const value = ref(items.value[0])

docs/app/components/content/examples/input/InputClearButtonExample.vue

@@ -13,7 +13,7 @@ const value = ref('Click to clear')
         color="neutral"
         variant="link"
         size="sm"
-        icon="i-heroicons-x-circle"
+        icon="i-lucide-circle-x"
         aria-label="Clear input"
         @click="value = ''"
       />

docs/app/components/content/examples/input/InputFormFieldExample.vue

@@ -4,6 +4,6 @@ const email = ref('')
 
 <template>
   <UFormField label="Email" help="We won't share your email." required>
-    <UInput v-model="email" placeholder="Enter your email" icon="i-heroicons-at-symbol" />
+    <UInput v-model="email" placeholder="Enter your email" icon="i-lucide-at-sign" />
   </UFormField>
 </template>

docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue

@@ -50,7 +50,7 @@ const text = computed(() => {
             color="neutral"
             variant="link"
             size="sm"
-            :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+            :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
             aria-label="show ? 'Hide password' : 'Show password'"
             :aria-pressed="show"
             aria-controls="password"
@@ -79,7 +79,7 @@ const text = computed(() => {
         class="flex items-center gap-0.5"
         :class="req.met ? 'text-[var(--ui-success)]' : 'text-[var(--ui-text-muted)]'"
       >
-        <UIcon :name="req.met ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="size-4 shrink-0" />
+        <UIcon :name="req.met ? 'i-lucide-circle-check' : 'i-lucide-circle-x'" class="size-4 shrink-0" />
 
         <span class="text-xs font-light">
           {{ req.text }}

docs/app/components/content/examples/input/InputPasswordToggleExample.vue

@@ -15,7 +15,7 @@ const password = ref('password')
         color="neutral"
         variant="link"
         size="sm"
-        :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+        :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
         aria-label="show ? 'Hide password' : 'Show password'"
         :aria-pressed="show"
         aria-controls="password"

docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue

@@ -23,7 +23,7 @@ const groups = computed(() => [{
       label="Search users..."
       color="neutral"
       variant="subtle"
-      icon="i-heroicons-magnifying-glass"
+      icon="i-lucide-search"
     />
 
     <template #content>

docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue

@@ -2,7 +2,7 @@
 const items = [
   {
     label: 'Docs',
-    icon: 'i-heroicons-book-open',
+    icon: 'i-lucide-book-open',
     slot: 'docs',
     children: [
       {
@@ -21,7 +21,7 @@ const items = [
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     slot: 'components',
     children: [
       {

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -2,17 +2,17 @@
 const items = [
   {
     label: 'Guide',
-    icon: 'i-heroicons-book-open'
+    icon: 'i-lucide-book-open'
 
   },
   {
     label: 'Composables',
-    icon: 'i-heroicons-circle-stack'
+    icon: 'i-lucide-database'
 
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     slot: 'components'
   }
 ]

docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue

@@ -2,93 +2,93 @@
 const items = [
   {
     label: 'Guide',
-    icon: 'i-heroicons-book-open',
+    icon: 'i-lucide-book-open',
     children: [
       {
         label: 'Introduction',
         description: 'Fully styled and customizable components for Nuxt.',
-        icon: 'i-heroicons-home'
+        icon: 'i-lucide-house'
       },
       {
         label: 'Installation',
         description: 'Learn how to install and configure Nuxt UI in your application.',
-        icon: 'i-heroicons-cloud-arrow-down'
+        icon: 'i-lucide-cloud-download'
       },
       {
         label: 'Icons',
-        icon: 'i-heroicons-face-smile',
+        icon: 'i-lucide-smile',
         description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
       },
       {
         label: 'Colors',
-        icon: 'i-heroicons-swatch',
+        icon: 'i-lucide-swatch-book',
         description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
       },
       {
         label: 'Theme',
-        icon: 'i-heroicons-cog',
+        icon: 'i-lucide-cog',
         description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
       }
     ]
   },
   {
     label: 'Composables',
-    icon: 'i-heroicons-circle-stack',
+    icon: 'i-lucide-database',
     children: [
       {
         label: 'defineShortcuts',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Define shortcuts for your application.'
       },
       {
         label: 'useModal',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a modal within your application.'
       },
       {
         label: 'useSlideover',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a slideover within your application.'
       },
       {
         label: 'useToast',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a toast within your application.'
       }
     ]
   },
   {
     label: 'Components',
-    icon: 'i-heroicons-cube-transparent',
+    icon: 'i-lucide-box',
     children: [
       {
         label: 'Link',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Use NuxtLink with superpowers.'
       },
       {
         label: 'Modal',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a modal within your application.'
       },
       {
         label: 'NavigationMenu',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a list of links.'
       },
       {
         label: 'Pagination',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a list of pages.'
       },
       {
         label: 'Popover',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Display a non-modal dialog that floats around a trigger element.'
       },
       {
         label: 'Progress',
-        icon: 'i-heroicons-document-text',
+        icon: 'i-lucide-file-text',
         description: 'Show a horizontal bar to indicate task progression.'
       }
     ]

docs/app/components/content/examples/popover/PopoverCommandPaletteExample.vue

@@ -28,7 +28,7 @@ const label = ref([])
 <template>
   <UPopover :content="{ side: 'right', align: 'start' }">
     <UButton
-      icon="i-heroicons-tag"
+      icon="i-lucide-tag"
       label="Select labels"
       color="neutral"
       variant="subtle"

docs/app/components/content/examples/select-menu/SelectMenuFetchExample.vue

@@ -15,7 +15,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   <USelectMenu
     :items="users || []"
     :loading="status === 'pending'"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
     class="w-48"
   >

docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue

@@ -21,7 +21,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :items="users || []"
     :loading="status === 'pending'"
     :filter="false"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
     class="w-48"
   >

docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue

@@ -17,7 +17,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     :items="users || []"
     :loading="status === 'pending'"
     :filter="['name', 'email']"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
     class="w-80"
   >

docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue

@@ -3,22 +3,22 @@ const items = ref([
   {
     label: 'Backlog',
     value: 'backlog',
-    icon: 'i-heroicons-question-mark-circle'
+    icon: 'i-lucide-circle-help'
   },
   {
     label: 'Todo',
     value: 'todo',
-    icon: 'i-heroicons-plus-circle'
+    icon: 'i-lucide-circle-plus'
   },
   {
     label: 'In Progress',
     value: 'in_progress',
-    icon: 'i-heroicons-arrow-up-circle'
+    icon: 'i-lucide-circle-arrow-up'
   },
   {
     label: 'Done',
     value: 'done',
-    icon: 'i-heroicons-check-circle'
+    icon: 'i-lucide-circle-check'
   }
 ])
 const value = ref(items.value[0])

docs/app/components/content/examples/select/SelectFetchExample.vue

@@ -19,7 +19,7 @@ function getUserAvatar(value: string) {
   <USelect
     :items="users || []"
     :loading="status === 'pending'"
-    icon="i-heroicons-user"
+    icon="i-lucide-user"
     placeholder="Select user"
     class="w-48"
   >

docs/app/components/content/examples/select/SelectItemsIconExample.vue

@@ -3,22 +3,22 @@ const items = ref([
   {
     label: 'Backlog',
     value: 'backlog',
-    icon: 'i-heroicons-question-mark-circle'
+    icon: 'i-lucide-circle-help'
   },
   {
     label: 'Todo',
     value: 'todo',
-    icon: 'i-heroicons-plus-circle'
+    icon: 'i-lucide-circle-plus'
   },
   {
     label: 'In Progress',
     value: 'in_progress',
-    icon: 'i-heroicons-arrow-up-circle'
+    icon: 'i-lucide-circle-arrow-up'
   },
   {
     label: 'Done',
     value: 'done',
-    icon: 'i-heroicons-check-circle'
+    icon: 'i-lucide-circle-check'
   }
 ])
 const value = ref(items.value[0]?.value)

docs/app/components/content/examples/table/TableColumnPinningExample.vue

@@ -90,7 +90,7 @@ function getHeader(column: Column<Payment>, label: string, position: 'left' | 'r
     color: 'neutral',
     variant: 'ghost',
     label,
-    icon: isPinned ? 'i-heroicons-star-20-solid' : 'i-heroicons-star',
+    icon: isPinned ? 'i-lucide-pin-off' : 'i-lucide-pin',
     class: '-mx-2.5',
     onClick() {
       column.pin(isPinned === position ? false : position)

docs/app/components/content/examples/table/TableColumnSortingExample.vue

@@ -82,7 +82,7 @@ const columns: TableColumn<Payment>[] = [{
       color: 'neutral',
       variant: 'ghost',
       label: 'Email',
-      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
       class: '-mx-2.5',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     })

docs/app/components/content/examples/table/TableColumnSortingReusableExample.vue

@@ -103,7 +103,7 @@ function getHeader(column: Column<Payment>, label: string) {
     items: [{
       label: 'Asc',
       type: 'checkbox',
-      icon: 'i-heroicons-bars-arrow-up-20-solid',
+      icon: 'i-lucide-arrow-up-narrow-wide',
       checked: isSorted === 'asc',
       onSelect: () => {
         if (isSorted === 'asc') {
@@ -114,7 +114,7 @@ function getHeader(column: Column<Payment>, label: string) {
       }
     }, {
       label: 'Desc',
-      icon: 'i-heroicons-bars-arrow-down-20-solid',
+      icon: 'i-lucide-arrow-down-wide-narrow',
       type: 'checkbox',
       checked: isSorted === 'desc',
       onSelect: () => {
@@ -129,7 +129,7 @@ function getHeader(column: Column<Payment>, label: string) {
     color: 'neutral',
     variant: 'ghost',
     label,
-    icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+    icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
     class: '-mx-2.5 data-[state=open]:bg-[var(--ui-bg-elevated)]'
   }))
 }

docs/app/components/content/examples/table/TableColumnVisibilityExample.vue

@@ -119,7 +119,7 @@ const columnVisibility = ref({
           label="Columns"
           color="neutral"
           variant="outline"
-          trailing-icon="i-heroicons-chevron-down-20-solid"
+          trailing-icon="i-lucide-chevron-down"
         />
       </UDropdownMenu>
     </div>

docs/app/components/content/examples/table/TableExample.vue

@@ -192,7 +192,7 @@ const columns: TableColumn<Payment>[] = [{
       color: 'neutral',
       variant: 'ghost',
       label: 'Email',
-      icon: isSorted ? (isSorted === 'asc' ? 'i-heroicons-bars-arrow-up-20-solid' : 'i-heroicons-bars-arrow-down-20-solid') : 'i-heroicons-arrows-up-down-20-solid',
+      icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
       class: '-mx-2.5',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     })
@@ -226,7 +226,7 @@ const columns: TableColumn<Payment>[] = [{
         toast.add({
           title: 'Payment ID copied to clipboard!',
           color: 'success',
-          icon: 'i-heroicons-check-circle'
+          icon: 'i-lucide-circle-check'
         })
       }
     }, {
@@ -248,7 +248,7 @@ const columns: TableColumn<Payment>[] = [{
       },
       items
     }, () => h(UButton, {
-      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      icon: 'i-lucide-ellipsis-vertical',
       color: 'neutral',
       variant: 'ghost',
       class: 'ml-auto'
@@ -293,7 +293,7 @@ function randomize() {
           label="Columns"
           color="neutral"
           variant="outline"
-          trailing-icon="i-heroicons-chevron-down-20-solid"
+          trailing-icon="i-lucide-chevron-down"
           class="ml-auto"
         />
       </UDropdownMenu>

docs/app/components/content/examples/table/TableRowActionsExample.vue

@@ -102,7 +102,7 @@ const columns: TableColumn<Payment>[] = [{
       },
       items: getRowItems(row)
     }, () => h(UButton, {
-      icon: 'i-heroicons-ellipsis-vertical-20-solid',
+      icon: 'i-lucide-ellipsis-vertical',
       color: 'neutral',
       variant: 'ghost',
       class: 'ml-auto'
@@ -122,7 +122,7 @@ function getRowItems(row: Row<Payment>) {
       toast.add({
         title: 'Payment ID copied to clipboard!',
         color: 'success',
-        icon: 'i-heroicons-check-circle'
+        icon: 'i-lucide-circle-check'
       })
     }
   }, {

docs/app/components/content/examples/table/TableRowExpandableExample.vue

@@ -50,7 +50,7 @@ const columns: TableColumn<Payment>[] = [{
   cell: ({ row }) => h(UButton, {
     color: 'neutral',
     variant: 'ghost',
-    icon: 'i-heroicons-chevron-down-20-solid',
+    icon: 'i-lucide-chevron-down',
     square: true,
     ui: {
       leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']

docs/app/components/content/examples/tabs/TabsContentSlotExample.vue

@@ -2,11 +2,11 @@
 const items = [
   {
     label: 'Account',
-    icon: 'i-heroicons-user'
+    icon: 'i-lucide-user'
   },
   {
     label: 'Password',
-    icon: 'i-heroicons-lock-closed'
+    icon: 'i-lucide-lock'
   }
 ]
 </script>

docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

@@ -3,13 +3,13 @@ const items = [
   {
     label: 'Account',
     description: 'Make changes to your account here. Click save when you\'re done.',
-    icon: 'i-heroicons-user',
+    icon: 'i-lucide-user',
     slot: 'account'
   },
   {
     label: 'Password',
     description: 'Change your password here. After saving, you\'ll be logged out.',
-    icon: 'i-heroicons-lock-closed',
+    icon: 'i-lucide-lock',
     slot: 'password'
   }
 ]

docs/app/components/content/examples/toast/ToastActionsExample.vue

@@ -10,7 +10,7 @@ function showToast() {
     title: 'Uh oh! Something went wrong.',
     description: props.description,
     actions: [{
-      icon: 'i-heroicons-arrow-path-20-solid',
+      icon: 'i-lucide-refresh-ccw',
       label: 'Retry',
       color: 'neutral',
       variant: 'outline',

docs/app/components/content/examples/toast/ToastCloseExample.vue

@@ -5,7 +5,7 @@ function showToast() {
   toast.add({
     title: 'Uh oh! Something went wrong.',
     description: 'There was a problem with your request.',
-    icon: 'i-heroicons-wifi',
+    icon: 'i-lucide-wifi',
     close: {
       color: 'primary',
       variant: 'outline',

docs/app/components/content/examples/toast/ToastColorExample.vue

@@ -11,7 +11,7 @@ function showToast() {
   toast.add({
     title: 'Uh oh! Something went wrong.',
     description: 'There was a problem with your request.',
-    icon: 'i-heroicons-wifi',
+    icon: 'i-lucide-wifi',
     color: props.color
   })
 }

docs/app/components/content/examples/toast/ToastExample.vue

@@ -8,11 +8,11 @@ function addToCalendar() {
   toast.add({
     title: 'Event added to calendar',
     description: `This event is scheduled for ${formattedDate}.`,
-    icon: 'i-heroicons-calendar-days'
+    icon: 'i-lucide-calendar-days'
   })
 }
 </script>
 
 <template>
-  <UButton label="Add to calendar" color="neutral" variant="outline" icon="i-heroicons-plus" @click="addToCalendar" />
+  <UButton label="Add to calendar" color="neutral" variant="outline" icon="i-lucide-plus" @click="addToCalendar" />
 </template>

docs/app/components/theme-picker/ThemePicker.vue

@@ -2,7 +2,7 @@
   <UPopover :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4' }">
     <template #default="{ open }">
       <UButton
-        icon="i-heroicons-swatch"
+        icon="i-lucide-swatch-book"
         color="neutral"
         :variant="open ? 'soft' : 'ghost'"
         square

docs/app/error.vue

@@ -16,27 +16,27 @@ const { data: files } = await useAsyncData('files', () => queryCollectionSearchS
 const links = computed(() => {
   return [{
     label: 'Docs',
-    icon: 'i-heroicons-book-open',
+    icon: 'i-lucide-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
   }, ...(navigation.value?.find(item => item.path === '/pro')
     ? [{
         label: 'Pro',
-        icon: 'i-heroicons-square-3-stack-3d',
+        icon: 'i-lucide-layers-3',
         to: '/pro',
         active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
       }, {
         label: 'Pricing',
-        icon: 'i-heroicons-credit-card',
+        icon: 'i-lucide-credit-card',
         to: '/pro/pricing'
       }, {
         label: 'Templates',
-        icon: 'i-heroicons-computer-desktop',
+        icon: 'i-lucide-monitor',
         to: '/pro/templates'
       }]
     : []), {
     label: 'Releases',
-    icon: 'i-heroicons-rocket-launch',
+    icon: 'i-lucide-rocket',
     to: '/releases'
   }].filter(Boolean)
 })

docs/app/pages/[...slug].vue

@@ -34,18 +34,18 @@ defineOgImageComponent('Docs', {
 })
 
 const communityLinks = computed(() => [{
-  icon: 'i-heroicons-pencil-square',
+  icon: 'i-lucide-square-pen',
   label: 'Edit this page',
   to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?.stem}.md`,
   target: '_blank'
 }, {
-  icon: 'i-heroicons-star',
+  icon: 'i-lucide-star',
   label: 'Star on GitHub',
   to: 'https://github.com/nuxt/ui',
   target: '_blank'
 }, {
   label: 'Roadmap',
-  icon: 'i-heroicons-map',
+  icon: 'i-lucide-map',
   to: '/roadmap'
 }])
 
@@ -85,7 +85,7 @@ const communityLinks = computed(() => [{
             variant="subtle"
             v-bind="page.select.items.find((item: any) => item.to === route.path)"
             block
-            trailing-icon="i-heroicons-chevron-down-20-solid"
+            trailing-icon="i-lucide-chevron-down"
             :class="[open && 'bg-[var(--ui-bg-accented)]/75']"
             :ui="{
               trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')

docs/content/1.getting-started/3.theme.md

@@ -110,7 +110,7 @@ export default defineAppConfig({
 ```
 
 ::note
-Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
+Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
 ::
 
 These colors are used to style the components but also to generate the `color` variants:
@@ -345,7 +345,7 @@ Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding.
 ```
 
 ::note
-Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
+Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
 ::
 
 ::tip
@@ -522,7 +522,7 @@ ignore:
   - size
   - icon
 props:
-  trailingIcon: i-heroicons-chevron-right
+  trailingIcon: i-lucide-chevron-right
   size: md
   color: neutral
   variant: outline

docs/content/1.getting-started/4.icons.md

@@ -23,7 +23,7 @@ You can use the [Icon](/components/icon) component with a `name` prop to display
 ::component-code{slug="icon"}
 ---
 props:
-  name: 'i-heroicons-light-bulb'
+  name: 'i-lucide-lightbulb'
   class: 'size-5'
 ---
 ::
@@ -38,7 +38,7 @@ ignore:
   - color
   - variant
 props:
-  icon: i-heroicons-sun
+  icon: i-lucide-sun
   variant: subtle
 slots:
   default: Button

docs/content/2.composables/define-shortcuts.md

@@ -121,14 +121,14 @@ The `extractShortcuts` utility can be used to automatically define shortcuts fro
 <script setup lang="ts">
 const items = [{
   label: 'Save',
-  icon: 'i-heroicons-document-arrow-down',
+  icon: 'i-lucide-file-down',
   kbds: ['meta', 'S'],
   onSelect() {
     save()
   }
 }, {
   label: 'Copy',
-  icon: 'i-heroicons-document-duplicate',
+  icon: 'i-lucide-copy',
   kbds: ['meta', 'C'],
   onSelect() {
     copy()

docs/content/3.components/accordion.md

@@ -35,13 +35,13 @@ props:
   class: 'px-4'
   items:
     - label: 'Icons'
-      icon: 'i-heroicons-face-smile'
+      icon: 'i-lucide-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
     - label: 'Colors'
-      icon: 'i-heroicons-swatch'
+      icon: 'i-lucide-swatch-book'
       content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
 ---
 ::
@@ -64,13 +64,13 @@ props:
   type: 'multiple'
   items:
     - label: 'Icons'
-      icon: 'i-heroicons-face-smile'
+      icon: 'i-lucide-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
     - label: 'Colors'
-      icon: 'i-heroicons-swatch'
+      icon: 'i-lucide-swatch-book'
       content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
 ---
 ::
@@ -93,13 +93,13 @@ props:
   collapsible: false
   items:
     - label: 'Icons'
-      icon: 'i-heroicons-face-smile'
+      icon: 'i-lucide-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
     - label: 'Colors'
-      icon: 'i-heroicons-swatch'
+      icon: 'i-lucide-swatch-book'
       content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
 ---
 ::
@@ -123,21 +123,21 @@ props:
   disabled: true
   items:
     - label: 'Icons'
-      icon: 'i-heroicons-face-smile'
+      icon: 'i-lucide-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
     - label: 'Colors'
-      icon: 'i-heroicons-swatch'
+      icon: 'i-lucide-swatch-book'
       content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
       disabled: true
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
 ---
 ::
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-lucide-chevron-down`.
 
 ::tip
 You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
@@ -153,17 +153,17 @@ hide:
   - class
 props:
   class: 'px-4'
-  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  trailingIcon: 'i-lucide-arrow-down'
   items:
     - label: 'Icons'
-      icon: 'i-heroicons-face-smile'
+      icon: 'i-lucide-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-      trailingIcon: 'i-heroicons-plus-20-solid'
+      trailingIcon: 'i-lucide-plus'
     - label: 'Colors'
-      icon: 'i-heroicons-swatch'
+      icon: 'i-lucide-swatch-book'
       content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
 ---
 ::

docs/content/3.components/alert.md

@@ -45,7 +45,7 @@ ignore:
 props:
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
-  icon: 'i-heroicons-command-line'
+  icon: 'i-lucide-terminal'
 ---
 ::
 
@@ -81,7 +81,7 @@ props:
   color: neutral
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
-  icon: 'i-heroicons-command-line'
+  icon: 'i-lucide-terminal'
 ---
 ::
 
@@ -101,7 +101,7 @@ props:
   variant: subtle
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
-  icon: 'i-heroicons-command-line'
+  icon: 'i-lucide-terminal'
 ---
 ::
 
@@ -157,7 +157,7 @@ props:
 
 ### Close Icon
 
-Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -174,7 +174,7 @@ props:
   color: neutral
   variant: outline
   close: true
-  closeIcon: 'i-heroicons-arrow-right'
+  closeIcon: 'i-lucide-arrow-right'
 ---
 ::
 
@@ -245,7 +245,7 @@ ignore:
 props:
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
-  icon: i-heroicons-rocket-launch
+  icon: i-lucide-rocket
   ui:
     icon: 'size-11'
 ---

docs/content/3.components/avatar.md

@@ -43,7 +43,7 @@ Use the `icon` prop to display a fallback [Icon](/components/icon).
 ::component-code
 ---
 props:
-  icon: 'i-heroicons-photo'
+  icon: 'i-lucide-image'
   size: md
 ---
 ::

docs/content/3.components/badge.md

@@ -75,7 +75,7 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
 ::component-code
 ---
 props:
-  icon: i-heroicons-rocket-launch
+  icon: i-lucide-rocket
   size: md
   color: primary
   variant: solid
@@ -89,7 +89,7 @@ Use the `leading` and `trailing` props to set the icon position or the `leading-
 ::component-code
 ---
 props:
-  trailingIcon: i-heroicons-arrow-right
+  trailingIcon: i-lucide-arrow-right
   size: md
 slots:
   default: Badge

docs/content/3.components/breadcrumb.md

@@ -29,12 +29,12 @@ external:
 props:
   items:
     - label: 'Home'
-      icon: 'i-heroicons-home'
+      icon: 'i-lucide-house'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       to: '/components'
     - label: 'Breadcrumb'
-      icon: 'i-heroicons-link'
+      icon: 'i-lucide-link'
       to: '/components/breadcrumb'
 ---
 ::
@@ -45,7 +45,7 @@ A `span` is rendered instead of a link when the `to` property is not defined.
 
 ### Separator Icon
 
-Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-heroicons-chevron-right-20-solid`.
+Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-lucide-chevron-right`.
 
 ::component-code
 ---
@@ -54,15 +54,15 @@ ignore:
 external:
   - items
 props:
-  separatorIcon: 'i-heroicons-arrow-right-20-solid'
+  separatorIcon: 'i-lucide-arrow-right'
   items:
     - label: 'Home'
-      icon: 'i-heroicons-home'
+      icon: 'i-lucide-house'
     - label: 'Components'
-      icon: 'i-heroicons-cube-transparent'
+      icon: 'i-lucide-box'
       to: '/components'
     - label: 'Breadcrumb'
-      icon: 'i-heroicons-link'
+      icon: 'i-lucide-link'
       to: '/components/breadcrumb'
 ---
 ::

docs/content/3.components/button-group.md

@@ -18,10 +18,10 @@ slots:
   default: |
 
     <UButton color="neutral" variant="subtle" label="Button" />
-    <UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
+    <UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
 ---
 :u-button{color="neutral" variant="subtle" label="Button"}
-:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
+:u-button{color="neutral" variant="outline" icon="i-lucide-chevron-down"}
 ::
 
 ### Size
@@ -37,10 +37,10 @@ slots:
   default: |
 
     <UButton color="neutral" variant="subtle" label="Button" />
-    <UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
+    <UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
 ---
 :u-button{color="neutral" variant="subtle" label="Button"}
-:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
+:u-button{color="neutral" variant="outline" icon="i-lucide-chevron-down"}
 ::
 
 ### Orientation
@@ -76,10 +76,10 @@ slots:
 
     <UInput color="neutral" variant="outline" placeholder="Enter token" />
 
-    <UButton color="neutral" variant="subtle" icon="i-heroicons-clipboard-document" />
+    <UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
 ---
 :u-input{color="neutral" variant="outline" placeholder="Enter token"}
-:u-button{color="neutral" variant="subtle" icon="i-heroicons-clipboard-document"}
+:u-button{color="neutral" variant="subtle" icon="i-lucide-clipboard"}
 ::
 
 ### With tooltip

docs/content/3.components/button.md

@@ -92,7 +92,7 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Button.
 ::component-code
 ---
 props:
-  icon: i-heroicons-rocket-launch
+  icon: i-lucide-rocket
   size: md
   color: primary
   variant: solid
@@ -106,7 +106,7 @@ Use the `leading` and `trailing` props to set the icon position or the `leading-
 ::component-code
 ---
 props:
-  trailingIcon: i-heroicons-arrow-right
+  trailingIcon: i-lucide-arrow-right
   size: md
 slots:
   default: Button
@@ -118,7 +118,7 @@ The `label` as prop or slot is optional so you can use the Button as an icon-onl
 ::component-code
 ---
 props:
-  icon: i-heroicons-magnifying-glass
+  icon: i-lucide-search
   size: md
   color: primary
   variant: solid
@@ -184,13 +184,13 @@ This also works with the [Form](/components/form) component.
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
 props:
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
 slots:
   default: Button
 ---
@@ -244,7 +244,7 @@ ignore:
   - variant
   - icon
 props:
-  icon: i-heroicons-rocket-launch
+  icon: i-lucide-rocket
   color: neutral
   variant: outline
   ui:

docs/content/3.components/carousel.md

@@ -78,7 +78,7 @@ class: 'p-8'
 
 ### Prev Icon / Next Icon
 
-Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-heroicons-arrow-left-20-solid` / `i-heroicons-arrow-right-20-solid`.
+Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-lucide-arrow-left` / `i-lucide-arrow-right`.
 
 ::component-example
 ---
@@ -87,10 +87,10 @@ class: 'p-8'
 options:
   - name: 'prevIcon'
     label: 'prevIcon'
-    default: 'i-heroicons-chevron-left'
+    default: 'i-lucide-chevron-left'
   - name: 'nextIcon'
     label: 'nextIcon'
-    default: 'i-heroicons-chevron-right'
+    default: 'i-lucide-chevron-right'
 ---
 ::
 

docs/content/3.components/checkbox.md

@@ -48,13 +48,13 @@ props:
 
 ### Indeterminate Icon
 
-Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-heroicons-minus-20-solid`.
+Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-lucide-minus`.
 
 ::component-code
 ---
 props:
   indeterminate: true
-  indeterminateIcon: 'i-heroicons-plus-20-solid'
+  indeterminateIcon: 'i-lucide-plus'
 ---
 ::
 
@@ -101,7 +101,7 @@ props:
 
 ### Icon
 
-Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-heroicons-check-20-solid`.
+Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-lucide-check`.
 
 ::component-code
 ---
@@ -109,7 +109,7 @@ ignore:
   - label
   - defaultValue
 props:
-  icon: 'i-heroicons-heart'
+  icon: 'i-lucide-heart'
   defaultValue: true
   label: Check me
 ---

docs/content/3.components/chip.md

@@ -16,9 +16,9 @@ prettier: true
 slots:
   default: |
 
-    <UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
+    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
 ---
-:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
+:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
 ::
 
 ### Color
@@ -33,9 +33,9 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
+    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
 ---
-:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
+:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
 ::
 
 ### Size
@@ -50,9 +50,9 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
+    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
 ---
-:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
+:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
 ::
 
 ### Text
@@ -68,9 +68,9 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
+    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
 ---
-:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
+:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
 ::
 
 ### Position
@@ -85,9 +85,9 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
+    <UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
 ---
-:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
+:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
 ::
 
 ### Inset

docs/content/3.components/collapsible.md

@@ -25,14 +25,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block />
 
   content: |
 
     <Placeholder class="h-48" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block}
 
 #content
 :placeholder{class="h-48"}
@@ -53,14 +53,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block />
 
   content: |
 
     <Placeholder class="h-48" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block}
 
 #content
 :placeholder{class="h-48"}

docs/content/3.components/command-palette.md

@@ -177,18 +177,18 @@ props:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
 
 ### Icon
 
-Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-heroicons-magnifying-glass-20-solid`.
+Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-lucide-search`.
 
 ::component-code
 ---
@@ -200,16 +200,16 @@ external:
   - groups
 class: '!p-0'
 props:
-  icon: 'i-heroicons-cube'
+  icon: 'i-lucide-box'
   groups:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
@@ -237,18 +237,18 @@ props:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -261,16 +261,16 @@ external:
 class: '!p-0'
 props:
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   groups:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
@@ -298,11 +298,11 @@ props:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
@@ -331,11 +331,11 @@ props:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
@@ -363,18 +363,18 @@ props:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::
 
 ### Close Icon
 
-Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -388,16 +388,16 @@ external:
 class: '!p-0'
 props:
   close: true
-  closeIcon: 'i-heroicons-arrow-right'
+  closeIcon: 'i-lucide-arrow-right'
   groups:
     - id: 'apps'
       items:
         - label: 'Calendar'
-          icon: 'i-heroicons-calendar'
+          icon: 'i-lucide-calendar'
         - label: 'Music'
-          icon: 'i-heroicons-musical-note'
+          icon: 'i-lucide-music'
         - label: 'Maps'
-          icon: 'i-heroicons-map'
+          icon: 'i-lucide-map'
   class: 'flex-1'
 ---
 ::

docs/content/3.components/context-menu.md

@@ -48,11 +48,11 @@ props:
     - - label: Appearance
         children:
           - label: System
-            icon: i-heroicons-computer-desktop
+            icon: i-lucide-monitor
           - label: Light
-            icon: i-heroicons-sun
+            icon: i-lucide-sun
           - label: Dark
-            icon: i-heroicons-moon
+            icon: i-lucide-moon
     - - label: Show Sidebar
         kbds:
           - meta
@@ -126,11 +126,11 @@ props:
   size: xl
   items:
     - label: System
-      icon: i-heroicons-computer-desktop
+      icon: i-lucide-monitor
     - label: Light
-      icon: i-heroicons-sun
+      icon: i-lucide-sun
     - label: Dark
-      icon: i-heroicons-moon
+      icon: i-lucide-moon
   class: 'w-48'
 slots:
   default: |
@@ -159,11 +159,11 @@ props:
   disabled: true
   items:
     - label: System
-      icon: i-heroicons-computer-desktop
+      icon: i-lucide-monitor
     - label: Light
-      icon: i-heroicons-sun
+      icon: i-lucide-sun
     - label: Dark
-      icon: i-heroicons-moon
+      icon: i-lucide-moon
   class: 'w-48'
 slots:
   default: |

docs/content/3.components/drawer.md

@@ -21,14 +21,14 @@ prettier: true
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="h-48 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="h-48 m-4"}
@@ -48,14 +48,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   body: |
 
     <Placeholder class="h-48" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #body
 :placeholder{class="h-48"}
@@ -76,14 +76,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   body: |
 
     <Placeholder class="h-48" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #body
 :placeholder{class="h-48"}
@@ -105,14 +105,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="h-96 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="h-96 m-4"}
@@ -130,14 +130,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="w-96 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="w-96 m-4"}
@@ -155,14 +155,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="h-48 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="h-48 m-4"}
@@ -180,14 +180,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="h-48 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="h-48 m-4"}
@@ -205,14 +205,14 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
   content: |
 
     <Placeholder class="h-48 m-4" />
 ---
 
-:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
 
 #content
 :placeholder{class="h-screen m-4"}

docs/content/3.components/dropdown-menu.md

@@ -50,28 +50,28 @@ props:
           src: 'https://github.com/benjamincanac.png'
         type: label
     - - label: Profile
-        icon: i-heroicons-user
+        icon: i-lucide-user
       - label: Billing
-        icon: i-heroicons-credit-card
+        icon: i-lucide-credit-card
       - label: Settings
-        icon: i-heroicons-cog
+        icon: i-lucide-cog
         kbds:
           - ','
       - label: Keyboard shortcuts
-        icon: i-heroicons-computer-desktop
+        icon: i-lucide-monitor
     - - label: Team
-        icon: i-heroicons-users
+        icon: i-lucide-users
       - label: Invite users
-        icon: i-heroicons-user-plus
+        icon: i-lucide-user-plus
         children:
           - - label: Email
-              icon: i-heroicons-envelope
+              icon: i-lucide-mail
             - label: Message
-              icon: i-heroicons-chat-bubble-left
+              icon: i-lucide-message-square
           - - label: More
-              icon: i-heroicons-plus-circle
+              icon: i-lucide-circle-plus
       - label: New team
-        icon: i-heroicons-plus
+        icon: i-lucide-plus
         kbds:
           - meta
           - n
@@ -80,13 +80,13 @@ props:
         to: 'https://github.com/nuxt/ui'
         target: _blank
       - label: Support
-        icon: i-heroicons-lifebuoy
+        icon: i-lucide-life-buoy
         to: '/components/dropdown-menu'
       - label: API
-        icon: i-heroicons-cloud
+        icon: i-lucide-cloud
         disabled: true
     - - label: Logout
-        icon: i-heroicons-arrow-right-on-rectangle
+        icon: i-lucide-log-out
         kbds:
           - shift
           - meta
@@ -95,10 +95,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-heroicons-bars-3" color="neutral" variant="outline" />
+    <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
 ---
 
-:u-button{icon="i-heroicons-bars-3" color="neutral" variant="outline"}
+:u-button{icon="i-lucide-menu" color="neutral" variant="outline"}
 ::
 
 ::note
@@ -134,11 +134,11 @@ items:
 props:
   items:
     - label: Profile
-      icon: i-heroicons-user
+      icon: i-lucide-user
     - label: Billing
-      icon: i-heroicons-credit-card
+      icon: i-lucide-credit-card
     - label: Settings
-      icon: i-heroicons-cog
+      icon: i-lucide-cog
   content:
     align: start
     side: bottom
@@ -147,10 +147,10 @@ props:
 slots:
   default: |
 
-    <UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
+    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
 ---
 
-:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
+:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
 ::
 
 ### Arrow
@@ -170,19 +170,19 @@ props:
   arrow: true
   items:
     - label: Profile
-      icon: i-heroicons-user
+      icon: i-lucide-user
     - label: Billing
-      icon: i-heroicons-credit-card
+      icon: i-lucide-credit-card
     - label: Settings
-      icon: i-heroicons-cog
+      icon: i-lucide-cog
   class: 'w-48'
 slots:
   default: |
 
-    <UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
+    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
 ---
 
-:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
+:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
 ::
 
 ### Size
@@ -202,21 +202,21 @@ props:
   size: xl
   items:
     - label: Profile
-      icon: i-heroicons-user
+      icon: i-lucide-user
     - label: Billing
-      icon: i-heroicons-credit-card
+      icon: i-lucide-credit-card
     - label: Settings
-      icon: i-heroicons-cog
+      icon: i-lucide-cog
   content:
     align: start
   class: 'w-48'
 slots:
   default: |
 
-    <UButton size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
+    <UButton size="xl" label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
 ---
 
-:u-button{size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
+:u-button{size="xl" label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
 ::
 
 ::warning
@@ -243,19 +243,19 @@ props:
   disabled: true
   items:
     - label: Profile
-      icon: i-heroicons-user
+      icon: i-lucide-user
     - label: Billing
-      icon: i-heroicons-credit-card
+      icon: i-lucide-credit-card
     - label: Settings
-      icon: i-heroicons-cog
+      icon: i-lucide-cog
   class: 'w-48'
 slots:
   default: |
 
-    <UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
+    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
 ---
 
-:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
+:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
 ::
 
 ## Examples
@@ -330,17 +330,17 @@ Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility
 <script setup lang="ts">
 const items = [{
   label: 'Invite users',
-  icon: 'i-heroicons-user-plus',
+  icon: 'i-lucide-user-plus',
   children: [{
     label: 'Invite by email',
-    icon: 'i-heroicons-paper-airplane',
+    icon: 'i-lucide-send-horizontal',
     kbds: ['meta', 'e'],
     onSelect() {
       console.log('Invite by email clicked')
     }
   }, {
     label: 'Invite by link',
-    icon: 'i-heroicons-link',
+    icon: 'i-lucide-link',
     kbds: ['meta', 'i'],
     onSelect() {
       console.log('Invite by link clicked')
@@ -348,7 +348,7 @@ const items = [{
   }]
 }, {
   label: 'New team',
-  icon: 'i-heroicons-plus',
+  icon: 'i-lucide-plus',
   kbds: ['meta', 'n'],
   onSelect() {
     console.log('New team clicked')

docs/content/3.components/icon.md

@@ -13,7 +13,7 @@ You can use any name from the https://icones.js.org collection:
 ::component-code
 ---
 props:
-  name: 'i-heroicons-light-bulb'
+  name: 'i-lucide-lightbulb'
   class: 'size-5'
 ---
 ::

docs/content/3.components/input-menu.md

@@ -163,7 +163,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
 
 ### Delete Icon
 
-With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-heroicons-x-mark-20-solid`.
+With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -180,7 +180,7 @@ props:
     - Backlog
     - Todo
   multiple: true
-  deleteIcon: 'i-heroicons-trash'
+  deleteIcon: 'i-lucide-trash'
   items:
     - Backlog
     - Todo
@@ -370,7 +370,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  icon: 'i-heroicons-magnifying-glass'
+  icon: 'i-lucide-search'
   size: md
   items:
     - Backlog
@@ -382,7 +382,7 @@ props:
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
 
 ::component-code
 ---
@@ -395,7 +395,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  trailingIcon: 'i-lucide-arrow-down'
   size: md
   items:
     - Backlog
@@ -411,7 +411,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
 
 ### Selected Icon
 
-Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
+Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
 
 ::component-code
 ---
@@ -424,7 +424,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  selectedIcon: 'i-heroicons-fire'
+  selectedIcon: 'i-lucide-flame'
   size: md
   items:
     - Backlog
@@ -491,7 +491,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -505,7 +505,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo

docs/content/3.components/input.md

@@ -115,7 +115,7 @@ prettier: true
 ignore:
   - placeholder
 props:
-  icon: 'i-heroicons-magnifying-glass'
+  icon: 'i-lucide-search'
   size: md
   variant: outline
   placeholder: 'Search...'
@@ -130,7 +130,7 @@ prettier: true
 ignore:
   - placeholder
 props:
-  trailingIcon: i-heroicons-at-symbol
+  trailingIcon: i-lucide-at-sign
   placeholder: 'Enter your email'
   size: md
 ---
@@ -171,7 +171,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -179,7 +179,7 @@ ignore:
   - placeholder
 props:
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   placeholder: 'Search...'
 ---
 ::

docs/content/3.components/modal.md

@@ -130,7 +130,7 @@ The close button is not displayed if the `#content` slot is used as it's a part
 
 ### Close Icon
 
-Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -139,7 +139,7 @@ ignore:
   - title
 props:
   title: 'Modal with close button'
-  closeIcon: 'i-heroicons-arrow-right'
+  closeIcon: 'i-lucide-arrow-right'
 slots:
   default: |
 

docs/content/3.components/navigation-menu.md

@@ -40,71 +40,71 @@ external:
 props:
   items:
     - label: Guide
-      icon: i-heroicons-book-open
+      icon: i-lucide-book-open
       to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
-          icon: i-heroicons-home
+          icon: i-lucide-house
         - label: Installation
           description: Learn how to install and configure Nuxt UI in your application.
-          icon: i-heroicons-cloud-arrow-down
+          icon: i-lucide-cloud-download
         - label: 'Icons'
-          icon: 'i-heroicons-face-smile'
+          icon: 'i-lucide-smile'
           description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
         - label: 'Colors'
-          icon: 'i-heroicons-swatch'
+          icon: 'i-lucide-swatch-book'
           description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
         - label: 'Theme'
-          icon: 'i-heroicons-cog'
+          icon: 'i-lucide-cog'
           description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
     - label: Composables
-      icon: i-heroicons-circle-stack
+      icon: i-lucide-database
       to: /composables
       children:
         - label: defineShortcuts
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Define shortcuts for your application.
           to: /composables/define-shortcuts
         - label: useModal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /composables/use-modal
         - label: useSlideover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a slideover within your application.
           to: /composables/use-slideover
         - label: useToast
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a toast within your application.
           to: /composables/use-toast
     - label: Components
-      icon: i-heroicons-cube-transparent
+      icon: i-lucide-box
       to: /components
       active: true
       children:
         - label: Link
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Use NuxtLink with superpowers.
           to: /components/link
         - label: Modal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /components/modal
         - label: NavigationMenu
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of links.
           to: /components/navigation-menu
         - label: Pagination
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of pages.
           to: /components/pagination
         - label: Popover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a non-modal dialog that floats around a trigger element.
           to: /components/popover
         - label: Progress
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Show a horizontal bar to indicate task progression.
           to: /components/progress
     - label: GitHub
@@ -113,7 +113,7 @@ props:
       to: https://github.com/nuxt/ui
       target: _blank
     - label: Help
-      icon: i-heroicons-question-mark-circle
+      icon: i-lucide-circle-help
       disabled: true
   class: 'justify-center'
 ---
@@ -151,68 +151,68 @@ props:
   orientation: 'vertical'
   items:
     - - label: Guide
-        icon: i-heroicons-book-open
+        icon: i-lucide-book-open
         children:
           - label: Introduction
             description: Fully styled and customizable components for Nuxt.
-            icon: i-heroicons-home
+            icon: i-lucide-house
           - label: Installation
             description: Learn how to install and configure Nuxt UI in your application.
-            icon: i-heroicons-cloud-arrow-down
+            icon: i-lucide-cloud-download
           - label: 'Icons'
-            icon: 'i-heroicons-face-smile'
+            icon: 'i-lucide-smile'
             description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
           - label: 'Colors'
-            icon: 'i-heroicons-swatch'
+            icon: 'i-lucide-swatch-book'
             description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
           - label: 'Theme'
-            icon: 'i-heroicons-cog'
+            icon: 'i-lucide-cog'
             description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
       - label: Composables
-        icon: i-heroicons-circle-stack
+        icon: i-lucide-database
         children:
           - label: defineShortcuts
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Define shortcuts for your application.
             to: /composables/define-shortcuts
           - label: useModal
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a modal within your application.
             to: /composables/use-modal
           - label: useSlideover
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a slideover within your application.
             to: /composables/use-slideover
           - label: useToast
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a toast within your application.
             to: /composables/use-toast
       - label: Components
-        icon: i-heroicons-cube-transparent
+        icon: i-lucide-box
         active: true
         children:
           - label: Link
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Use NuxtLink with superpowers.
             to: /components/link
           - label: Modal
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a modal within your application.
             to: /components/modal
           - label: NavigationMenu
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a list of links.
             to: /components/navigation-menu
           - label: Pagination
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a list of pages.
             to: /components/pagination
           - label: Popover
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Display a non-modal dialog that floats around a trigger element.
             to: /components/popover
           - label: Progress
-            icon: i-heroicons-document-text
+            icon: i-lucide-file-text
             description: Show a horizontal bar to indicate task progression.
             to: /components/progress
     - - label: GitHub
@@ -221,7 +221,7 @@ props:
         to: https://github.com/nuxt/ui
         target: _blank
       - label: Help
-        icon: i-heroicons-question-mark-circle
+        icon: i-lucide-circle-help
         disabled: true
   class: 'data-[orientation=vertical]:w-48'
 ---
@@ -252,13 +252,13 @@ props:
   orientation: 'horizontal'
   items:
     - - label: Guide
-        icon: i-heroicons-book-open
+        icon: i-lucide-book-open
         to: /getting-started
       - label: Composables
-        icon: i-heroicons-circle-stack
+        icon: i-lucide-database
         to: /composables
       - label: Components
-        icon: i-heroicons-cube-transparent
+        icon: i-lucide-box
         to: /components
         active: true
     - - label: GitHub
@@ -288,13 +288,13 @@ props:
   color: neutral
   items:
     - - label: Guide
-        icon: i-heroicons-book-open
+        icon: i-lucide-book-open
         to: /getting-started
       - label: Composables
-        icon: i-heroicons-circle-stack
+        icon: i-lucide-database
         to: /composables
       - label: Components
-        icon: i-heroicons-cube-transparent
+        icon: i-lucide-box
         to: /components
         active: true
     - - label: GitHub
@@ -321,13 +321,13 @@ props:
   highlight: false
   items:
     - - label: Guide
-        icon: i-heroicons-book-open
+        icon: i-lucide-book-open
         to: /getting-started
       - label: Composables
-        icon: i-heroicons-circle-stack
+        icon: i-lucide-database
         to: /composables
       - label: Components
-        icon: i-heroicons-cube-transparent
+        icon: i-lucide-box
         to: /components
         active: true
     - - label: GitHub
@@ -344,7 +344,7 @@ The `highlight` prop changes the `pill` variant active item style. Try it out to
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-lucide-chevron-down`. This icon is only displayed when an item has children.
 
 ::tip
 You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
@@ -359,74 +359,74 @@ ignore:
 external:
   - items
 props:
-  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  trailingIcon: 'i-lucide-arrow-down'
   items:
     - label: Guide
-      icon: i-heroicons-book-open
+      icon: i-lucide-book-open
       to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
-          icon: i-heroicons-home
+          icon: i-lucide-house
         - label: Installation
           description: Learn how to install and configure Nuxt UI in your application.
-          icon: i-heroicons-cloud-arrow-down
+          icon: i-lucide-cloud-download
         - label: 'Icons'
-          icon: 'i-heroicons-face-smile'
+          icon: 'i-lucide-smile'
           description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
         - label: 'Colors'
-          icon: 'i-heroicons-swatch'
+          icon: 'i-lucide-swatch-book'
           description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
         - label: 'Theme'
-          icon: 'i-heroicons-cog'
+          icon: 'i-lucide-cog'
           description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
     - label: Composables
-      icon: i-heroicons-circle-stack
+      icon: i-lucide-database
       to: /composables
       children:
         - label: defineShortcuts
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Define shortcuts for your application.
           to: /composables/define-shortcuts
         - label: useModal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /composables/use-modal
         - label: useSlideover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a slideover within your application.
           to: /composables/use-slideover
         - label: useToast
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a toast within your application.
           to: /composables/use-toast
     - label: Components
-      icon: i-heroicons-cube-transparent
+      icon: i-lucide-box
       to: /components
       active: true
       children:
         - label: Link
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Use NuxtLink with superpowers.
           to: /components/link
         - label: Modal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /components/modal
         - label: NavigationMenu
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of links.
           to: /components/navigation-menu
         - label: Pagination
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of pages.
           to: /components/pagination
         - label: Popover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a non-modal dialog that floats around a trigger element.
           to: /components/popover
         - label: Progress
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Show a horizontal bar to indicate task progression.
           to: /components/progress
   class: 'justify-center'
@@ -454,71 +454,71 @@ props:
   arrow: true
   items:
     - label: Guide
-      icon: i-heroicons-book-open
+      icon: i-lucide-book-open
       to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
-          icon: i-heroicons-home
+          icon: i-lucide-house
         - label: Installation
           description: Learn how to install and configure Nuxt UI in your application.
-          icon: i-heroicons-cloud-arrow-down
+          icon: i-lucide-cloud-download
         - label: 'Icons'
-          icon: 'i-heroicons-face-smile'
+          icon: 'i-lucide-smile'
           description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
         - label: 'Colors'
-          icon: 'i-heroicons-swatch'
+          icon: 'i-lucide-swatch-book'
           description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
         - label: 'Theme'
-          icon: 'i-heroicons-cog'
+          icon: 'i-lucide-cog'
           description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
     - label: Composables
-      icon: i-heroicons-circle-stack
+      icon: i-lucide-database
       to: /composables
       children:
         - label: defineShortcuts
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Define shortcuts for your application.
           to: /composables/define-shortcuts
         - label: useModal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /composables/use-modal
         - label: useSlideover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a slideover within your application.
           to: /composables/use-slideover
         - label: useToast
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a toast within your application.
           to: /composables/use-toast
     - label: Components
-      icon: i-heroicons-cube-transparent
+      icon: i-lucide-box
       to: /components
       active: true
       children:
         - label: Link
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Use NuxtLink with superpowers.
           to: /components/link
         - label: Modal
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a modal within your application.
           to: /components/modal
         - label: NavigationMenu
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of links.
           to: /components/navigation-menu
         - label: Pagination
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a list of pages.
           to: /components/pagination
         - label: Popover
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Display a non-modal dialog that floats around a trigger element.
           to: /components/popover
         - label: Progress
-          icon: i-heroicons-document-text
+          icon: i-lucide-file-text
           description: Show a horizontal bar to indicate task progression.
           to: /components/progress
   class: 'justify-center'

docs/content/3.components/select-menu.md

@@ -216,18 +216,18 @@ external:
 props:
   modelValue:
     label: 'Backlog'
-    icon: 'i-heroicons-question-mark-circle'
+    icon: 'i-lucide-circle-help'
   searchInput:
     placeholder: 'Filter...'
   items:
     - label: Backlog
-      icon: 'i-heroicons-question-mark-circle'
+      icon: 'i-lucide-circle-help'
     - label: Todo
-      icon: 'i-heroicons-plus-circle'
+      icon: 'i-lucide-circle-plus'
     - label: In Progress
-      icon: 'i-heroicons-arrow-up-circle'
+      icon: 'i-lucide-circle-arrow-up'
     - label: Done
-      icon: 'i-heroicons-check-circle'
+      icon: 'i-lucide-circle-check'
   class: 'w-48'
 ---
 ::
@@ -403,7 +403,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  icon: 'i-heroicons-magnifying-glass'
+  icon: 'i-lucide-search'
   size: md
   items:
     - Backlog
@@ -416,7 +416,7 @@ props:
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
 
 ::component-code
 ---
@@ -430,7 +430,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  trailingIcon: 'i-lucide-arrow-down'
   size: md
   items:
     - Backlog
@@ -447,7 +447,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
 
 ### Selected Icon
 
-Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
+Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
 
 ::component-code
 ---
@@ -461,7 +461,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  selectedIcon: 'i-heroicons-fire'
+  selectedIcon: 'i-lucide-flame'
   size: md
   items:
     - Backlog
@@ -533,7 +533,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -548,7 +548,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo

docs/content/3.components/select.md

@@ -340,7 +340,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  icon: 'i-heroicons-magnifying-glass'
+  icon: 'i-lucide-search'
   size: md
   items:
     - Backlog
@@ -353,7 +353,7 @@ props:
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
 
 ::component-code
 ---
@@ -367,7 +367,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  trailingIcon: 'i-lucide-arrow-down'
   size: md
   items:
     - Backlog
@@ -384,7 +384,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
 
 ### Selected Icon
 
-Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
+Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
 
 ::component-code
 ---
@@ -398,7 +398,7 @@ external:
   - modelValue
 props:
   modelValue: 'Backlog'
-  selectedIcon: 'i-heroicons-fire'
+  selectedIcon: 'i-lucide-flame'
   size: md
   items:
     - Backlog
@@ -470,7 +470,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -485,7 +485,7 @@ external:
 props:
   modelValue: 'Backlog'
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   items:
     - Backlog
     - Todo

docs/content/3.components/slideover.md

@@ -130,7 +130,7 @@ The close button is not displayed if the `#content` slot is used as it's a part
 
 ### Close Icon
 
-Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -139,7 +139,7 @@ ignore:
   - title
 props:
   title: 'Slideover with close button'
-  closeIcon: 'i-heroicons-arrow-right'
+  closeIcon: 'i-lucide-arrow-right'
 slots:
   default: |
 

docs/content/3.components/switch.md

@@ -83,8 +83,8 @@ ignore:
   - label
   - defaultValue
 props:
-  uncheckedIcon: 'i-heroicons-x-mark'
-  checkedIcon: 'i-heroicons-check'
+  uncheckedIcon: 'i-lucide-x'
+  checkedIcon: 'i-lucide-check'
   defaultValue: true
   label: Check me
 ---
@@ -108,7 +108,7 @@ props:
 
 ### Loading Icon
 
-Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
 
 ::component-code
 ---
@@ -117,7 +117,7 @@ ignore:
   - defaultValue
 props:
   loading: true
-  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  loadingIcon: 'i-lucide-repeat-2'
   defaultValue: true
   label: Check me
 ---

docs/content/3.components/tabs.md

@@ -33,10 +33,10 @@ external:
 props:
   items:
     - label: Account
-      icon: 'i-heroicons-user'
+      icon: 'i-lucide-user'
       content: 'This is the account content.'
     - label: Password
-      icon: 'i-heroicons-lock-closed'
+      icon: 'i-lucide-lock'
       content: 'This is the password content.'
   class: 'w-full'
 ---
@@ -60,10 +60,10 @@ props:
   content: false
   items:
     - label: Account
-      icon: 'i-heroicons-user'
+      icon: 'i-lucide-user'
       content: 'This is the account content.'
     - label: Password
-      icon: 'i-heroicons-lock-closed'
+      icon: 'i-lucide-lock'
       content: 'This is the password content.'
   class: 'w-full'
 ---
@@ -85,10 +85,10 @@ props:
     forceMount: false
   items:
     - label: Account
-      icon: 'i-heroicons-user'
+      icon: 'i-lucide-user'
       content: 'This is the account content.'
     - label: Password
-      icon: 'i-heroicons-lock-closed'
+      icon: 'i-lucide-lock'
       content: 'This is the password content.'
   class: 'w-full'
 ---

docs/content/3.components/toast.md

@@ -61,7 +61,7 @@ Pass an `icon` field to the `toast.add` method to display an [Icon](/components/
 options:
   - name: 'icon'
     label: 'icon'
-    default: 'i-heroicons-wifi'
+    default: 'i-lucide-wifi'
 name: 'toast-icon-example'
 ---
 ::
@@ -116,14 +116,14 @@ name: 'toast-close-example'
 
 ### Close Icon
 
-Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-heroicons-x-mark-20-solid`.
+Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-lucide-x`.
 
 ::component-example
 ---
 options:
   - name: 'closeIcon'
     label: 'closeIcon'
-    default: 'i-heroicons-arrow-right'
+    default: 'i-lucide-arrow-right'
 name: 'toast-close-icon-example'
 ---
 ::

docs/package.json

@@ -3,7 +3,7 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@iconify-json/heroicons": "^1.2.1",
+    "@iconify-json/lucide": "^1.2.11",
     "@iconify-json/simple-icons": "^1.2.10",
     "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "3.0.0-alpha.5",