diff --git a/docs/app/components/content/examples/icon/IconSvgExample.vue b/docs/app/components/content/examples/icon/IconSvgExample.vue
new file mode 100644
index 0000000000..64820133ca
--- /dev/null
+++ b/docs/app/components/content/examples/icon/IconSvgExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { h } from 'vue'
+
+const IconLightbulb = () => h(
+  'svg',
+  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' },
+  [
+    h(
+      'path',
+      {
+        'fill': 'none',
+        'stroke': 'currentColor',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': 2,
+        'd': 'M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'
+      }
+    )
+  ]
+)
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>
diff --git a/docs/content/docs/2.components/icon.md b/docs/content/docs/2.components/icon.md
index a3b174febd..1c6923b602 100644
--- a/docs/content/docs/2.components/icon.md
+++ b/docs/content/docs/2.components/icon.md
@@ -1,5 +1,5 @@
 ---
-description: A component to display any icon from Iconify.
+description: A component to display any icon from Iconify or another component.
 category: element
 links:
   - label: Icônes
@@ -27,6 +27,30 @@ It's highly recommended to install the icons collections you need, read more abo
 :::
 ::
 
+## Examples
+
+### SVG
+
+You can also pass a Vue component into the `name` prop:
+
+::component-example
+---
+name: 'icon-svg-example'
+---
+::
+
+You can define your icon components yourself, or use [`unplugin-icons`](https://github.com/unplugin/unplugin-icons) to import them directly from SVG files:
+
+```vue
+<script setup lang="ts">
+import IconLightbulb from '~icons/lucide/lightbulb'
+</script>
+
+<template>
+  <UIcon :name="IconLightbulb" class="size-5" />
+</template>
+```
+
 ## API
 
 ### Props
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 52af6f112b..da99b2271d 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -3,6 +3,7 @@
 import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/accordion'
+import type { IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -13,11 +14,11 @@ export interface AccordionItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -40,7 +41,7 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index d2366dafad..1d9ab5c5c1 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/alert'
-import type { AvatarProps, ButtonProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>
@@ -17,7 +17,7 @@ export interface AlertProps {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * @defaultValue 'primary'
@@ -51,7 +51,7 @@ export interface AlertProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   class?: any
   ui?: Alert['slots']
 }
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index b4891f7253..4cd46b5860 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/auth-form'
-import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps } from '../types'
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps, IconProps } from '../types'
 import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form'
 import type { ComponentConfig } from '../types/tv'
 
@@ -29,7 +29,7 @@ export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F exte
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   fields?: F[]
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 8fb2bea034..ad6c6fe860 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/avatar'
-import type { ChipProps } from '../types'
+import type { ChipProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>
@@ -17,7 +17,7 @@ export interface AvatarProps {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   text?: string
   /**
    * @defaultValue 'md'
diff --git a/src/runtime/components/Banner.vue b/src/runtime/components/Banner.vue
index fd2d28e00b..5a093a2d9a 100644
--- a/src/runtime/components/Banner.vue
+++ b/src/runtime/components/Banner.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/banner'
-import type { ButtonProps, LinkProps } from '../types'
+import type { ButtonProps, IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>
@@ -22,7 +22,7 @@ export interface BannerProps {
    * The icon displayed next to the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   /**
    * Display a list of actions next to the title.
@@ -47,7 +47,7 @@ export interface BannerProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   class?: any
   ui?: Banner['slots']
 }
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index b31b7b1c2e..d30e60ca14 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/breadcrumb'
-import type { AvatarProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, LinkProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -13,7 +13,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   slot?: string
   class?: any
@@ -33,7 +33,7 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  separatorIcon?: string
+  separatorIcon?: IconProps['name']
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 1d95d54099..c76ed46b50 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -3,7 +3,7 @@ import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, Rang
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>
@@ -33,7 +33,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
    * @IconifyIcon
    */
-  nextYearIcon?: string
+  nextYearIcon?: IconProps['name']
   /**
    * Configure the next year button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -44,7 +44,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  nextMonthIcon?: string
+  nextMonthIcon?: IconProps['name']
   /**
    * Configure the next month button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -55,7 +55,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
    * @IconifyIcon
    */
-  prevYearIcon?: string
+  prevYearIcon?: IconProps['name']
   /**
    * Configure the prev year button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -66,7 +66,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue appConfig.ui.icons.chevronLeft
    * @IconifyIcon
    */
-  prevMonthIcon?: string
+  prevMonthIcon?: IconProps['name']
   /**
    * Configure the prev month button.
    * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index b5364b43f6..d74b83c425 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -10,7 +10,7 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
 import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import theme from '#build/ui/carousel'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>
@@ -39,7 +39,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * Configure the next button when arrows are enabled.
    * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
@@ -50,7 +50,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Om
    * @defaultValue appConfig.ui.icons.arrowRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   /**
    * Display prev and next buttons to scroll the carousel.
    * @defaultValue false
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 939cede291..04f54cc44a 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UIMessage } from 'ai'
 import theme from '#build/ui/chat-message'
-import type { AvatarProps, ButtonProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>
@@ -16,7 +16,7 @@ export interface ChatMessageProps extends UIMessage {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps & { [key: string]: any }
   /**
    * @defaultValue 'naked'
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 997bebe0ae..0d21cf2ab5 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UIMessage, ChatStatus } from 'ai'
 import theme from '#build/ui/chat-messages'
-import type { ButtonProps, ChatMessageProps } from '../types'
+import type { ButtonProps, ChatMessageProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>
@@ -31,7 +31,7 @@ export interface ChatMessagesProps {
    * @defaultValue appConfig.ui.icons.arrowDown
    * @IconifyIcon
    */
-  autoScrollIcon?: string
+  autoScrollIcon?: IconProps['name']
   /**
    * The `user` messages props.
    * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
diff --git a/src/runtime/components/ChatPromptSubmit.vue b/src/runtime/components/ChatPromptSubmit.vue
index a2c843ae70..369e53e430 100644
--- a/src/runtime/components/ChatPromptSubmit.vue
+++ b/src/runtime/components/ChatPromptSubmit.vue
@@ -2,7 +2,7 @@
 import type { ChatStatus } from 'ai'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/chat-prompt-submit'
-import type { ButtonProps, ButtonSlots } from '../types'
+import type { ButtonProps, ButtonSlots, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>
@@ -14,7 +14,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.arrowUp
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The color of the button when the status is `ready`.
    * @defaultValue 'primary'
@@ -30,7 +30,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.stop
    * @IconifyIcon
    */
-  streamingIcon?: string
+  streamingIcon?: IconProps['name']
   /**
    * The color of the button when the status is `streaming`.
    * @defaultValue 'neutral'
@@ -46,7 +46,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.stop
    * @IconifyIcon
    */
-  submittedIcon?: string
+  submittedIcon?: IconProps['name']
   /**
    * The color of the button when the status is `submitted`.
    * @defaultValue 'neutral'
@@ -62,7 +62,7 @@ export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonPro
    * @defaultValue appConfig.ui.icons.reload
    * @IconifyIcon
    */
-  errorIcon?: string
+  errorIcon?: IconProps['name']
   /**
    * The color of the button when the status is `error`.
    * @defaultValue 'error'
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index f3a7c77f5a..e615af2886 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -2,6 +2,7 @@
 import type { CheckboxRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/checkbox'
+import type { IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>
@@ -36,13 +37,13 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The icon displayed when the checkbox is indeterminate.
    * @defaultValue appConfig.ui.icons.minus
    * @IconifyIcon
    */
-  indeterminateIcon?: string
+  indeterminateIcon?: IconProps['name']
   class?: any
   ui?: Checkbox['slots']
 }
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 72a51d318a..b525f353f7 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -6,7 +6,7 @@ import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/command-palette'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>
@@ -18,7 +18,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   kbds?: KbdProps['value'][] | KbdProps[]
@@ -54,7 +54,7 @@ export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPalet
    * The icon displayed when an item is highlighted.
    * @IconifyIcon
    */
-  highlightedIcon?: string
+  highlightedIcon?: IconProps['name']
 }
 
 export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
@@ -68,19 +68,19 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The icon displayed when an item has children.
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -103,7 +103,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Display a button to navigate back in history.
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
@@ -115,7 +115,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  backIcon?: string
+  backIcon?: IconProps['name']
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index 5d165566be..066693da54 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -3,7 +3,7 @@
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/context-menu'
-import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   color?: ContextMenu['variants']['color']
   avatar?: AvatarProps
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
@@ -49,20 +49,20 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   /** The content of the menu. */
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>
   /**
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 3b5120262a..86666f7d18 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -2,7 +2,7 @@
 import type { ContextMenuContentProps as RekaContextMenuContentProps, ContextMenuContentEmits as RekaContextMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type theme from '#build/ui/context-menu'
-import type { AvatarProps, ContextMenuItem, ContextMenuSlots, KbdProps } from '../types'
+import type { AvatarProps, ContextMenuItem, ContextMenuSlots, IconProps, KbdProps } from '../types'
 import type { ArrayOrNested, NestedItem } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -16,15 +16,15 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
   /**
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   class?: any
   ui: { [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string }
   uiOverride?: ContextMenu['slots']
diff --git a/src/runtime/components/DashboardNavbar.vue b/src/runtime/components/DashboardNavbar.vue
index 882e7d2e7b..f8109c2621 100644
--- a/src/runtime/components/DashboardNavbar.vue
+++ b/src/runtime/components/DashboardNavbar.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dashboard-navbar'
 import type { DashboardContext } from '../utils/dashboard'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>
@@ -17,7 +17,7 @@ export interface DashboardNavbarProps {
    * The icon displayed next to the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   /**
    * Customize the toggle button to open the sidebar.
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index 25c27171e2..cb3cdbf857 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -3,7 +3,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/dashboard-search'
-import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem } from '../types'
+import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>
@@ -14,7 +14,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -32,7 +32,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -45,7 +45,7 @@ export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPale
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
    * @defaultValue 'meta_k'
diff --git a/src/runtime/components/DashboardSearchButton.vue b/src/runtime/components/DashboardSearchButton.vue
index 28587e11b5..b75e3c54e3 100644
--- a/src/runtime/components/DashboardSearchButton.vue
+++ b/src/runtime/components/DashboardSearchButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dashboard-search-button'
-import type { ButtonProps, ButtonSlots, KbdProps, TooltipProps } from '../types'
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearchButton = ComponentConfig<typeof theme, AppConfig, 'dashboardSearchButton'>
@@ -12,7 +12,7 @@ export interface DashboardSearchButtonProps {
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The label displayed in the button.
    * @defaultValue t('dashboardSearchButton.label')
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 1e67103e67..c2fd16fd55 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -3,7 +3,7 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/dropdown-menu'
-import type { AvatarProps, KbdProps, LinkProps } from '../types'
+import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   color?: DropdownMenu['variants']['color']
   avatar?: AvatarProps
   content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
@@ -49,20 +49,20 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * The icon displayed when an item is loading.
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index eeefd01907..3f312cbc84 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -3,7 +3,7 @@
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuContentEmits as RekaDropdownMenuContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type theme from '#build/ui/dropdown-menu'
-import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots, IconProps } from '../types'
 import type { ArrayOrNested, NestedItem, DynamicSlots, MergeTypes } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -17,15 +17,15 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
   /**
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   class?: any
   ui: { [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string }
   uiOverride?: DropdownMenu['slots']
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index c76ba4c247..2493577c64 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -2,7 +2,7 @@
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFileDialogReturn } from '@vueuse/core'
 import theme from '#build/ui/file-upload'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>
@@ -20,7 +20,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.upload
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   label?: string
   description?: string
   /**
@@ -79,7 +79,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.file
    * @IconifyIcon
    */
-  fileIcon?: string
+  fileIcon?: IconProps['name']
   /**
    * Configure the delete button for the file.
    * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
@@ -91,7 +91,7 @@ export interface FileUploadProps<M extends boolean = false> {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  fileDeleteIcon?: string
+  fileDeleteIcon?: IconProps['name']
   class?: any
   ui?: FileUpload['slots']
 }
diff --git a/src/runtime/components/FooterColumns.vue b/src/runtime/components/FooterColumns.vue
index 253bb648bd..5857cb8c7d 100644
--- a/src/runtime/components/FooterColumns.vue
+++ b/src/runtime/components/FooterColumns.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/footer-columns'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>
@@ -11,7 +11,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/Icon.vue b/src/runtime/components/Icon.vue
index 8d816fa245..7ad07bf68b 100644
--- a/src/runtime/components/Icon.vue
+++ b/src/runtime/components/Icon.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 export interface IconProps {
-  name: string
+  name: string | object
   mode?: 'svg' | 'css'
   size?: string | number
   customize?: (
@@ -22,5 +22,6 @@ const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'c
 </script>
 
 <template>
-  <Icon v-bind="iconProps" />
+  <Icon v-if="typeof name === 'string'" v-bind="iconProps" />
+  <component :is="name" v-else />
 </template>
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 18b93353e2..1a1128a8b6 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -4,7 +4,7 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -15,7 +15,7 @@ interface _InputMenuItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -61,20 +61,20 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The icon displayed to delete a tag.
    * Works only when `multiple` is `true`.
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  deleteIcon?: string
+  deleteIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 4400c4c108..a387d0fa08 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -2,7 +2,7 @@
 import type { NumberFieldRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-number'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>
@@ -35,7 +35,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue appConfig.ui.icons.plus
    * @IconifyIcon
    */
-  incrementIcon?: string
+  incrementIcon?: IconProps['name']
   /** Disable the increment button. */
   incrementDisabled?: boolean
   /**
@@ -48,7 +48,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue appConfig.ui.icons.minus
    * @IconifyIcon
    */
-  decrementIcon?: string
+  decrementIcon?: IconProps['name']
   /** Disable the decrement button. */
   decrementDisabled?: boolean
   autofocus?: boolean
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index c8eca8cc0d..f305558ec7 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema'
 import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
 import theme from '#build/ui/input-tags'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>
@@ -39,7 +39,7 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  deleteIcon?: string
+  deleteIcon?: IconProps['name']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   class?: any
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 7e1c11de18..0bc75a7010 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -2,7 +2,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/modal'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -44,7 +44,7 @@ export interface ModalProps extends DialogRootProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * When `false`, the modal will not close when clicking outside or pressing escape.
    * @defaultValue true
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 68af27ba04..bd4e47aff0 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -3,7 +3,7 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types'
+import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types'
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -20,7 +20,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * Display a badge on the item.
@@ -40,7 +40,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The type of the item.
    * The `label` type is only displayed in `vertical` orientation.
@@ -74,14 +74,14 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
    * @IconifyIcon
    */
-  externalIcon?: boolean | string
+  externalIcon?: boolean | IconProps['name']
   items?: T
   /**
    * @defaultValue 'primary'
diff --git a/src/runtime/components/PageAnchors.vue b/src/runtime/components/PageAnchors.vue
index 7f0aecc9e0..719d431089 100644
--- a/src/runtime/components/PageAnchors.vue
+++ b/src/runtime/components/PageAnchors.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-anchors'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageAnchors = ComponentConfig<typeof theme, AppConfig, 'pageAnchors'>
@@ -11,7 +11,7 @@ export interface PageAnchor extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<PageAnchors['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeading' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/PageCard.vue b/src/runtime/components/PageCard.vue
index c078601390..5640a8a891 100644
--- a/src/runtime/components/PageCard.vue
+++ b/src/runtime/components/PageCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-card'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageCard = ComponentConfig<typeof theme, AppConfig, 'pageCard'>
@@ -16,7 +16,7 @@ export interface PageCardProps {
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/PageFeature.vue b/src/runtime/components/PageFeature.vue
index 2b826c8942..6d289701f1 100644
--- a/src/runtime/components/PageFeature.vue
+++ b/src/runtime/components/PageFeature.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-feature'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>
@@ -16,7 +16,7 @@ export interface PageFeatureProps {
    * The icon displayed next to the title when `orientation` is `horizontal` and above the title when `orientation` is `vertical`.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/PageLinks.vue b/src/runtime/components/PageLinks.vue
index 8aa4915ac3..f98b548311 100644
--- a/src/runtime/components/PageLinks.vue
+++ b/src/runtime/components/PageLinks.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-links'
-import type { LinkProps } from '../types'
+import type { IconProps, LinkProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageLinks = ComponentConfig<typeof theme, AppConfig, 'pageLinks'>
@@ -11,7 +11,7 @@ export interface PageLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<PageLinks['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>
 }
diff --git a/src/runtime/components/PageSection.vue b/src/runtime/components/PageSection.vue
index f69ed495c0..03cbc7cac4 100644
--- a/src/runtime/components/PageSection.vue
+++ b/src/runtime/components/PageSection.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/page-section'
-import type { ButtonProps, PageFeatureProps } from '../types'
+import type { ButtonProps, IconProps, PageFeatureProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>
@@ -20,7 +20,7 @@ export interface PageSectionProps {
    * The icon displayed above the title.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 609f715c83..dc74e81c3e 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -2,7 +2,7 @@
 import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/pagination'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>
@@ -18,31 +18,31 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
    * @IconifyIcon
    */
-  firstIcon?: string
+  firstIcon?: IconProps['name']
   /**
    * The icon to use for the previous page control.
    * @defaultValue appConfig.ui.icons.chevronLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * The icon to use for the next page control.
    * @defaultValue appConfig.ui.icons.chevronRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   /**
    * The icon to use for the last page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
    * @IconifyIcon
    */
-  lastIcon?: string
+  lastIcon?: IconProps['name']
   /**
    * The icon to use for the ellipsis control.
    * @defaultValue appConfig.ui.icons.ellipsis
    * @IconifyIcon
    */
-  ellipsisIcon?: string
+  ellipsisIcon?: IconProps['name']
   /**
    * The color of the pagination controls.
    * @defaultValue 'neutral'
diff --git a/src/runtime/components/PricingPlan.vue b/src/runtime/components/PricingPlan.vue
index e2c1caec66..912178ff96 100644
--- a/src/runtime/components/PricingPlan.vue
+++ b/src/runtime/components/PricingPlan.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/pricing-plan'
-import type { BadgeProps, ButtonProps } from '../types'
+import type { BadgeProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type PricingPlan = ComponentConfig<typeof theme, AppConfig, 'pricingPlan'>
@@ -12,7 +12,7 @@ type PricingPlanFeature = {
    * @defaultValue appConfig.ui.icons.success
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
 }
 
 export interface PricingPlanProps {
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index ec1dfefaa5..654f19a88a 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -3,7 +3,7 @@ import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectConten
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ interface SelectItemBase {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -52,13 +52,13 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index a71b73ff62..1ea5c0dcb7 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -3,7 +3,7 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ interface _SelectMenuItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   chip?: ChipProps
   /**
@@ -59,13 +59,13 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
-  selectedIcon?: string
+  selectedIcon?: IconProps['name']
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index f0f40cb9fa..2d58a14cfe 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -2,7 +2,7 @@
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/separator'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Separator = ComponentConfig<typeof theme, AppConfig, 'separator'>
@@ -19,7 +19,7 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
    * Display an icon in the middle.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /** Display an avatar in the middle. */
   avatar?: AvatarProps
   /**
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 1a65d438dc..81ab98df5f 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -2,7 +2,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/slideover'
-import type { ButtonProps } from '../types'
+import type { ButtonProps, IconProps } from '../types'
 import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -44,7 +44,7 @@ export interface SlideoverProps extends DialogRootProps {
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * When `false`, the slideover will not close when clicking outside or pressing escape.
    * @defaultValue true
diff --git a/src/runtime/components/Stepper.vue b/src/runtime/components/Stepper.vue
index 0bdf112c92..02faa9bdfa 100644
--- a/src/runtime/components/Stepper.vue
+++ b/src/runtime/components/Stepper.vue
@@ -3,6 +3,7 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/stepper'
+import type { IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -16,7 +17,7 @@ export interface StepperItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   content?: string
   disabled?: boolean
   class?: any
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index b4e3ad70b2..9e9a590504 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -2,6 +2,7 @@
 import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/switch'
+import type { IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>
@@ -27,17 +28,17 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display an icon when the switch is checked.
    * @IconifyIcon
    */
-  checkedIcon?: string
+  checkedIcon?: IconProps['name']
   /**
    * Display an icon when the switch is unchecked.
    * @IconifyIcon
    */
-  uncheckedIcon?: string
+  uncheckedIcon?: IconProps['name']
   label?: string
   description?: string
   class?: any
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 87fdc63b02..33f410a554 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -3,7 +3,7 @@
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tabs'
-import type { AvatarProps, BadgeProps } from '../types'
+import type { AvatarProps, BadgeProps, IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -14,7 +14,7 @@ export interface TabsItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * Display a badge on the item.
diff --git a/src/runtime/components/Timeline.vue b/src/runtime/components/Timeline.vue
index e9f45ac2f6..213656441d 100644
--- a/src/runtime/components/Timeline.vue
+++ b/src/runtime/components/Timeline.vue
@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/timeline'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 import type { DynamicSlots } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -12,7 +12,7 @@ export interface TimelineItem {
   date?: string
   title?: string
   description?: string
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   value?: string | number
   slot?: string
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index b75b1a9340..d2f04e2dad 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -2,7 +2,7 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/toast'
-import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
+import type { AvatarProps, ButtonProps, IconProps, ProgressProps } from '../types'
 import type { StringOrVNode } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -19,7 +19,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   /**
    * @defaultValue 'primary'
@@ -41,7 +41,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index e077f3843a..803d23396e 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -3,6 +3,7 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/tree'
+import type { IconProps } from '../types'
 import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -12,12 +13,12 @@ export type TreeItem = {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   label?: string
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   defaultExpanded?: boolean
   disabled?: boolean
   value?: string
@@ -59,19 +60,19 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The icon displayed when a parent node is expanded.
    * @defaultValue appConfig.ui.icons.folderOpen
    * @IconifyIcon
    */
-  expandedIcon?: string
+  expandedIcon?: IconProps['name']
   /**
    * The icon displayed when a parent node is collapsed.
    * @defaultValue appConfig.ui.icons.folder
    * @IconifyIcon
    */
-  collapsedIcon?: string
+  collapsedIcon?: IconProps['name']
   items?: T
   /** The controlled value of the Tree. Can be bind as `v-model`. */
   modelValue?: GetModelValue<T, VK, M>
diff --git a/src/runtime/components/content/ContentNavigation.vue b/src/runtime/components/content/ContentNavigation.vue
index 8f7dfa0d75..81cca1a738 100644
--- a/src/runtime/components/content/ContentNavigation.vue
+++ b/src/runtime/components/content/ContentNavigation.vue
@@ -3,7 +3,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import type { ContentNavigationItem } from '@nuxt/content'
 import theme from '#build/ui/content/content-navigation'
-import type { BadgeProps, LinkProps } from '../../types'
+import type { BadgeProps, IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentNavigation = ComponentConfig<typeof theme, AppConfig, 'contentNavigation'>
@@ -12,7 +12,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * Display a badge on the link.
    * `{ color: 'neutral', variant: 'outline', size: 'sm' }`{lang="ts-type"}
@@ -22,7 +22,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   disabled?: boolean
   children?: ContentNavigationLink[]
   defaultOpen?: boolean
@@ -48,7 +48,7 @@ export interface ContentNavigationProps<T extends ContentNavigationLink = Conten
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * @defaultValue 'primary'
    */
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index 93f4f938de..8c9eee0f81 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -4,7 +4,7 @@ import type { ContentNavigationItem } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import theme from '#build/ui/content/content-search'
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem } from '../../types'
+import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>
@@ -15,7 +15,7 @@ export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   children?: ContentSearchLink[]
 }
 
@@ -32,7 +32,7 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
 }
 
 export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends /* @vue-ignore */ Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
