Icon refactoring (#287)

* Refactor icons

* Fix additional icons

.vscode/settings.json

@@ -26,6 +26,7 @@
   "cSpell.enableFiletypes": [
     "!javascript",
     "!json",
+    "!typescript",
     "!typescriptreact",
     "md",
     "mdx"

front/package-lock.json

@@ -28,7 +28,6 @@
         "react-datepicker": "^4.11.0",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "^4.4.0",
-        "react-icons": "^4.8.0",
         "react-router-dom": "^6.4.4",
         "react-textarea-autosize": "^8.4.1",
         "react-tooltip": "^5.13.1",
@@ -32859,14 +32858,6 @@
         "react-dom": ">=16.8.1"
       }
     },
-    "node_modules/react-icons": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
-      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-inspector": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.1.tgz",

front/package.json

@@ -23,7 +23,6 @@
     "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.0",
-    "react-icons": "^4.8.0",
     "react-router-dom": "^6.4.4",
     "react-textarea-autosize": "^8.4.1",
     "react-tooltip": "^5.13.1",

front/src/AppNavbar.tsx

@@ -1,12 +1,12 @@
-import {
-  TbBuilding,
-  TbInbox,
-  TbSearch,
-  TbSettings,
-  TbUser,
-} from 'react-icons/tb';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
+import {
+  IconBuilding,
+  IconInbox,
+  IconSearch,
+  IconSettings,
+  IconUser,
+} from '@/ui/icons/index';
 import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
 
 import NavItem from './modules/ui/layout/navbar/NavItem';
