diff --git a/src/module.ts b/src/module.ts
index c50d4615..e36718cf 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -86,7 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Modules
 
-    await installModule('@nuxt/icon', { componentName: 'UIcon' })
+    await installModule('@nuxt/icon')
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installTailwind(options, nuxt, resolve)
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 6be9c4a7..a46729eb 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -115,7 +115,10 @@ import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
-import { UIcon, UButton, UProgress, UCheckbox } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
+import UProgress from '../elements/Progress.vue'
+import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, get } from '../../utils'
 import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types'
diff --git a/src/runtime/components/elements/Accordion.vue b/src/runtime/components/elements/Accordion.vue
index 159bf2ef..a378b422 100644
--- a/src/runtime/components/elements/Accordion.vue
+++ b/src/runtime/components/elements/Accordion.vue
@@ -69,7 +69,8 @@
 import { ref, computed, toRef, defineComponent, watch } from 'vue'
 import type { PropType } from 'vue'
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from '@headlessui/vue'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
 import type { AccordionItem, Strategy } from '../../types'
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index e1c4e04c..c1b6e850 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -43,7 +43,9 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types'
 import { mergeConfig } from '../../utils'
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 466e2767..b6416e25 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -24,7 +24,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 94b3b8c5..cdcdf2dd 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -20,7 +20,8 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index 0fc2a8f6..42742c10 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -61,7 +61,9 @@ import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { mergeConfig, getNuxtLinkProps } from '../../utils'
diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
new file mode 100644
index 00000000..0708166a
--- /dev/null
+++ b/src/runtime/components/elements/Icon.vue
@@ -0,0 +1,32 @@
+<template>
+  <Icon v-bind="$props" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String as PropType<'svg' | 'css'>,
+      required: false,
+      default: null
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    customize: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  }
+})
+</script>
diff --git a/src/runtime/components/elements/Meter.vue b/src/runtime/components/elements/Meter.vue
index b80555af..ab6d3c43 100644
--- a/src/runtime/components/elements/Meter.vue
+++ b/src/runtime/components/elements/Meter.vue
@@ -31,7 +31,7 @@
 import { computed, defineComponent, toRef } from 'vue'
 import type { SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Strategy, MeterColor, MeterSize } from '../../types'
diff --git a/src/runtime/components/elements/MeterGroup.ts b/src/runtime/components/elements/MeterGroup.ts
index b5994538..206575c6 100644
--- a/src/runtime/components/elements/MeterGroup.ts
+++ b/src/runtime/components/elements/MeterGroup.ts
@@ -1,7 +1,7 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import Meter from './Meter.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index be1e7bad..f13abd1d 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -35,7 +35,7 @@
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
index bfa37d14..773706a9 100644
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -104,7 +104,8 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index d7e17fcd..14d8061a 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -56,7 +56,7 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index e49ea0af..8da44724 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -140,7 +140,8 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 4e9a07bc..917cd33a 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -34,7 +34,7 @@ import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon } from '#components'
+import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
diff --git a/src/runtime/components/layout/Divider.vue b/src/runtime/components/layout/Divider.vue
index dda7cc56..bc950ca8 100644
--- a/src/runtime/components/layout/Divider.vue
+++ b/src/runtime/components/layout/Divider.vue
@@ -22,7 +22,8 @@
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
 import type { Avatar, DividerSize, Strategy } from '../../types'
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 790b3e4b..2c83a5d3 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -37,7 +37,8 @@
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { BreadcrumbLink, Strategy } from '../../types'
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 3e186d34..86d83b03 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -70,7 +70,8 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
-import { UIcon, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 6f08bde2..2810f4af 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -73,7 +73,9 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
-import { UIcon, UAvatar, UKbd } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import type { Command, Group } from '../../types'
 import { commandPalette } from '#ui/ui.config'
 import { useId } from '#imports'
diff --git a/src/runtime/components/navigation/HorizontalNavigation.vue b/src/runtime/components/navigation/HorizontalNavigation.vue
index b75c0097..a28c2384 100644
--- a/src/runtime/components/navigation/HorizontalNavigation.vue
+++ b/src/runtime/components/navigation/HorizontalNavigation.vue
@@ -55,7 +55,10 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { HorizontalNavigationLink, Strategy } from '../../types'
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index e5d6bdc2..f1bec11d 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -56,7 +56,11 @@
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UBadge, ULink, UDivider } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UBadge from '../elements/Badge.vue'
+import ULink from '../elements/Link.vue'
+import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getULinkProps } from '../../utils'
 import type { VerticalNavigationLink, Strategy } from '../../types'
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index afa98604..35ebbe4d 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -46,7 +46,9 @@
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
-import { UIcon, UAvatar, UButton } from '#components'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
 import { mergeConfig } from '../../utils'