@@ -41,7 +41,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -59,7 +59,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
   /**
    * Display a close button in the input (useful when inside a Modal for example).
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -72,7 +72,7 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
    * @defaultValue appConfig.ui.icons.close
    * @IconifyIcon
    */
-  closeIcon?: string
+  closeIcon?: IconProps['name']
   /**
    * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
    * @defaultValue 'meta_k'
diff --git a/src/runtime/components/content/ContentSearchButton.vue b/src/runtime/components/content/ContentSearchButton.vue
index cba5ab9cab..a7f5da41a5 100644
--- a/src/runtime/components/content/ContentSearchButton.vue
+++ b/src/runtime/components/content/ContentSearchButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-search-button'
-import type { ButtonProps, ButtonSlots, KbdProps, TooltipProps } from '../../types'
+import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>
@@ -12,7 +12,7 @@ export interface ContentSearchButtonProps {
    * @defaultValue appConfig.ui.icons.search
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The label displayed in the button.
    * @defaultValue t('contentSearchButton.label')
diff --git a/src/runtime/components/content/ContentSurround.vue b/src/runtime/components/content/ContentSurround.vue
index 1914a10dce..29bc2061ed 100644
--- a/src/runtime/components/content/ContentSurround.vue
+++ b/src/runtime/components/content/ContentSurround.vue
@@ -2,6 +2,7 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-surround'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>
@@ -11,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
   /**
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>
 }
@@ -27,13 +28,13 @@ export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSur
    * @defaultValue appConfig.ui.icons.arrowLeft
    * @IconifyIcon
    */
