diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index f9852cd594..b7e6585456 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -259,7 +259,6 @@ declare module '@vue/runtime-core' {
     NcIconsRowHeightMedium: typeof import('~icons/nc-icons/row-height-medium')['default']
     NcIconsRowHeightShort: typeof import('~icons/nc-icons/row-height-short')['default']
     NcIconsRowHeightTall: typeof import('~icons/nc-icons/row-height-tall')['default']
-    'Ph:clockClockwiseThin': typeof import('~icons/ph/clock-clockwise-thin')['default']
     PhArrowClockwiseThin: typeof import('~icons/ph/arrow-clockwise-thin')['default']
     PhAtThin: typeof import('~icons/ph/at-thin')['default']
     PhBracketsAngleThin: typeof import('~icons/ph/brackets-angle-thin')['default']
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 13a6974e5d..0517af9602 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -29,10 +29,10 @@ import {
   useToggle,
   useUIPermission,
   watchEffect,
+  iconMap
 } from '#imports'
 import PhEyeThin from '~icons/ph/EyeThin'
 import PhTableThin from '~icons/ph/TableThin'
-import { iconMap } from '~/utils'
 
 const { isMobileMode } = useGlobal()
 
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 49b5d98074..4c19528ed1 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -2,8 +2,7 @@
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 import DataSources from './DataSources.vue'
 import Misc from './Misc.vue'
-import { iconMap } from '~/utils'
-import { DataSourcesSubTab, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
+import { DataSourcesSubTab,iconMap, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: boolean
diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue
index 800e012f49..65132b41dc 100644
--- a/packages/nc-gui/components/general/PreviewAs.vue
+++ b/packages/nc-gui/components/general/PreviewAs.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch } from '#imports'
-import { iconMap } from '~/utils'
+import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch,iconMap } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
-import MdiAccountEdit from '~icons/ph/pencil-circle-thin'
-import MdiCommentAccountOutline from '~icons/ph/chat-teardrop-text-thin'
+import PhPencilCircleThin from '~icons/ph/pencil-circle-thin'
+import PhChtTeardropTextThin from '~icons/ph/chat-teardrop-text-thin'
 import { ProjectRole } from '~/lib'
 
 const { float } = defineProps<{ float?: boolean }>()
@@ -24,9 +23,9 @@ const roleList = [
 const roleIcon = {
   owner: MdiAccountStar,
   creator: MdiAccountHardHat,
-  editor: MdiAccountEdit,
+  editor: PhPencilCircleThin,
   viewer: iconMap.eye,
-  commenter: MdiCommentAccountOutline,
+  commenter: PhChtTeardropTextThin,
 }
 
 const position = ref({
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index 245807894f..cb3a952a79 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -33,8 +33,8 @@ import {
   storeToRefs,
   toRef,
   useProject,
+  iconMap
 } from '#imports'
-import { iconMap } from '~/utils'
 
 const renderIcon = (column: ColumnType, abstractType: any) => {
   if (isPrimaryKey(column)) {
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
index 76e05555c3..1b97f431e7 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
@@ -2,8 +2,7 @@ import type { PropType } from '@vue/runtime-core'
 import type { ColumnType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
-import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef } from '#imports'
-import { iconMap } from '~/utils'
+import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef, iconMap} from '#imports'
 import CountIcon from '~icons/mdi/counter'
 
 const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 8a1aae4096..a502afee7a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -13,8 +13,8 @@ import {
   useSmartsheetStoreOrThrow,
   useViewFilters,
   watch,
+  iconMap
 } from '#imports'
-import { iconMap } from '~/utils'
 
 const isLocked = inject(IsLockedInj, ref(false))
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 0eb46ecfd5..7edc3abbe3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -15,8 +15,8 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
+  iconMap
 } from '#imports'
-import { iconMap } from '~/utils'
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
index f0c2087e73..4038400ea9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { iconMap } from '~/utils'
 import { LockType } from '~/lib'
-import { ActiveViewInj, inject } from '#imports'
+import { ActiveViewInj, inject, iconMap } from '#imports'
 
 const { type, hideTick } = defineProps<{ hideTick?: boolean; type: LockType }>()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 3a9e7927b3..bfb09a73af 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -8,10 +8,10 @@ import {
   onClickOutside,
   ref,
   useFieldQuery,
+  iconMap,
   useSmartsheetStoreOrThrow,
 } from '#imports'
 
-import { iconMap } from '~/utils'
 
 const reloadData = inject(ReloadViewDataHookInj)!
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 770fad7fea..ee9bb2f84d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -15,10 +15,9 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
-  useUIPermission,
+  useUIPermission,iconMap
 } from '#imports'
 import { LockType } from '~/lib'
-import { iconMap } from '~/utils'
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index c9cebcc63e..5c011d1a2d 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -15,11 +15,11 @@ provide(TabMetaInj, activeTab)
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
-      return iconMap['mdi-table-large']
+      return iconMap['table']
     case TabType.VIEW:
-      return iconMap['mdi-eye-circle-outline']
+      return iconMap['eye']
     case TabType.AUTH:
-      return iconMap['mdi-account-group']
+      return iconMap['users-icon']
   }
 }
 
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index ebc588a733..3fa162591a 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -79,24 +79,6 @@ import BTIcon from '~icons/mdi/table-arrow-left'
 import MMIcon from '~icons/mdi/table-network'
 
 export const iconMap = {
-  'mdi-check-bold': MdiCheckBold,
-  'mdi-crop-square': MdiCropSquare,
-  'mdi-check-circle-outline': MdiCheckCircleOutline,
-  'mdi-checkbox-blank-circle-outline': MdiCheckboxBlankCircleOutline,
-  'mdi-star': MdiStar,
-  'mdi-star-outline': MdiStarOutline,
-  'mdi-heart': MdiHeart,
-  'mdi-heart-outline': MdiHeartOutline,
-  'mdi-moon-full': MdiMoonFull,
-  'mdi-moon-new': MdiMoonNew,
-  'mdi-thumb-up': MdiThumbUp,
-  'mdi-thumb-up-outline': MdiThumbUpOutline,
-  'mdi-flag': MdiFlag,
-  'mdi-flag-outline': MdiFlagOutline,
-  'mdi-table-large': PhTableThin,
-  'mdi-eye-circle-outline': PhEyeThin,
-  'mdi-account-group': PhUsersThreeThin,
-
   'lock-icon': PhLockIcon,
   'account-icon': PhAccountIcon,
   'users-icon': PhUsersThreeThin,