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

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

devtools/app/app.vue

@@ -64,7 +64,7 @@ function onComponentLoaded() {
 const tabs = computed(() => {
   if (!component.value) return
   return [
-    { label: 'Props', slot: 'props', icon: 'i-heroicons-cog-6-tooth', disabled: !component.value.meta?.props?.length }
+    { label: 'Props', slot: 'props', icon: 'i-lucide-settings', disabled: !component.value.meta?.props?.length }
   ]
 })
 
@@ -93,7 +93,7 @@ const isDark = computed({
     <div v-if="status === 'pending' || error || !component || !components?.length">
       <div v-if="error" class="flex flex-col justify-center items-center h-screen w-screen text-center text-[var(--ui-color-error-500)]">
         <UILogo class="h-8" />
-        <UIcon name="i-heroicons-exclamation-circle" size="20" class="mt-2" />
+        <UIcon name="i-lucide-circle-alert" size="20" class="mt-2" />
         <p>
           {{ (error.data as any)?.error ?? 'Unexpected error' }}
         </p>
@@ -111,7 +111,7 @@ const isDark = computed({
           :items="components"
           placeholder="Search component..."
           class="top-0 translate-y-0 w-full mx-2"
-          icon="i-heroicons-magnifying-glass"
+          icon="i-lucide-search"
         />
 
         <div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-[var(--ui-bg)]">
@@ -127,7 +127,7 @@ const isDark = computed({
             <ComponentPreview :component="component" :props="componentProps" class="h-full" />
             <div class="flex gap-2 absolute top-1 right-2">
               <UButton
-                :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
                 variant="ghost"
                 color="neutral"
                 @click="isDark = !isDark"
@@ -136,7 +136,7 @@ const isDark = computed({
                 v-if="component"
                 variant="ghost"
                 color="neutral"
-                icon="i-heroicons-arrow-top-right-on-square"
+                icon="i-lucide-external-link"
                 @click="openDocs()"
               >
                 Open docs

devtools/app/components/CollapseContainer.vue

@@ -32,7 +32,7 @@ onMounted(() => {
       class="bg-[var(--ui-bg)] group w-full flex justify-center my-1 border-t border-[var(--ui-border)] rounded-t-none"
       variant="link"
       color="neutral"
-      trailing-icon="i-heroicons-chevron-down"
+      trailing-icon="i-lucide-chevron-down"
       :data-state="collapsed ? 'closed' : 'open'"
       :ui="{ trailingIcon: 'transition group-data-[state=open]:rotate-180' }"
       @click="collapsed = !collapsed"

devtools/app/components/ComponentPreview.vue

@@ -118,7 +118,7 @@ const previewUrl = computed(() => {
       @load="onRendererReady"
     />
     <div v-if="!rendererVisible" class="grow w-full flex justify-center items-center px-8">
-      <UAlert color="error" variant="subtle" title="Component preview not found" icon="i-heroicons-exclamation-circle">
+      <UAlert color="error" variant="subtle" title="Component preview not found" icon="i-lucide-circle-alert">
         <template #description>
           <p>Ensure your <code>app.vue</code> file includes a <code>&lt;NuxtPage /&gt;</code> component, as the component preview is mounted as a page. </p>
         </template>
@@ -130,7 +130,7 @@ const previewUrl = computed(() => {
       <UButton
         color="neutral"
         variant="link"
-        :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
+        :icon="copied ? 'i-lucide-clipboard-check' : 'i-lucide-clipboard'"
         class="absolute top-6 right-6"
         @click="copy(formattedCode)"
       />

devtools/app/components/inputs/ArrayInput.vue

@@ -47,12 +47,12 @@ function addArrayItem() {
       />
 
       <UPopover>
-        <UButton variant="ghost" color="neutral" icon="i-heroicons-ellipsis-vertical" class="absolute top-4 right-1" />
+        <UButton variant="ghost" color="neutral" icon="i-lucide-ellipsis-vertical" class="absolute top-4 right-1" />
         <template #content>
           <UButton
             variant="ghost"
             color="error"
-            icon="i-heroicons-trash"
+            icon="i-lucide-trash"
             block
             @click="removeArrayItem(index)"
           >
@@ -63,7 +63,7 @@ function addArrayItem() {
     </div>
 
     <UButton
-      icon="i-heroicons-plus"
+      icon="i-lucide-plus"
       color="neutral"
       variant="ghost"
       block

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'
+  uncheckedIcon: 'i-lucide-x'
-  checkedIcon: 'i-heroicons-check'
+  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",

playground/app/pages/components/accordion.vue

@@ -1,29 +1,29 @@
 <script setup lang="ts">
 const items = [{
   label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
+  icon: 'i-lucide-info',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
+  icon: 'i-lucide-download',
   disabled: true,
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
+  icon: 'i-lucide-pipette',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Layouts',
-  icon: 'i-heroicons-rectangle-group',
+  icon: 'i-lucide-layout-dashboard',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Components',
-  icon: 'i-heroicons-square-3-stack-3d',
+  icon: 'i-lucide-layers-3',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Utilities',
   slot: 'custom' as const,
-  icon: 'i-heroicons-wrench-screwdriver',
+  icon: 'i-lucide-wrench',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }]
 </script>

playground/app/pages/components/alert.vue

@@ -14,7 +14,7 @@ const actions = (color: string) => [{
 const data = {
   title: 'Heads up!',
   description: 'You can change the primary color in your app config.',
-  icon: 'i-heroicons-command-line',
+  icon: 'i-lucide-terminal',
   close: true
 }
 </script>

playground/app/pages/components/avatar.vue

@@ -10,7 +10,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
       <UAvatar v-for="size in sizes" :key="size" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" :size="size" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="size" />
+      <UAvatar v-for="size in sizes" :key="size" icon="i-lucide-image" :size="size" />
     </div>
     <div class="flex items-center gap-1.5">
       <UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="size" />

playground/app/pages/components/badge.vue

@@ -14,13 +14,13 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
       </UBadge>
     </div>
     <div class="flex items-center gap-2">
-      <UBadge v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
+      <UBadge v-for="variant in variants" :key="variant" icon="i-lucide-rocket" :label="upperFirst(variant)" :variant="variant" />
     </div>
     <div class="flex items-center gap-2">
       <UBadge
         v-for="variant in variants"
         :key="variant"
-        icon="i-heroicons-rocket-launch"
+        icon="i-lucide-rocket"
         :label="upperFirst(variant)"
         :variant="variant"
         color="neutral"
@@ -40,7 +40,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
       <UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
     </div>
     <div class="flex items-center gap-2 ms-[-86px]">
-      <UBadge v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Badge" :size="size" />
+      <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
     </div>
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />

playground/app/pages/components/breadcrumb.vue

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

playground/app/pages/components/button.vue

@@ -47,13 +47,13 @@ function onClick() {
       </UButton>
     </div>
     <div class="flex items-center gap-2">
-      <UButton v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
+      <UButton v-for="variant in variants" :key="variant" icon="i-lucide-rocket" :label="upperFirst(variant)" :variant="variant" />
     </div>
     <div class="flex items-center gap-2">
       <UButton
         v-for="variant in variants"
         :key="variant"
-        icon="i-heroicons-rocket-launch"
+        icon="i-lucide-rocket"
         :label="upperFirst(variant)"
         :variant="variant"
         color="neutral"
@@ -73,7 +73,7 @@ function onClick() {
       <UButton v-for="size in sizes" :key="size" label="Button" :size="size" />
     </div>
     <div class="flex items-center gap-2 ms-[-171px]">
-      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="size" />
+      <UButton v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Button" :size="size" />
     </div>
     <div class="flex items-center gap-2 ms-[-171px]">
       <UButton v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Button" :size="size" />
@@ -82,7 +82,7 @@ function onClick() {
       <UButton
         v-for="size in sizes"
         :key="size"
-        icon="i-heroicons-rocket-launch"
+        icon="i-lucide-rocket"
         label="Square"
         square
         :size="size"
@@ -99,7 +99,7 @@ function onClick() {
       />
     </div>
     <div class="flex items-center gap-2 ms-[-68px]">
-      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="size" />
+      <UButton v-for="size in sizes" :key="size" icon="i-lucide-rocket" :size="size" />
     </div>
     <div class="flex items-center gap-2 ms-[-68px]">
       <UButton
@@ -112,10 +112,10 @@ function onClick() {
       />
     </div>
     <div class="flex items-center gap-2">
-      <UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" block />
+      <UButton icon="i-lucide-rocket" trailing-icon="i-lucide-chevron-down" label="Block" block />
     </div>
     <div class="flex items-center gap-2">
-      <UButton icon="i-heroicons-cloud-arrow-down" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
+      <UButton icon="i-lucide-cloud-download" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
     </div>
   </div>
 </template>

playground/app/pages/components/checkbox.vue

@@ -12,7 +12,7 @@ const checked = ref(true)
       <UCheckbox v-model="checked" label="Primary" />
       <UCheckbox label="Neutral" color="neutral" :default-value="true" />
       <UCheckbox label="Error" color="error" :model-value="true" />
-      <UCheckbox label="Icon" icon="i-heroicons-heart-solid" :model-value="true" />
+      <UCheckbox label="Icon" icon="i-lucide-heart" :model-value="true" />
       <UCheckbox label="Default value" :default-value="true" />
       <UCheckbox label="Indeterminate" indeterminate />
       <UCheckbox label="Required" required />

playground/app/pages/components/chip.vue

@@ -6,11 +6,11 @@ const positions = Object.keys(theme.variants.position) as Array<keyof typeof the
 
 const items = [{
   name: 'messages',
-  icon: 'i-heroicons-chat-bubble-oval-left',
+  icon: 'i-lucide-message-circle',
   count: 3
 }, {
   name: 'notifications',
-  icon: 'i-heroicons-bell',
+  icon: 'i-lucide-bell',
   count: 0
 }]
 </script>
@@ -19,7 +19,7 @@ const items = [{
   <div class="flex flex-col gap-4">
     <div class="flex items-center gap-2">
       <UChip v-for="position in positions" :key="position" :position="position">
-        <UButton icon="i-heroicons-inbox" color="neutral" variant="subtle" />
+        <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
       </UChip>
     </div>