@@ -21,25 +21,25 @@ export function AppNavbar() {
         <NavItem
           label="Search"
           to="/search"
-          icon={<TbSearch size={16} />}
+          icon={<IconSearch size={16} />}
           soon={true}
         />
         <NavItem
           label="Inbox"
           to="/inbox"
-          icon={<TbInbox size={16} />}
+          icon={<IconInbox size={16} />}
           soon={true}
         />
         <NavItem
           label="Settings"
           to="/settings/profile"
-          icon={<TbSettings size={16} />}
+          icon={<IconSettings size={16} />}
         />
         <NavTitle label="Workspace" />
         <NavItem
           label="People"
           to="/people"
-          icon={<TbUser size={16} />}
+          icon={<IconUser size={16} />}
           active={
             !!useMatch({
               path: useResolvedPath('/people').pathname,
@@ -50,7 +50,7 @@ export function AppNavbar() {
         <NavItem
           label="Companies"
           to="/companies"
-          icon={<TbBuilding size={16} />}
+          icon={<IconBuilding size={16} />}
           active={
             !!useMatch({
               path: useResolvedPath('/companies').pathname,

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

@@ -1,7 +1,12 @@
-import { TbColorSwatch, TbLogout, TbSettings, TbUser } from 'react-icons/tb';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
 import { removeTokens } from '@/auth/services/AuthService';
+import {
+  IconColorSwatch,
+  IconLogout,
+  IconSettings,
+  IconUser,
+} from '@/ui/icons/index';
 import NavBackButton from '@/ui/layout/navbar//NavBackButton';
 import NavItem from '@/ui/layout/navbar/NavItem';
 import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
@@ -16,7 +21,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Profile"
           to="/settings/profile"
-          icon={<TbUser size={16} />}
+          icon={<IconUser size={16} />}
           active={
             !!useMatch({
               path: useResolvedPath('/people').pathname,
@@ -27,7 +32,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Experience"
           to="/settings/profile/experience"
-          icon={<TbColorSwatch size={16} />}
+          icon={<IconColorSwatch size={16} />}
           soon={true}
           active={
             !!useMatch({
@@ -40,7 +45,7 @@ export function SettingsNavbar() {
         <NavItem
           label="General"
           to="/settings/workspace"
-          icon={<TbSettings size={16} />}
+          icon={<IconSettings size={16} />}
           soon={true}
           active={
             !!useMatch({
@@ -53,7 +58,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Logout"
           onClick={removeTokens}
-          icon={<TbLogout size={16} />}
+          icon={<IconLogout size={16} />}
           danger={true}
         />
       </NavItemsContainer>

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { IconPlus } from '@tabler/icons-react';
+
+import { IconPlus } from '@/ui/icons/index';
 
 const StyledButton = styled.button`
   display: flex;

front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx

@@ -1,11 +1,11 @@
 import { ChangeEvent, ComponentType, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { FaPlus } from 'react-icons/fa';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { SearchConfigType } from '@/search/interfaces/interface';
 import { useSearch } from '@/search/services/search';
+import { IconPlus } from '@/ui/icons/index';
 import { textInputStyle } from '@/ui/layout/styles/themes';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 import { AnyEntity } from '@/utils/interfaces/generic.interface';
@@ -252,7 +252,7 @@ export function EditableRelation<
                     onClick={handleCreateNewRelationButtonClick}
                   >
                     <StyledCreateButtonIcon>
-                      <FaPlus />
+                      <IconPlus />
                     </StyledCreateButtonIcon>
                     <StyledCreateButtonText>Create new</StyledCreateButtonText>
                   </EditableRelationCreateButton>

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
-import { HiArrowSmRight } from 'react-icons/hi';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/components/buttons/IconButton';
+import { IconArrowRight } from '@/ui/icons/index';
 
 const MAX_ROWS = 5;
 
@@ -132,7 +132,7 @@ export function AutosizeTextInput({
         <StyledBottomRightIconButton>
           <IconButton
             onClick={handleOnClickSendButton}
-            icon={<HiArrowSmRight size={15} />}
+            icon={<IconArrowRight size={15} />}
             disabled={isSendButtonDisabled}
           />
         </StyledBottomRightIconButton>

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { IconCheck } from '@tabler/icons-react';
 
+import { IconCheck } from '@/ui/icons/index';
 import { hoverBackground } from '@/ui/layout/styles/themes';
 
 import { DropdownMenuButton } from './DropdownMenuButton';

front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconPlus } from '@tabler/icons-react';
 
+import { IconPlus } from '@/ui/icons/index';
 import { Avatar } from '@/users/components/Avatar';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 

front/src/modules/ui/components/table/action-bar/TableActionBarButtonOpenComments.tsx

@@ -1,4 +1,4 @@
-import { FaRegComment } from 'react-icons/fa';
+import { IconComment } from '@/ui/icons/index';
 
 import { EntityTableActionBarButton } from './EntityTableActionBarButton';
 
@@ -10,7 +10,7 @@ export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
   return (
     <EntityTableActionBarButton
       label="Comment"
-      icon={<FaRegComment size={16} />}
+      icon={<IconComment size={16} />}
       onClick={onClick}
     />
   );

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -1,7 +1,8 @@
 import { ReactNode, useRef } from 'react';
-import { FaAngleDown } from 'react-icons/fa';
 import styled from '@emotion/styled';
 
+import { IconChevronDown } from '@/ui/icons/index';
+
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
 import {
   overlayBackground,
@@ -196,7 +197,7 @@ const StyleAngleDownContainer = styled.div`
 function DropdownTopOptionAngleDown() {
   return (
     <StyleAngleDownContainer>
-      <FaAngleDown />
+      <IconChevronDown />
     </StyleAngleDownContainer>
   );
 }

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -1,4 +1,3 @@
-import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
 import styled from '@emotion/styled';
 
 import {
@@ -6,6 +5,7 @@ import {
   SelectedFilterType,
 } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index';
 
 import SortOrFilterChip from './SortOrFilterChip';
 
@@ -74,7 +74,13 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
               key={sort.key}
               labelValue={sort.label}
               id={sort.key}
-              icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
+              icon={
+                sort.order === 'desc' ? (
+                  <IconArrowNarrowDown />
+                ) : (
+                  <IconArrowNarrowUp />
+                )
+              }
               onRemove={() => onRemoveSort(sort.key)}
             />
           );

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { TbX } from 'react-icons/tb';
 import styled from '@emotion/styled';
 
+import { IconX } from '@/ui/icons/index';
+
 type OwnProps = {
   id: string;
   labelKey?: string;
@@ -55,7 +56,7 @@ function SortOrFilterChip({
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <TbX />
+        <IconX />
       </StyledDelete>
     </StyledChip>
   );

front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { FaList } from 'react-icons/fa';
 import { ApolloProvider } from '@apollo/client';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { IconList } from '@/ui/icons/index';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { mockedClient } from '~/testing/mockedClient';
 
@@ -25,7 +25,7 @@ export const Empty: Story = {
       <FullHeightStorybookLayout>
         <TableHeader
           viewName="ViewName"
-          viewIcon={<FaList />}
+          viewIcon={<IconList />}
           availableSorts={availableSorts}
           availableFilters={availableFilters}
         />
@@ -40,7 +40,7 @@ export const WithSortsAndFilters: Story = {
       <FullHeightStorybookLayout>
         <TableHeader
           viewName="ViewName"
-          viewIcon={<FaList />}
+          viewIcon={<IconList />}
           availableSorts={availableSorts}
           availableFilters={availableFilters}
         />

front/src/modules/ui/icons/components/IconComment.tsx

@@ -1 +0,0 @@
-export { IconMessageCircle as IconComment } from '@tabler/icons-react';

front/src/modules/ui/icons/components/IconSidebarLeftCollapse.tsx

@@ -1 +0,0 @@
-export { TbLayoutSidebarLeftCollapse as IconSidebarLeftCollapse } from 'react-icons/tb';

front/src/modules/ui/icons/components/IconSidebarRightCollapse.tsx

@@ -1 +0,0 @@
-export { TbLayoutSidebarRightCollapse as IconSidebarRightCollapse } from 'react-icons/tb';

front/src/modules/ui/icons/index.ts

@@ -1,6 +1,28 @@
 export { IconAddressBook } from './components/IconAddressBook';
-export { IconComment } from './components/IconComment';
-export { IconSidebarLeftCollapse } from './components/IconSidebarLeftCollapse';
-export { IconSidebarRightCollapse } from './components/IconSidebarRightCollapse';
-export { IconAward } from '@tabler/icons-react';
+export { IconBuilding } from '@tabler/icons-react';
+export { IconMessageCircle as IconComment } from '@tabler/icons-react';
 export { IconCheck } from '@tabler/icons-react';
+export { IconTrash } from '@tabler/icons-react';
+export { IconLayoutSidebarRightCollapse } from '@tabler/icons-react';
+export { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react';
+export { IconUser } from '@tabler/icons-react';
+export { IconList } from '@tabler/icons-react';
+export { IconInbox } from '@tabler/icons-react';
+export { IconSearch } from '@tabler/icons-react';
+export { IconSettings } from '@tabler/icons-react';
+export { IconLogout } from '@tabler/icons-react';
+export { IconColorSwatch } from '@tabler/icons-react';
+export { IconX } from '@tabler/icons-react';
+export { IconChevronLeft } from '@tabler/icons-react';
+export { IconPlus } from '@tabler/icons-react';
+export { IconLink } from '@tabler/icons-react';
+export { IconSum } from '@tabler/icons-react';
+export { IconCalendar } from '@tabler/icons-react';
+export { IconMapPin } from '@tabler/icons-react';
+export { IconMail } from '@tabler/icons-react';
+export { IconPhone } from '@tabler/icons-react';
+export { IconTarget } from '@tabler/icons-react';
+export { IconChevronDown } from '@tabler/icons-react';
+export { IconArrowNarrowDown } from '@tabler/icons-react';
+export { IconArrowNarrowUp } from '@tabler/icons-react';
+export { IconArrowRight } from '@tabler/icons-react';

front/src/modules/ui/layout/navbar/NavBackButton.tsx

@@ -1,7 +1,8 @@
-import { TbChevronLeft } from 'react-icons/tb';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { IconChevronLeft } from '@/ui/icons/index';
+
 import NavCollapseButton from './NavCollapseButton';
 
 type OwnProps = {
@@ -38,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
         <IconAndButtonContainer
           onClick={() => navigate('/', { replace: true })}
         >
-          <TbChevronLeft strokeWidth={3} />
+          <IconChevronLeft strokeWidth={3} />
           <span>{title}</span>
         </IconAndButtonContainer>
         <NavCollapseButton hideOnDesktop={true} />

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

@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { IconSidebarLeftCollapse, IconSidebarRightCollapse } from '@/ui/icons';
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from '@/ui/icons';
 
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from '../styles/themes';
@@ -50,7 +53,7 @@ export default function NavCollapseButton({
           onClick={() => setIsNavOpen(!isNavOpen)}
           hideOnDesktop={hideOnDesktop}
         >
-          <IconSidebarLeftCollapse size={16} />
+          <IconLayoutSidebarLeftCollapse size={16} />
         </CollapseButton>
       )}
       {!isNavOpen && (
@@ -58,7 +61,7 @@ export default function NavCollapseButton({
           onClick={() => setIsNavOpen(!isNavOpen)}
           hideOnDesktop={hideOnDesktop}
         >
-          <IconSidebarRightCollapse size={16} />
+          <IconLayoutSidebarRightCollapse size={16} />
         </CollapseButton>
       )}
     </>

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

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
-import { IconPlus } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
+import { IconPlus } from '@/ui/icons/index';
+
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 
 const StyledButton = styled.button`

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { TbPlus } from 'react-icons/tb';
 import styled from '@emotion/styled';
 
+import { IconPlus } from '@/ui/icons/index';
+
 import NavCollapseButton from '../navbar/NavCollapseButton';
 
 export const TOP_BAR_MIN_HEIGHT = '40px';
@@ -59,7 +60,7 @@ export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
             data-testid="add-button"
             onClick={onAddButtonClick}
           >
-            <TbPlus size={16} />
+            <IconPlus size={16} />
           </AddButtonContainer>
         )}
       </TopBarContainer>

front/src/pages/companies/Companies.tsx

@@ -1,6 +1,4 @@
 import { useCallback, useState } from 'react';
-import { FaList } from 'react-icons/fa';
-import { TbBuilding } from 'react-icons/tb';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -21,6 +19,8 @@ import {
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { IconBuilding } from '@/ui/icons/index';
+import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
 import { AppPage } from '~/AppPage';
@@ -78,7 +78,7 @@ export function Companies() {
     <AppPage>
       <WithTopBarContainer
         title="Companies"
-        icon={<TbBuilding size={16} />}
+        icon={<IconBuilding size={16} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -87,7 +87,7 @@ export function Companies() {
               data={companies}
               columns={companiesColumns}
               viewName="All Companies"
-              viewIcon={<FaList />}
+              viewIcon={<IconList />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

front/src/pages/companies/companies-columns.tsx

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-  TbUser,
-} from 'react-icons/tb';
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
@@ -22,6 +14,14 @@ import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+  IconUser,
+} from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
@@ -34,7 +34,7 @@ export const useCompaniesColumns = () => {
       getCheckBoxColumn(),
       columnHelper.accessor('name', {
         header: () => (
-          <ColumnHead viewName="Name" viewIcon={<TbBuilding size={16} />} />
+          <ColumnHead viewName="Name" viewIcon={<IconBuilding size={16} />} />
         ),
         cell: (props) => (
           <CompanyEditableNameChipCell company={props.row.original} />
@@ -43,7 +43,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('domainName', {
         header: () => (
-          <ColumnHead viewName="URL" viewIcon={<TbLink size={16} />} />
+          <ColumnHead viewName="URL" viewIcon={<IconLink size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -60,7 +60,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('employees', {
         header: () => (
-          <ColumnHead viewName="Employees" viewIcon={<TbSum size={16} />} />
+          <ColumnHead viewName="Employees" viewIcon={<IconSum size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -83,7 +83,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('address', {
         header: () => (
-          <ColumnHead viewName="Address" viewIcon={<TbMapPin size={16} />} />
+          <ColumnHead viewName="Address" viewIcon={<IconMapPin size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -100,7 +100,10 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('createdAt', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
+          <ColumnHead
+            viewName="Creation"
+            viewIcon={<IconCalendar size={16} />}
+          />
         ),
         cell: (props) => (
           <EditableDate
@@ -118,7 +121,7 @@ export const useCompaniesColumns = () => {
         header: () => (
           <ColumnHead
             viewName="Account Owner"
-            viewIcon={<TbUser size={16} />}
+            viewIcon={<IconUser size={16} />}
           />
         ),
         cell: (props) => (

front/src/pages/companies/companies-filters.tsx

@@ -1,22 +1,21 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-  TbUser,
-} from 'react-icons/tb';
-
 import { Company } from '@/companies/interfaces/company.interface';
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SEARCH_USER_QUERY } from '@/search/services/search';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+  IconUser,
+} from '@/ui/icons/index';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
 
 export const nameFilter = {
   key: 'name',
   label: 'Name',
-  icon: <TbBuilding size={16} />,
+  icon: <IconBuilding size={16} />,
   type: 'text',
   operands: [
     {
@@ -46,7 +45,7 @@ export const nameFilter = {
 export const employeesFilter = {
   key: 'employees',
   label: 'Employees',
-  icon: <TbSum size={16} />,
+  icon: <IconSum size={16} />,
   type: 'text',
   operands: [
     {
@@ -73,7 +72,7 @@ export const employeesFilter = {
 export const urlFilter = {
   key: 'domainName',
   label: 'Url',
-  icon: <TbLink size={16} />,
+  icon: <IconLink size={16} />,
   type: 'text',
   operands: [
     {
@@ -106,7 +105,7 @@ export const urlFilter = {
 export const addressFilter = {
   key: 'address',
   label: 'Address',
-  icon: <TbMapPin size={16} />,
+  icon: <IconMapPin size={16} />,
   type: 'text',
   operands: [
     {
@@ -136,7 +135,7 @@ export const addressFilter = {
 export const ccreatedAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <TbCalendar size={16} />,
+  icon: <IconCalendar size={16} />,
   type: 'date',
   operands: [
     {
@@ -163,7 +162,7 @@ export const ccreatedAtFilter = {
 export const accountOwnerFilter = {
   key: 'accountOwner',
   label: 'Account Owner',
-  icon: <TbUser size={16} />,
+  icon: <IconUser size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_USER_QUERY,

front/src/pages/companies/companies-sorts.tsx

@@ -1,43 +1,42 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbLink,
-  TbMapPin,
-  TbSum,
-} from 'react-icons/tb';
-
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconLink,
+  IconMapPin,
+  IconSum,
+} from '@/ui/icons/index';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
 export const availableSorts = [
   {
     key: 'name',
     label: 'Name',
-    icon: <TbBuilding size={16} />,
+    icon: <IconBuilding size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'employees',
     label: 'Employees',
-    icon: <TbSum size={16} />,
+    icon: <IconSum size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'domainName',
     label: 'Url',
-    icon: <TbLink size={16} />,
+    icon: <IconLink size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'address',
     label: 'Address',
-    icon: <TbMapPin size={16} />,
+    icon: <IconMapPin size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'createdAt',
     label: 'Creation',
-    icon: <TbCalendar size={16} />,
+    icon: <IconCalendar size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<Companies_Order_By>>;

front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx

@@ -1,7 +1,7 @@
-import { TbTrash } from 'react-icons/tb';
 import { useRecoilValue } from 'recoil';
 
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
+import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
 import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
 import { useDeleteCompaniesMutation } from '~/generated/graphql';
@@ -28,7 +28,7 @@ export function TableActionBarButtonDeleteCompanies() {
   return (
     <EntityTableActionBarButton
       label="Delete"
-      icon={<TbTrash size={16} />}
+      icon={<IconTrash size={16} />}
       type="warning"
       onClick={handleDeleteClick}
     />

front/src/pages/opportunities/Opportunities.tsx

@@ -1,5 +1,4 @@
-import { FaBullseye } from 'react-icons/fa';
-
+import { IconTarget } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { AppPage } from '~/AppPage';
 
@@ -12,7 +11,7 @@ import { Board } from '../../modules/opportunities/components/Board';
 export function Opportunities() {
   return (
     <AppPage>
-      <WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
+      <WithTopBarContainer title="Opportunities" icon={<IconTarget />}>
         <Board initialBoard={initialBoard} items={items} />
       </WithTopBarContainer>
     </AppPage>

front/src/pages/people/People.tsx

@@ -1,6 +1,4 @@
 import { useCallback, useState } from 'react';
-import { FaList } from 'react-icons/fa';
-import { TbUser } from 'react-icons/tb';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -18,6 +16,7 @@ import {
 } from '@/people/services';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { IconList, IconUser } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
 import { AppPage } from '~/AppPage';
@@ -76,7 +75,7 @@ export function People() {
     <AppPage>
       <WithTopBarContainer
         title="People"
-        icon={<TbUser size={16} />}
+        icon={<IconUser size={16} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -85,7 +84,7 @@ export function People() {
               data={people}
               columns={peopleColumns}
               viewName="All People"
-              viewIcon={<FaList />}
+              viewIcon={<IconList />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

front/src/pages/people/people-columns.tsx

@@ -1,12 +1,4 @@
 import { useMemo } from 'react';
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
 import { createColumnHelper } from '@tanstack/react-table';
 
 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
@@ -17,6 +9,14 @@ import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 
 const columnHelper = createColumnHelper<Person>();
@@ -27,7 +27,7 @@ export const usePeopleColumns = () => {
       getCheckBoxColumn(),
       columnHelper.accessor('firstname', {
         header: () => (
-          <ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />
+          <ColumnHead viewName="People" viewIcon={<IconUser size={16} />} />
         ),
         cell: (props) => (
           <>
@@ -46,7 +46,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('email', {
         header: () => (
-          <ColumnHead viewName="Email" viewIcon={<TbMail size={16} />} />
+          <ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -63,14 +63,17 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('company', {
         header: () => (
-          <ColumnHead viewName="Company" viewIcon={<TbBuilding size={16} />} />
+          <ColumnHead
+            viewName="Company"
+            viewIcon={<IconBuilding size={16} />}
+          />
         ),
         cell: (props) => <PeopleCompanyCell people={props.row.original} />,
         size: 150,
       }),
       columnHelper.accessor('phone', {
         header: () => (
-          <ColumnHead viewName="Phone" viewIcon={<TbPhone size={16} />} />
+          <ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
         ),
         cell: (props) => (
           <EditablePhone
@@ -87,7 +90,10 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('createdAt', {
         header: () => (
-          <ColumnHead viewName="Creation" viewIcon={<TbCalendar size={16} />} />
+          <ColumnHead
+            viewName="Creation"
+            viewIcon={<IconCalendar size={16} />}
+          />
         ),
         cell: (props) => (
           <EditableDate
@@ -103,7 +109,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('city', {
         header: () => (
-          <ColumnHead viewName="City" viewIcon={<TbMapPin size={16} />} />
+          <ColumnHead viewName="City" viewIcon={<IconMapPin size={16} />} />
         ),
         cell: (props) => (
           <EditableText

front/src/pages/people/people-filters.tsx

@@ -1,12 +1,3 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
-
 import {
   Company,
   mapToCompany,
@@ -14,12 +5,20 @@ import {
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { Person } from '@/people/interfaces/person.interface';
 import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import { QueryMode } from '~/generated/graphql';
 
 export const fullnameFilter = {
   key: 'fullname',
   label: 'People',
-  icon: <TbUser size={16} />,
+  icon: <IconUser size={16} />,
   type: 'text',
   operands: [
     {
@@ -72,7 +71,7 @@ export const fullnameFilter = {
 export const emailFilter = {
   key: 'email',
   label: 'Email',
-  icon: <TbMail size={16} />,
+  icon: <IconMail size={16} />,
   type: 'text',
   operands: [
     {
@@ -102,7 +101,7 @@ export const emailFilter = {
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: <TbBuilding size={16} />,
+  icon: <IconBuilding size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -136,7 +135,7 @@ export const companyFilter = {
 export const phoneFilter = {
   key: 'phone',
   label: 'Phone',
-  icon: <TbPhone size={16} />,
+  icon: <IconPhone size={16} />,
   type: 'text',
   operands: [
     {
@@ -166,7 +165,7 @@ export const phoneFilter = {
 export const createdAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <TbCalendar size={16} />,
+  icon: <IconCalendar size={16} />,
   type: 'date',
   operands: [
     {
@@ -193,7 +192,7 @@ export const createdAtFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: <TbMapPin size={16} />,
+  icon: <IconMapPin size={16} />,
   type: 'text',
   operands: [
     {

front/src/pages/people/people-sorts.tsx

@@ -1,13 +1,12 @@
-import {
-  TbBuilding,
-  TbCalendar,
-  TbMail,
-  TbMapPin,
-  TbPhone,
-  TbUser,
-} from 'react-icons/tb';
-
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconMapPin,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
 import {
   PersonOrderByWithRelationInput as People_Order_By,
   SortOrder as Order_By,
@@ -17,7 +16,7 @@ export const availableSorts = [
   {
     key: 'fullname',
     label: 'People',
-    icon: <TbUser size={16} />,
+    icon: <IconUser size={16} />,
     _type: 'custom_sort',
     orderByTemplates: [
       (order: Order_By) => ({
@@ -31,32 +30,32 @@ export const availableSorts = [
   {
     key: 'company_name',
     label: 'Company',
-    icon: <TbBuilding size={16} />,
+    icon: <IconBuilding size={16} />,
     _type: 'custom_sort',
     orderByTemplates: [(order: Order_By) => ({ company: { name: order } })],
   },
   {
     key: 'email',
     label: 'Email',
-    icon: <TbMail size={16} />,
+    icon: <IconMail size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'phone',
     label: 'Phone',
-    icon: <TbPhone size={16} />,
+    icon: <IconPhone size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'createdAt',
     label: 'Created at',
-    icon: <TbCalendar size={16} />,
+    icon: <IconCalendar size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'city',
     label: 'City',
-    icon: <TbMapPin size={16} />,
+    icon: <IconMapPin size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<People_Order_By>>;

front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx

@@ -1,7 +1,7 @@
-import { TbTrash } from 'react-icons/tb';
 import { useRecoilValue } from 'recoil';
 
 import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
+import { IconTrash } from '@/ui/icons/index';
 import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
 import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
 import { useDeletePeopleMutation } from '~/generated/graphql';
@@ -28,7 +28,7 @@ export function TableActionBarButtonDeletePeople() {
   return (
     <EntityTableActionBarButton
       label="Delete"
-      icon={<TbTrash size={16} />}
+      icon={<IconTrash size={16} />}
       type="warning"
       onClick={handleDeleteClick}
     />