From 88d613d4459b336f9006e9e87d4bab6aec01f666 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Mon, 12 Jan 2026 19:24:00 +0100
Subject: [PATCH] Make illustration icons color responsive using accent theme
 colors (#17107)

## Summary
- Update all illustration icons to use `theme.accent.accent3` for fill
and `theme.accent.accent8` for border
- Replaces hardcoded `IllustrationIcon.blue` values with
theme-responsive accent colors
- Icons will now adapt correctly to theme changes

## Test plan
- [ ] Navigate to Settings > Data model > select any object
- [ ] Verify the Relations "Type" column icons use the accent colors
- [ ] Verify the Fields "Data type" column icons use the accent colors
- [ ] Switch themes (if available) and verify icons adapt accordingly
---
 .../src/display/icon/components/IllustrationIconArray.tsx    | 5 ++---
 .../icon/components/IllustrationIconCalendarEvent.tsx        | 5 ++---
 .../display/icon/components/IllustrationIconCalendarTime.tsx | 5 ++---
 .../src/display/icon/components/IllustrationIconCurrency.tsx | 5 ++---
 .../src/display/icon/components/IllustrationIconJson.tsx     | 5 ++---
 .../src/display/icon/components/IllustrationIconLink.tsx     | 5 ++---
 .../src/display/icon/components/IllustrationIconMail.tsx     | 5 ++---
 .../display/icon/components/IllustrationIconManyToMany.tsx   | 5 ++---
 .../src/display/icon/components/IllustrationIconMap.tsx      | 5 ++---
 .../src/display/icon/components/IllustrationIconNumbers.tsx  | 5 ++---
 .../display/icon/components/IllustrationIconOneToMany.tsx    | 5 ++---
 .../src/display/icon/components/IllustrationIconOneToOne.tsx | 5 ++---
 .../src/display/icon/components/IllustrationIconPhone.tsx    | 5 ++---
 .../src/display/icon/components/IllustrationIconSetting.tsx  | 5 ++---
 .../src/display/icon/components/IllustrationIconStar.tsx     | 5 ++---
 .../src/display/icon/components/IllustrationIconTag.tsx      | 5 ++---
 .../src/display/icon/components/IllustrationIconTags.tsx     | 5 ++---
 .../src/display/icon/components/IllustrationIconText.tsx     | 5 ++---
 .../src/display/icon/components/IllustrationIconToggle.tsx   | 5 ++---
 .../src/display/icon/components/IllustrationIconUid.tsx      | 5 ++---
 .../src/display/icon/components/IllustrationIconUser.tsx     | 5 ++---
 21 files changed, 42 insertions(+), 63 deletions(-)

diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx
index 8f93914bbd..17dc958f22 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx
@@ -7,12 +7,11 @@ type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconArrayRaw
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
         height={size}
         width={size}
       />
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx
index 7074568c73..150987cf84 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx
@@ -9,12 +9,11 @@ export const IllustrationIconCalendarEvent = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCalendarEventRaw
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
         height={size}
         width={size}
       />
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx
index 171b0788ed..5b736a25b4 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx
@@ -10,14 +10,13 @@ export const IllustrationIconCalendarTime = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCalendarTimeRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx
index ce11182c66..c0c8631c00 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx
@@ -11,14 +11,13 @@ export const IllustrationIconCurrency = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCurrencyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx
index b1cd93c505..28c97c9002 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx
@@ -9,14 +9,13 @@ type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconJsonRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx
index c34082f205..1abdf9e613 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx
@@ -9,14 +9,13 @@ type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconLinkRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx
index c1ef50634b..4312b8847b 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx
@@ -8,14 +8,13 @@ type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconMailRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx
index 64b0e8993f..05c29db357 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx
@@ -10,14 +10,13 @@ export const IllustrationIconManyToMany = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconManyToManyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx
index 44c074a262..01d409d845 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx
@@ -8,14 +8,13 @@ type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconMapRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx
index 736201d989..c762a79dfe 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx
@@ -10,14 +10,13 @@ export const IllustrationIconNumbers = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconNumbersRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx
index ef9dcb64ee..2edbe6b0ea 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx
@@ -11,14 +11,13 @@ export const IllustrationIconOneToMany = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconOneToManyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx
index f8158b538d..8050d8d415 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx
@@ -11,14 +11,13 @@ export const IllustrationIconOneToOne = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconOneToOneRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx
index c339c84d1f..23ce1650fa 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx
@@ -9,15 +9,14 @@ type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconPhoneRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx
index 3431447238..b381697183 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx
@@ -11,15 +11,14 @@ export const IllustrationIconSetting = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconSettingRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx
index d8849b190c..b2e4012fda 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx
@@ -9,15 +9,14 @@ type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconStarRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx
index aa3a5e86e2..637c87471e 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx
@@ -9,14 +9,13 @@ type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTagRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx
index da70e36303..6e64c7e512 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx
@@ -9,14 +9,13 @@ type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTagsRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx
index beb85efbc9..9edcf16423 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx
@@ -9,14 +9,13 @@ type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconText = (props: IllustrationIconTextProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTextRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx
index 41c7e7cece..fd503168ae 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx
@@ -9,14 +9,13 @@ type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconToggleRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx
index 4264e73bb2..d13161d8cd 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx
@@ -9,14 +9,13 @@ type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconUidRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );
diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx
index 1cad988ff0..6286bf25ec 100644
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx
@@ -9,14 +9,13 @@ type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconUserRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );