refactor: move @/ui/display/icon to twenty-ui (#4820)

Split from https://github.com/twentyhq/twenty/pull/4518 Part of https://github.com/twentyhq/twenty/issues/4766
2025-01-09 02:11:55 +03:00 · 2024-04-12 15:30:48 +02:00 · 2024-04-12 15:30:48 +02:00 · 9f83cc1426
commit 9f83cc1426
parent 280229bad6
142 changed files with 289 additions and 289 deletions
--- a/.github/workflows/ci-docs.yaml
+++ b/.github/workflows/ci-docs.yaml
@ -6,10 +6,12 @@ on:
    paths:
      - 'package.json'
      - 'packages/twenty-docs/**'
+      - 'packages/twenty-ui/**'
  pull_request:
    paths:
      - 'package.json'
      - 'packages/twenty-docs/**'
+      - 'packages/twenty-ui/**'
 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
--- a/.github/workflows/ci-front.yaml
+++ b/.github/workflows/ci-front.yaml
@ -6,10 +6,12 @@ on:
    paths:
      - 'package.json'
      - 'packages/twenty-front/**'
+      - 'packages/twenty-ui/**'
  pull_request:
    paths:
      - 'package.json'
      - 'packages/twenty-front/**'
+      - 'packages/twenty-ui/**'
 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
--- a/nx.json
+++ b/nx.json
@ -21,6 +21,7 @@
    },
    "storybook:build": {
      "cache": true,
+      "dependsOn": ["^build"],
      "inputs": [
        "default",
        "^default",
--- a/packages/twenty-docker/twenty-docs/Dockerfile
+++ b/packages/twenty-docker/twenty-docs/Dockerfile
@ -10,6 +10,7 @@ COPY ./.yarnrc.yml .
 COPY ./.yarn/releases /app/.yarn/releases
 COPY ./packages/twenty-docs/package.json /app/packages/twenty-docs/package.json
 COPY ./packages/twenty-emails /app/packages/twenty-emails
+COPY ./packages/twenty-ui /app/packages/twenty-ui
 RUN yarn

 COPY ./packages/twenty-docs /app/packages/twenty-docs
--- a/packages/twenty-docs/docs/ui-components/display/chip.mdx
+++ b/packages/twenty-docs/docs/ui-components/display/chip.mdx
@ -176,7 +176,7 @@ A Chip-like element to display information about an entity.
  <TabItem value="usage" label="Usage" default>

 <SandpackEditor
-  availableComponentPaths={['@/ui/display/chip/components/EntityChip', '@/ui/display/icon/types/IconComponent']}
+  availableComponentPaths={['@/ui/display/chip/components/EntityChip', 'twenty-ui']}
  componentCode={entityChipCode} 
 />
  </TabItem >
--- a/packages/twenty-docs/docs/ui-components/display/icons.mdx
+++ b/packages/twenty-docs/docs/ui-components/display/icons.mdx
@ -32,7 +32,7 @@ yarn add @tabler/icons-react
 You can import each icon as a component. Here's an example:

 <SandpackEditor
-  availableComponentPaths={['@/ui/display/icon/components/IconAddressBook']}
+  availableComponentPaths={['twenty-ui']}
  componentCode={tablerIconExampleCode} 
 />

@ -93,7 +93,7 @@ Displays an address book icon.
 <TabItem value="usage" label="Usage" default>

 <SandpackEditor
-  availableComponentPaths={['@/ui/display/icon/components/IconAddressBook']}
+  availableComponentPaths={['twenty-ui']}
  componentCode={iconAddressBookCode} 
 />

--- a/packages/twenty-docs/docs/ui-components/input/select.mdx
+++ b/packages/twenty-docs/docs/ui-components/input/select.mdx
@ -16,7 +16,7 @@ Allows users to pick a value from a list of predefined options.
 <TabItem value="usage" label="Usage" default>

 <SandpackEditor
-  availableComponentPaths={['@/ui/input/components/Select', '@/ui/display/icon/types/IconComponent']}
+  availableComponentPaths={['@/ui/input/components/Select', 'twenty-ui']}
  componentCode={selectCode} 
 />

--- a/packages/twenty-docs/src/ui/display/entityChipCode.js
+++ b/packages/twenty-docs/src/ui/display/entityChipCode.js
@ -1,6 +1,7 @@
-import { BrowserRouter as Router } from "react-router-dom";
-import { EntityChip } from "@/ui/display/chip/components/EntityChip";
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconTwentyStar } from 'twenty-ui';
+
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';

 export const MyComponent = () => {
  return (
@ -12,7 +13,7 @@ export const MyComponent = () => {
        pictureUrl=""
        avatarType="rounded"
        variant="regular"
-        LeftIcon={IconComponent}
+        LeftIcon={IconTwentyStar}
      />
    </Router>
  );
--- a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
+++ b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
@ -1,4 +1,4 @@
-import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook";
+import { IconAddressBook } from 'twenty-ui';

 export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
--- a/packages/twenty-docs/src/ui/input/components/selectCode.js
+++ b/packages/twenty-docs/src/ui/input/components/selectCode.js
@ -1,6 +1,7 @@
-import { RecoilRoot } from "recoil";
-import { Select } from "@/ui/input/components/Select";
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui';
+
+import { Select } from '@/ui/input/components/Select';

 export const MyComponent = () => {
  const handleSelectChange = (selectedValue) => {
@ -16,8 +17,8 @@ export const MyComponent = () => {
        label="Select an option"
        onChange={handleSelectChange}
        options={[
-          { value: "option1", label: "Option A", Icon: IconComponent },
-          { value: "option2", label: "Option B", Icon: IconComponent },
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
        ]}
        value="option1"
      />
--- a/packages/twenty-front/.storybook/preview.tsx
+++ b/packages/twenty-front/.storybook/preview.tsx
@ -2,9 +2,7 @@ import { ThemeProvider } from '@emotion/react';
 import { Preview } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { useDarkMode } from 'storybook-dark-mode';
-
-import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
-import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
+import { THEME_DARK, THEME_LIGHT } from 'twenty-ui';

 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
--- a/packages/twenty-front/jest.config.ts
+++ b/packages/twenty-front/jest.config.ts
@ -1,8 +1,5 @@
-/* eslint-disable @nx/enforce-module-boundaries,import/no-relative-packages */
 import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';

-import { compilerOptions as twentyUiCompilerOptions } from '../twenty-ui/tsconfig.json';
-
 import { compilerOptions } from './tsconfig.json';

 const jestConfig: JestConfigWithTsJest = {
@ -17,12 +14,10 @@ const jestConfig: JestConfigWithTsJest = {
    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
  },
  moduleNameMapper: {
-    ...pathsToModuleNameMapper(compilerOptions.paths),
-    // Include internal library aliases, so there is no need to build the library before tests.
-    ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths),
    '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
      '<rootDir>/__mocks__/imageMock.js',
    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
+    ...pathsToModuleNameMapper(compilerOptions.paths),
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@ -5,30 +5,31 @@
  "type": "module",
  "scripts": {
    "nx": "NX_DEFAULT_PROJECT=twenty-front node ../../node_modules/nx/bin/nx.js",
-    "start": "vite --host",
+    "start": "npx vite --host",
    "start:clean": "yarn start --force",
-    "build": "tsc && vite build && yarn build:inject-runtime-env",
+    "build": "yarn tsc && npx vite build && yarn build:inject-runtime-env",
    "build:inject-runtime-env": "sh ./scripts/inject-runtime-env.sh",
-    "tsc": "tsc --project tsconfig.app.json --watch",
-    "tsc:ci": "tsc",
-    "tsc:spec": "tsc --project tsconfig.spec.json",
+    "tsc": "npx tsc --project tsconfig.app.json",
+    "tsc:ci": "yarn tsc --project tsconfig.json",
+    "tsc:watch": "yarn tsc --watch",
+    "tsc:spec": "yarn tsc --project tsconfig.spec.json",
    "preview": "vite preview",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
+    "lint": "npx eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
    "lint:ci": "yarn lint --config .eslintrc-ci.cjs",
    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "test": "jest",
+    "test": "npx jest",
    "test-watch": "jest --watch",
    "tsup": "tsup",
    "coverage": "jest --coverage",
    "storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
-    "storybook:dev": "storybook dev -p 6006 --no-open",
+    "storybook:dev": "npx storybook dev -p 6006 --no-open",
    "storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
    "storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
-    "storybook:build": "storybook build",
-    "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
-    "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
-    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
+    "storybook:build": "npx storybook build",
+    "storybook:modules:build": "STORYBOOK_SCOPE=modules npx nx storybook:build",
+    "storybook:pages:build": "STORYBOOK_SCOPE=pages npx nx storybook:build",
+    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs npx nx storybook:build",
    "storybook:test": "test-storybook",
    "storybook:test-slow": "test-storybook --maxWorkers=3",
    "storybook:test-single-worker": "test-storybook --maxWorkers=1",
--- a/packages/twenty-front/src/index.tsx
+++ b/packages/twenty-front/src/index.tsx
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
+import { IconsProvider } from 'twenty-ui';

 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
@ -15,7 +16,6 @@ import { PromiseRejectionEffect } from '@/error-handler/components/PromiseReject
 import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
-import { IconsProvider } from '@/ui/display/icon/components/IconsProvider';
 import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
 import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
 import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
--- a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
+++ b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
@ -1,5 +1,6 @@
 import { getDefaultReactSlashMenuItems } from '@blocknote/react';
 import {
+  IconComponent,
  IconFile,
  IconH1,
  IconH2,
@ -11,7 +12,6 @@ import {
  IconTable,
 } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';

 import { blockSchema } from './schema';
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
+  IconComponent,
  IconFile,
  IconFileText,
  IconFileZip,
@ -12,7 +13,6 @@ import {
 } from 'twenty-ui';

 import { AttachmentType } from '@/activities/files/types/Attachment';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';

 const StyledIconContainer = styled.div<{ background: string }>`
  align-items: center;
--- a/packages/twenty-front/src/modules/auth/hooks/test/useAuth.test.tsx
+++ b/packages/twenty-front/src/modules/auth/hooks/test/useAuth.test.tsx
@ -4,6 +4,7 @@ import { MockedProvider } from '@apollo/client/testing';
 import { expect } from '@storybook/test';
 import { act, renderHook } from '@testing-library/react';
 import { RecoilRoot, useRecoilValue } from 'recoil';
+import { iconsState } from 'twenty-ui';

 import { useAuth } from '@/auth/hooks/useAuth';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
@ -12,7 +13,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { supportChatState } from '@/client-config/states/supportChatState';
 import { telemetryState } from '@/client-config/states/telemetryState';
-import { iconsState } from '@/ui/display/icon/states/iconsState';

 import { email, mocks, password, results, token } from '../__mocks__/useAuth';

--- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@ -7,6 +7,7 @@ import {
  useRecoilState,
  useSetRecoilState,
 } from 'recoil';
+import { iconsState } from 'twenty-ui';

 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -20,7 +21,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { supportChatState } from '@/client-config/states/supportChatState';
 import { telemetryState } from '@/client-config/states/telemetryState';
-import { iconsState } from '@/ui/display/icon/states/iconsState';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import {
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@ -4,13 +4,13 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
+import { IconGoogle } from 'twenty-ui';

 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword.ts';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
 import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle.ts';
 import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts';
 import { authProvidersState } from '@/client-config/states/authProvidersState.ts';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
@ -1,8 +1,7 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight } from 'twenty-ui';
+import { IconArrowUpRight, IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';

--- a/packages/twenty-front/src/modules/command-menu/types/Command.ts
+++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts
@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export enum CommandType {
  Navigate = 'Navigate',
--- a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
@ -1,5 +1,7 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { ThemeProvider } from '@emotion/react';
+import { THEME_LIGHT } from 'twenty-ui';

 import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';

@ -9,11 +11,13 @@ export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
  };

  return (
-    <ErrorBoundary
-      FallbackComponent={GenericErrorFallback}
-      onError={handleError}
-    >
-      {children}
-    </ErrorBoundary>
+    <ThemeProvider theme={THEME_LIGHT}>
+      <ErrorBoundary
+        FallbackComponent={GenericErrorFallback}
+        onError={handleError}
+      >
+        {children}
+      </ErrorBoundary>
+    </ThemeProvider>
  );
 };
--- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
@ -1,11 +1,16 @@
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { IconCheckbox, IconList, IconSearch, IconSettings } from 'twenty-ui';
+import {
+  IconCheckbox,
+  IconComponent,
+  IconList,
+  IconSearch,
+  IconSettings,
+} from 'twenty-ui';

 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { AppPath } from '@/types/AppPath';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';

--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@ -1,9 +1,9 @@
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useIcons } from 'twenty-ui';

 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { GraphQLView } from '@/views/types/GraphQLView';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
@ -1,5 +1,6 @@
+import { IconComponent } from 'twenty-ui';
+
 import { EntityChip } from '@/ui/display/chip/components/EntityChip';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';

 import { Filter } from '../types/Filter';

--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@ -1,8 +1,8 @@
 import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';

 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 import { FilterType } from './FilterType';

--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@ -1,9 +1,8 @@
-import { IconChevronDown } from 'twenty-ui';
+import { IconChevronDown, useIcons } from 'twenty-ui';

 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { LightButton } from '@/ui/input/button/components/LightButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
--- a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type RecordBoardColumnAction = {
  id: string;
--- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
@ -1,8 +1,7 @@
 import { useContext } from 'react';
-import { IconPencil } from 'twenty-ui';
+import { IconComponent, IconPencil } from 'twenty-ui';

 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

 import { FieldContext } from '../contexts/FieldContext';
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import { useIcons } from 'twenty-ui';

 import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
 import { FieldInput } from '@/object-record/record-field/components/FieldInput';
@ -9,7 +10,6 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';

 import { useInlineCell } from '../hooks/useInlineCell';

--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@ -3,9 +3,9 @@ import { Tooltip } from 'react-tooltip';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';

 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';

--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';

 export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
@ -1,8 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';

 type RecordDetailRelationRecordsListEmptyStateProps = {
  relationObjectMetadataItem: ObjectMetadataItem;
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import {
  IconChevronDown,
+  IconComponent,
  IconDotsVertical,
  IconTrash,
  IconUnlink,
@ -30,7 +31,6 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-
 import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
--- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
@ -1,9 +1,9 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';

 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';

--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
@ -2,13 +2,12 @@ import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconSettings } from 'twenty-ui';
+import { IconSettings, useIcons } from 'twenty-ui';

 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';

 const StyledEditButtonContainer = styled(motion.div)`
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';

 const StyledEditButtonContainer = styled(motion.div)`
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
@ -1,10 +1,9 @@
 import { useRef } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Key } from 'ts-key-enum';
-import { IconPlus } from 'twenty-ui';
+import { IconComponent, IconPlus } from 'twenty-ui';

 import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
--- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
+++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
@ -1,12 +1,11 @@
 import { isNonEmptyString } from '@sniptt/guards';
+import { IconComponent, useIcons } from 'twenty-ui';

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
 import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation';
 import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
 import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronRight } from 'twenty-ui';
+import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui';

 import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@ -14,7 +14,6 @@ import {
  SettingsAccountsSynchronizationStatusProps,
 } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';

 const StyledRowRightContainer = styled.div`
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@ -1,12 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { IconGoogle } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Status } from '@/ui/display/status/components/Status';

 import { SettingsListCard } from '../../components/SettingsListCard';
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { IconGoogle } from 'twenty-ui';

 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronRight } from 'twenty-ui';
+import { IconChevronRight, IconGmail } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { MessageChannel } from '@/accounts/types/MessageChannel';
@ -14,7 +14,6 @@ import {
  SettingsAccountsSynchronizationStatusProps,
 } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { IconGmail } from '@/ui/display/icon/components/IconGmail';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';

 const StyledRowRightContainer = styled.div`
--- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
@ -1,10 +1,9 @@
 import { ComponentType } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconPlus } from 'twenty-ui';
+import { IconComponent, IconPlus } from 'twenty-ui';

 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';

--- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CardContent } from '@/ui/layout/card/components/CardContent';

 const StyledRow = styled(CardContent)`
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, Pill } from 'twenty-ui';
+import { IconChevronRight, IconComponent, Pill } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';

--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
 import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
--- a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
@ -1,6 +1,9 @@
-import { IconLayersLinked, IconRelationOneToOne } from 'twenty-ui';
+import {
+  IconComponent,
+  IconLayersLinked,
+  IconRelationOneToOne,
+} from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { RelationMetadataType } from '~/generated-metadata/graphql';

 import OneToManySvg from '../assets/OneToMany.svg';
--- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
@ -1,4 +1,5 @@
 import {
+  IconComponent,
  IconCurrencyDollar,
  IconCurrencyEuro,
  IconCurrencyFrank,
@ -8,7 +9,6 @@ import {
 } from 'twenty-ui';

 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';

 export const SETTINGS_FIELD_CURRENCY_CODES: Record<
  CurrencyCode,
--- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
@ -2,6 +2,7 @@ import {
  IconCalendarEvent,
  IconCheck,
  IconCoins,
+  IconComponent,
  IconJson,
  IconKey,
  IconLink,
@ -13,14 +14,13 @@ import {
  IconTag,
  IconTags,
  IconTextSize,
+  IconTwentyStar,
  IconUser,
 } from 'twenty-ui';

 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue';
 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
-import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
@ -1,5 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -11,7 +12,6 @@ import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/compo
 import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
 import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect';
 import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 export type SettingsDataModelFieldPreviewProps = {
--- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
@ -1,8 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { Checkbox } from '@/ui/input/components/Checkbox';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@ -1,10 +1,9 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconComponent, IconTwentyStar } from 'twenty-ui';

 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
-import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 type SettingsObjectFieldDataTypeProps = {
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@ -2,13 +2,13 @@ import { ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
 import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Nullable } from '~/types/Nullable';
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';

--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui';
+import { IconArchive, IconDotsVertical, IconPencil, useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
@ -1,10 +1,10 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';

 export type SettingsDataModelObjectSummaryProps = {
  className?: string;
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
@ -1,14 +1,13 @@
 import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { IconCircleOff } from 'twenty-ui';
+import { IconCircleOff, useIcons } from 'twenty-ui';
 import { z } from 'zod';

 import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { Select, SelectOption } from '@/ui/input/components/Select';

 export const settingsDataModelObjectIdentifiersFormSchema =
--- a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
@ -1,9 +1,9 @@
+import { IconComponent } from 'twenty-ui';
 import { ReadonlyDeep } from 'type-fest';

 import { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { StepState } from '@/spreadsheet-import/steps/components/UploadFlow';
 import { Meta } from '@/spreadsheet-import/steps/components/ValidationStep/types';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';

 export type SpreadsheetOptions<Keys extends string> = {
  // Is modal visible.
--- a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
+++ b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
@ -2,8 +2,8 @@ import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import { isNonEmptyString } from '@sniptt/guards';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Avatar, AvatarType } from '@/users/components/Avatar';
 import { Nullable } from '~/types/Nullable';

--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx
+++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx
@ -1,12 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconAddressBookRaw from '../assets/address-book.svg?react';
-
-type IconAddressBookProps = TablerIconsProps;
-
-export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => {
-  const size = props.size ?? 24;
-  const stroke = props.stroke ?? 2;
-
-  return <IconAddressBookRaw height={size} width={size} strokeWidth={stroke} />;
-};
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
+++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
@ -1,12 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
-
-type IconTwentyStarProps = TablerIconsProps;
-
-export const IconTwentyStar = (props: IconTwentyStarProps): JSX.Element => {
-  const size = props.size ?? 24;
-  const stroke = props.stroke ?? 2;
-
-  return <IconTwentyStarRaw height={size} width={size} strokeWidth={stroke} />;
-};
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
+++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
@ -1,16 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
-
-type IconTwentyStarFilledProps = TablerIconsProps;
-
-export const IconTwentyStarFilled = (
-  props: IconTwentyStarFilledProps,
-): JSX.Element => {
-  const size = props.size ?? 24;
-  const stroke = props.stroke ?? 2;
-
-  return (
-    <IconTwentyStarFilledRaw height={size} width={size} strokeWidth={stroke} />
-  );
-};
--- a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts
+++ b/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts
@ -1,8 +0,0 @@
-import { createState } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-export const iconsState = createState<Record<string, IconComponent>>({
-  key: 'iconsState',
-  defaultValue: {},
-});
--- a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
+++ b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';

--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@ -1,10 +1,10 @@
 import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
 import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';

--- a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconTwentyStarFilled } from 'twenty-ui';

 import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
 import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
-import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled';

 const StyledContainer = styled.div`
  align-items: center;
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@ -1,9 +1,7 @@
 import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent, Pill } from 'twenty-ui';

 export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
@ -1,8 +1,7 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type FloatingButtonSize = 'small' | 'medium';
 export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
@ -1,8 +1,7 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type FloatingIconButtonSize = 'small' | 'medium';
 export type FloatingIconButtonPosition =
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
@ -1,7 +1,6 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 import {
  FloatingIconButton,
--- a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
@ -1,8 +1,7 @@
 import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type IconButtonSize = 'medium' | 'small';
 export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
--- a/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx
@ -1,7 +1,6 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';

--- a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
@ -1,8 +1,7 @@
 import { MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type LightButtonAccent = 'secondary' | 'tertiary';

--- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
@ -1,8 +1,7 @@
 import { ComponentProps, MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
@ -1,7 +1,6 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 import { LightIconButton, LightIconButtonProps } from './LightIconButton';

--- a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
@ -1,8 +1,7 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 type Variant = 'primary' | 'secondary';

--- a/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx
@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 const StyledIconButton = styled.button`
  align-items: center;
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@ -1,10 +1,8 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconApps } from 'twenty-ui';
+import { IconApps, IconComponent, useIcons } from 'twenty-ui';

-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@ -1,9 +1,8 @@
 import { useMemo, useRef, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronDown } from 'twenty-ui';
+import { IconChevronDown, IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@ -10,9 +10,8 @@ import {
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
-import { IconAlertCircle, IconEye, IconEyeOff } from 'twenty-ui';
+import { IconAlertCircle, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
--- a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
@ -1,6 +1,6 @@
 import { useMemo } from 'react';
+import { IconComponentProps } from 'twenty-ui';

-import { IconComponentProps } from '@/ui/display/icon/types/IconComponent';
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Select, SelectOption } from '@/ui/input/components/Select';
--- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
@ -1,7 +1,7 @@
 import { SuggestionMenuProps } from '@blocknote/react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion';
--- a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
+++ b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
@ -1,6 +1,4 @@
-import { createState, IconApps } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { createState, IconApps, IconComponent } from 'twenty-ui';

 type IconPickerState = {
  Icon: IconComponent;
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
@ -1,8 +1,8 @@
 import { ComponentProps, MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';

 const StyledHeader = styled.li`
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@ -4,9 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronLeft } from 'twenty-ui';
+import { IconChevronLeft, IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
--- a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

 import { PageHeader } from './PageHeader';
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
@ -1,9 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent, Pill } from 'twenty-ui';

 type TabProps = {
  id: string;
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@ -1,8 +1,8 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
--- a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';

 export type ActionBarEntry = {
--- a/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';

 export type ContextMenuEntry = {
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 import {
  StyledMenuItemLabel,
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Tag } from '@/ui/display/tag/components/Tag';
 import { Checkbox } from '@/ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
@ -1,7 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { IconChevronRight } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconChevronRight, IconComponent } from 'twenty-ui';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx
@ -1,8 +1,6 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCheck } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconCheck, IconComponent } from 'twenty-ui';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';

-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
--- a/Show More
+++ b/Show More