diff --git a/packages/nc-gui/components/general/BaseIconColorPicker.vue b/packages/nc-gui/components/general/BaseIconColorPicker.vue
index 0951d68510..d88ca36ebb 100644
--- a/packages/nc-gui/components/general/BaseIconColorPicker.vue
+++ b/packages/nc-gui/components/general/BaseIconColorPicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
 
-import { NcProjectType } from '#imports'
+import { NcProjectType, baseIconColors } from '#imports'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/nc-gui/components/general/ProjectIcon.vue b/packages/nc-gui/components/general/ProjectIcon.vue
index 857bbd4fbe..e926f38c5c 100644
--- a/packages/nc-gui/components/general/ProjectIcon.vue
+++ b/packages/nc-gui/components/general/ProjectIcon.vue
@@ -1,24 +1,28 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-const { hoverable, color } = defineProps<{
-  type?: string
-  hoverable?: boolean
-  color?: string
-}>()
+import { baseIconColors } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    type?: string
+    hoverable?: boolean
+    color?: string
+  }>(),
+  {
+    color: baseIconColors[0],
+  },
+)
+const { color } = toRefs(props)
 
 const iconColor = computed(() => {
-  return color
+  return color.value && tinycolor(color.value).isValid()
     ? {
-        tint: tinycolor(color || '#36BFFF')
-          .lighten(10)
-          .toHexString(),
-        shade: tinycolor(color || '#36BFFF')
-          .darken(40)
-          .toHexString(),
+        tint: baseIconColors.includes(color.value) ? color.value : tinycolor(color.value).lighten(10).toHexString(),
+        shade: tinycolor(color.value).darken(40).toHexString(),
       }
     : {
-        tint: '#36BFFF',
-        shade: '#142966',
+        tint: baseIconColors[0],
+        shade: tinycolor(baseIconColors[0]).darken(40).toHexString(),
       }
 })
 </script>