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
2024-04-12 15:30:48 +02:00
parent 280229bad6
commit 9f83cc1426
142 changed files with 289 additions and 289 deletions
@@ -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';
@@ -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;
@@ -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';

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

@@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';

 export enum CommandType {
  Navigate = 'Navigate',
@@ -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>
  );
 };
@@ -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';

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

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

 import { FilterType } from './FilterType';

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

 export type RecordBoardColumnAction = {
  id: string;
@@ -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';
@@ -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';

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

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

@@ -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';
@@ -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)`
@@ -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)`
@@ -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';
@@ -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';
@@ -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`
@@ -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';
@@ -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';
@@ -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`
@@ -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';

@@ -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)`
@@ -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';

@@ -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';
@@ -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';
@@ -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,
@@ -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);
@@ -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 = {
@@ -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';
@@ -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 = {
@@ -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';
@@ -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';

@@ -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';
@@ -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;
@@ -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 =
@@ -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.
@@ -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';

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-address-book" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z" />
-  <path d="M10 16h6" />
-  <path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
-  <path d="M4 8h3" />
-  <path d="M4 12h3" />
-  <path d="M4 16h3" />
-</svg>
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none" viewBox="0 0 14 12">
-  <path fill="#4285F4" d="M.955 11.252h2.227v-5.41L0 3.456v6.841c0 .528.428.954.955.954Z"/>
-  <path fill="#34A853" d="M10.818 11.252h2.227a.954.954 0 0 0 .955-.955V3.456l-3.182 2.386"/>
-  <path fill="#FBBC04" d="M10.818 1.706v4.136L14 3.456V2.183c0-1.18-1.348-1.853-2.291-1.145"/>
-  <path fill="#EA4335" d="M3.182 5.842V1.706L7 4.57l3.818-2.864v4.136L7 8.706"/>
-  <path fill="#C5221F" d="M0 2.183v1.273l3.182 2.386V1.706l-.891-.668C1.346.33 0 1.003 0 2.183Z"/>
-</svg>
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76">
-  <path fill="#fff" d="M58 18H18v40h40z"/>
-  <path fill="#4285f4" d="M26.2 49.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67s-1.94-1.035-3.23-1.035H28.69V36.13h1.8c1.11 0 2.045-.3 2.805-.9s1.14-1.42 1.14-2.465c0-.93-.34-1.67-1.02-2.225s-1.54-.835-2.585-.835c-1.02 0-1.83.27-2.43.815a4.784 4.784 0 0 0-1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415s2.79-1.48 4.69-1.48c1.405 0 2.67.27 3.79.815s2 1.3 2.635 2.26c.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11s-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5s-.345 2.575-1.035 3.64-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zm21.315-17.22-3.81 2.755-1.905-2.89 6.835-4.93h2.62V50h-3.74z"/>
-  <path fill="#34a853" d="M58 58H18v18h40z"/>
-  <path fill="#4285f4" d="M58 0H6C2.685 0 0 2.685 0 6v52h18V18h40z"/>
-  <path fill="#188038" d="M0 58v12c0 3.315 2.685 6 6 6h12V58z"/>
-  <path fill="#fbbc04" d="M76 18H58v40h18z"/>
-  <path fill="#1967d2" d="M76 18V6c0-3.315-2.685-6-6-6H58v18z"/>
-  <path fill="#ea4335" d="m58 76 18-18H58z"/>
-</svg>
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
-  <g clip-path="url(#a)">
-    <path fill="#4285F4" d="M7 5.727v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107l2.272 1.762c1.323-1.221 2.087-3.016 2.087-5.148 0-.496-.045-.973-.127-1.432H7Z"/>
-    <path fill="#34A853" d="m3.077 8.332-.512.393L.75 10.137C1.903 12.422 4.263 14 7 14c1.89 0 3.474-.624 4.633-1.693L9.36 10.544c-.624.42-1.42.675-2.361.675-1.82 0-3.366-1.228-3.92-2.883l-.003-.004Z"/>
-    <path fill="#FBBC05" d="M.75 3.863A6.914 6.914 0 0 0 0 7c0 1.133.274 2.196.75 3.137 0 .007 2.33-1.807 2.33-1.807A4.195 4.195 0 0 1 2.857 7c0-.465.083-.91.223-1.33L.75 3.863Z"/>
-    <path fill="#EA4335" d="M7 2.787c1.03 0 1.947.357 2.68 1.044l2.004-2.005C10.468.694 8.89 0 7 0A6.988 6.988 0 0 0 .75 3.863L3.08 5.67C3.634 4.015 5.18 2.787 7 2.787Z"/>
-  </g>
-  <defs>
-    <clipPath id="a">
-      <path fill="#fff" d="M0 0h13.72v14H0z"/>
-    </clipPath>
-  </defs>
-</svg>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-<path d="M6.06216 1.53416C6.38434 0.663593 7.61566 0.663591 7.93784 1.53416L9.00134 4.40789C9.10263 4.68158 9.31842 4.89737 9.59211 4.99866L12.4658 6.06216C13.3364 6.38434 13.3364 7.61566 12.4658 7.93784L9.59211 9.00134C9.31842 9.10263 9.10263 9.31842 9.00134 9.59211L7.93784 12.4658C7.61566 13.3364 6.38434 13.3364 6.06216 12.4658L4.99866 9.59211C4.89737 9.31842 4.68158 9.10263 4.40789 9.00134L1.53416 7.93784C0.663593 7.61566 0.663591 6.38434 1.53416 6.06216L4.40789 4.99866C4.68158 4.89737 4.89737 4.68158 4.99866 4.40789L6.06216 1.53416Z" fill="currentColor"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M10.4673 3.06709C10.9938 1.64431 13.0062 1.6443 13.5327 3.06709L15.2708 7.76367C15.4364 8.21097 15.789 8.56364 16.2363 8.72917L20.9329 10.4673C22.3557 10.9938 22.3557 13.0062 20.9329 13.5327L16.2363 15.2708C15.789 15.4364 15.4364 15.789 15.2708 16.2363L13.5327 20.9329C13.0062 22.3557 10.9938 22.3557 10.4673 20.9329L8.72917 16.2363C8.56364 15.789 8.21097 15.4364 7.76367 15.2708L3.06709 13.5327C1.64431 13.0062 1.6443 10.9938 3.06709 10.4673L7.76367 8.72917C8.21097 8.56364 8.56364 8.21097 8.72917 7.76367L10.4673 3.06709Z" stroke="currentColor" />
-</svg>
@@ -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} />;
-};
@@ -1,14 +0,0 @@
-import { useTheme } from '@emotion/react';
-
-import IconGmailRaw from '../assets/gmail.svg?react';
-
-interface IconGmailProps {
-  size?: number;
-}
-
-export const IconGmail = (props: IconGmailProps) => {
-  const theme = useTheme();
-  const size = props.size ?? theme.icon.size.lg;
-
-  return <IconGmailRaw height={size} width={size} />;
-};
@@ -1,14 +0,0 @@
-import { useTheme } from '@emotion/react';
-
-import IconGoogleRaw from '../assets/google.svg?react';
-
-interface IconGoogleProps {
-  size?: number;
-}
-
-export const IconGoogle = (props: IconGoogleProps) => {
-  const theme = useTheme();
-  const size = props.size ?? theme.icon.size.lg;
-
-  return <IconGoogleRaw height={size} width={size} />;
-};
@@ -1,14 +0,0 @@
-import { useTheme } from '@emotion/react';
-
-import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react';
-
-type IconGoogleCalendarProps = {
-  size?: number;
-};
-
-export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
-  const theme = useTheme();
-  const size = props.size ?? theme.icon.size.lg;
-
-  return <IconGoogleCalendarRaw height={size} width={size} />;
-};
@@ -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} />;
-};
@@ -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} />
-  );
-};
@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-import { iconsState } from '@/ui/display/icon/states/iconsState';
-
-type IconsProviderProps = {
-  children: JSX.Element;
-};
-
-export const IconsProvider = ({ children }: IconsProviderProps) => {
-  const setIcons = useSetRecoilState(iconsState);
-
-  useEffect(() => {
-    import('../constants/index').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons.default);
-    });
-  }, [setIcons]);
-
-  return children;
-};
@@ -1,40 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import * as recoil from 'recoil';
-import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui';
-
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-
-describe('useIcons', () => {
-  const mockedStateIcons = {
-    IconUser,
-    Icon123,
-    IconBuildingSkyscraper,
-  };
-  jest
-    .spyOn(recoil, 'useRecoilValue')
-    .mockImplementationOnce(() => mockedStateIcons);
-  const { result } = renderHook(() => useIcons(), {
-    wrapper: recoil.RecoilRoot,
-  });
-
-  it('returns default icon when no icon key is provided', () => {
-    expect(result.current.getIcon()).toEqual(Icon123);
-  });
-
-  it('returns the specified icon if the icon key exists in the iconsState', () => {
-    expect(result.current.getIcon('Icon123')).toEqual(Icon123);
-    expect(result.current.getIcon('IconUser')).toEqual(IconUser);
-    expect(result.current.getIcon('IconBuildingSkyscraper')).toEqual(
-      IconBuildingSkyscraper,
-    );
-  });
-
-  it('returns default icon if the specified icon key does not exist in the iconsState', () => {
-    expect(result.current.getIcon('nonExistentKey')).toEqual(Icon123);
-  });
-
-  it('returns all icons in getIcons', () => {
-    expect(result.current.getIcons()).toEqual(mockedStateIcons);
-    expect(Object.keys(result.current.getIcons())).toHaveLength(3);
-  });
-});
@@ -1,20 +0,0 @@
-import { useRecoilValue } from 'recoil';
-import { Icon123 } from 'twenty-ui';
-
-import { iconsState } from '@/ui/display/icon/states/iconsState';
-
-export const useIcons = () => {
-  const icons = useRecoilValue(iconsState);
-  const defaultIcon = Icon123;
-
-  const getIcons = () => {
-    return icons;
-  };
-
-  const getIcon = (iconKey?: string | null) => {
-    if (!iconKey) return defaultIcon;
-    return icons[iconKey] ?? defaultIcon;
-  };
-
-  return { getIcons, getIcon };
-};
@@ -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: {},
-});
@@ -1,10 +0,0 @@
-import { FunctionComponent } from 'react';
-
-export type IconComponentProps = {
-  className?: string;
-  color?: string;
-  size?: number;
-  stroke?: number;
-};
-
-export type IconComponent = FunctionComponent<IconComponentProps>;
@@ -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';

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

@@ -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;
@@ -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';
@@ -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';
@@ -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 =
@@ -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,
@@ -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';
@@ -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';

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

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

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

@@ -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;
@@ -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';
@@ -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';
@@ -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';
@@ -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';
@@ -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';
@@ -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;
@@ -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`
@@ -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';
@@ -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';
@@ -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;
@@ -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';
@@ -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 = {
@@ -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 = {
@@ -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';
@@ -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,
@@ -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';
@@ -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';
@@ -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 {
@@ -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';
@@ -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