diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 9681c950..f3171533 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -4,7 +4,6 @@ import type { AccordionRootProps, AccordionRootEmits, AccordionContentProps } fr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
-import type { IconProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
 
@@ -12,8 +11,8 @@ const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
 
 export interface AccordionItem {
   label?: string
-  icon?: IconProps['name']
-  trailingIcon?: IconProps['name']
+  icon?: string
+  trailingIcon?: string
   slot?: string
   value?: string
   content?: string
@@ -22,7 +21,7 @@ export interface AccordionItem {
 
 export interface AccordionProps<T> extends Omit<AccordionRootProps, 'asChild' | 'dir' | 'orientation'> {
   items?: T[]
-  trailingIcon?: IconProps['name']
+  trailingIcon?: string
   content?: Omit<AccordionContentProps, 'asChild'>
   class?: any
   ui?: Partial<typeof accordion.slots>
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index 04c26b56..a5ca92fc 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -5,7 +5,7 @@ import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
-import type { AvatarProps, ButtonProps, IconProps } from '#ui/types'
+import type { AvatarProps, ButtonProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
 
@@ -16,7 +16,7 @@ type AlertVariants = VariantProps<typeof alert>
 export interface AlertProps extends Omit<PrimitiveProps, 'asChild'> {
   title?: string
   description?: string | VNode | (() => VNode)
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   color?: AlertVariants['color']
   variant?: AlertVariants['variant']
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 934aab2c..10060b32 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -4,7 +4,6 @@ import type { AvatarFallbackProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
-import type { IconProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
 
@@ -16,7 +15,7 @@ export interface AvatarProps extends Omit<AvatarFallbackProps, 'as' | 'asChild'>
   as?: string | object
   src?: string
   alt?: string
-  icon?: IconProps['name']
+  icon?: string
   text?: string
   size?: AvatarVariants['size']
   class?: any
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index 826eb55d..c2c00075 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -4,7 +4,7 @@ import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/breadcrumb'
-import type { AvatarProps, IconProps, LinkProps } from '#ui/types'
+import type { AvatarProps, LinkProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
 
@@ -12,14 +12,14 @@ const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) }
 
 export interface BreadcrumbItem extends LinkProps {
   label?: string
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   slot?: string
 }
 
 export interface BreadcrumbProps<T> extends Omit<PrimitiveProps, 'asChild'> {
   items?: T[]
-  separatorIcon?: IconProps['name']
+  separatorIcon?: string
   class?: any
   ui?: Partial<typeof breadcrumb.slots>
 }
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index b2458677..8ed251ff 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -4,7 +4,6 @@ import type { CheckboxRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
-import type { IconProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
 
@@ -17,9 +16,9 @@ export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild' | 'chec
   description?: string
   color?: CheckboxVariants['color']
   size?: CheckboxVariants['size']
-  icon?: IconProps['name']
+  icon?: string
   indeterminate?: boolean
-  indeterminateIcon?: IconProps['name']
+  indeterminateIcon?: string
   defaultValue?: boolean
   class?: any
   ui?: Partial<typeof checkbox.slots>
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 36539638..69998e43 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -4,7 +4,7 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/dropdown-menu'
-import type { AvatarProps, IconProps, KbdProps, LinkProps } from '#ui/types'
+import type { AvatarProps, KbdProps, LinkProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
 
@@ -12,7 +12,7 @@ const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {
 
 export interface DropdownMenuItem extends Omit<LinkProps, 'type'> {
   label?: string
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   disabled?: boolean
   content?: Omit<DropdownMenuContentProps, 'asChild' | 'forceMount'>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 93b4cb31..6699e6ec 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -4,7 +4,7 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits } from 'radix-vue
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/navigation-menu'
-import type { AvatarProps, BadgeProps, IconProps, LinkProps, SeparatorProps } from '#ui/types'
+import type { AvatarProps, BadgeProps, LinkProps, SeparatorProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
 
@@ -13,7 +13,7 @@ const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu
 export interface NavigationMenuItem extends LinkProps {
   label?: string
   value?: string
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   badge?: string | number | BadgeProps
   slot?: string
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index 4f332178..65349c96 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -4,18 +4,18 @@ import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/pagination'
-import type { ButtonProps, IconProps } from '#ui/types'
+import type { ButtonProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
 
 const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
 
 export interface PaginationProps extends Omit<PaginationRootProps, 'asChild'> {
-  firstIcon?: IconProps['name']
-  prevIcon?: IconProps['name']
-  nextIcon?: IconProps['name']
-  lastIcon?: IconProps['name']
-  ellipsisIcon?: IconProps['name']
+  firstIcon?: string
+  prevIcon?: string
+  nextIcon?: string
+  lastIcon?: string
+  ellipsisIcon?: string
   color?: ButtonProps['color']
   variant?: ButtonProps['variant']
   activeColor?: ButtonProps['color']
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 1ae56712..7d4a0f2d 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -4,7 +4,6 @@ import type { SwitchRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
-import type { IconProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
 
@@ -16,9 +15,9 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild' | 'checked'
   color?: SwitchVariants['color']
   size?: SwitchVariants['size']
   loading?: boolean
-  loadingIcon?: IconProps['name']
-  checkedIcon?: IconProps['name']
-  uncheckedIcon?: IconProps['name']
+  loadingIcon?: string
+  checkedIcon?: string
+  uncheckedIcon?: string
   label?: string
   description?: string
   defaultValue?: boolean
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 754e20e2..5c15ea83 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -4,7 +4,7 @@ import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
-import type { IconProps, AvatarProps } from '#ui/types'
+import type { AvatarProps } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
 
@@ -12,7 +12,7 @@ const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   slot?: string
   value?: string
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index a39b3e43..1c96a9e9 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -5,7 +5,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
-import type { AvatarProps, ButtonProps, IconProps, ToasterContext } from '#ui/types'
+import type { AvatarProps, ButtonProps, ToasterContext } from '#ui/types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
 
@@ -16,7 +16,7 @@ type ToastVariants = VariantProps<typeof toast>
 export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount'> {
   title?: string
   description?: string | VNode | (() => VNode)
-  icon?: IconProps['name']
+  icon?: string
   avatar?: AvatarProps
   color?: ToastVariants['color']
   actions?: ButtonProps[]
diff --git a/src/runtime/composables/useComponentIcons.ts b/src/runtime/composables/useComponentIcons.ts
index 6666b97e..fc35e616 100644
--- a/src/runtime/composables/useComponentIcons.ts
+++ b/src/runtime/composables/useComponentIcons.ts
@@ -1,15 +1,14 @@
 import { computed } from 'vue'
 import { useAppConfig } from '#imports'
-import type { IconProps } from '#ui/types'
 
 export interface UseComponentIconsProps {
-  icon?: IconProps['name']
+  icon?: string
   leading?: boolean
-  leadingIcon?: IconProps['name']
+  leadingIcon?: string
   trailing?: boolean
-  trailingIcon?: IconProps['name']
+  trailingIcon?: string
   loading?: boolean
-  loadingIcon?: IconProps['name']
+  loadingIcon?: string
 }
 
 export function useComponentIcons(props: UseComponentIconsProps) {