diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index fe5bfcb37d..a5e2db2de0 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -387,11 +387,11 @@ defineExpose({
                 >
                   <div class="cmdk-action-content w-full">
                     <template v-if="title === 'Bases' || act.icon === 'project'">
-                      <LazyGeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
+                      <GeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
                         <template #default>
                           <GeneralProjectIcon type="database" />
                         </template>
-                      </LazyGeneralBaseIconColorPicker>
+                      </GeneralBaseIconColorPicker>
                     </template>
                     <template v-else>
                       <component
diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 305277439e..3ca95f4f85 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,7 +52,7 @@ const onDelete = async () => {
   <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.project')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="base" class="flex flex-row items-center py-2 px-2.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <LazyGeneralBaseIconColorPicker
+        <GeneralBaseIconColorPicker
           :key="parseProp(base.meta).iconHue"
           :hue="parseProp(base.meta).iconHue"
           size="small"
@@ -63,7 +63,7 @@ const onDelete = async () => {
           <template #default>
             <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
           </template>
-        </LazyGeneralBaseIconColorPicker>
+        </GeneralBaseIconColorPicker>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 06933990b7..0a3bc6839d 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,7 +154,7 @@ watch(showShareModal, (val) => {
       </div>
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <LazyGeneralBaseIconColorPicker
+          <GeneralBaseIconColorPicker
             :key="parseProp(base.meta).iconHue"
             :hue="parseProp(base.meta).iconHue"
             size="small"
@@ -165,7 +165,7 @@ watch(showShareModal, (val) => {
             <template #default>
               <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
             </template>
-          </LazyGeneralBaseIconColorPicker>
+          </GeneralBaseIconColorPicker>
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 0dabfe1a66..e51a3c7c8a 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,7 +82,7 @@ watch(
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
-          <LazyGeneralBaseIconColorPicker
+          <GeneralBaseIconColorPicker
             :key="parseProp(openedProject?.meta).iconHue"
             :hue="parseProp(openedProject?.meta).iconHue"
             size="small"
@@ -92,7 +92,7 @@ watch(
             <template #default>
               <GeneralProjectIcon :type="openedProject?.type" />
             </template>
-          </LazyGeneralBaseIconColorPicker>
+          </GeneralBaseIconColorPicker>
           <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
diff --git a/packages/nc-gui/components/workspace/ProjectList.vue b/packages/nc-gui/components/workspace/ProjectList.vue
index 543d7910b4..8c510becaa 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -251,7 +251,7 @@ const setColor = async (hue: number, base: BaseType) => {
         <template v-if="column.dataIndex === 'title'">
           <div class="flex items-center nc-base-title gap-2.5 max-w-full -ml-1.5">
             <div class="flex items-center gap-2 text-center">
-              <LazyGeneralBaseIconColorPicker
+              <GeneralBaseIconColorPicker
                 :key="parseProp(record.meta).iconHue"
                 :hue="parseProp(record.meta).iconHue"
                 size="small"
@@ -261,7 +261,7 @@ const setColor = async (hue: number, base: BaseType) => {
                 <template #default>
                   <GeneralProjectIcon :type="record.type" />
                 </template>
-              </LazyGeneralBaseIconColorPicker>
+              </GeneralBaseIconColorPicker>
               <!-- todo: replace with switch -->
             </div>