-  prevIcon?: string
+  prevIcon?: IconProps['name']
   /**
    * The icon displayed in the next link.
    * @defaultValue appConfig.ui.icons.arrowRight
    * @IconifyIcon
    */
-  nextIcon?: string
+  nextIcon?: IconProps['name']
   surround?: T[]
   class?: any
   ui?: ContentSurround['slots']
@@ -66,7 +67,7 @@ defineSlots<ContentSurroundSlots<T>>()
 
 const appConfig = useAppConfig() as ContentSurround['AppConfig']
 
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: string, direction: 'left' | 'right' }>({
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ link?: ContentSurroundLink, icon: IconProps['name'], direction: 'left' | 'right' }>({
   props: {
     link: Object,
     icon: String,
diff --git a/src/runtime/components/content/ContentToc.vue b/src/runtime/components/content/ContentToc.vue
index 914bba0b44..1076647d5c 100644
--- a/src/runtime/components/content/ContentToc.vue
+++ b/src/runtime/components/content/ContentToc.vue
@@ -3,6 +3,7 @@ import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
 import type { TocLink } from '@nuxt/content'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/content/content-toc'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>
@@ -23,7 +24,7 @@ export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> exte
    * @defaultValue appConfig.ui.icons.chevronDown
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /**
    * The title of the table of contents.
    * @defaultValue t('contentToc.title')
diff --git a/src/runtime/components/prose/Callout.vue b/src/runtime/components/prose/Callout.vue
index 7876081cee..750400d946 100644
--- a/src/runtime/components/prose/Callout.vue
+++ b/src/runtime/components/prose/Callout.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/callout'
-import type { LinkProps } from '../../types'
+import type { IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.prose'>
@@ -9,7 +9,7 @@ type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.pros
 export interface ProseCalloutProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: string
+  icon?: IconProps['name']
   /**
    * @defaultValue 'neutral'
    */
diff --git a/src/runtime/components/prose/Card.vue b/src/runtime/components/prose/Card.vue
index feeb7a2edc..312183d49f 100644
--- a/src/runtime/components/prose/Card.vue
+++ b/src/runtime/components/prose/Card.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/card'
-import type { LinkProps } from '../../types'
+import type { IconProps, LinkProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
@@ -9,7 +9,7 @@ type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>
 export interface ProseCardProps {
   to?: LinkProps['to']
   target?: LinkProps['target']
-  icon?: string
+  icon?: IconProps['name']
   title?: string
   description?: string
   /**
diff --git a/src/runtime/components/prose/CodeCollapse.vue b/src/runtime/components/prose/CodeCollapse.vue
index d1aff031dd..041389ed49 100644
--- a/src/runtime/components/prose/CodeCollapse.vue
+++ b/src/runtime/components/prose/CodeCollapse.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-collapse'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCodeCollapse = ComponentConfig<typeof theme, AppConfig, 'codeCollapse', 'ui.prose'>
@@ -10,7 +11,7 @@ export interface ProseCodeCollapseProps {
    * The icon displayed to toggle the code.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.codeCollapse.name')
diff --git a/src/runtime/components/prose/CodeIcon.vue b/src/runtime/components/prose/CodeIcon.vue
index a314306bd6..6887d4884f 100644
--- a/src/runtime/components/prose/CodeIcon.vue
+++ b/src/runtime/components/prose/CodeIcon.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/code-icon'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCodeIcon = ComponentConfig<typeof theme, AppConfig, 'codeIcon', 'ui.prose'>
 
 export interface ProseCodeIconProps {
-  icon?: string
+  icon?: IconProps['name']
   filename?: string
 }
 </script>
diff --git a/src/runtime/components/prose/Collapsible.vue b/src/runtime/components/prose/Collapsible.vue
index f14c0f2526..df87bc4ef6 100644
--- a/src/runtime/components/prose/Collapsible.vue
+++ b/src/runtime/components/prose/Collapsible.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/collapsible'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProseCollapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible', 'ui.prose'>
@@ -10,7 +11,7 @@ export interface ProseCollapsibleProps {
    * The icon displayed to toggle the collapsible.
    * @defaultValue appConfig.ui.icons.chevronDown
    */
-  icon?: string
+  icon?: IconProps['name']
   /**
    * The name displayed in the trigger label.
    * @defaultValue t('prose.collapsible.name')
diff --git a/src/runtime/components/prose/Pre.vue b/src/runtime/components/prose/Pre.vue
index e02ac6cc93..6c1e0c655d 100644
--- a/src/runtime/components/prose/Pre.vue
+++ b/src/runtime/components/prose/Pre.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/prose/pre'
+import type { IconProps } from '../../types'
 import type { ComponentConfig } from '../../types/tv'
 
 type ProsePre = ComponentConfig<typeof theme, AppConfig, 'pre', 'ui.prose'>
 
 export interface ProsePreProps {
-  icon?: string
+  icon?: IconProps['name']
   code?: string
   language?: string
   filename?: string
diff --git a/src/runtime/composables/useComponentIcons.ts b/src/runtime/composables/useComponentIcons.ts
index 37de0ee2a4..68e0a08c41 100644
--- a/src/runtime/composables/useComponentIcons.ts
+++ b/src/runtime/composables/useComponentIcons.ts
@@ -1,14 +1,14 @@
 import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { useAppConfig } from '#imports'
-import type { AvatarProps } from '../types'
+import type { AvatarProps, IconProps } from '../types'
 
 export interface UseComponentIconsProps {
   /**
    * Display an icon based on the `leading` and `trailing` props.
    * @IconifyIcon
    */
-  icon?: string
+  icon?: IconProps['name']
   /** Display an avatar on the left side. */
   avatar?: AvatarProps
   /** When `true`, the icon will be displayed on the left side. */
@@ -17,14 +17,14 @@ export interface UseComponentIconsProps {
    * Display an icon on the left side.
    * @IconifyIcon
    */
-  leadingIcon?: string
+  leadingIcon?: IconProps['name']
   /** When `true`, the icon will be displayed on the right side. */
   trailing?: boolean
   /**
    * Display an icon on the right side.
    * @IconifyIcon
    */
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
   /**
@@ -32,7 +32,7 @@ export interface UseComponentIconsProps {
    * @defaultValue appConfig.ui.icons.loading
    * @IconifyIcon
    */
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
 }
 
 export function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>) {
diff --git a/src/runtime/vue/components/Icon.vue b/src/runtime/vue/components/Icon.vue
index 6b6cde5341..db75c4afd3 100644
--- a/src/runtime/vue/components/Icon.vue
+++ b/src/runtime/vue/components/Icon.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
+import type { IconProps as NuxtIconProps } from '../../types'
+
 export interface IconProps {
-  name: string
+  name: NuxtIconProps['name']
 }
 </script>
 
@@ -11,5 +13,6 @@ defineProps<IconProps>()
 </script>
 
 <template>
-  <IconifyIcon :icon="name.replace(/^i-/, '')" />
+  <IconifyIcon v-if="typeof name === 'string'" :icon="name.replace(/^i-/, '')" />
+  <component :is="name" v-else />
 </template>