diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index d5bb653b2..63ffbb08b 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from '../icon/Icon.vue';
 
 const props = defineProps({
   src: {
@@ -41,9 +41,8 @@ const handleUploadAvatar = () => {
       class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleUploadAvatar"
     >
-      <FluentIcon
-        icon="upload-lucide"
-        icon-lib="lucide"
+      <Icon
+        icon="i-lucide-upload"
         :size="iconSize"
         class="text-white dark:text-white"
       />
diff --git a/app/javascript/dashboard/components-next/icon/Icon.vue b/app/javascript/dashboard/components-next/icon/Icon.vue
new file mode 100644
index 000000000..1dc39a709
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/Icon.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { h, isVNode } from 'vue';
+const props = defineProps({
+  icon: { type: [String, Object, Function], required: true },
+});
+const renderIcon = () => {
+  if (!props.icon) return null;
+  if (typeof props.icon === 'function' || isVNode(props.icon)) {
+    return props.icon;
+  }
+  return h('span', { class: props.icon });
+};
+</script>
+
+<template>
+  <component :is="renderIcon" />
+</template>