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

.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

.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

nx.json

@@ -21,6 +21,7 @@
     },
     "storybook:build": {
       "cache": true,
+      "dependsOn": ["^build"],
       "inputs": [
         "default",
         "^default",

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

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 >

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} 
 />
 

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} 
 />
 

packages/twenty-docs/src/ui/display/entityChipCode.js

@@ -1,6 +1,7 @@
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from 'react-router-dom';
-import { EntityChip } from "@/ui/display/chip/components/EntityChip";
+import { IconTwentyStar } from 'twenty-ui';
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+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>
   );

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} />;

packages/twenty-docs/src/ui/input/components/selectCode.js

@@ -1,6 +1,7 @@
-import { RecoilRoot } from "recoil";
+import { RecoilRoot } from 'recoil';
-import { Select } from "@/ui/input/components/Select";
+import { IconTwentyStar } from 'twenty-ui';
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+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: 'option1', label: 'Option A', Icon: IconTwentyStar },
-          { value: "option2", label: "Option B", Icon: IconComponent },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
         ]}
         value="option1"
       />

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, THEME_LIGHT } from 'twenty-ui';
-import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
-import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
 
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';

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'],

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": "npx tsc --project tsconfig.app.json",
-    "tsc:ci": "tsc",
+    "tsc:ci": "yarn tsc --project tsconfig.json",
-    "tsc:spec": "tsc --project tsconfig.spec.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:build": "npx storybook build",
-    "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
+    "storybook:modules:build": "STORYBOOK_SCOPE=modules npx nx storybook:build",
-    "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
+    "storybook:pages:build": "STORYBOOK_SCOPE=pages npx nx storybook:build",
-    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn 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",

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';

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';

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;

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';
 

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 {

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';

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';
 

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',

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
+    <ThemeProvider theme={THEME_LIGHT}>
-      FallbackComponent={GenericErrorFallback}
+      <ErrorBoundary
-      onError={handleError}
+        FallbackComponent={GenericErrorFallback}
-    >
+        onError={handleError}
-      {children}
+      >
-    </ErrorBoundary>
+        {children}
+      </ErrorBoundary>
+    </ThemeProvider>
   );
 };

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';
 

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';

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';
 

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';

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';
 

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';

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;

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';

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';
 

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';
 

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 }) => {

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;

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';

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';
 

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';

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)`

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)`

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';

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';

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`

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';

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';

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`

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';
 

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)`

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';
 

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';

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';

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,

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);

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 = {

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';

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 = {

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';

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';
 

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';

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;

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 =

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.

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';
 

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} />;
-};

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} />;
-};

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} />
-  );
-};

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: {},
-});

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';
 

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';
 

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;

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, Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type ButtonSize = 'medium' | 'small';
 export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type FloatingButtonSize = 'small' | 'medium';
 export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
 export type FloatingIconButtonPosition =

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import {
   FloatingIconButton,

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type IconButtonSize = 'medium' | 'small';
 export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
 

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
 

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { LightIconButton, LightIconButtonProps } from './LightIconButton';
 

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 type Variant = 'primary' | 'secondary';
 

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 const StyledIconButton = styled.button`
   align-items: center;

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';

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';

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';

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';

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';

packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts

@@ -1,6 +1,4 @@
-import { createState, IconApps } from 'twenty-ui';
+import { createState, IconApps, IconComponent } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 type IconPickerState = {
   Icon: IconComponent;

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`

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';

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';

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, Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 type TabProps = {
   id: string;

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';

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 = {

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 = {

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';

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 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import {
   StyledMenuItemLabel,

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';

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';

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 { IconChevronRight, IconComponent } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {

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 { IconCheck, IconComponent } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';

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';