diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index a9c817ac90..d916019a17 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -6,13 +6,13 @@
     :aria-label="ariaLabel"
     v-bind="buttonProps"
   >
-    <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     <slot>
       <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
         {{ label }}
       </span>
     </slot>
-    <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
   </component>
 </template>
 
@@ -21,7 +21,7 @@ import { ref, computed, defineComponent, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { NuxtLink } from '#components'
 import { useAppConfig } from '#imports'
@@ -33,7 +33,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     type: {
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index bf8aeb338c..fa2b979542 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -27,8 +27,8 @@
                 @click="item.click"
               >
                 <slot :name="item.slot || 'item'" :item="item">
-                  <Icon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
-                  <Avatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+                  <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                  <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
                   <span class="truncate">{{ item.label }}</span>
 
@@ -51,8 +51,8 @@ import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import { defineComponent, ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { classNames, omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { Avatar as AvatarType } from '../../types/avatar'
@@ -72,8 +72,8 @@ export default defineComponent({
     MenuButton,
     MenuItems,
     MenuItem,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     items: {
diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
index 73426f05a2..6cc226ba45 100644
--- a/src/runtime/components/elements/Icon.vue
+++ b/src/runtime/components/elements/Icon.vue
@@ -2,11 +2,13 @@
   <span :class="name" />
 </template>
 
-<script setup lang="ts">
-defineProps({
-  name: {
-    type: String,
-    required: true
+<script lang="ts">
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
   }
 })
 </script>
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index c3f2a7c017..e110c69947 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -19,10 +19,10 @@
     >
     <slot />
     <div v-if="isLeading && leadingIconName" :class="leadingIconClass">
-      <Icon :name="leadingIconName" :class="iconClass" />
+      <UIcon :name="leadingIconName" :class="iconClass" />
     </div>
     <div v-if="isTrailing && trailingIconName" :class="trailingIconClass">
-      <Icon :name="trailingIconName" :class="iconClass" />
+      <UIcon :name="trailingIconName" :class="iconClass" />
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@
 import { ref, computed, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -42,7 +42,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     modelValue: {
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 094fabaa19..e6a60a65d6 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -37,11 +37,11 @@
     </select>
 
     <div v-if="icon" :class="leadingIconClass">
-      <Icon :name="icon" :class="iconClass" />
+      <UIcon :name="icon" :class="iconClass" />
     </div>
 
     <span :class="trailingIconClass">
-      <Icon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
+      <UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
     </span>
   </div>
 </template>
@@ -51,7 +51,7 @@ import { computed, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { get } from 'lodash-es'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -62,7 +62,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon
+    UIcon
   },
   props: {
     modelValue: {
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 0f316c3911..a5895cb209 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -24,7 +24,7 @@
       <slot :open="open" :disabled="disabled">
         <button :class="selectMenuClass" :disabled="disabled" type="button">
           <span v-if="icon" :class="leadingIconClass">
-            <Icon :name="icon" :class="iconClass" />
+            <UIcon :name="icon" :class="iconClass" />
           </span>
 
           <slot name="label">
@@ -33,7 +33,7 @@
           </slot>
 
           <span :class="trailingIconClass">
-            <Icon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
+            <UIcon name="i-heroicons-chevron-down-20-solid" :class="iconClass" aria-hidden="true" />
           </span>
         </button>
       </slot>
@@ -65,8 +65,8 @@
             <li :class="resolveOptionClass({ active, disabled: optionDisabled })">
               <div :class="ui.option.container">
                 <slot name="option" :option="option" :active="active" :selected="selected">
-                  <Icon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
-                  <Avatar
+                  <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
+                  <UAvatar
                     v-else-if="option.avatar"
                     v-bind="{ size: ui.option.avatar.size, ...option.avatar }"
                     :class="ui.option.avatar.base"
@@ -79,7 +79,7 @@
               </div>
 
               <span v-if="selected" :class="ui.option.selected.wrapper">
-                <Icon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" />
+                <UIcon :name="selectedIcon" :class="ui.option.selected.icon" aria-hidden="true" />
               </span>
             </li>
           </component>
@@ -109,8 +109,8 @@ import { ref, computed, watch, defineComponent } from 'vue'
 import type { PropType, ComponentPublicInstance } from 'vue'
 import { defu } from 'defu'
 import { Combobox, ComboboxButton, ComboboxOptions, ComboboxOption, ComboboxInput, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
@@ -132,8 +132,8 @@ export default defineComponent({
     ListboxButton,
     ListboxOptions,
     ListboxOption,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     modelValue: {
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 272ace8085..532477bcf8 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -5,10 +5,10 @@
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
       <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <Icon :name="iconOn" :class="ui.icon.on" />
+        <UIcon :name="iconOn" :class="ui.icon.on" />
       </span>
       <span v-if="iconOff" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <Icon :name="iconOff" :class="ui.icon.off" />
+        <UIcon :name="iconOff" :class="ui.icon.off" />
       </span>
     </span>
   </Switch>
@@ -19,7 +19,7 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
 import { Switch } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
+import UIcon from '../elements/Icon.vue'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -31,7 +31,7 @@ export default defineComponent({
   components: {
     // eslint-disable-next-line vue/no-reserved-component-names
     Switch,
-    Icon
+    UIcon
   },
   props: {
     modelValue: {
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index fbef3f92e6..59dc63e223 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -9,7 +9,7 @@
   >
     <div :class="ui.wrapper">
       <div v-if="searchable" :class="ui.input.wrapper">
-        <Icon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
+        <UIcon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
@@ -19,7 +19,7 @@
           @change="query = $event.target.value"
         />
 
-        <Button
+        <UButton
           v-if="close"
           v-bind="close"
           :class="ui.input.close"
@@ -53,7 +53,7 @@
       </ComboboxOptions>
 
       <div v-else-if="empty" :class="ui.empty.wrapper">
-        <Icon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
+        <UIcon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
         <p :class="query ? ui.empty.queryLabel : ui.empty.label">
           {{ query ? empty.queryLabel : empty.label }}
         </p>
@@ -72,8 +72,8 @@ import { groupBy, map } from 'lodash-es'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
-import Icon from '../elements/Icon.vue'
-import Button from '../elements/Button.vue'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
 import type { Button as ButtonType } from '../../types/button'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import { useAppConfig } from '#imports'
@@ -88,9 +88,8 @@ export default defineComponent({
     Combobox,
     ComboboxInput,
     ComboboxOptions,
-    Icon,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Button,
+    UIcon,
+    UButton,
     CommandPaletteGroup
   },
   props: {
@@ -127,7 +126,7 @@ export default defineComponent({
       default: () => appConfig.ui.commandPalette.default.selectedIcon
     },
     close: {
-      type: Object as PropType<Partial<ButtonType>>,
+      type: Object as PropType<Partial<UButtonType>>,
       default: () => appConfig.ui.commandPalette.default.close
     },
     empty: {
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index 32a23a62d2..826328b5b5 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -16,8 +16,8 @@
         <div :class="[ui.group.command.base, active ? ui.group.command.active : ui.group.command.inactive, command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div :class="ui.group.command.container">
             <slot :name="`${group.key}-icon`" :group="group" :command="command">
-              <Icon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
-              <Avatar
+              <UIcon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
+              <UAvatar
                 v-else-if="command.avatar"
                 v-bind="{ size: ui.group.command.avatar.size, ...command.avatar }"
                 :class="ui.group.command.avatar.base"
@@ -39,7 +39,7 @@
             </div>
           </div>
 
-          <Icon v-if="selected" :name="selectedIcon" :class="ui.group.command.selected.icon" aria-hidden="true" />
+          <UIcon v-if="selected" :name="selectedIcon" :class="ui.group.command.selected.icon" aria-hidden="true" />
           <slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
             <span v-if="group.active" :class="ui.group.active">{{ group.active }}</span>
           </slot>
@@ -59,8 +59,8 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { ComboboxOption } from '@headlessui/vue'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
 // TODO: Remove
 // @ts-expect-error
@@ -71,8 +71,8 @@ import appConfig from '#build/app.config'
 export default defineComponent({
   components: {
     ComboboxOption,
-    Icon,
-    Avatar
+    UIcon,
+    UAvatar
   },
   props: {
     group: {
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 6008ccb5d5..60f8b9eaed 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :class="ui.wrapper">
-    <LinkCustom
+    <ULinkCustom
       v-for="(link, index) of links"
       v-slot="{ isActive }"
       :key="index"
@@ -12,14 +12,14 @@
       @keyup.enter="$event.target.blur()"
     >
       <slot name="avatar" :link="link">
-        <Avatar
+        <UAvatar
           v-if="link.avatar"
           v-bind="{ size: ui.avatar.size, ...link.avatar }"
           :class="[ui.avatar.base]"
         />
       </slot>
       <slot name="icon" :link="link" :is-active="isActive">
-        <Icon
+        <UIcon
           v-if="link.icon"
           :name="link.icon"
           :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
@@ -33,7 +33,7 @@
           {{ link.badge }}
         </span>
       </slot>
-    </LinkCustom>
+    </ULinkCustom>
   </nav>
 </template>
 
@@ -42,9 +42,9 @@ import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
-import LinkCustom from '../elements/LinkCustom.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import ULinkCustom from '../elements/LinkCustom.vue'
 import type { Avatar as AvatarType } from '../../types/avatar'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -55,9 +55,9 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon,
-    Avatar,
-    LinkCustom
+    UIcon,
+    UAvatar,
+    ULinkCustom
   },
   props: {
     links: {
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index ae0b709a44..86bcaa6707 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -8,8 +8,8 @@
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div class="p-4">
           <div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
-            <Icon v-if="icon" :name="icon" :class="ui.icon" />
-            <Avatar v-if="avatar" v-bind="avatar" :class="ui.avatar" />
+            <UIcon v-if="icon" :name="icon" :class="ui.icon" />
+            <UAvatar v-if="avatar" v-bind="avatar" :class="ui.avatar" />
 
             <div class="w-0 flex-1">
               <p :class="ui.title">
@@ -20,15 +20,15 @@
               </p>
 
               <div v-if="description && actions.length" class="mt-3 flex items-center gap-2">
-                <Button v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...action }" @click.stop="onAction(action)" />
+                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...action }" @click.stop="onAction(action)" />
               </div>
             </div>
             <div class="flex-shrink-0 flex items-center gap-3">
               <div v-if="!description && actions.length" class="flex items-center gap-2">
-                <Button v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...action }" @click.stop="onAction(action)" />
+                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.action, ...action }" @click.stop="onAction(action)" />
               </div>
 
-              <Button v-if="close" v-bind="{ ...ui.default.close, ...close }" @click.stop="onClose" />
+              <UButton v-if="close" v-bind="{ ...ui.default.close, ...close }" @click.stop="onClose" />
             </div>
           </div>
         </div>
@@ -42,9 +42,9 @@
 import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
-import Icon from '../elements/Icon.vue'
-import Avatar from '../elements/Avatar.vue'
-import Button from '../elements/Button.vue'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import UButton from '../elements/Button.vue'
 import { useTimer } from '../../composables/useTimer'
 import type { ToastNotificationAction } from '../../types'
 import type { Avatar as AvatarType } from '../../types/avatar'
@@ -58,10 +58,9 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Icon,
-    Avatar,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Button
+    UIcon,
+    UAvatar,
+    UButton
   },
   props: {
     id: {
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index ec0d811ce1..44ef580d70 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
-        <Notification
+        <UNotification
           v-bind="notification"
           :class="notification.click && 'cursor-pointer'"
           @click="notification.click && notification.click(notification)"
@@ -19,7 +19,7 @@ import type { PropType } from 'vue'
 import { defu } from 'defu'
 import type { ToastNotification } from '../../types'
 import { useToast } from '../../composables/useToast'
-import Notification from './Notification.vue'
+import UNotification from './Notification.vue'
 import { useState, useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -29,7 +29,7 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   components: {
-    Notification
+    UNotification
   },
   props: {
     ui: {