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>

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx

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

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx

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

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx

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

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

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

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm.tsx

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

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx

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

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

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