Add icons next to permission settings labels (#10673)

## Context
as title

Before
<img width="842" alt="Screenshot 2025-03-05 at 15 11 19"
src="https://github.com/user-attachments/assets/1c228f29-368b-460d-8067-90bb2afc6e41"
/>

After
<img width="862" alt="Screenshot 2025-03-05 at 15 09 51"
src="https://github.com/user-attachments/assets/e7f9d02a-0c4a-49f3-977f-a0d6bef20862"
/>

packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx

@@ -2,14 +2,22 @@ import { RolePermissionsObjectsTableHeader } from '@/settings/roles/role-permiss
 import { RolePermissionsSettingsTableHeader } from '@/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader';
 import { RolePermissionsSettingsTableRow } from '@/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow';
 import { RolePermissionsObjectPermission } from '@/settings/roles/types/RolePermissionsObjectPermission';
+import { RolePermissionsSettingPermission } from '@/settings/roles/types/RolePermissionsSettingPermission';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import {
   H2Title,
+  IconCode,
   IconEye,
+  IconHierarchy,
+  IconKey,
+  IconLock,
   IconPencil,
+  IconSettings,
   IconTrash,
   IconTrashX,
+  IconUserCog,
+  IconUsers,
   Section,
 } from 'twenty-ui';
 import { Role } from '~/generated-metadata/graphql';
@@ -44,71 +52,78 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => {
     {
       key: 'seeRecords',
       label: 'See Records on All Objects',
-      icon: <IconEye size={14} />,
+      Icon: IconEye,
       value: role.canReadAllObjectRecords,
     },
     {
       key: 'editRecords',
       label: 'Edit Records on All Objects',
-      icon: <IconPencil size={14} />,
+      Icon: IconPencil,
       value: role.canUpdateAllObjectRecords,
     },
     {
       key: 'deleteRecords',
       label: 'Delete Records on All Objects',
-      icon: <IconTrash size={14} />,
+      Icon: IconTrash,
       value: role.canSoftDeleteAllObjectRecords,
     },
     {
       key: 'destroyRecords',
       label: 'Destroy Records on All Objects',
-      icon: <IconTrashX size={14} />,
+      Icon: IconTrashX,
       value: role.canDestroyAllObjectRecords,
     },
   ];
 
-  const settingsPermissionsConfig = [
+  const settingsPermissionsConfig: RolePermissionsSettingPermission[] = [
     {
       key: SettingsPermissions.API_KEYS_AND_WEBHOOKS,
-      label: 'API Keys and Webhooks',
+      label: 'Manage API Keys & Webhooks',
       type: 'Developer',
       value: role.canUpdateAllSettings,
-    },
+      Icon: IconCode,
-    {
-      key: SettingsPermissions.ROLES,
-      label: 'Roles',
-      type: 'Members',
-      value: role.canUpdateAllSettings,
     },
     {
       key: SettingsPermissions.WORKSPACE,
-      label: 'Workspace Settings',
+      label: 'Manage Workspace Settings',
       type: 'General',
       value: role.canUpdateAllSettings,
+      Icon: IconSettings,
     },
     {
       key: SettingsPermissions.WORKSPACE_MEMBERS,
-      label: 'Workspace Users',
+      label: 'Manage Members',
       type: 'Members',
       value: role.canUpdateAllSettings,
+      Icon: IconUsers,
+    },
+    {
+      key: SettingsPermissions.ROLES,
+      label: 'Manage Roles',
+      type: 'Members',
+      value: role.canUpdateAllSettings,
+      Icon: IconLock,
     },
     {
       key: SettingsPermissions.DATA_MODEL,
-      label: 'Data Model',
+      label: 'Manage Data Model',
       type: 'Data Model',
       value: role.canUpdateAllSettings,
+      Icon: IconHierarchy,
     },
     {
       key: SettingsPermissions.ADMIN_PANEL,
-      label: 'Admin Panel',
+      label: 'Manage Admin Panel',
       type: 'Admin Panel',
       value: role.canUpdateAllSettings,
+      Icon: IconUserCog,
     },
     {
       key: SettingsPermissions.SECURITY,
-      label: 'Security Settings',
+      label: 'Manage Security Settings',
       type: 'Security',
       value: role.canUpdateAllSettings,
+      Icon: IconKey,
     },
   ];
 

packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableRow.tsx

@@ -57,7 +57,9 @@ export const RolePermissionsObjectsTableRow = ({
     <StyledTableRow key={permission.key}>
       <StyledPermissionCell>
         <StyledIconWrapper>
-          <StyledIcon>{permission.icon}</StyledIcon>
+          <StyledIcon>
+            <permission.Icon size={14} />
+          </StyledIcon>
         </StyledIconWrapper>
         <StyledLabel>{permission.label}</StyledLabel>
       </StyledPermissionCell>

packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx

@@ -34,6 +34,12 @@ const StyledTableRow = styled(TableRow)`
   display: flex;
 `;
 
+const StyledIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 type RolePermissionsSettingsTableRowProps = {
   permission: RolePermissionsSettingPermission;
 };
@@ -47,6 +53,9 @@ export const RolePermissionsSettingsTableRow = ({
         <StyledLabel>{permission.label}</StyledLabel>
       </StyledPermissionCell>
       <StyledPermissionCell>
+        <StyledIconContainer>
+          <permission.Icon size={14} />
+        </StyledIconContainer>
         <StyledType>{permission.type}</StyledType>
       </StyledPermissionCell>
       <StyledCheckboxCell>

packages/twenty-front/src/modules/settings/roles/types/RolePermissionsObjectPermission.ts

@@ -1,6 +1,8 @@
+import { IconComponent } from 'twenty-ui';
+
 export type RolePermissionsObjectPermission = {
   key: string;
   label: string;
-  icon: React.ReactNode;
   value: boolean;
+  Icon: IconComponent;
 };

packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts

@@ -1,6 +1,9 @@
+import { IconComponent } from 'twenty-ui';
+
 export type RolePermissionsSettingPermission = {
   key: string;
   label: string;
   type: string;
   value: boolean;
+  Icon: IconComponent;
 };

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -12,10 +12,10 @@ export {
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowUp,
-  IconArrowUpRight,
   IconArrowsDiagonal,
   IconArrowsVertical,
+  IconArrowUp,
+  IconArrowUpRight,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -44,8 +44,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronUp,
   IconChevronsRight,
+  IconChevronUp,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -156,6 +156,7 @@ export {
   IconHeart,
   IconHeartOff,
   IconHelpCircle,
+  IconHierarchy,
   IconHierarchy2,
   IconHistory,
   IconHistoryToggle,
@@ -269,6 +270,7 @@ export {
   IconUpload,
   IconUser,
   IconUserCircle,
+  IconUserCog,
   IconUserPin,
   IconUserPlus,
   IconUsers,