Object icon visual parity (#19374)

## Summary Aligns **object metadata** icons with the **tinted tile** look everywhere we show a workspace object, and **retires** the navigation-only `NavigationMenuItemStyleIcon` wrapper in favor of **shared** UI primitives under `@/ui/display` and `@/object-metadata`. ## What changed ### Global tinted icon building blocks (`@/ui/display`) - **`TintedIconTile`** / **`StyledTintedIconTileContainer`** support optional **`size`** and **`stroke`**, and grow the tile when **`size`** is set so layouts match previous `theme.icon` usage. - Shared helpers and constants for theme color parsing and tinted backgrounds/borders/icon color (e.g. **`getTintedIconTileStyleFromColor`**, **`parseThemeColor`**, **`getColorFromTheme`**, related constants). ### Object metadata icon (`@/object-metadata`) - **`ObjectMetadataIcon`** composes **`TintedIconTile`** with **`getObjectColorWithFallback`**, forwards optional **`size`** / **`stroke`** for **visual parity** with old `getIcon` + explicit sizing. - **`getSelectOptionIconFromObjectMetadataItem`** returns an **`IconComponent`** for selects/menus that expect a component, not a React node. ### Navigation module cleanup - **Removed** **`NavigationMenuItemStyleIcon`**; call sites use **`ObjectMetadataIcon`**, **`TintedIconTile`**, and/or the shared **`getTintedIconTileStyleFromColor`** pipeline so the same treatment is **not** tied to the navigation package. - **`NavigationMenuItemIcon`**, view/link overlays, DnD handle, and sidebar editor flows updated to use the shared pattern where they render object (or tinted) icons. ### Product surfaces updated (non-exhaustive) - **Settings:** role object picker/rows, data model tables/graph/overview, object preview summary, webhooks entity list, morph relation multiselect. - **Workflows:** create/update/delete/upsert/find records, triggers, filters, variables dropdowns, AI agent object rows, object dropdowns. - **Shell:** side panel object filter / data sources / folder chrome where object icons appear. - **Records:** index header icon, show breadcrumb styling. - **Activity:** timeline event icon when linked object metadata applies. - **`NavigationDrawerItem`:** tinted branch aligned with shared **`TintedIconTile`** behavior. --------- Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
2026-04-10 15:44:20 +05:30
parent aed81a54a2
commit 34a903b4fa
81 changed files with 587 additions and 456 deletions
@@ -8,6 +8,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';

 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
 import { MultiSelectControl } from '@/ui/input/components/MultiSelectControl';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -21,7 +22,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
-import { IconBox, useIcons, type IconComponent } from 'twenty-ui/display';
+import { IconBox, type IconComponent } from 'twenty-ui/display';
 import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

@@ -101,12 +102,13 @@ export const SettingsMorphRelationMultiSelect = ({

  const [searchInputValue, setSearchInputValue] = useState('');

+  const { getSelectIconPropsFromObjectMetadataItem } =
+    useObjectMetadataSelectHelpers();
  const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();

  const [localSelectedObjectMetadataIds, setLocalSelectedObjectMetadataIds] =
    useState<string[]>(selectedObjectMetadataIds);

-  const { getIcon } = useIcons();
  const options = activeObjectMetadataItems
    .filter(isObjectMetadataAvailableForRelation)
    .sort((item1, item2) =>
@@ -114,8 +116,8 @@ export const SettingsMorphRelationMultiSelect = ({
    )
    .map((objectMetadataItem) => ({
      label: objectMetadataItem.labelSingular,
-      Icon: getIcon(objectMetadataItem.icon),
      objectMetadataId: objectMetadataItem.id,
+      ...getSelectIconPropsFromObjectMetadataItem(objectMetadataItem),
    }));

  const selectedOptions = options.filter((option) =>
@@ -256,6 +258,7 @@ export const SettingsMorphRelationMultiSelect = ({
                        <MenuItemMultiSelect
                          className=""
                          LeftIcon={option.Icon ?? undefined}
+                          iconThemeColor={option.iconThemeColor}
                          text={option.label}
                          selected={selectedObjectMetadataIds.some(
                            (selectedObjectMetadataId) =>
@@ -1,11 +1,11 @@
-import { isDefined } from 'twenty-shared/utils';
+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
+import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
 import { Handle, Position } from '@xyflow/react';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { useIcons } from 'twenty-ui/display';
 import { useContext } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { RelationType } from '~/generated-metadata/graphql';

@@ -29,7 +29,6 @@ const StyledFieldName = styled.div`
 export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => {
  const { theme } = useContext(ThemeContext);
  const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
-  const { getIcon } = useIcons();

  const relatedObjectId = field.relation?.targetObjectMetadata.id;

@@ -37,11 +36,14 @@ export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => {
    (x) => x.id === relatedObjectId,
  );

-  const Icon = getIcon(relatedObject?.icon);
-
  return (
    <StyledRow>
-      {isDefined(Icon) && <Icon size={theme.icon.size.md} />}
+      {isDefined(relatedObject) && (
+        <ObjectMetadataIcon
+          objectMetadataItem={relatedObject}
+          size={theme.icon.size.md}
+        />
+      )}
      <StyledFieldName>{relatedObject?.labelPlural ?? ''}</StyledFieldName>
      <Handle
        type={
@@ -1,20 +1,21 @@
-import { useContext, useState } from 'react';
 import { styled } from '@linaria/react';
 import { type Node, type NodeProps } from '@xyflow/react';
+import { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';

+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { ObjectFieldRow } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewField';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

+import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
 import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
 import '@xyflow/react/dist/style.css';
 import { SettingsPath } from 'twenty-shared/types';
-import { isDefined, getSettingsPath } from 'twenty-shared/utils';
-import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui/display';
-import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
+import { getSettingsPath } from 'twenty-shared/utils';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsDataModelOverviewObjectNode = Node<
@@ -107,7 +108,6 @@ export const SettingsDataModelOverviewObject = ({
  data: objectMetadataItem,
 }: SettingsDataModelOverviewObjectProps) => {
  const { theme } = useContext(ThemeContext);
-  const { getIcon } = useIcons();
  const [otherFieldsExpanded, setOtherFieldsExpanded] = useState(false);

  const { totalCount } = useFindManyRecords({
@@ -122,8 +122,6 @@ export const SettingsDataModelOverviewObject = ({
    (x) => x.type !== FieldMetadataType.RELATION,
  ).length;

-  const Icon = getIcon(objectMetadataItem.icon);
-
  return (
    <StyledNode>
      <StyledHeader>
@@ -134,7 +132,10 @@ export const SettingsDataModelOverviewObject = ({
                objectNamePlural: objectMetadataItem.namePlural,
              })}
            >
-              {isDefined(Icon) && <Icon size={theme.icon.size.md} />}
+              <ObjectMetadataIcon
+                objectMetadataItem={objectMetadataItem}
+                size={theme.icon.size.md}
+              />
              {objectMetadataItem.labelPlural}
            </Link>
          </StyledObjectLinkContainer>
@@ -1,11 +1,10 @@
-import { isDefined } from 'twenty-shared/utils';
+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { Checkbox } from 'twenty-ui/input';
-import { useIcons } from 'twenty-ui/display';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
+import { Checkbox } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 export const AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS =
@@ -29,8 +28,6 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
  onClick,
 }: SettingsAvailableStandardObjectItemTableRowProps) => {
  const { theme } = useContext(ThemeContext);
-  const { getIcon } = useIcons();
-  const Icon = getIcon(objectItem.icon);

  return (
    <TableRow
@@ -49,7 +46,10 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
        color={themeCssVariables.font.color.primary}
        gap={themeCssVariables.spacing[2]}
      >
-        {isDefined(Icon) && <Icon size={theme.icon.size.md} />}
+        <ObjectMetadataIcon
+          objectMetadataItem={objectItem}
+          size={theme.icon.size.md}
+        />
        {objectItem.labelPlural}
      </TableCell>
      <TableCell>
@@ -1,12 +1,11 @@
-import { isDefined } from 'twenty-shared/utils';
-import { type ReactNode, useContext } from 'react';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
+import { type ReactNode, useContext } from 'react';

+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
  SETTINGS_OBJECT_TABLE_ROW_GRID_TEMPLATE_COLUMNS,
  StyledActionTableCell,
@@ -14,7 +13,7 @@ import {
  StyledStickyFirstCell,
 } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { useIcons } from 'twenty-ui/display';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 export type SettingsObjectMetadataItemTableRowProps = {
@@ -59,11 +58,8 @@ export const SettingsObjectMetadataItemTableRow = ({
  link,
  totalObjectCount,
 }: SettingsObjectMetadataItemTableRowProps) => {
-  const { theme } = useContext(ThemeContext);
  const { t } = useLingui();
-
-  const { getIcon } = useIcons();
-  const Icon = getIcon(objectMetadataItem.icon);
+  const { theme } = useContext(ThemeContext);

  return (
    <TableRow
@@ -73,15 +69,11 @@ export const SettingsObjectMetadataItemTableRow = ({
    >
      <StyledStickyFirstCell>
        <StyledNameTableCell>
-          {isDefined(Icon) && (
-            <Icon
-              style={{
-                minWidth: theme.icon.size.md,
-              }}
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-            />
-          )}
+          <ObjectMetadataIcon
+            objectMetadataItem={objectMetadataItem}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
          <StyledNameContainer>
            <StyledNameLabel title={objectMetadataItem.labelPlural}>
              {objectMetadataItem.labelPlural}
@@ -1,5 +1,4 @@
 import { isDDLLockedState } from '@/client-config/states/isDDLLockedState';
-import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
@@ -16,6 +15,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
+import { parseThemeColor } from 'twenty-ui/utilities';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';

@@ -1,21 +1,25 @@
-import { t } from '@lingui/core/macro';
 import { styled } from '@linaria/react';
+import { t } from '@lingui/core/macro';
 import { useContext } from 'react';

+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
-import {
-  IconBox,
-  OverflowingTextWithTooltip,
-  useIcons,
-} from 'twenty-ui/display';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
+import { IconBox, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 export type SettingsDataModelObjectPreviewProps = {
  className?: string;
  objectMetadataItems: Pick<
    EnrichedObjectMetadataItem,
-    'icon' | 'labelSingular' | 'labelPlural' | 'isCustom' | 'isRemote'
+    | 'icon'
+    | 'labelSingular'
+    | 'labelPlural'
+    | 'isCustom'
+    | 'isRemote'
+    | 'nameSingular'
+    | 'color'
+    | 'isSystem'
  >[];
  pluralizeLabel?: boolean;
 };
@@ -56,7 +60,14 @@ const StyledSeparator = styled.div`
 type SettingsDataModelObjectPreviewItemProps = {
  objectMetadataItem: Pick<
    EnrichedObjectMetadataItem,
-    'icon' | 'labelSingular' | 'labelPlural' | 'isCustom' | 'isRemote'
+    | 'icon'
+    | 'labelSingular'
+    | 'labelPlural'
+    | 'isCustom'
+    | 'isRemote'
+    | 'nameSingular'
+    | 'color'
+    | 'isSystem'
  >;
  pluralizeLabel: boolean;
  index: number;
@@ -68,8 +79,6 @@ const SettingsDataModelObjectPreviewItem = ({
  index,
 }: SettingsDataModelObjectPreviewItemProps) => {
  const { theme } = useContext(ThemeContext);
-  const { getIcon } = useIcons();
-  const ObjectIcon = getIcon(objectMetadataItem.icon);

  return (
    <>
@@ -77,7 +86,8 @@ const SettingsDataModelObjectPreviewItem = ({
      <StyledObjectPreview key={`${objectMetadataItem.labelSingular}-${index}`}>
        <StyledObjectName>
          <StyledIconContainer>
-            <ObjectIcon
+            <ObjectMetadataIcon
+              objectMetadataItem={objectMetadataItem}
              size={theme.icon.size.sm}
              stroke={theme.icon.stroke.md}
            />
@@ -1,4 +1,3 @@
-import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
@@ -24,6 +23,7 @@ import {
 import { Button } from 'twenty-ui/input';
 import { Card } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { parseThemeColor } from 'twenty-ui/utilities';
 import { type StringKeyOf } from 'type-fest';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { computeMetadataNamesFromLabels } from '~/pages/settings/data-model/utils/computeMetadataNamesFromLabels';
@@ -1,4 +1,5 @@
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { useObjectMetadataSelectHelpers } from '@/object-metadata/hooks/useObjectMetadataSelectHelpers';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -11,9 +12,9 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { useContext, useState } from 'react';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
+import { useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import {
  IconBox,
@@ -23,8 +24,8 @@ import {
  IconNorthStar,
  IconSettings,
  IconTable,
-  useIcons,
 } from 'twenty-ui/display';
+import { type SelectOption } from 'twenty-ui/input';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

@@ -85,9 +86,10 @@ export const WebhookEntitySelect = ({
  dropdownId = WEBHOOK_ENTITY_DROPDOWN_ID,
 }: WebhookEntitySelectProps) => {
  const { theme } = useContext(ThemeContext);
+  const { getSelectIconPropsFromObjectMetadataItem } =
+    useObjectMetadataSelectHelpers();
  const [searchInput, setSearchInput] = useState('');
  const { objectMetadataItems } = useObjectMetadataItems();
-  const { getIcon } = useIcons();
  const { closeDropdown } = useCloseDropdown();

  const selectedItemId = useAtomComponentStateValue(
@@ -105,12 +107,12 @@ export const WebhookEntitySelect = ({
    { label: t`Webhook`, value: 'metadata.webhook', icon: IconCode },
  ];

-  const objectOptions = [
+  const objectOptions: SelectOption<string>[] = [
    { label: t`All Objects`, value: '*', Icon: IconNorthStar },
    ...objectMetadataItems.map((item) => ({
      label: item.labelPlural,
      value: item.nameSingular,
-      Icon: getIcon(item.icon),
+      ...getSelectIconPropsFromObjectMetadataItem(item),
    })),
  ];

@@ -199,6 +201,7 @@ export const WebhookEntitySelect = ({
                    >
                      <MenuItemSelect
                        LeftIcon={option.Icon}
+                        leftIconColor={option.iconThemeColor}
                        text={option.label}
                        selected={value === option.value}
                        focused={selectedItemId === option.value}
@@ -1,14 +1,15 @@
 /* oxlint-disable twenty/no-navigate-prefer-link */
+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { useFilterObjectMetadataItemsWithPermissionOverride } from '@/settings/roles/role-permissions/object-level-permissions/hooks/useFilterObjectWithPermissionOverride';
 import { useObjectMetadataItemsThatCanHavePermission } from '@/settings/roles/role-permissions/object-level-permissions/hooks/useObjectMetadataItemsThatCanHavePermission';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
-import { useContext, useState } from 'react';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
+import { useContext, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SettingsPath } from 'twenty-shared/types';
-import { H2Title, IconSearch, useIcons } from 'twenty-ui/display';
+import { H2Title, IconSearch } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@@ -60,8 +61,6 @@ export const SettingsRolePermissionsObjectLevelObjectPicker = ({
  const { objectMetadataItemsThatCanHavePermission } =
    useObjectMetadataItemsThatCanHavePermission();

-  const { getIcon } = useIcons();
-
  const handleSearchChange = (text: string) => {
    setSearchFilter(text);
  };
@@ -125,27 +124,25 @@ export const SettingsRolePermissionsObjectLevelObjectPicker = ({
            description={t`All the standard objects`}
          />
          <StyledContainer>
-            {standardObjects.map((objectMetadataItem) => {
-              const Icon = getIcon(objectMetadataItem.icon);
-              return (
-                <StyledCardContainer
-                  key={objectMetadataItem.id}
-                  onClick={() =>
-                    handleSelectObjectMetadata(objectMetadataItem.id)
+            {standardObjects.map((objectMetadataItem) => (
+              <StyledCardContainer
+                key={objectMetadataItem.id}
+                onClick={() =>
+                  handleSelectObjectMetadata(objectMetadataItem.id)
+                }
+              >
+                <SettingsCard
+                  Icon={
+                    <ObjectMetadataIcon
+                      objectMetadataItem={objectMetadataItem}
+                      size={theme.icon.size.lg}
+                      stroke={theme.icon.stroke.sm}
+                    />
                  }
-                >
-                  <SettingsCard
-                    Icon={
-                      <Icon
-                        size={theme.icon.size.lg}
-                        stroke={theme.icon.stroke.sm}
-                      />
-                    }
-                    title={objectMetadataItem.labelPlural}
-                  />
-                </StyledCardContainer>
-              );
-            })}
+                  title={objectMetadataItem.labelPlural}
+                />
+              </StyledCardContainer>
+            ))}
          </StyledContainer>
        </Section>
      )}
@@ -153,28 +150,25 @@ export const SettingsRolePermissionsObjectLevelObjectPicker = ({
        <Section>
          <H2Title title={t`Custom`} description={t`All your custom objects`} />
          <StyledContainer>
-            {customObjects.map((objectMetadataItem) => {
-              const Icon = getIcon(objectMetadataItem.icon);
-              return (
-                <StyledCardContainer
-                  key={objectMetadataItem.id}
-                  onClick={() =>
-                    handleSelectObjectMetadata(objectMetadataItem.id)
+            {customObjects.map((objectMetadataItem) => (
+              <StyledCardContainer
+                key={objectMetadataItem.id}
+                onClick={() =>
+                  handleSelectObjectMetadata(objectMetadataItem.id)
+                }
+              >
+                <SettingsCard
+                  Icon={
+                    <ObjectMetadataIcon
+                      objectMetadataItem={objectMetadataItem}
+                      size={theme.icon.size.lg}
+                      stroke={theme.icon.stroke.sm}
+                    />
                  }
-                >
-                  <SettingsCard
-                    key={objectMetadataItem.id}
-                    Icon={
-                      <Icon
-                        size={theme.icon.size.lg}
-                        stroke={theme.icon.stroke.sm}
-                      />
-                    }
-                    title={objectMetadataItem.labelPlural}
-                  />
-                </StyledCardContainer>
-              );
-            })}
+                  title={objectMetadataItem.labelPlural}
+                />
+              </StyledCardContainer>
+            ))}
          </StyledContainer>
        </Section>
      )}
@@ -1,3 +1,4 @@
+import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { SettingsRolePermissionsObjectLevelOverrideCellContainer } from '@/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelOverrideCellContainer';
 import { SettingsRolePermissionsObjectLevelSeeFieldsValueForObject } from '@/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSeeFieldsValueForObject';
@@ -7,10 +8,10 @@ import { OBJECT_LEVEL_PERMISSION_TABLE_GRID_AUTO_COLUMNS } from '@/settings/role
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
-import { SettingsPath } from 'twenty-shared/types';
-import { isDefined, getSettingsPath } from 'twenty-shared/utils';
-import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
 import { useContext } from 'react';
+import { SettingsPath } from 'twenty-shared/types';
+import { getSettingsPath } from 'twenty-shared/utils';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameLabel = styled.div`
@@ -33,10 +34,6 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
  fromAgentId,
 }: SettingsRolePermissionsObjectLevelTableRowProps) => {
  const { theme } = useContext(ThemeContext);
-  const { getIcon } = useIcons();
-
-  const Icon = getIcon(objectMetadataItem.icon);
-
  const objectLabelPlural = objectMetadataItem.labelPlural;
  const navigationPath = getSettingsPath(SettingsPath.RoleObjectLevel, {
    roleId: roleId,
@@ -56,15 +53,11 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({
        color={themeCssVariables.font.color.primary}
        gap={themeCssVariables.spacing[1]}
      >
-        {isDefined(Icon) && (
-          <Icon
-            style={{
-              minWidth: theme.icon.size.md,
-            }}
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-          />
-        )}
+        <ObjectMetadataIcon
+          objectMetadataItem={objectMetadataItem}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
        <StyledNameLabel title={objectLabelPlural}>
          <OverflowingTextWithTooltip text={objectLabelPlural} />
        </StyledNameLabel>