diff --git a/packages/nc-gui/components/dlg/ProjectDelete.vue b/packages/nc-gui/components/dlg/ProjectDelete.vue
index 2060e11685..453b936316 100644
--- a/packages/nc-gui/components/dlg/ProjectDelete.vue
+++ b/packages/nc-gui/components/dlg/ProjectDelete.vue
@@ -52,7 +52,18 @@ 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">
-        <GeneralProjectIcon :type="base.type" class="nc-view-icon px-1.5 w-10" />
+        <LazyGeneralBaseColorPicker
+          :key="parseProp(base.meta).iconHue"
+          :hue="parseProp(base.meta).iconHue"
+          size="small"
+          class="!w-auto !h-auto"
+          iconClass="nc-view-icon w-6 h-6"
+          readonly
+        >
+          <template #default>
+            <GeneralProjectIcon :type="base.type" class="nc-view-icon w-6 h-6" />
+          </template>
+        </LazyGeneralBaseColorPicker>
         <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 6a643517fc..c8fb3b437a 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,18 @@ 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">
-          <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
+          <LazyGeneralBaseColorPicker
+            :key="parseProp(base.meta).iconHue"
+            :hue="parseProp(base.meta).iconHue"
+            size="small"
+            class="!w-auto !h-auto"
+            iconClass="nc-view-icon group-hover"
+            readonly
+          >
+            <template #default>
+              <GeneralProjectIcon :type="base.type" class="nc-view-icon group-hover" />
+            </template>
+          </LazyGeneralBaseColorPicker>
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div
diff --git a/packages/nc-gui/components/general/BaseColorPicker.vue b/packages/nc-gui/components/general/BaseColorPicker.vue
index f6b2e3bfff..629ae36771 100644
--- a/packages/nc-gui/components/general/BaseColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseColorPicker.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   size?: 'small' | 'medium' | 'large' | 'xlarge'
   readonly?: boolean
   disableClearing?: boolean
+  iconClass?: string
 }>()
 
 const emit = defineEmits(['colorSelected'])
@@ -96,7 +97,7 @@ watch(
         <slot name="default" />
       </template>
       <template v-else>
-        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="16" height="16" viewBox="0 0 1073 1073" fill="none" xmlns="http://www.w3.org/2000/svg" :class="iconClass">
           <mask
             id="mask0_1749_80944"
             style="mask-type: luminance"
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 5ecfe7182a..10af414156 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -82,7 +82,17 @@ 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">
-          <GeneralProjectIcon :type="openedProject?.type" />
+          <LazyGeneralBaseColorPicker
+            :key="parseProp(openedProject?.meta).iconHue"
+            :hue="parseProp(openedProject?.meta).iconHue"
+            size="small"
+            class="!w-auto !h-auto"
+            readonly
+          >
+            <template #default>
+              <GeneralProjectIcon :type="openedProject?.type" />
+            </template>
+          </LazyGeneralBaseColorPicker>
           <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 51fc654993..9563d2bbe0 100644
--- a/packages/nc-gui/components/workspace/ProjectList.vue
+++ b/packages/nc-gui/components/workspace/ProjectList.vue
@@ -17,6 +17,7 @@ import {
   useNuxtApp,
   useRoles,
   useWorkspace,
+  parseProp,
 } from '#imports'
 
 const workspaceStore = useWorkspace()
@@ -181,16 +182,16 @@ function onProjectTitleClick(index: number) {
   }
 }
 
-const setIcon = async (icon: string, base: BaseType) => {
+const setColor = async (hue: number, base: BaseType) => {
   try {
     const meta = {
-      ...((base.meta as object) || {}),
-      icon,
+      ...parseProp(base.meta),
+      iconHue: hue,
     }
 
     basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) })
 
-    $e('a:base:icon:navdraw', { icon })
+    $e('a:base:icon:color:navdraw', { iconHue: hue })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -250,15 +251,17 @@ const setIcon = async (icon: string, 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">
-              <LazyGeneralEmojiPicker
-                :key="record.id"
-                :emoji="record.meta?.icon"
+              <LazyGeneralBaseColorPicker
+                :key="parseProp(record.meta).iconHue"
+                :hue="parseProp(record.meta).iconHue"
                 size="small"
                 readonly
-                @emoji-selected="setIcon($event, record)"
+                @color-selected="setColor($event, record)"
               >
-                <GeneralProjectIcon :type="record.type" />
-              </LazyGeneralEmojiPicker>
+                <template #default>
+                  <GeneralProjectIcon :type="record.type" />
+                </template>
+              </LazyGeneralBaseColorPicker>
               <!-- todo: replace with switch -->
             </div>