Refactor icons passed as props with the new way (#1492)

* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/AppNavbar.tsx

@@ -1,5 +1,4 @@
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useTheme } from '@emotion/react';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { Favorites } from '@/favorites/components/Favorites';
@@ -21,7 +20,6 @@ import NavTitle from '@/ui/navbar/components/NavTitle';
 import { measureTotalFrameLoad } from './utils/measureTotalFrameLoad';
 
 export function AppNavbar() {
-  const theme = useTheme();
   const currentPath = useLocation().pathname;
   const { openCommandMenu } = useCommandMenu();
 
@@ -35,7 +33,7 @@ export function AppNavbar() {
         <MainNavbar>
           <NavItem
             label="Search"
-            icon={<IconSearch size={theme.icon.size.md} />}
+            Icon={IconSearch}
             onClick={() => {
               openCommandMenu();
             }}
@@ -43,26 +41,26 @@ export function AppNavbar() {
           <NavItem
             label="Notifications"
             to="/inbox"
-            icon={<IconBell size={theme.icon.size.md} />}
+            Icon={IconBell}
             soon={true}
           />
           <NavItem
             label="Settings"
             to="/settings/profile"
-            icon={<IconSettings size={theme.icon.size.md} />}
+            Icon={IconSettings}
           />
           <NavItem
             label="Tasks"
             to="/tasks"
             active={currentPath === '/tasks'}
-            icon={<IconCheckbox size={theme.icon.size.md} />}
+            Icon={IconCheckbox}
           />
           <Favorites />
           <NavTitle label="Workspace" />
           <NavItem
             label="Companies"
             to="/companies"
-            icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
+            Icon={IconBuildingSkyscraper}
             active={currentPath === '/companies'}
           />
           <NavItem
@@ -73,7 +71,7 @@ export function AppNavbar() {
 
               navigate('/people');
             }}
-            icon={<IconUser size={theme.icon.size.md} />}
+            Icon={IconUser}
             active={currentPath === '/people'}
           />
           <NavItem
@@ -84,7 +82,7 @@ export function AppNavbar() {
 
               navigate('/opportunities');
             }}
-            icon={<IconTargetArrow size={theme.icon.size.md} />}
+            Icon={IconTargetArrow}
             active={currentPath === '/opportunities'}
           />
         </MainNavbar>

front/src/modules/activities/components/ActivityCreateButton.tsx

@@ -1,5 +1,3 @@
-import { useTheme } from '@emotion/react';
-
 import { Button } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon/index';
@@ -15,21 +13,12 @@ export function ActivityCreateButton({
   onTaskClick,
   onActivityClick,
 }: ActivityCreateButtonProps) {
-  const theme = useTheme();
   return (
     <ButtonGroup variant={'secondary'}>
+      <Button Icon={IconNotes} title="Note" onClick={onNoteClick} />
+      <Button Icon={IconCheckbox} title="Task" onClick={onTaskClick} />
       <Button
-        icon={<IconNotes size={theme.icon.size.sm} />}
+        Icon={IconTimelineEvent}
-        title="Note"
-        onClick={onNoteClick}
-      />
-      <Button
-        icon={<IconCheckbox size={theme.icon.size.sm} />}
-        title="Task"
-        onClick={onTaskClick}
-      />
-      <Button
-        icon={<IconTimelineEvent size={theme.icon.size.sm} />}
         title="Activity"
         soon={true}
         onClick={onActivityClick}

front/src/modules/activities/notes/components/Notes.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -48,7 +47,6 @@ const StyledNotesContainer = styled.div`
 
 export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
   const { notes } = useNotes(entity);
-  const theme = useTheme();
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
@@ -58,7 +56,7 @@ export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
         <StyledEmptyTaskGroupTitle>No note yet</StyledEmptyTaskGroupTitle>
         <StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
         <Button
-          icon={<IconNotes size={theme.icon.size.sm} />}
+          Icon={IconNotes}
           title="New note"
           variant="secondary"
           onClick={() => openCreateActivity(ActivityType.Note, [entity])}
@@ -74,7 +72,7 @@ export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
         notes={notes ?? []}
         button={
           <Button
-            icon={<IconNotes size={theme.icon.size.md} />}
+            Icon={IconNotes}
             size="small"
             variant="secondary"
             title="Add note"

front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -33,7 +33,7 @@ export function ActivityActionBar({ activityId }: OwnProps) {
 
   return (
     <LightIconButton
-      icon={<IconTrash />}
+      Icon={IconTrash}
       onClick={deleteActivity}
       accent="tertiary"
       size="medium"

front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -1,5 +1,3 @@
-import { useTheme } from '@emotion/react';
-
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { Button } from '@/ui/button/components/Button';
@@ -11,7 +9,6 @@ export function AddTaskButton({
 }: {
   entity?: ActivityTargetableEntity;
 }) {
-  const theme = useTheme();
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   if (!entity) {
@@ -20,7 +17,7 @@ export function AddTaskButton({
 
   return (
     <Button
-      icon={<IconPlus size={theme.icon.size.md} />}
+      Icon={IconPlus}
       size="small"
       variant="secondary"
       title="Add task"

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -60,7 +59,6 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
     unscheduledTasks,
     completedTasks,
   } = useTasks(entity);
-  const theme = useTheme();
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
@@ -81,7 +79,7 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
         <StyledEmptyTaskGroupTitle>No task yet</StyledEmptyTaskGroupTitle>
         <StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
         <Button
-          icon={<IconCheckbox size={theme.icon.size.sm} />}
+          Icon={IconCheckbox}
           title="New task"
           variant={'secondary'}
           onClick={() =>

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -60,7 +60,6 @@ export function SignInUpForm() {
     },
     workspace,
   } = useSignInUp();
-  const theme = useTheme();
 
   const buttonTitle = useMemo(() => {
     if (signInUpStep === SignInUpStep.Init) {
@@ -84,6 +83,8 @@ export function SignInUpForm() {
       : 'Sign up to Twenty';
   }, [signInUpMode, workspace?.displayName]);
 
+  const theme = useTheme();
+
   return (
     <>
       <AnimatedEaseIn>
@@ -94,7 +95,12 @@ export function SignInUpForm() {
         {authProviders.google && (
           <>
             <MainButton
-              icon={<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />}
+              Icon={() => (
+                <IconBrandGoogle
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.lg}
+                />
+              )}
               title="Continue with Google"
               onClick={signInWithGoogle}
               fullWidth

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -119,7 +119,7 @@ export function CommandMenu() {
                   key={cmd.label}
                   to={cmd.to}
                   label={cmd.label}
-                  icon={cmd.icon}
+                  Icon={cmd.Icon}
                   shortcuts={cmd.shortcuts || []}
                   onClick={cmd.onCommandClick}
                 />
@@ -132,7 +132,7 @@ export function CommandMenu() {
               key={matchingCreateCommand.label}
               to={matchingCreateCommand.to}
               label={matchingCreateCommand.label}
-              icon={matchingCreateCommand.icon}
+              Icon={matchingCreateCommand.Icon}
               shortcuts={matchingCreateCommand.shortcuts || []}
               onClick={matchingCreateCommand.onCommandClick}
             />
@@ -155,14 +155,14 @@ export function CommandMenu() {
                 to={`person/${person.id}`}
                 label={person.displayName}
                 key={person.id}
-                icon={
+                Icon={() => (
                   <Avatar
                     avatarUrl={null}
-                    size="sm"
-                    colorId={person.id}
                     placeholder={person.displayName}
+                    colorId={person.id}
+                    type="rounded"
                   />
-                }
+                )}
               />
             ))}
           </StyledGroup>
@@ -174,14 +174,13 @@ export function CommandMenu() {
                 to={`companies/${company.id}`}
                 label={company.name}
                 key={company.id}
-                icon={
+                Icon={() => (
                   <Avatar
                     avatarUrl={getLogoUrlFromDomainName(company.domainName)}
-                    size="sm"
                     colorId={company.id}
                     placeholder={company.name}
                   />
-                }
+                )}
               />
             ))}
           </StyledGroup>
@@ -193,7 +192,7 @@ export function CommandMenu() {
                 onClick={() => openActivityRightDrawer(activity.id)}
                 label={activity.title ?? ''}
                 key={activity.id}
-                icon={<IconNotes />}
+                Icon={IconNotes}
               />
             ))}
           </StyledGroup>

front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
-import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { IconArrowUpRight } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { MenuItemCommand } from '@/ui/menu-item/components/MenuItemCommand';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
 
-import {
+export type CommandMenuItemProps = {
-  StyledIconAndLabelContainer,
-  StyledIconContainer,
-  StyledMenuItem,
-  StyledShortCut,
-  StyledShortcutsContainer,
-} from './CommandMenuStyles';
-
-export type OwnProps = {
   label: string;
   to?: string;
   key: string;
   onClick?: () => void;
-  icon?: ReactNode;
+  Icon?: IconComponent;
   shortcuts?: Array<string>;
 };
 
@@ -27,14 +20,14 @@ export function CommandMenuItem({
   label,
   to,
   onClick,
-  icon,
+  Icon,
   shortcuts,
-}: OwnProps) {
+}: CommandMenuItemProps) {
   const navigate = useNavigate();
   const { closeCommandMenu } = useCommandMenu();
 
-  if (to && !icon) {
+  if (to && !Icon) {
-    icon = <IconArrowUpRight />;
+    Icon = IconArrowUpRight;
   }
 
   const onItemClick = () => {
@@ -51,23 +44,11 @@ export function CommandMenuItem({
   };
 
   return (
-    <StyledMenuItem onSelect={onItemClick}>
+    <MenuItemCommand
-      <StyledIconAndLabelContainer>
+      LeftIcon={Icon}
-        <StyledIconContainer>{icon}</StyledIconContainer>
+      text={label}
-        {label}
+      command={shortcuts ? shortcuts.join(' then ') : ''}
-      </StyledIconAndLabelContainer>
+      onClick={onItemClick}
-      <StyledShortcutsContainer>
+    />
-        {shortcuts &&
-          shortcuts.map((shortcut, index) => {
-            const prefix = index > 0 ? 'then' : '';
-            return (
-              <React.Fragment key={index}>
-                {prefix}
-                <StyledShortCut>{shortcut}</StyledShortCut>
-              </React.Fragment>
-            );
-          })}
-      </StyledShortcutsContainer>
-    </StyledMenuItem>
   );
 }

front/src/modules/command-menu/types/Command.ts

@@ -1,3 +1,5 @@
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 export enum CommandType {
   Navigate = 'Navigate',
   Create = 'Create',
@@ -7,7 +9,7 @@ export type Command = {
   to: string;
   label: string;
   type: CommandType.Navigate | CommandType.Create;
-  icon?: JSX.Element;
+  Icon?: IconComponent;
   shortcuts?: string[];
   onCommandClick?: () => void;
 };

front/src/modules/companies/components/AddPersonToCompany.tsx

@@ -123,7 +123,7 @@ export function AddPersonToCompany({
       <StyledContainer>
         <div ref={refs.setReference}>
           <LightIconButton
-            icon={<IconPlus />}
+            Icon={IconPlus}
             onClick={handleOpenPicker}
             size="small"
             accent="tertiary"

front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx

@@ -25,19 +25,19 @@ export function useCompanyTableActionBarEntries() {
       setActionBarEntries([
         <ActionBarEntry
           label="Note"
-          icon={<IconNotes size={16} />}
+          Icon={IconNotes}
           onClick={() => handleActivityClick(ActivityType.Note)}
           key="note"
         />,
         <ActionBarEntry
           label="Task"
-          icon={<IconCheckbox size={16} />}
+          Icon={IconCheckbox}
           onClick={() => handleActivityClick(ActivityType.Task)}
           key="task"
         />,
         <ActionBarEntry
           label="Delete"
-          icon={<IconTrash size={16} />}
+          Icon={IconTrash}
           type="danger"
           onClick={() => deleteSelectedCompanies()}
           key="delete"

front/src/modules/favorites/components/Favorites.tsx

@@ -28,32 +28,28 @@ export function Favorites() {
             <NavItem
               key={id}
               label={`${person.firstName} ${person.lastName}`}
-              icon={
+              Icon={() => (
                 <Avatar
-                  key={id}
                   colorId={person.id}
                   avatarUrl={person.avatarUrl ?? ''}
                   type="rounded"
                   placeholder={`${person.firstName} ${person.lastName}`}
-                  size="md"
                 />
-              }
+              )}
               to={`/person/${person.id}`}
             />
-          )) ||
+          )) ??
           (company && (
             <NavItem
               key={id}
               label={company.name}
-              icon={
+              Icon={() => (
                 <Avatar
-                  key={id}
                   avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
                   type="squared"
                   placeholder={company.name}
-                  size="md"
                 />
-              }
+              )}
               to={`/companies/${company.id}`}
             />
           )),

front/src/modules/people/components/PeopleCard.tsx

@@ -161,7 +161,7 @@ export function PeopleCard({
           <FloatingIconButton
             onClick={handleToggleOptions}
             size="small"
-            icon={<IconDotsVertical />}
+            Icon={IconDotsVertical}
           />
           {isOptionsOpen && (
             <StyledDropdownMenu ref={refs.setFloating} style={floatingStyles}>

front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx

@@ -64,19 +64,19 @@ export function usePersonTableActionBarEntries() {
       setActionBarEntries([
         <ActionBarEntry
           label="Note"
-          icon={<IconNotes size={16} />}
+          Icon={IconNotes}
           onClick={() => handleActivityClick(ActivityType.Note)}
           key="note"
         />,
         <ActionBarEntry
           label="Task"
-          icon={<IconCheckbox size={16} />}
+          Icon={IconCheckbox}
           onClick={() => handleActivityClick(ActivityType.Task)}
           key="task"
         />,
         <ActionBarEntry
           label="Delete"
-          icon={<IconTrash size={16} />}
+          Icon={IconTrash}
           type="danger"
           onClick={handleDeleteClick}
           key="delete"

front/src/modules/pipeline/components/PipelineAddButton.tsx

@@ -56,7 +56,7 @@ export function PipelineAddButton() {
       dropdownKey="add-pipeline-progress"
       buttonComponents={
         <IconButton
-          icon={<IconPlus size={16} />}
+          Icon={IconPlus}
           size="medium"
           dataTestId="add-company-progress-button"
           accent="default"

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { useMatch, useNavigate, useResolvedPath } from 'react-router-dom';
-import { useTheme } from '@emotion/react';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
@@ -16,7 +15,6 @@ import NavTitle from '@/ui/navbar/components/NavTitle';
 import SubMenuNavbar from '@/ui/navbar/components/SubMenuNavbar';
 
 export function SettingsNavbar() {
-  const theme = useTheme();
   const navigate = useNavigate();
 
   const { signOut } = useAuth();
@@ -32,7 +30,7 @@ export function SettingsNavbar() {
       <NavItem
         label="Profile"
         to="/settings/profile"
-        icon={<IconUserCircle size={theme.icon.size.md} />}
+        Icon={IconUserCircle}
         active={
           !!useMatch({
             path: useResolvedPath('/settings/profile').pathname,
@@ -43,7 +41,7 @@ export function SettingsNavbar() {
       <NavItem
         label="Experience"
         to="/settings/profile/experience"
-        icon={<IconColorSwatch size={theme.icon.size.md} />}
+        Icon={IconColorSwatch}
         active={
           !!useMatch({
             path: useResolvedPath('/settings/profile/experience').pathname,
@@ -55,7 +53,7 @@ export function SettingsNavbar() {
       <NavItem
         label="General"
         to="/settings/workspace"
-        icon={<IconSettings size={theme.icon.size.md} />}
+        Icon={IconSettings}
         active={
           !!useMatch({
             path: useResolvedPath('/settings/workspace').pathname,
@@ -66,7 +64,7 @@ export function SettingsNavbar() {
       <NavItem
         label="Members"
         to="/settings/workspace-members"
-        icon={<IconUsers size={theme.icon.size.md} />}
+        Icon={IconUsers}
         active={
           !!useMatch({
             path: useResolvedPath('/settings/workspace-members').pathname,
@@ -75,11 +73,7 @@ export function SettingsNavbar() {
         }
       />
       <NavTitle label="Other" />
-      <NavItem
+      <NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
-        label="Logout"
-        onClick={handleLogout}
-        icon={<IconLogout size={theme.icon.size.md} />}
-      />
     </SubMenuNavbar>
   );
 }

front/src/modules/spreadsheet-import/components/ContinueButton.tsx

@@ -29,7 +29,7 @@ export const ContinueButton = ({
 }: ContinueButtonProps) => (
   <StyledFooter>
     <StyledButton
-      icon={isLoading && <CircularProgressBar size={16} barWidth={2} />}
+      Icon={isLoading ? CircularProgressBar : undefined}
       title={title}
       onClick={!isLoading ? onContinue : undefined}
     />

front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -52,7 +52,7 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
 
   return (
     <StyledCloseButtonContainer>
-      <IconButton icon={<IconX />} onClick={handleClose} />
+      <IconButton Icon={IconX} onClick={handleClose} />
     </StyledCloseButtonContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -205,7 +205,7 @@ export const ValidationStep = <T extends string>({
             </StyledErrorToggleDescription>
           </StyledErrorToggle>
           <Button
-            icon={<IconTrash />}
+            Icon={IconTrash}
             title="Remove"
             accent="danger"
             onClick={deleteSelectedRows}

front/src/modules/ui/action-bar/components/ActionBarEntry.tsx

@@ -1,8 +1,10 @@
-import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 type OwnProps = {
-  icon: ReactNode;
+  Icon: IconComponent;
   label: string;
   type?: 'standard' | 'danger';
   onClick: () => void;
@@ -39,13 +41,14 @@ const StyledButtonLabel = styled.div`
 
 export function ActionBarEntry({
   label,
-  icon,
+  Icon,
   type = 'standard',
   onClick,
 }: OwnProps) {
+  const theme = useTheme();
   return (
     <StyledButton type={type} onClick={onClick}>
-      {icon}
+      {Icon && <Icon size={theme.icon.size.md} />}
       <StyledButtonLabel>{label}</StyledButtonLabel>
     </StyledButton>
   );

front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx

@@ -16,7 +16,7 @@ export function useBoardActionBarEntries() {
       setActionBarEntries([
         <ActionBarEntry
           label="Delete"
-          icon={<IconTrash size={16} />}
+          Icon={IconTrash}
           type="danger"
           onClick={deleteSelectedBoardCards}
           key="delete"

front/src/modules/ui/button/components/Button.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { SoonPill } from '@/ui/pill/components/SoonPill';
 
 export type ButtonSize = 'medium' | 'small';
@@ -11,7 +12,7 @@ export type ButtonAccent = 'default' | 'blue' | 'danger';
 
 export type ButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   title?: string;
   fullWidth?: boolean;
   variant?: ButtonVariant;
@@ -278,7 +279,7 @@ const StyledButton = styled.button<
 
 export function Button({
   className,
-  icon: initialIcon,
+  Icon,
   title,
   fullWidth = false,
   variant = 'primary',
@@ -290,15 +291,7 @@ export function Button({
   focus = false,
   onClick,
 }: ButtonProps) {
-  const icon = useMemo(() => {
+  const theme = useTheme();
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 14,
-    });
-  }, [initialIcon]);
 
   return (
     <StyledButton
@@ -312,7 +305,7 @@ export function Button({
       className={className}
       onClick={onClick}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
       {soon && <SoonPill />}
     </StyledButton>

front/src/modules/ui/button/components/FloatingButton.tsx

@@ -1,14 +1,15 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 export type FloatingButtonSize = 'small' | 'medium';
 export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
 
 export type FloatingButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   title?: string;
   size?: FloatingButtonSize;
   position?: FloatingButtonPosition;
@@ -80,7 +81,7 @@ const StyledButton = styled.button<
 
 export function FloatingButton({
   className,
-  icon: initialIcon,
+  Icon,
   title,
   size = 'small',
   applyBlur = true,
@@ -88,16 +89,7 @@ export function FloatingButton({
   disabled = false,
   focus = false,
 }: FloatingButtonProps) {
-  const icon = useMemo(() => {
+  const theme = useTheme();
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 14,
-    });
-  }, [initialIcon]);
-
   return (
     <StyledButton
       disabled={disabled}
@@ -107,7 +99,7 @@ export function FloatingButton({
       applyShadow={applyShadow}
       className={className}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
     </StyledButton>
   );

front/src/modules/ui/button/components/FloatingIconButton.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
 export type FloatingIconButtonPosition =
@@ -12,7 +13,7 @@ export type FloatingIconButtonPosition =
 
 export type FloatingIconButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   size?: FloatingIconButtonSize;
   position?: FloatingIconButtonPosition;
   applyShadow?: boolean;
@@ -100,7 +101,7 @@ const StyledButton = styled.button<
 
 export function FloatingIconButton({
   className,
-  icon: initialIcon,
+  Icon,
   size = 'small',
   position = 'standalone',
   applyShadow = true,
@@ -109,16 +110,7 @@ export function FloatingIconButton({
   focus = false,
   onClick,
 }: FloatingIconButtonProps) {
-  const icon = useMemo(() => {
+  const theme = useTheme();
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 16,
-    });
-  }, [initialIcon]);
-
   return (
     <StyledButton
       disabled={disabled}
@@ -130,7 +122,7 @@ export function FloatingIconButton({
       position={position}
       onClick={onClick}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.md} />}
     </StyledButton>
   );
 }

front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx

@@ -1,5 +1,4 @@
 import type { MouseEvent } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import type { IconComponent } from '@/ui/icon/types/IconComponent';
@@ -34,8 +33,6 @@ export function FloatingIconButtonGroup({
   iconButtons,
   size,
 }: FloatingIconButtonGroupProps) {
-  const theme = useTheme();
-
   return (
     <StyledFloatingIconButtonGroupContainer>
       {iconButtons.map(({ Icon, onClick }, index) => {
@@ -50,7 +47,7 @@ export function FloatingIconButtonGroup({
           <FloatingIconButton
             applyBlur={false}
             applyShadow={false}
-            icon={<Icon size={theme.icon.size.sm} />}
+            Icon={Icon}
             onClick={onClick}
             position={position}
             size={size}

front/src/modules/ui/button/components/IconButton.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 export type IconButtonSize = 'medium' | 'small';
 export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
@@ -10,7 +11,7 @@ export type IconButtonAccent = 'default' | 'blue' | 'danger';
 
 export type IconButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   variant?: IconButtonVariant;
   size?: IconButtonSize;
   position?: IconButtonPosition;
@@ -270,7 +271,7 @@ const StyledButton = styled.button<
 
 export function IconButton({
   className,
-  icon: initialIcon,
+  Icon,
   variant = 'primary',
   size = 'medium',
   accent = 'default',
@@ -280,16 +281,7 @@ export function IconButton({
   dataTestId,
   onClick,
 }: IconButtonProps) {
-  const icon = useMemo(() => {
+  const theme = useTheme();
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return <></>;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 16,
-    });
-  }, [initialIcon]);
-
   return (
     <StyledButton
       data-testid={dataTestId}
@@ -302,7 +294,7 @@ export function IconButton({
       className={className}
       onClick={onClick}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.md} />}
     </StyledButton>
   );
 }

front/src/modules/ui/button/components/IconButtonGroup.tsx

@@ -1,11 +1,13 @@
 import type { MouseEvent } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import type { IconComponent } from '@/ui/icon/types/IconComponent';
 
-import { Button } from './Button';
+import {
-import { IconButtonPosition, type IconButtonProps } from './IconButton';
+  IconButton,
+  IconButtonPosition,
+  type IconButtonProps,
+} from './IconButton';
 
 const StyledIconButtonGroupContainer = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -28,8 +30,6 @@ export function IconButtonGroup({
   size,
   variant,
 }: IconButtonGroupProps) {
-  const theme = useTheme();
-
   return (
     <StyledIconButtonGroupContainer>
       {iconButtons.map(({ Icon, onClick }, index) => {
@@ -41,9 +41,9 @@ export function IconButtonGroup({
             : 'middle';
 
         return (
-          <Button
+          <IconButton
             accent={accent}
-            icon={<Icon size={theme.icon.size.sm} />}
+            Icon={Icon}
             onClick={onClick}
             position={position}
             size={size}

front/src/modules/ui/button/components/LightIconButton.tsx

@@ -1,14 +1,15 @@
-import React, { MouseEvent, useMemo } from 'react';
+import React, { MouseEvent } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { TablerIconsProps } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';
 
 export type LightIconButtonProps = {
   className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   title?: string;
   size?: LightIconButtonSize;
   accent?: LightIconButtonAccent;
@@ -79,7 +80,7 @@ const StyledButton = styled.button<
 
 export function LightIconButton({
   className,
-  icon: initialIcon,
+  Icon,
   active = false,
   size = 'small',
   accent = 'secondary',
@@ -87,16 +88,7 @@ export function LightIconButton({
   focus = false,
   onClick,
 }: LightIconButtonProps) {
-  const icon = useMemo(() => {
+  const theme = useTheme();
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 16,
-    });
-  }, [initialIcon]);
-
   return (
     <StyledButton
       onClick={onClick}
@@ -107,7 +99,7 @@ export function LightIconButton({
       size={size}
       active={active}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.md} />}
     </StyledButton>
   );
 }

front/src/modules/ui/button/components/MainButton.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 type Variant = 'primary' | 'secondary';
 
 type Props = {
-  icon?: React.ReactNode;
   title: string;
   fullWidth?: boolean;
   variant?: Variant;
@@ -85,16 +87,21 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
   }};
 `;
 
+type MainButtonProps = Props & {
+  Icon?: IconComponent;
+};
+
 export function MainButton({
-  icon,
+  Icon,
   title,
   fullWidth = false,
   variant = 'primary',
   ...props
-}: Props) {
+}: MainButtonProps) {
+  const theme = useTheme();
   return (
     <StyledButton fullWidth={fullWidth} variant={variant} {...props}>
-      {icon}
+      {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
     </StyledButton>
   );

front/src/modules/ui/button/components/RoundedIconButton.tsx

@@ -1,5 +1,8 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 const StyledIconButton = styled.button`
   align-items: center;
   background: ${({ theme }) => theme.color.blue};
@@ -26,9 +29,16 @@ const StyledIconButton = styled.button`
   width: 20px;
 `;
 
-export function RoundedIconButton({
+type RoundedIconButtonProps = {
-  icon,
+  Icon: IconComponent;
-  ...props
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-}: { icon: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+
-  return <StyledIconButton {...props}>{icon}</StyledIconButton>;
+export function RoundedIconButton({ Icon, ...props }: RoundedIconButtonProps) {
+  const theme = useTheme();
+
+  return (
+    <StyledIconButton {...props}>
+      {<Icon size={theme.icon.size.md} />}
+    </StyledIconButton>
+  );
 }

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -31,14 +31,14 @@ export const Default: Story = {
     fullWidth: false,
     soon: false,
     position: 'standalone',
-    icon: <IconSearch />,
+    Icon: IconSearch,
     className: '',
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: Story = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -110,7 +110,7 @@ export const Catalog: Story = {
 };
 
 export const SoonCatalog: Story = {
-  args: { title: 'Filter', icon: <IconSearch />, soon: true },
+  args: { title: 'Filter', Icon: IconSearch, soon: true },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -182,7 +182,7 @@ export const SoonCatalog: Story = {
 };
 
 export const PositionCatalog: Story = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -258,7 +258,7 @@ export const PositionCatalog: Story = {
 };
 
 export const FullWidth: Story = {
-  args: { title: 'Filter', icon: <IconSearch />, fullWidth: true },
+  args: { title: 'Filter', Icon: IconSearch, fullWidth: true },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -269,7 +269,7 @@ export const FullWidth: Story = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
-    icon: { control: false },
+    Icon: { control: false },
   },
   decorators: [ComponentDecorator],
 };

front/src/modules/ui/button/components/__stories__/ButtonGroup.stories.tsx

@@ -21,9 +21,9 @@ export const Default: Story = {
     variant: 'primary',
     accent: 'danger',
     children: [
-      <Button icon={<IconNotes />} title="Note" />,
+      <Button Icon={IconNotes} title="Note" />,
-      <Button icon={<IconCheckbox />} title="Task" />,
+      <Button Icon={IconCheckbox} title="Task" />,
-      <Button icon={<IconTimelineEvent />} title="Activity" />,
+      <Button Icon={IconTimelineEvent} title="Activity" />,
     ],
   },
   argTypes: {
@@ -35,9 +35,9 @@ export const Default: Story = {
 export const Catalog: Story = {
   args: {
     children: [
-      <Button icon={<IconNotes />} title="Note" />,
+      <Button Icon={IconNotes} title="Note" />,
-      <Button icon={<IconCheckbox />} title="Task" />,
+      <Button Icon={IconCheckbox} title="Task" />,
-      <Button icon={<IconTimelineEvent />} title="Activity" />,
+      <Button Icon={IconTimelineEvent} title="Activity" />,
     ],
   },
   argTypes: {

front/src/modules/ui/button/components/__stories__/FloatingButton.stories.tsx

@@ -23,16 +23,16 @@ export const Default: Story = {
     applyBlur: true,
     applyShadow: true,
     position: 'standalone',
-    icon: <IconSearch />,
+    Icon: IconSearch,
   },
   argTypes: {
-    icon: { control: false },
+    Icon: { control: false },
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: Story = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     size: { control: false },
     disabled: { control: false },

front/src/modules/ui/button/components/__stories__/FloatingButtonGroup.stories.tsx

@@ -19,9 +19,9 @@ export const Default: Story = {
   args: {
     size: 'small',
     children: [
-      <FloatingButton icon={<IconNotes />} />,
+      <FloatingButton Icon={IconNotes} />,
-      <FloatingButton icon={<IconCheckbox />} />,
+      <FloatingButton Icon={IconCheckbox} />,
-      <FloatingButton icon={<IconTimelineEvent />} />,
+      <FloatingButton Icon={IconTimelineEvent} />,
     ],
   },
   argTypes: {
@@ -33,9 +33,9 @@ export const Default: Story = {
 export const Catalog: Story = {
   args: {
     children: [
-      <FloatingButton icon={<IconNotes />} />,
+      <FloatingButton Icon={IconNotes} />,
-      <FloatingButton icon={<IconCheckbox />} />,
+      <FloatingButton Icon={IconCheckbox} />,
-      <FloatingButton icon={<IconTimelineEvent />} />,
+      <FloatingButton Icon={IconTimelineEvent} />,
     ],
   },
   argTypes: {

front/src/modules/ui/button/components/__stories__/FloatingIconButton.stories.tsx

@@ -25,16 +25,16 @@ export const Default: Story = {
     applyBlur: true,
     applyShadow: true,
     position: 'standalone',
-    icon: <IconSearch />,
+    Icon: IconSearch,
   },
   argTypes: {
-    icon: { control: false },
+    Icon: { control: false },
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: Story = {
-  args: { icon: <IconSearch /> },
+  args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },
     disabled: { control: false },

front/src/modules/ui/button/components/__stories__/IconButton.stories.tsx

@@ -28,20 +28,20 @@ export const Default: Story = {
     disabled: false,
     focus: false,
     position: 'standalone',
-    icon: <IconSearch />,
+    Icon: IconSearch,
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: Story = {
-  args: { icon: <IconSearch /> },
+  args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },
     variant: { control: false },
     focus: { control: false },
     accent: { control: false },
     disabled: { control: false },
-    icon: { control: false },
+    Icon: { control: false },
     position: { control: false },
   },
   parameters: {
@@ -104,7 +104,7 @@ export const Catalog: Story = {
 };
 
 export const PositionCatalog: Story = {
-  args: { icon: <IconSearch /> },
+  args: { Icon: IconSearch },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -112,7 +112,7 @@ export const PositionCatalog: Story = {
     accent: { control: false },
     disabled: { control: false },
     position: { control: false },
-    icon: { control: false },
+    Icon: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'] },

front/src/modules/ui/button/components/__stories__/LightIconButton.stories.tsx

@@ -25,16 +25,16 @@ export const Default: Story = {
     disabled: false,
     active: false,
     focus: false,
-    icon: <IconSearch />,
+    Icon: IconSearch,
   },
   argTypes: {
-    icon: { control: false },
+    Icon: { control: false },
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: Story = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
   argTypes: {
     accent: { control: false },
     disabled: { control: false },

front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx

@@ -13,15 +13,6 @@ const meta: Meta<typeof MainButton> = {
   title: 'UI/Button/MainButton',
   component: MainButton,
   decorators: [ComponentDecorator],
-  argTypes: {
-    icon: {
-      type: 'boolean',
-      mapping: {
-        true: <IconBrandGoogle size={16} stroke={4} />,
-        false: undefined,
-      },
-    },
-  },
   args: { title: 'A primary Button', onClick: clickJestFn },
 };
 
@@ -41,7 +32,7 @@ export const Default: Story = {
 };
 
 export const WithIcon: Story = {
-  args: { icon: true },
+  args: { Icon: IconBrandGoogle },
 };
 
 export const DisabledWithIcon: Story = {

front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -19,8 +19,8 @@ type Story = StoryObj<typeof RoundedIconButton>;
 
 export const Default: Story = {
   decorators: [ComponentDecorator],
-  argTypes: { icon: { control: false } },
+  argTypes: { Icon: { control: false } },
-  args: { onClick: clickJestFn, icon: <IconArrowRight size={15} /> },
+  args: { onClick: clickJestFn, Icon: IconArrowRight },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx

@@ -14,7 +14,7 @@ export function EditableFieldEditButton() {
     <FloatingIconButton
       size="small"
       onClick={handleClick}
-      icon={<IconPencil />}
+      Icon={IconPencil}
       data-testid="editable-field-edit-mode-container"
     />
   );

front/src/modules/ui/input/autosize-text/components/AutosizeTextInput.tsx

@@ -198,7 +198,7 @@ export function AutosizeTextInput({
             <StyledBottomRightRoundedIconButton>
               <RoundedIconButton
                 onClick={handleOnClickSendButton}
-                icon={<IconArrowRight size={15} />}
+                Icon={IconArrowRight}
                 disabled={isSendButtonDisabled}
               />
             </StyledBottomRightRoundedIconButton>

front/src/modules/ui/input/image/components/ImageInput.tsx

@@ -135,7 +135,7 @@ export function ImageInput({
           />
           {isUploading && onAbort ? (
             <Button
-              icon={<IconX />}
+              Icon={IconX}
               onClick={onAbort}
               variant="secondary"
               title="Abort"
@@ -144,7 +144,7 @@ export function ImageInput({
             />
           ) : (
             <Button
-              icon={<IconUpload />}
+              Icon={IconUpload}
               onClick={onUploadButtonClick}
               variant="secondary"
               title="Upload"
@@ -153,7 +153,7 @@ export function ImageInput({
             />
           )}
           <Button
-            icon={<IconTrash />}
+            Icon={IconTrash}
             onClick={onRemove}
             variant="secondary"
             title="Remove"

front/src/modules/ui/layout/components/PageAddButton.tsx

@@ -8,7 +8,7 @@ type OwnProps = {
 export function PageAddButton({ onClick }: OwnProps) {
   return (
     <IconButton
-      icon={<IconPlus size={16} />}
+      Icon={IconPlus}
       size="medium"
       variant="secondary"
       data-testid="add-button"

front/src/modules/ui/layout/components/PageFavoriteButton.tsx

@@ -9,7 +9,7 @@ type OwnProps = {
 export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
   return (
     <IconButton
-      icon={<IconHeart size={16} />}
+      Icon={IconHeart}
       size="medium"
       variant="secondary"
       data-testid="add-button"

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -1,12 +1,13 @@
-import { type ComponentProps, type ReactNode, useCallback } from 'react';
+import { type ComponentProps, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { IconButton } from '@/ui/button/components/IconButton';
+import { IconButton, IconButtonSize } from '@/ui/button/components/IconButton';
 import { IconChevronLeft } from '@/ui/icon/index';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
-import { navbarIconSize } from '@/ui/navbar/constants';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
@@ -63,28 +64,27 @@ const StyledPageActionContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = ComponentProps<'div'> & {
+type PageHeaderProps = ComponentProps<'div'> & {
   title: string;
   hasBackButton?: boolean;
-  icon: ReactNode;
+  Icon: IconComponent;
   children?: JSX.Element | JSX.Element[];
 };
 
 export function PageHeader({
   title,
   hasBackButton,
-  icon,
+  Icon,
   children,
   ...props
-}: OwnProps) {
+}: PageHeaderProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
 
   const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
 
-  const iconSize = useIsMobile()
+  const iconSize: IconButtonSize = useIsMobile() ? 'small' : 'medium';
-    ? navbarIconSize.mobile
+  const theme = useTheme();
-    : navbarIconSize.desktop;
 
   return (
     <StyledTopBarContainer {...props}>
@@ -97,14 +97,15 @@ export function PageHeader({
         {hasBackButton && (
           <StyledTopBarButtonContainer>
             <StyledBackIconButton
-              icon={<IconChevronLeft size={iconSize} />}
+              Icon={IconChevronLeft}
+              size={iconSize}
               onClick={navigateBack}
               variant="tertiary"
             />
           </StyledTopBarButtonContainer>
         )}
         <StyledTopBarIconStyledTitleContainer>
-          {icon}
+          {Icon && <Icon size={theme.icon.size.md} />}
           <StyledTitleContainer data-testid="top-bar-title">
             <OverflowingTextWithTooltip text={title} />
           </StyledTitleContainer>

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -1,14 +1,16 @@
+import { JSX } from 'react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { PageHeader } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
-type OwnProps = {
+type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
   title: string;
-  icon: React.ReactNode;
+  Icon: IconComponent;
 };
 
 const StyledContainer = styled.div<{ isMobile: boolean }>`
@@ -18,12 +20,16 @@ const StyledContainer = styled.div<{ isMobile: boolean }>`
   width: 100%;
 `;
 
-export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
+export function SubMenuTopBarContainer({
+  children,
+  title,
+  Icon,
+}: SubMenuTopBarContainerProps) {
   const isMobile = useIsMobile();
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <PageHeader title={title} icon={icon} />}
+      {isMobile && <PageHeader title={title} Icon={Icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -37,7 +37,7 @@ export function ShowPageAddButton({
         dropdownKey="add-show-page"
         buttonComponents={
           <IconButton
-            icon={<IconPlus size={16} />}
+            Icon={IconPlus}
             size="medium"
             dataTestId="add-showpage-button"
             accent="default"

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Notes } from '@/activities/notes/components/Notes';
@@ -53,31 +52,29 @@ export function ShowPageRightContainer({
   notes,
   emails,
 }: OwnProps) {
-  const theme = useTheme();
-
   const TASK_TABS = [
     {
       id: 'timeline',
       title: 'Timeline',
-      icon: <IconTimelineEvent size={theme.icon.size.md} />,
+      Icon: IconTimelineEvent,
       hide: !timeline,
     },
     {
       id: 'tasks',
       title: 'Tasks',
-      icon: <IconCheckbox size={theme.icon.size.md} />,
+      Icon: IconCheckbox,
       hide: !tasks,
     },
     {
       id: 'notes',
       title: 'Notes',
-      icon: <IconNotes size={theme.icon.size.md} />,
+      Icon: IconNotes,
       hide: !notes,
     },
     {
       id: 'emails',
       title: 'Emails',
-      icon: <IconMail size={theme.icon.size.md} />,
+      Icon: IconMail,
       hide: !emails,
       disabled: true,
     },

front/src/modules/ui/menu-item/components/MenuItemCommand.tsx

@@ -40,7 +40,7 @@ export type MenuItemProps = {
   LeftIcon?: IconComponent;
   text: string;
   command: string;
-  className: string;
+  className?: string;
   onClick?: () => void;
 };
 

front/src/modules/ui/navbar/components/NavCollapseButton.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { IconButton } from '@/ui/button/components/IconButton';
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
@@ -8,8 +9,6 @@ import {
 import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-import { navbarIconSize } from '../constants';
-
 const StyledCollapseButton = styled.button<{
   hide: boolean;
 }>`
@@ -57,9 +56,7 @@ export default function NavCollapseButton({
   const [isNavbarOpened, setIsNavbarOpened] =
     useRecoilState(isNavbarOpenedState);
 
-  const iconSize = useIsMobile()
+  const iconSize = useIsMobile() ? 'small' : 'medium';
-    ? navbarIconSize.mobile
-    : navbarIconSize.desktop;
 
   return (
     <>
@@ -68,14 +65,22 @@ export default function NavCollapseButton({
           hide={hide}
           onClick={() => setIsNavbarOpened(!isNavbarOpened)}
         >
-          <IconLayoutSidebarLeftCollapse size={iconSize} />
+          <IconButton
+            Icon={IconLayoutSidebarLeftCollapse}
+            variant="tertiary"
+            size={iconSize}
+          />
         </StyledCollapseButton>
       ) : (
         <StyledCollapseButton
           hide={hide}
           onClick={() => setIsNavbarOpened(!isNavbarOpened)}
         >
-          <IconLayoutSidebarRightCollapse size={iconSize} />
+          <IconButton
+            Icon={IconLayoutSidebarRightCollapse}
+            variant="tertiary"
+            size={iconSize}
+          />
         </StyledCollapseButton>
       )}
     </>

front/src/modules/ui/navbar/components/NavItem.tsx

@@ -1,19 +1,20 @@
-import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { isNavbarOpenedState } from '../../layout/states/isNavbarOpenedState';
 
-type OwnProps = {
+type NavItemProps = {
   label: string;
   to?: string;
   onClick?: () => void;
+  Icon: IconComponent;
   active?: boolean;
-  icon: ReactNode;
   danger?: boolean;
   soon?: boolean;
 };
@@ -81,7 +82,16 @@ const StyledSoonPill = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-function NavItem({ label, icon, to, onClick, active, danger, soon }: OwnProps) {
+function NavItem({
+  label,
+  Icon,
+  to,
+  onClick,
+  active,
+  danger,
+  soon,
+}: NavItemProps) {
+  const theme = useTheme();
   const navigate = useNavigate();
   const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
 
@@ -107,7 +117,7 @@ function NavItem({ label, icon, to, onClick, active, danger, soon }: OwnProps) {
       danger={danger}
       soon={soon}
     >
-      {icon}
+      {Icon && <Icon size={theme.icon.size.md} />}
       <StyledItemLabel>{label}</StyledItemLabel>
       {soon && <StyledSoonPill>Soon</StyledSoonPill>}
     </StyledItem>

front/src/modules/ui/navbar/components/SupportChat.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -30,7 +29,6 @@ function insertScript({
 }
 
 export default function SupportChat() {
-  const theme = useTheme();
   const currentUser = useRecoilValue(currentUserState);
   const supportChat = useRecoilValue(supportChatState);
   const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
@@ -85,7 +83,7 @@ export default function SupportChat() {
         variant={'tertiary'}
         size={'small'}
         title="Support"
-        icon={<IconHelpCircle size={theme.icon.size.md} />}
+        Icon={IconHelpCircle}
         onClick={() => window.FrontChat?.('show')}
       />
     </StyledButtonContainer>

front/src/modules/ui/navbar/constants/index.ts

@@ -8,9 +8,4 @@ export const leftSubMenuNavbarWidth = {
   desktop: '520px',
 };
 
-export const navbarIconSize = {
-  mobile: 18,
-  desktop: 16,
-};
-
 export const githubLink = 'https://github.com/twentyhq/twenty';

front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -12,7 +12,7 @@ export function RightDrawerTopBarCloseButton() {
 
   return (
     <LightIconButton
-      icon={<IconChevronsRight />}
+      Icon={IconChevronsRight}
       onClick={handleButtonClick}
       size="medium"
       accent="tertiary"

front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -21,12 +21,10 @@ export function RightDrawerTopBarExpandButton() {
     <LightIconButton
       size="medium"
       accent="tertiary"
-      icon={
+      Icon={
-        isRightDrawerExpanded ? (
+        isRightDrawerExpanded
-          <IconLayoutSidebarRightCollapse />
+          ? IconLayoutSidebarRightCollapse
-        ) : (
+          : IconLayoutSidebarRightExpand
-          <IconLayoutSidebarRightExpand />
-        )
       }
       onClick={handleButtonClick}
     />

front/src/modules/ui/tab/components/Tab.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+type TabProps = {
   id: string;
   title: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   active?: boolean;
   className?: string;
   onClick?: () => void;
@@ -47,12 +50,13 @@ const StyledHover = styled.span`
 export function Tab({
   id,
   title,
-  icon,
+  Icon,
   active = false,
   onClick,
   className,
   disabled,
-}: OwnProps) {
+}: TabProps) {
+  const theme = useTheme();
   return (
     <StyledTab
       onClick={onClick}
@@ -62,7 +66,7 @@ export function Tab({
       data-testid={'tab-' + id}
     >
       <StyledHover>
-        {icon}
+        {Icon && <Icon size={theme.icon.size.md} />}
         {title}
       </StyledHover>
     </StyledTab>

front/src/modules/ui/tab/components/TabList.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { activeTabIdScopedState } from '../states/activeTabIdScopedState';
@@ -8,18 +9,18 @@ import { Tab } from './Tab';
 
 type SingleTabProps = {
   title: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
   id: string;
   hide?: boolean;
   disabled?: boolean;
 };
 
-type OwnProps = {
+type TabListProps = {
   tabs: SingleTabProps[];
   context: React.Context<string | null>;
 };
 
-export function TabList({ tabs, context }: OwnProps) {
+export function TabList({ tabs, context }: TabListProps) {
   const initialActiveTabId = tabs[0].id;
 
   const [activeTabId, setActiveTabId] = useRecoilScopedState(
@@ -40,7 +41,7 @@ export function TabList({ tabs, context }: OwnProps) {
             id={tab.id}
             key={tab.id}
             title={tab.title}
-            icon={tab.icon}
+            Icon={tab.Icon}
             active={tab.id === activeTabId}
             onClick={() => {
               setActiveTabId(tab.id);

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 };
 
 export const Catalog: Story = {
-  args: { title: 'Tab title', icon: <IconCheckbox /> },
+  args: { title: 'Tab title', Icon: IconCheckbox },
   argTypes: {
     active: { control: false },
     disabled: { control: false },

front/src/modules/ui/tab/components/__stories__/Tablist.stories.tsx

@@ -12,26 +12,26 @@ const tabs = [
   {
     id: '1',
     title: 'Tab1',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: true,
   },
   {
     id: '2',
     title: 'Tab2',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
   },
   {
     id: '3',
     title: 'Tab3',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
     disabled: true,
   },
   {
     id: '4',
     title: 'Tab4',
-    icon: <IconCheckbox size={16} />,
+    Icon: IconCheckbox,
     hide: false,
     disabled: false,
   },

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -189,7 +189,7 @@ export function EntityTableHeader() {
               <IconButton
                 size="medium"
                 variant="tertiary"
-                icon={<IconPlus />}
+                Icon={IconPlus}
                 onClick={toggleColumnMenu}
                 position="middle"
               />

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -117,7 +117,7 @@ export function EditableCell({
                 <FloatingIconButton
                   size="small"
                   onClick={handlePenClick}
-                  icon={<IconPencil size={14} />}
+                  Icon={IconPencil}
                 />
               </StyledEditButtonContainer>
             )}

front/src/modules/ui/view-bar/components/DropdownButton.tsx

@@ -1,18 +1,20 @@
 import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { DropdownMenuContainer } from './DropdownMenuContainer';
 
-type OwnProps = {
+type DropdownButtonProps = {
   anchor?: 'left' | 'right';
   label: ReactNode;
   isActive: boolean;
   children?: ReactNode;
   isUnfolded?: boolean;
-  icon?: ReactNode;
+  Icon?: IconComponent;
   onIsUnfoldedChange?: (newIsUnfolded: boolean) => void;
   resetState?: () => void;
   hotkeyScope: string;
@@ -64,11 +66,11 @@ function DropdownButton({
   children,
   isUnfolded = false,
   onIsUnfoldedChange,
+  Icon,
   hotkeyScope,
-  icon,
   color,
   menuWidth,
-}: OwnProps) {
+}: DropdownButtonProps) {
   useScopedHotkeys(
     [Key.Enter, Key.Escape],
     () => {
@@ -86,6 +88,8 @@ function DropdownButton({
     onIsUnfoldedChange?.(false);
   };
 
+  const theme = useTheme();
+
   return (
     <StyledDropdownButtonContainer>
       <StyledDropdownButton
@@ -95,7 +99,11 @@ function DropdownButton({
         aria-selected={isActive}
         color={color}
       >
-        {icon && <StyledDropdownButtonIcon>{icon}</StyledDropdownButtonIcon>}
+        {Icon && (
+          <StyledDropdownButtonIcon>
+            {<Icon size={theme.icon.size.md} />}
+          </StyledDropdownButtonIcon>
+        )}
         {label}
       </StyledDropdownButton>
       {isUnfolded && (

front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx

@@ -1,5 +1,6 @@
 import { Context } from 'react';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
@@ -8,21 +9,23 @@ import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
 import { SingleEntityFilterDropdownButton } from './SingleEntityFilterDropdownButton';
 
+type FilterDropdownButtonProps = {
+  context: Context<string | null>;
+  hotkeyScope: FiltersHotkeyScope;
+  isPrimaryButton?: boolean;
+  Icon?: IconComponent;
+  color?: string;
+  label?: string;
+};
+
 export function FilterDropdownButton({
   context,
   hotkeyScope,
   isPrimaryButton = false,
   color,
-  icon,
+  Icon,
   label,
-}: {
+}: FilterDropdownButtonProps) {
-  context: Context<string | null>;
-  hotkeyScope: FiltersHotkeyScope;
-  isPrimaryButton?: boolean;
-  icon?: React.ReactNode;
-  color?: string;
-  label?: string;
-}) {
   const [availableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
     context,
@@ -40,7 +43,7 @@ export function FilterDropdownButton({
     <MultipleFiltersDropdownButton
       context={context}
       hotkeyScope={hotkeyScope}
-      icon={icon}
+      Icon={Icon}
       isPrimaryButton={isPrimaryButton}
       color={color}
       label={label}

front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx

@@ -1,6 +1,7 @@
 import { Context, useCallback, useState } from 'react';
 
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
@@ -22,21 +23,23 @@ import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
 import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
 import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';
 
+type MultipleFiltersDropdownButtonProps = {
+  context: Context<string | null>;
+  hotkeyScope: FiltersHotkeyScope;
+  isPrimaryButton?: boolean;
+  Icon?: IconComponent;
+  color?: string;
+  label?: string;
+};
+
 export function MultipleFiltersDropdownButton({
   context,
   hotkeyScope,
   isPrimaryButton = false,
   color,
-  icon,
+  Icon,
   label,
-}: {
+}: MultipleFiltersDropdownButtonProps) {
-  context: Context<string | null>;
-  hotkeyScope: FiltersHotkeyScope;
-  isPrimaryButton?: boolean;
-  icon?: React.ReactNode;
-  color?: string;
-  label?: string;
-}) {
   const [isUnfolded, setIsUnfolded] = useState(false);
 
   const [
@@ -108,7 +111,7 @@ export function MultipleFiltersDropdownButton({
       label={label ?? 'Filter'}
       isActive={isFilterSelected}
       isUnfolded={isUnfolded}
-      icon={icon}
+      Icon={Icon}
       onIsUnfoldedChange={handleIsUnfoldedChange}
       hotkeyScope={hotkeyScope}
       color={color}

front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx

@@ -67,7 +67,7 @@ function SortOrFilterChip({
     <StyledChip isSort={isSort}>
       {Icon && (
         <StyledIcon>
-          <Icon />
+          <Icon size={theme.icon.size.md} />
         </StyledIcon>
       )}
       {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}

front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx

@@ -108,7 +108,7 @@ export const UpdateViewButtonGroup = ({
         />
         <Button
           size="small"
-          icon={<IconChevronDown />}
+          Icon={IconChevronDown}
           onClick={handleArrowDownButtonClick}
         />
       </ButtonGroup>

front/src/modules/ui/view-bar/components/ViewBarDetails.tsx

@@ -202,7 +202,7 @@ function ViewBarDetails<SortField>({
               context={context}
               hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
               color={theme.font.color.tertiary}
-              icon={<IconPlus size={theme.icon.size.md} />}
+              Icon={IconPlus}
               label="Add filter"
             />
           </StyledAddFilterContainer>

front/src/modules/users/components/Avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
 export type AvatarProps = {
   avatarUrl: string | null | undefined;
-  size: AvatarSize;
+  size?: AvatarSize;
   placeholder: string;
   colorId?: string;
   type?: AvatarType;
@@ -83,7 +83,7 @@ const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
 
 export function Avatar({
   avatarUrl,
-  size,
+  size = 'md',
   placeholder,
   colorId = placeholder,
   type = 'squared',

front/src/modules/workspace/components/WorkspaceInviteLink.tsx

@@ -32,7 +32,7 @@ export function WorkspaceInviteLink({ inviteLink }: OwnProps) {
         <TextInput value={inviteLink} disabled fullWidth />
       </StyledLinkContainer>
       <Button
-        icon={<IconLink size={theme.icon.size.md} />}
+        Icon={IconLink}
         variant="primary"
         accent="blue"
         title="Copy link"

front/src/pages/companies/Companies.tsx

@@ -1,5 +1,4 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
@@ -70,15 +69,10 @@ export function Companies() {
     });
   }
 
-  const theme = useTheme();
-
   return (
     <SpreadsheetImportProvider>
       <PageContainer>
-        <PageHeader
+        <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
-          title="Companies"
-          icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-        >
           <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
             <PageHotkeys onAddButtonClick={handleAddButtonClick} />
             <PageAddButton onClick={handleAddButtonClick} />

front/src/pages/companies/CompaniesMockMode.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
@@ -15,14 +14,9 @@ const StyledTableContainer = styled.div`
 `;
 
 export function CompaniesMockMode() {
-  const theme = useTheme();
-
   return (
     <PageContainer>
-      <PageHeader
+      <PageHeader title="Companies" Icon={IconBuildingSkyscraper} />
-        title="Companies"
-        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-      />
       <PageBody>
         <RecoilScope SpecificContext={TableRecoilScopeContext}>
           <StyledTableContainer>

front/src/pages/companies/CompanyShow.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useTheme } from '@emotion/react';
 
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
@@ -37,7 +36,6 @@ export function CompanyShow() {
   const companyId = useParams().companyId ?? '';
   const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
   const navigate = useNavigate();
-  const theme = useTheme();
   const { data, loading } = useCompanyQuery(companyId);
   const company = data?.findUniqueCompany;
 
@@ -63,7 +61,7 @@ export function CompanyShow() {
       <PageHeader
         title={company.name ?? ''}
         hasBackButton
-        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
+        Icon={IconBuildingSkyscraper}
       >
         <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
           <PageFavoriteButton

front/src/pages/opportunities/Opportunities.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
@@ -24,8 +23,6 @@ const StyledPageHeader = styled(PageHeader)`
 `;
 
 export function Opportunities() {
-  const theme = useTheme();
-
   const { handlePipelineStageAdd, handlePipelineStageDelete } =
     usePipelineStages();
 
@@ -56,10 +53,7 @@ export function Opportunities() {
   return (
     <PageContainer>
       <RecoilScope>
-        <StyledPageHeader
+        <StyledPageHeader title="Opportunities" Icon={IconTargetArrow}>
-          title="Opportunities"
-          icon={<IconTargetArrow size={theme.icon.size.md} />}
-        >
           <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
             <PipelineAddButton />
           </RecoilScope>

front/src/pages/people/People.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
@@ -62,15 +61,10 @@ export function People() {
     });
   }
 
-  const theme = useTheme();
-
   return (
     <SpreadsheetImportProvider>
       <PageContainer>
-        <PageHeader
+        <PageHeader title="People" Icon={IconUser}>
-          title="People"
-          icon={<IconUser size={theme.icon.size.md} />}
-        >
           <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
             <PageHotkeys onAddButtonClick={handleAddButtonClick} />
             <PageAddButton onClick={handleAddButtonClick} />

front/src/pages/people/PersonShow.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
-import { useTheme } from '@emotion/react';
 
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
@@ -41,8 +40,6 @@ export function PersonShow() {
   const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
   const navigate = useNavigate();
 
-  const theme = useTheme();
-
   const { data, loading } = usePersonQuery(personId);
   const person = data?.findUniquePerson;
 
@@ -80,11 +77,7 @@ export function PersonShow() {
   return (
     <PageContainer>
       <PageTitle title={person.displayName || 'No Name'} />
-      <PageHeader
+      <PageHeader title={person.firstName ?? ''} Icon={IconUser} hasBackButton>
-        title={person.firstName ?? ''}
-        icon={<IconUser size={theme.icon.size.md} />}
-        hasBackButton
-      >
         <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
           <PageFavoriteButton
             isFavorite={isFavorite}

front/src/pages/settings/SettingsExperience.tsx

@@ -20,7 +20,7 @@ export function SettingsExperience() {
   const { colorScheme, setColorScheme } = useColorScheme();
 
   return (
-    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <StyledContainer>
         <H1Title title="Experience" />
         <Section>

front/src/pages/settings/SettingsProfile.tsx

@@ -23,7 +23,7 @@ const StyledContainer = styled.div`
 
 export function SettingsProfile() {
   return (
-    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <>
         <StyledContainer>
           <H1Title title="Profile" />

front/src/pages/settings/SettingsWorkspace.tsx

@@ -18,7 +18,7 @@ const StyledContainer = styled.div`
 
 export function SettingsWorkspace() {
   return (
-    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <div>
         <StyledContainer>
           <H1Title title="General" />

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { Button } from '@/ui/button/components/Button';
+import { IconButton } from '@/ui/button/components/IconButton';
 import { IconSettings, IconTrash } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { ConfirmationModal } from '@/ui/modal/components/ConfirmationModal';
@@ -39,7 +38,6 @@ export function SettingsWorkspaceMembers() {
 
   const [currentUser] = useRecoilState(currentUserState);
   const workspace = currentUser?.workspaceMember?.workspace;
-  const theme = useTheme();
 
   const { data } = useGetWorkspaceMembersQuery();
 
@@ -85,7 +83,7 @@ export function SettingsWorkspaceMembers() {
   };
 
   return (
-    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <StyledContainer>
         <H1Title title="Members" />
         {workspace?.inviteHash && (
@@ -111,14 +109,14 @@ export function SettingsWorkspaceMembers() {
               accessory={
                 currentUser?.id !== member.user.id && (
                   <StyledButtonContainer>
-                    <Button
+                    <IconButton
                       onClick={() => {
                         setIsConfirmationModalOpen(true);
                         setUserToDelete(member.user.id);
                       }}
-                      variant={'tertiary'}
+                      variant="tertiary"
-                      size={'small'}
+                      size="medium"
-                      icon={<IconTrash size={theme.icon.size.md} />}
+                      Icon={IconTrash}
                     />
                   </StyledButtonContainer>
                 )

front/src/pages/tasks/Tasks.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -32,28 +31,24 @@ const StyledTabListContainer = styled.div`
 `;
 
 export function Tasks() {
-  const theme = useTheme();
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   const TASK_TABS = [
     {
       id: 'to-do',
       title: 'To do',
-      icon: <IconCheck size={theme.icon.size.md} />,
+      Icon: IconCheck,
     },
     {
       id: 'done',
       title: 'Done',
-      icon: <IconArchive size={theme.icon.size.md} />,
+      Icon: IconArchive,
     },
   ];
 
   return (
     <PageContainer>
-      <PageHeader
+      <PageHeader title="Tasks" Icon={IconCheckbox}>
-        title="Tasks"
-        icon={<IconCheckbox size={theme.icon.size.md} />}
-      >
         <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
           <PageAddButton
             onClick={() => openCreateActivity(ActivityType.Task)}

front/src/sync-hooks/PageChangeEffect.tsx

@@ -189,7 +189,7 @@ export function PageChangeEffect() {
             to: '',
             label: 'Create Task',
             type: CommandType.Create,
-            icon: <IconCheckbox />,
+            Icon: IconCheckbox,
             onCommandClick: () =>
               openCreateActivity(
                 ActivityType.Task,
@@ -200,7 +200,7 @@ export function PageChangeEffect() {
             to: '',
             label: 'Create Note',
             type: CommandType.Create,
-            icon: <IconNotes />,
+            Icon: IconNotes,
             onCommandClick: () =>
               openCreateActivity(
                 ActivityType.Note,
@@ -223,7 +223,7 @@ export function PageChangeEffect() {
             to: '',
             label: 'Create Task',
             type: CommandType.Create,
-            icon: <IconCheckbox />,
+            Icon: IconCheckbox,
             onCommandClick: () =>
               openCreateActivity(
                 ActivityType.Task,
@@ -234,7 +234,7 @@ export function PageChangeEffect() {
             to: '',
             label: 'Create Note',
             type: CommandType.Create,
-            icon: <IconNotes />,
+            Icon: IconNotes,
             onCommandClick: () =>
               openCreateActivity(
                 ActivityType.Note,
@@ -250,7 +250,7 @@ export function PageChangeEffect() {
             to: '',
             label: 'Create Task',
             type: CommandType.Create,
-            icon: <IconCheckbox />,
+            Icon: IconCheckbox,
             onCommandClick: () => openCreateActivity(ActivityType.Task),
           },
         ]);