Migrate all custom icons to lucide

packages/backend/package.json

@@ -54,7 +54,7 @@
     "@types/cookie-session": "^2.0.49",
     "@types/express-session": "^1.17.10",
     "@types/fs-extra": "^11.0.4",
-    "better-sqlite3": "^9.2.2",
+    "better-sqlite3": "^9.4.1",
     "copyfiles": "^2.4.1",
     "prettier": "^3.1.1",
     "workspace": "^0.0.1-preview.1"

packages/frontend/src/components/SearchBar.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, RefAttributes } from 'react';
 
-import { SearchIcon } from './shared/CustomIcon';
+import { Search } from 'lucide-react';
 import { Input, InputProps } from './shared/Input';
 
 const SearchBar: React.ForwardRefRenderFunction<
@@ -10,7 +10,7 @@ const SearchBar: React.ForwardRefRenderFunction<
   return (
     <div className="relative flex w-full">
       <Input
-        leftIcon={<SearchIcon className="text-foreground-secondary" />}
+        leftIcon={<Search className="text-foreground-secondary" />}
         onChange={onChange}
         value={value}
         type="search"

packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx

@@ -6,14 +6,12 @@ import { Deployment, Domain } from 'gql-client';
 import DeploymentDialogBodyCard from 'components/projects/project/deployments/DeploymentDialogBodyCard';
 import { Button } from 'components/shared/Button';
 import {
-  ChevronDoubleDownIcon,
+  ChevronDown,
-  LinkChainIcon,
+  Link,
-} from 'components/shared/CustomIcon';
+  ArrowRightCircle,
+  Loader2,
+} from 'lucide-react';
 import { TagProps } from 'components/shared/Tag';
-import {
-  ArrowRightCircleFilledIcon,
-  LoadingIcon,
-} from 'components/shared/CustomIcon';
 
 interface ChangeStateToProductionDialogProps extends ConfirmDialogProps {
   deployment: Deployment;
@@ -51,9 +49,9 @@ export const ChangeStateToProductionDialog = ({
       confirmButtonProps={{
         disabled: isConfirmButtonLoading,
         rightIcon: isConfirmButtonLoading ? (
-          <LoadingIcon className="animate-spin" />
+          <Loader2 className="animate-spin" />
         ) : (
-          <ArrowRightCircleFilledIcon />
+          <ArrowRightCircle />
         ),
       }}
     >
@@ -70,7 +68,7 @@ export const ChangeStateToProductionDialog = ({
             <>
               <div className="flex items-center justify-between w-full text-elements-info">
                 {Array.from({ length: 7 }).map((_, index) => (
-                  <ChevronDoubleDownIcon key={index} />
+                  <ChevronDown key={index} />
                 ))}
               </div>
               <DeploymentDialogBodyCard
@@ -90,7 +88,7 @@ export const ChangeStateToProductionDialog = ({
                 <Button
                   as="a"
                   href={value.name}
-                  leftIcon={<LinkChainIcon size={18} />}
+                  leftIcon={<Link size={18} />}
                   variant="link"
                   key={value.id}
                 >

packages/frontend/src/components/projects/Dialog/DeleteDeploymentDialog.tsx

@@ -2,9 +2,9 @@ import ConfirmDialog, {
   ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
 import {
-  ArrowRightCircleFilledIcon,
+  AlertTriangle,
-  LoadingIcon,
+} from 'lucide-react';
-} from 'components/shared/CustomIcon';
+  
 
 interface DeleteDeploymentDialogProps extends ConfirmDialogProps {
   isConfirmButtonLoading?: boolean;
@@ -33,9 +33,9 @@ export const DeleteDeploymentDialog = ({
         variant: 'danger',
         disabled: isConfirmButtonLoading,
         rightIcon: isConfirmButtonLoading ? (
-          <LoadingIcon className="animate-spin" />
+          <AlertTriangle className="animate-spin" />
         ) : (
-          <ArrowRightCircleFilledIcon />
+          <AlertTriangle />
         ),
       }}
     >

packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx

@@ -14,12 +14,11 @@ import { Project } from 'gql-client';
 import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
 import {
-  BranchIcon,
+  GitBranch,
-  ClockIcon,
+  AlertTriangle,
-  GithubLogoIcon,
+  MoreHorizontal,
-  HorizontalDotIcon,
+  Clock,
-  WarningDiamondIcon,
+} from 'lucide-react';
-} from 'components/shared/CustomIcon';
 import { Tooltip } from 'components/shared/Tooltip';
 import { WavyBorder } from 'components/shared/WavyBorder';
 import { relativeTimeMs } from 'utils/time';
@@ -92,7 +91,7 @@ export const ProjectCard = ({
         </div>
         {/* Icons */}
         <div className={theme.icons()}>
-          {hasError && <WarningDiamondIcon className="text-error" />}
+          {hasError && <AlertTriangle className="text-error" />}
           <Menu placement="bottom-end">
             <MenuHandler>
               <Button
@@ -102,7 +101,7 @@ export const ProjectCard = ({
                 iconOnly
                 onClick={handleOptionsClick}
               >
-                <HorizontalDotIcon />
+                <MoreHorizontal />
               </Button>
             </MenuHandler>
             <MenuList className="dark:bg-overlay3 dark:shadow-background dark:border-none">
@@ -142,14 +141,14 @@ export const ProjectCard = ({
         <div className={theme.deploymentText()}>
           {hasDeployment ? (
             <>
-              <GithubLogoIcon />
+              <GitBranch />
               <span>{relativeTimeMs(project.deployments[0].createdAt)} on</span>
-              <BranchIcon />
+              <Clock />
               <span>{project.deployments[0].branch}</span>
             </>
           ) : (
             <>
-              <ClockIcon />
+              <Clock />
               <span>Created {relativeTimeMs(project.createdAt)}</span>
             </>
           )}

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Button } from 'components/shared/Button';
-import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
+import { X, Search } from 'lucide-react';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
@@ -81,13 +81,13 @@ export const ProjectSearchBarDialog = ({
             <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
               <Input
                 {...getInputProps({}, { suppressRefError: true })}
-                leftIcon={<SearchIcon />}
+                leftIcon={<Search />}
                 placeholder="Search"
                 appearance="borderless"
                 autoFocus
               />
               <Button iconOnly variant="ghost" onClick={handleClose}>
-                <CrossIcon size={16} />
+                <X size={16} />
               </Button>
             </div>
             {/* Content */}

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarEmpty.tsx

@@ -1,4 +1,4 @@
-import { InfoRoundFilledIcon } from 'components/shared/CustomIcon';
+import { Search } from 'lucide-react';
 import { ComponentPropsWithoutRef } from 'react';
 import { cn } from 'utils/classnames';
 
@@ -14,7 +14,7 @@ export const ProjectSearchBarEmpty = ({
       className={cn('flex items-center px-2 py-2 gap-3', className)}
     >
       <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-50 text-elements-warning dark:bg-red-50 text-error">
-        <InfoRoundFilledIcon size={16} />
+        <Search size={16} />
       </div>
       <p className="text-elements-low-em text-sm dark:text-foreground-secondary tracking-[-0.006em]">
         No projects matching this name

packages/frontend/src/components/projects/create/Configure.tsx

@@ -11,12 +11,9 @@ import { useMediaQuery } from 'usehooks-ts';
 
 import { FormControl, FormHelperText, MenuItem, Select } from '@mui/material';
 
-import {
-  ArrowRightCircleFilledIcon,
-  LoadingIcon,
-} from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
+import { ArrowRightCircle, Loader2 } from 'lucide-react';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
 import {
@@ -48,7 +45,6 @@ const Configure = () => {
   const [selectedAccount, setSelectedAccount] = useState<string>();
   const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
-  const [isPaymentDone, setIsPaymentDone] = useState(false);
   const [isFrameVisible, setIsFrameVisible] = useState(false);
   const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
   const [balanceMessage, setBalanceMessage] = useState<string>();
@@ -257,7 +253,6 @@ const Configure = () => {
               variant: 'success',
               onDismiss: dismiss,
             });
-            setIsPaymentDone(true);
           } else {
             toast({
               id: 'invalid-tx-hash',
@@ -344,7 +339,6 @@ const Configure = () => {
       let timeoutId;
 
       try {
-        setIsPaymentDone(false);
         setIsPaymentLoading(true);
 
         await requestTx(senderAddress, snowballAddress, amount);
@@ -441,6 +435,10 @@ const Configure = () => {
     }
   }, [isBalanceSufficient]);
 
+  const handleConfigureDeployment = useCallback(() => {
+    methods.handleSubmit(handleFormSubmit)();
+  }, [handleFormSubmit, methods]);
+
   return (
     <div className="space-y-7 px-4 py-6">
       <div className="flex justify-between mb-6">
@@ -593,9 +591,9 @@ const Configure = () => {
                   disabled={isLoading || !selectedDeployer}
                   rightIcon={
                     isLoading ? (
-                      <LoadingIcon className="animate-spin" />
+                      <Loader2 className="ml-2 h-4 w-4 animate-spin" />
                     ) : (
-                      <ArrowRightCircleFilledIcon />
+                      <ArrowRightCircle className="ml-2 h-4 w-4" />
                     )
                   }
                 >
@@ -606,8 +604,6 @@ const Configure = () => {
               <div className="flex gap-4">
                 <Button
                   {...buttonSize}
-                  type="submit"
-                  shape="default"
                   disabled={
                     isLoading ||
                     isPaymentLoading ||
@@ -618,19 +614,24 @@ const Configure = () => {
                   }
                   rightIcon={
                     isLoading || isPaymentLoading ? (
-                      <LoadingIcon className="animate-spin" />
+                      <Loader2 className="ml-2 h-4 w-4 animate-spin" />
                     ) : (
-                      <ArrowRightCircleFilledIcon />
+                      <ArrowRightCircle className="ml-2 h-4 w-4" />
                     )
                   }
+                  onClick={handleConfigureDeployment}
                 >
-                  {!isPaymentDone
+                  {isLoading ? (
-                    ? isPaymentLoading
+                    <>
-                      ? 'Transaction Requested'
+                      Configuring...
-                      : 'Pay and Deploy'
+                      <Loader2 className="ml-2 h-4 w-4 animate-spin" />
-                    : isLoading
+                    </>
-                      ? 'Deploying'
+                  ) : (
-                      : 'Deploy'}
+                    <>
+                      Configure
+                      <ArrowRightCircle className="ml-2 h-4 w-4" />
+                    </>
+                  )}
                 </Button>
                 {isAccountsDataReceived && isBalanceSufficient !== undefined ? (
                   !selectedAccount || !isBalanceSufficient ? (
@@ -653,7 +654,7 @@ const Configure = () => {
                       <p className="text-gray-700 dark:text-gray-300">
                         {balanceMessage !== undefined ? (
                           <div className="flex items-center gap-2 text-white">
-                            <LoadingIcon className="animate-spin w-5 h-5" />
+                            <Loader2 className="animate-spin w-5 h-5" />
                             <p>{balanceMessage}</p>
                           </div>
                         ) : !selectedAccount ? (

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -3,18 +3,13 @@ import OauthPopup from 'react-oauth-popup';
 
 import { useGQLClient } from '../../../context/GQLClientContext';
 import { Button } from '../../shared/Button';
-import {
+
-  GitIcon,
+import { Github, GitBranch, MoreHorizontal } from 'lucide-react';
-  EllipsesIcon,
-  GithubIcon,
-  GitTeaIcon,
-} from '../../shared/CustomIcon';
-import { useToast } from '../../shared/Toast';
-import { IconWithFrame } from '../../shared/IconWithFrame';
-import { Heading } from '../../shared/Heading';
-import { MockConnectGitCard } from './MockConnectGitCard';
 import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
-import { LaconicIcon } from 'components/shared/CustomIcon/LaconicIcon';
+import { Heading } from '../../shared/Heading';
+import { IconWithFrame } from '../../shared/IconWithFrame';
+import { useToast } from '../../shared/Toast';
+import { MockConnectGitCard } from './MockConnectGitCard';
 
 const SCOPES = 'public_repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
@@ -50,11 +45,11 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
       <div className="flex flex-col items-center max-w-[420px]">
         {/** Icons */}
         <div className="w-52 h-16 justify-center items-center gap-4 inline-flex mb-7">
-          <IconWithFrame icon={<GitIcon />} hasHighlight={false} />
+          <IconWithFrame icon={<GitBranch />} hasHighlight={false} />
-          <EllipsesIcon className="items-center gap-1.5 flex" />
+          <MoreHorizontal className="items-center gap-1.5 flex" />
           <IconWithFrame
             className="bg-background"
-            icon={<LaconicIcon />}
+            icon={<Github className="mr-2" />}
             hasHighlight={false}
           />
         </div>
@@ -80,7 +75,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
           >
             <Button
               className="w-full sm:w-auto"
-              leftIcon={<GithubIcon />}
+              leftIcon={<Github />}
               variant="primary"
             >
               Connect to GitHub
@@ -88,7 +83,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
           </OauthPopup>
           <Button
             className="w-full sm:w-auto"
-            leftIcon={<GitTeaIcon />}
+            leftIcon={<Github />}
             variant="primary"
           >
             Connect to GitTea

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -7,7 +7,7 @@ import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
 import { Heading } from '../../shared/Heading';
 import { Button } from '../../shared/Button';
-import { ClockOutlineIcon, WarningIcon } from '../../shared/CustomIcon';
+import { Clock, AlertTriangle } from 'lucide-react';
 import { CancelDeploymentDialog } from '../../projects/Dialog/CancelDeploymentDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 
@@ -119,7 +119,7 @@ const Deploy = () => {
             Deployment started ...
           </Heading>
           <div className="flex items-center gap-1.5">
-            <ClockOutlineIcon size={16} className="text-elements-mid-em" />
+            <Clock size={16} className="text-elements-mid-em" />
             <Stopwatch
               offsetTimestamp={setStopWatchOffset(Date.now().toString())}
               isPaused={isDeploymentFailed}
@@ -130,7 +130,7 @@ const Deploy = () => {
           onClick={handleOpen}
           size="sm"
           variant="tertiary"
-          leftIcon={<WarningIcon size={16} />}
+          leftIcon={<AlertTriangle size={16} />}
         >
           Cancel
         </Button>

packages/frontend/src/components/projects/create/DeployStep.tsx

@@ -1,10 +1,6 @@
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
 import { cn } from 'utils/classnames';
-import {
+import { Check, Clock, Loader2 } from 'lucide-react';
-  CheckRoundFilledIcon,
-  ClockOutlineIcon,
-  LoaderIcon,
-} from 'components/shared/CustomIcon';
 
 enum DeployStatus {
   PROCESSING = 'progress',
@@ -36,7 +32,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
               </div>
             )}
             {status === DeployStatus.PROCESSING && (
-              <LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
+              <Loader2 className="animate-spin text-elements-link dark:text-foreground" />
             )}
           </div>
 
@@ -55,7 +51,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
         {/* Timer */}
         {status === DeployStatus.PROCESSING && (
           <div className="flex items-center gap-1.5">
-            <ClockOutlineIcon
+            <Clock
               size={16}
               className="text-elements-low-em dark:text-foreground-secondary"
             />
@@ -68,7 +64,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
         {status === DeployStatus.COMPLETE && (
           <div className="flex items-center gap-1.5">
             <div className="w-4.5 h-4.5 grid place-content-center">
-              <CheckRoundFilledIcon
+              <Check
                 className="text-elements-success"
                 size={15}
               />

packages/frontend/src/components/projects/create/MockConnectGitCard.tsx

@@ -3,12 +3,7 @@ import { SegmentedControls } from 'components/shared/SegmentedControls';
 import { useState } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 
-import {
+import { Github, GitBranch, LayoutDashboard } from 'lucide-react';
-  GithubIcon,
-  LockIcon,
-  TemplateIcon,
-  TemplateIconType,
-} from 'components/shared/CustomIcon';
 import { relativeTimeISO } from 'utils/time';
 import templates from 'assets/templates';
 
@@ -103,7 +98,7 @@ const MockProjectCard = ({
     <div className="group flex items-start sm:items-center gap-3 pl-3 py-3 cursor-pointer rounded-xl hover:bg-base-bg-emphasized dark:hover:bg-background relative">
       {/* Icon container */}
       <div className="w-10 h-10 bg-base-bg dark:bg-background rounded-md justify-center items-center flex">
-        <GithubIcon />
+        <Github className="h-5 w-5" />
       </div>
       {/* Content */}
       <div className="flex flex-1 gap-3 flex-wrap">
@@ -117,7 +112,7 @@ const MockProjectCard = ({
         </div>
         {visibility === 'private' && (
           <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 h-fit">
-            <LockIcon />
+            <GitBranch className="h-4 w-4" />
             Private
           </div>
         )}
@@ -126,17 +121,13 @@ const MockProjectCard = ({
   );
 };
 
-const MockTemplateCard = ({ icon, name }: { icon: string; name: string }) => {
+const MockTemplateCard = ({ name }: { name: string }) => {
   return (
-    <div className="flex items-center gap-3 px-3 py-3 hover:bg-base-bg-emphasized dark:hover:bg-background relative rounded-2xl group relative cursor-default">
+    <div className="flex items-center gap-2">
-      {/* Icon */}
+      <LayoutDashboard className="h-4 w-4" />
-      <div className="px-1 py-1 rounded-xl bg-base-bg dark:bg-background border border-border-interactive/10 shadow-card-sm">
+      <p className="text-sm font-medium text-elements-primary">{name}</p>
-        <TemplateIcon type={icon as TemplateIconType} />
-      </div>
-      {/* Name */}
-      <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em dark:text-foreground">
-        {name}
-      </p>
     </div>
   );
 };
+
+export { MockProjectCard, MockTemplateCard };

packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx

@@ -3,16 +3,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Spinner } from '@snowballtools/material-tailwind-react-fork';
 
-import { relativeTimeISO } from 'utils/time';
-import { GitRepositoryDetails } from '../../../../types/types';
-import { useGQLClient } from 'context/GQLClientContext';
-import {
-  ArrowRightCircleIcon,
-  GithubIcon,
-  LockIcon,
-} from 'components/shared/CustomIcon';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
+import { useGQLClient } from 'context/GQLClientContext';
+import { ArrowRight, Github, Lock } from 'lucide-react';
+import { relativeTimeISO } from 'utils/time';
+import { GitRepositoryDetails } from '../../../../types/types';
 
 interface ProjectRepoCardProps {
   repository: GitRepositoryDetails;
@@ -50,7 +46,7 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
     >
       {/* Icon container */}
       <div className="w-10 h-10 bg-base-bg rounded-md justify-center items-center flex dark:bg-overlay">
-        <GithubIcon />
+        <Github />
       </div>
       {/* Content */}
       <div className="flex flex-1 gap-3 flex-wrap">
@@ -64,7 +60,7 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
         </div>
         {repository.visibility === 'private' && (
           <div className="bg-orange-50 border border-orange-200 px-2 py-1 flex items-center gap-1 rounded-lg text-xs text-orange-600 dark:text-error h-fit">
-            <LockIcon />
+            <Lock />
             Private
           </div>
         )}
@@ -79,7 +75,7 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
           iconOnly
           className="sm:group-hover:flex hidden absolute right-3"
         >
-          <ArrowRightCircleIcon />
+          <ArrowRight />
         </Button>
       )}
     </div>

packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx

@@ -5,11 +5,10 @@ import { useDebounce } from 'usehooks-ts';
 import { ProjectRepoCard } from 'components/projects/create/ProjectRepoCard';
 import { GitOrgDetails, GitRepositoryDetails } from '../../../../types/types';
 import {
-  ChevronGrabberHorizontal,
+  Github,
-  GithubIcon,
+  RotateCw,
-  RefreshIcon,
+  Search,
-  SearchIcon,
+} from 'lucide-react';
-} from 'components/shared/CustomIcon';
 import { Select, SelectOption } from 'components/shared/Select';
 import { Input } from 'components/shared/Input';
 import { Button } from 'components/shared/Button';
@@ -122,7 +121,7 @@ export const RepositoryList = () => {
     return accounts.map((account) => ({
       label: account.login,
       value: account.login,
-      leftIcon: <GithubIcon />,
+      leftIcon: <Github />,
     }));
   }, [accounts]);
 
@@ -135,8 +134,8 @@ export const RepositoryList = () => {
             options={options}
             placeholder="Select a repository"
             value={selectedAccount}
-            leftIcon={selectedAccount ? <GithubIcon /> : undefined}
+            leftIcon={selectedAccount ? <Github /> : undefined}
-            rightIcon={<ChevronGrabberHorizontal />}
+            rightIcon={<RotateCw />}
             onChange={(value) => setSelectedAccount(value as SelectOption)}
           />
         </div>
@@ -145,7 +144,7 @@ export const RepositoryList = () => {
             className="w-full"
             value={searchedRepo}
             placeholder="Search for repository"
-            leftIcon={<SearchIcon />}
+            leftIcon={<Search />}
             onChange={(e) => setSearchedRepo(e.target.value)}
           />
         </div>
@@ -171,7 +170,7 @@ export const RepositoryList = () => {
           </p>
           <Button
             variant="tertiary"
-            leftIcon={<RefreshIcon />}
+            leftIcon={<RotateCw />}
             size="sm"
             onClick={handleResetFilters}
           >

packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx

@@ -1,14 +1,9 @@
-import React, { ComponentPropsWithoutRef, useCallback } from 'react';
 import { Button } from 'components/shared/Button';
-import {
-  ArrowRightCircleIcon,
-  ClockOutlineIcon,
-  TemplateIcon,
-  TemplateIconType,
-} from 'components/shared/CustomIcon';
 import { Tag } from 'components/shared/Tag';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useToast } from 'components/shared/Toast';
+import { GitBranch } from 'lucide-react';
+import React, { ComponentPropsWithoutRef, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { cn } from 'utils/classnames';
 
 export interface TemplateDetail {
@@ -66,14 +61,14 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
     >
       {/* Icon */}
       <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm">
-        <TemplateIcon type={template.icon as TemplateIconType} />
+        <GitBranch />
       </div>
       {/* Name */}
       <p className="flex-1 text-left text-sm tracking-tighter text-elements-high-em">
         {template.name}
       </p>
       {template?.isComingSoon ? (
-        <Tag size="xs" type="neutral" leftIcon={<ClockOutlineIcon />}>
+        <Tag size="xs" type="neutral" leftIcon={<GitBranch />}>
           Soon
         </Tag>
       ) : (
@@ -83,7 +78,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
           iconOnly
           className="group-hover:flex hidden absolute right-3"
         >
-          <ArrowRightCircleIcon />
+          <GitBranch />
         </Button>
       )}
     </div>

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -21,14 +21,7 @@ import {
 } from 'components/shared';
 
 import { Button } from 'components/shared/Button';
-import {
+import { GitBranch, Clock, CheckCircle, AlertTriangle } from 'lucide-react';
-  BranchStrokeIcon,
-  CheckRoundFilledIcon,
-  ClockOutlineIcon,
-  CommitIcon,
-  LoadingIcon,
-  WarningIcon,
-} from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { OverflownText } from 'components/shared/OverflownText';
 import { Tag } from 'components/shared/Tag';
@@ -73,14 +66,14 @@ const DeploymentDetailsCard = ({
       status === DeploymentStatus.Building ||
       status === DeploymentStatus.Deleting
     ) {
-      return <LoadingIcon className="animate-spin" />;
+      return <div className="animate-spin" />;
     }
     if (status === DeploymentStatus.Ready) {
-      return <CheckRoundFilledIcon />;
+      return <CheckCircle />;
     }
 
     if (status === DeploymentStatus.Error) {
-      return <WarningIcon />;
+      return <AlertTriangle />;
     }
   };
 
@@ -164,13 +157,13 @@ const DeploymentDetailsCard = ({
       <div className="flex w-full justify-between md:w-[25%]">
         <div className="text-sm max-w-[60%] md:max-w-full space-y-2 w-full text-elements-low-em">
           <span className="flex gap-1.5 items-center">
-            <BranchStrokeIcon className="h-4 w-4" />
+            <GitBranch className="h-4 w-4" />
             <OverflownText content={deployment.branch}>
               {deployment.branch}
             </OverflownText>
           </span>
           <span className="flex w-full gap-2 items-center">
-            <CommitIcon />
+            <div className="h-4 w-4" />
             <OverflownText content={deployment.commitMessage}>
               {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
               {deployment.commitMessage}
@@ -184,7 +177,7 @@ const DeploymentDetailsCard = ({
       <div className="md:ml-auto w-full md:max-w-[312px] md:w-[30%] gap-1 2xl:gap-5 flex items-center justify-between text-elements-low-em text-sm">
         <div className="flex md:w-[70%] xl:items-center gap-2 flex-1 xl:flex-row md:flex-col">
           <div className="flex gap-2 items-center">
-            <ClockOutlineIcon className="h-4 w-4" />
+            <Clock className="h-4 w-4" />
             <OverflownText content={relativeTimeMs(deployment.createdAt) ?? ''}>
               {relativeTimeMs(deployment.createdAt)}
             </OverflownText>

packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx

@@ -3,10 +3,10 @@ import { Deployment } from 'gql-client';
 import { relativeTimeMs } from 'utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 import {
-  BranchStrokeIcon,
+  GitBranch,
-  ClockOutlineIcon,
+  Clock,
-  CommitIcon,
+  GitCommit,
-} from 'components/shared/CustomIcon';
+} from 'lucide-react';
 import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
 import { OverflownText } from 'components/shared/OverflownText';
@@ -44,11 +44,11 @@ const DeploymentDialogBodyCard = ({
         {/* Branch & commit */}
         <div className="flex items-center gap-6 text-elements-low-em">
           <div className="flex items-center gap-2">
-            <BranchStrokeIcon size={16} />
+            <GitBranch size={16} />
             <p className="text-sm tracking-[0.006em]">{deployment.branch}</p>
           </div>
           <div className="flex items-center gap-2 w-full">
-            <CommitIcon size={16} />
+            <GitCommit size={16} />
             <p className="text-sm tracking-[0.006em] max-w-[67.5%] sm:max-w-[80%]">
               <OverflownText content={commit}>{commit}</OverflownText>
             </p>
@@ -56,7 +56,7 @@ const DeploymentDialogBodyCard = ({
         </div>
       </div>
       <div className="flex items-center gap-2 text-elements-low-em">
-        <ClockOutlineIcon size={16} />
+        <Clock size={16} />
         <p className="text-sm tracking-[0.006em]">
           {relativeTimeMs(deployment.createdAt)}
         </p>

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -1,4 +1,4 @@
-import { useState, ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, useState } from 'react';
 
 import {
   Menu,
@@ -7,21 +7,21 @@ import {
   MenuList,
 } from '@snowballtools/material-tailwind-react-fork';
 
-import { Deployment, Domain, Environment, Project } from 'gql-client';
-import { Button } from 'components/shared/Button';
-import {
-  HorizontalDotIcon,
-  LinkIcon,
-  RefreshIcon,
-  RocketIcon,
-  UndoIcon,
-  CrossCircleIcon,
-} from 'components/shared/CustomIcon';
-import { useGQLClient } from 'context/GQLClientContext';
-import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
-import { useToast } from 'components/shared/Toast';
 import { DeleteDeploymentDialog } from 'components/projects/Dialog/DeleteDeploymentDialog';
+import { Button } from 'components/shared/Button';
+import { useToast } from 'components/shared/Toast';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Deployment, Domain, Environment, Project } from 'gql-client';
+import {
+  Link,
+  MoreHorizontal,
+  Rocket,
+  RotateCw,
+  Trash2,
+  Undo
+} from 'lucide-react';
+import { cn } from 'utils/classnames';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -157,7 +157,7 @@ export const DeploymentMenu = ({
                 'h-8 w-8 rounded-full border border-transparent transition-colors background-transparent',
                 '[&[aria-expanded=true]]:border [&[aria-expanded=true]]:border-border-interactive [&[aria-expanded=true]]:bg-controls-tertiary [&[aria-expanded=true]]:shadow-button',
               )}
-              leftIcon={<HorizontalDotIcon />}
+              leftIcon={<MoreHorizontal />}
               aria-label="Toggle Menu"
             />
           </MenuHandler>
@@ -172,7 +172,7 @@ export const DeploymentMenu = ({
                 target="_blank"
                 rel="noreferrer"
               >
-                <LinkIcon /> Visit
+                <Link /> Visit
               </a>
             </MenuItem>
             <MenuItem
@@ -180,7 +180,7 @@ export const DeploymentMenu = ({
               onClick={() => setChangeToProduction(!changeToProduction)}
               disabled={!(deployment.environment !== Environment.Production)}
             >
-              <RocketIcon /> Change to production
+              <Rocket /> Change to production
             </MenuItem>
             <hr className="my-3" />
             <MenuItem
@@ -193,7 +193,7 @@ export const DeploymentMenu = ({
                 )
               }
             >
-              <RefreshIcon /> Redeploy to production
+              <RotateCw /> Redeploy
             </MenuItem>
             <MenuItem
               className="hover:bg-base-bg-emphasized flex items-center gap-3"
@@ -204,13 +204,13 @@ export const DeploymentMenu = ({
                 !Boolean(currentDeployment)
               }
             >
-              <UndoIcon /> Rollback to this version
+              <Undo /> Rollback
             </MenuItem>
             <MenuItem
               className="hover:bg-base-bg-emphasized flex items-center gap-3"
               onClick={() => setDeleteDeploymentDialog((preVal) => !preVal)}
             >
-              <CrossCircleIcon /> Delete deployment
+              <Trash2 /> Delete deployment
             </MenuItem>
           </MenuList>
         </Menu>

packages/frontend/src/components/projects/project/deployments/FilterForm.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 
-import { Input } from 'components/shared/Input';
-import {
-  CheckRadioOutlineIcon,
-  CrossCircleIcon,
-  LoaderIcon,
-  SearchIcon,
-  TrendingIcon,
-  WarningTriangleIcon,
-} from 'components/shared/CustomIcon';
 import { DatePicker } from 'components/shared/DatePicker';
+import { Input } from 'components/shared/Input';
 import { Select, SelectOption } from 'components/shared/Select';
+import {
+  AlertTriangle,
+  CheckCircle,
+  Loader2,
+  Search,
+  TrendingUp,
+  X
+} from 'lucide-react';
 import { Value } from 'types/vendor';
 
 export enum StatusOptions {
@@ -53,14 +53,14 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
   const getOptionIcon = (status: StatusOptions) => {
     switch (status) {
       case StatusOptions.BUILDING:
-        return <LoaderIcon />;
+        return <Loader2 />;
       case StatusOptions.READY:
-        return <CheckRadioOutlineIcon />;
+        return <CheckCircle />;
       case StatusOptions.ERROR:
-        return <WarningTriangleIcon />;
+        return <AlertTriangle />;
       case StatusOptions.ALL_STATUS:
       default:
-        return <TrendingIcon />;
+        return <TrendingUp />;
     }
   };
 
@@ -79,9 +79,9 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
       <div className="col-span-4 flex items-center">
         <Input
           placeholder="Search branches"
-          leftIcon={<SearchIcon />}
+          leftIcon={<Search />}
           rightIcon={
-            searchedBranch && <CrossCircleIcon onClick={handleReset} />
+            searchedBranch && <X onClick={handleReset} />
           }
           value={searchedBranch}
           onChange={(e) => setSearchedBranch(e.target.value)}

packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx

@@ -2,7 +2,7 @@ import { GitCommitWithBranch } from '../../../../../types/types';
 import { Heading } from 'components/shared/Heading';
 import ActivityCard from './ActivityCard';
 import { Button } from 'components/shared/Button';
-import { LoadingIcon } from 'components/shared/CustomIcon';
+import { Loader } from 'lucide-react';
 
 export const Activity = ({
   isLoading,
@@ -22,7 +22,7 @@ export const Activity = ({
       <div className="mt-5">
         {isLoading ? (
           <div className="grid place-content-center mt-10">
-            <LoadingIcon className="animate-spin" />
+            <Loader className="animate-spin" />
           </div>
         ) : (
           activities.map((activity, index) => {

packages/frontend/src/components/projects/project/overview/Activity/ActivityCard.tsx

@@ -2,10 +2,7 @@ import { Link } from 'react-router-dom';
 import { GitCommitWithBranch } from '../../../../../types/types';
 import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
-import {
+import { Check, GitBranch } from 'lucide-react';
-  ArrowRightCircleFilledIcon,
-  BranchStrokeIcon,
-} from 'components/shared/CustomIcon';
 import { formatDistance } from 'date-fns';
 import { getInitials } from 'utils/geInitials';
 
@@ -49,7 +46,7 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
             <span className="w-0.5 h-0.5 rounded-full bg-border-interactive-hovered"></span>
             <span className="flex justify-center items-center gap-1.5">
               <div>
-                <BranchStrokeIcon className="w-3 h-3" />
+                <GitBranch className="w-3 h-3" />
               </div>
               <span
                 title={activity.branch.name}
@@ -72,7 +69,7 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
           variant="unstyled"
           tabIndex={-1}
           className="p-0 text-elements-low-em group-focus-within:opacity-100 group-hover:opacity-100 opacity-0 transition-all"
-          leftIcon={<ArrowRightCircleFilledIcon className="w-5 h-5" />}
+          leftIcon={<Check className="w-5 h-5" />}
         />
       </Link>
       {/* Separator calc => 100% - 36px (avatar) - 12px (padding-left) - 8px (gap)

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -9,10 +9,7 @@ import {
 } from '@mui/material';
 
 import { Button, Heading, Tag } from 'components/shared';
-import {
+import { CheckCircle, Loader2 } from 'lucide-react';
-    CheckRoundFilledIcon,
-    LoadingIcon,
-} from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 
 const WAIT_DURATION = 5000;
@@ -36,9 +33,9 @@ export const AuctionCard = ({ project }: { project: Project }) => {
 
   const getIconByAuctionStatus = (status: string) =>
     status === 'completed' ? (
-      <CheckRoundFilledIcon />
+      <CheckCircle />
     ) : (
-      <LoadingIcon className="animate-spin" />
+      <Loader2 className="animate-spin" />
     );
 
   const checkAuctionStatus = useCallback(async () => {

packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx

@@ -2,7 +2,7 @@ import { UseFormRegister } from 'react-hook-form';
 
 import { EnvironmentVariablesFormValues } from '../../../../types';
 import { Button } from 'components/shared/Button';
-import { TrashIcon } from 'components/shared/CustomIcon';
+import { Trash } from 'lucide-react';
 import { Input } from 'components/shared/Input';
 
 interface AddEnvironmentVariableRowProps {
@@ -35,7 +35,7 @@ const AddEnvironmentVariableRow = ({
         })}
       />
       <Button size="md" iconOnly onClick={onDelete} disabled={isDeleteDisabled}>
-        <TrashIcon />
+        <Trash />
       </Button>
     </div>
   );

packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx

@@ -3,10 +3,7 @@ import { Collapse } from '@snowballtools/material-tailwind-react-fork';
 
 import EditEnvironmentVariableRow from './EditEnvironmentVariableRow';
 import { Environment, EnvironmentVariable } from 'gql-client';
-import {
+import { Eye, EyeOff } from 'lucide-react';
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from 'components/shared/CustomIcon';
 
 interface DisplayEnvironmentVariablesProps {
   environment: Environment;
@@ -27,7 +24,7 @@ const DisplayEnvironmentVariables = ({
         className="flex gap-4 p-2 dark:text-foreground"
         onClick={() => setOpenCollapse((cur) => !cur)}
       >
-        {openCollapse ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />}
+        {openCollapse ? <Eye /> : <EyeOff />}
         <div className="grow capitalize">{environment}</div>
         <div>{variables.length} variables</div>
       </div>

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -1,22 +1,23 @@
-import { useEffect, useState } from 'react';
 import { DNSRecordAttributes, Domain, DomainStatus, Project } from 'gql-client';
+import { useEffect, useState } from 'react';
 
 import {
-  Typography,
+  Card,
   Menu,
   MenuHandler,
-  MenuList,
   MenuItem,
-  Card,
+  MenuList,
+  Typography,
 } from '@snowballtools/material-tailwind-react-fork';
 
-import EditDomainDialog from './EditDomainDialog';
-import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
+import { Globe2 } from 'lucide-react';
 import { useToast } from 'components/shared/Toast';
-import { GearIcon } from 'components/shared/CustomIcon';
+import { useGQLClient } from 'context/GQLClientContext';
-import { Heading } from 'components/shared/Heading';
+import EditDomainDialog from './EditDomainDialog';
+
 import { Button } from 'components/shared/Button';
+import { Heading } from 'components/shared/Heading';
 import { useParams } from 'react-router-dom';
 
 // NOTE: Commented code for verify domain functionality
@@ -145,7 +146,7 @@ const DomainCard = ({
           <Menu placement="bottom-end">
             <MenuHandler>
               <Button iconOnly>
-                <GearIcon />
+                <Globe2 />
               </Button>
             </MenuHandler>
             <MenuList>

packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx

@@ -1,20 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
-import { Input } from 'components/shared/Input';
 import { Button } from 'components/shared/Button';
-import {
+import { Input } from 'components/shared/Input';
-  CheckRoundFilledIcon,
-  CrossIcon,
-  EditBigIcon,
-  HideEyeOffIcon,
-  ShowEyeIcon,
-  TrashIcon,
-} from 'components/shared/CustomIcon';
-import { EnvironmentVariable } from 'gql-client';
 import { useToast } from 'components/shared/Toast';
+import { useGQLClient } from 'context/GQLClientContext';
+import { EnvironmentVariable } from 'gql-client';
+import { CheckCircle, Edit, Eye, EyeOff, Trash2, X } from 'lucide-react';
 
 const ShowPasswordIcon = ({
   handler,
@@ -30,7 +23,7 @@ const ShowPasswordIcon = ({
       }}
       className="cursor-pointer"
     >
-      {isVisible ? <ShowEyeIcon size={16} /> : <HideEyeOffIcon size={16} />}
+      {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}
     </span>
   );
 };
@@ -145,11 +138,7 @@ const EditEnvironmentVariableRow = ({
               : setEdit((preVal) => !preVal);
           }}
         >
-          {edit ? (
+          {edit ? <CheckCircle size={16} /> : <Edit size={16} />}
-            <CheckRoundFilledIcon size={16} />
-          ) : (
-            <EditBigIcon size={16} />
-          )}
         </Button>
         <Button
           iconOnly
@@ -163,7 +152,7 @@ const EditEnvironmentVariableRow = ({
             }
           }}
         >
-          {edit ? <CrossIcon size={16} /> : <TrashIcon size={16} />}
+          {edit ? <X size={16} /> : <Trash2 size={16} />}
         </Button>
       </div>
       <DeleteVariableDialog

packages/frontend/src/components/projects/project/settings/MemberCard.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
 import { Select, SelectOption } from 'components/shared/Select';
-import { LoaderIcon } from 'components/shared/CustomIcon';
+import { X } from 'lucide-react';
 import { Tooltip } from 'components/shared/Tooltip';
 import { Button } from 'components/shared/Button';
 import { Permission, User } from 'gql-client';
@@ -112,7 +112,7 @@ const MemberCard = ({
         ) : (
           <div className="flex justify-end gap-2">
             <div>
-              <Tag type="positive" size="sm" leftIcon={<LoaderIcon />}>
+              <Tag type="positive" size="sm" leftIcon={<X />}>
                 Pending
               </Tag>
             </div>

packages/frontend/src/components/projects/project/settings/WebhookCard.tsx

@@ -4,7 +4,8 @@ import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDia
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
 import { Input } from 'components/shared/Input';
-import { CopyIcon, TrashIcon } from 'components/shared/CustomIcon';
+import { Copy } from 'lucide-react';
+import { X } from 'lucide-react';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -32,7 +33,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             });
           }}
         >
-          <CopyIcon />
+          <Copy />
         </Button>
         <Button
           iconOnly
@@ -42,7 +43,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             setDeleteDialogOpen(true);
           }}
         >
-          <TrashIcon />
+          <X />
         </Button>
       </div>
       <DeleteWebhookDialog

packages/frontend/src/components/shared/Calendar/Calendar.tsx

@@ -1,9 +1,9 @@
 import { Button } from 'components/shared/Button';
 import {
-  ChevronGrabberHorizontal,
+  GripHorizontal,
   ChevronLeft,
   ChevronRight,
-} from 'components/shared/CustomIcon';
+} from 'lucide-react';
 import {
   ComponentPropsWithRef,
   MouseEvent,
@@ -248,7 +248,7 @@ export const Calendar = ({
               variant="unstyled"
               className={button()}
               rightIcon={
-                <ChevronGrabberHorizontal className="text-elements-low-em" />
+                <GripHorizontal className="text-elements-low-em" />
               }
               onClick={() => handleChangeView('year')}
             >
@@ -258,7 +258,7 @@ export const Calendar = ({
               variant="unstyled"
               className={button()}
               rightIcon={
-                <ChevronGrabberHorizontal className="text-elements-low-em" />
+                <GripHorizontal className="text-elements-low-em" />
               }
               onClick={() => handleChangeView('decade')}
             >

packages/frontend/src/components/shared/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxRadix from '@radix-ui/react-checkbox';
 import { type CheckboxProps as CheckboxRadixProps } from '@radix-ui/react-checkbox';
 
 import { getCheckboxVariant, type CheckboxVariants } from './Checkbox.theme';
-import { CheckIcon } from 'components/shared/CustomIcon';
+import { Check } from 'lucide-react';
 
 interface CheckBoxProps extends CheckboxRadixProps, CheckboxVariants {
   /**
@@ -59,7 +59,7 @@ export const Checkbox = ({
         onCheckedChange={onCheckedChange}
       >
         <CheckboxRadix.Indicator forceMount className={indicatorStyle()}>
-          <CheckIcon className={iconStyle()} />
+          <Check size={18} className={iconStyle()} />
         </CheckboxRadix.Indicator>
       </CheckboxRadix.Root>
       {label && (

packages/frontend/src/components/shared/CustomIcon/AppleIcon.tsx

@@ -1,29 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const AppleIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="21"
-      height="21"
-      viewBox="0 0 21 21"
-      fill="none"
-      {...props}
-    >
-      <g clipPath="url(#clip0_2415_13467)">
-        <path
-          fill="currentColor"
-          d="M18.234 16.046c-.29.67-.633 1.286-1.03 1.853-.543.772-.986 1.307-1.328 1.604-.53.487-1.098.737-1.706.751-.437 0-.963-.124-1.576-.376-.615-.25-1.18-.375-1.696-.375-.542 0-1.123.124-1.745.375-.623.252-1.124.383-1.508.396-.583.025-1.164-.232-1.744-.771-.37-.323-.834-.877-1.389-1.661-.595-.838-1.084-1.809-1.468-2.916-.41-1.197-.616-2.355-.616-3.476 0-1.284.277-2.392.833-3.32a4.89 4.89 0 011.746-1.767 4.696 4.696 0 012.36-.665c.463 0 1.07.143 1.825.424.753.283 1.236.426 1.448.426.159 0 .695-.167 1.606-.501.86-.31 1.587-.438 2.182-.388 1.612.13 2.824.766 3.63 1.911-1.443.874-2.156 2.098-2.142 3.668.013 1.223.457 2.24 1.329 3.049.395.375.836.665 1.327.87-.106.31-.219.605-.338.889zM14.535 1.493c0 .958-.35 1.853-1.048 2.682-.842.985-1.861 1.554-2.966 1.464a3 3 0 01-.022-.363c0-.92.4-1.905 1.112-2.71a4.282 4.282 0 011.354-1.018c.547-.266 1.064-.413 1.55-.439.015.129.02.257.02.384z"
-        ></path>
-      </g>
-      <defs>
-        <clipPath id="clip0_2415_13467">
-          <path
-            fill="currentColor"
-            d="M0 0H20V20H0z"
-            transform="translate(.5 .691)"
-          ></path>
-        </clipPath>
-      </defs>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ArrowLeftCircleFilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10.4697 15.7803C10.7626 16.0732 11.2374 16.0732 11.5303 15.7803C11.8232 15.4874 11.8232 15.0126 11.5303 14.7197L9.56066 12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H9.56066L11.5303 9.28033C11.8232 8.98744 11.8232 8.51256 11.5303 8.21967C11.2374 7.92678 10.7626 7.92678 10.4697 8.21967L7.21967 11.4697C6.92678 11.7626 6.92678 12.2374 7.21967 12.5303L10.4697 15.7803Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ArrowRightCircleFilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      fill="none"
-      height="32"
-      viewBox="0 0 32 32"
-      width="32"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M29.3334 16C29.3334 8.63619 23.3638 2.66666 16 2.66666C8.63622 2.66666 2.66669 8.63619 2.66669 16C2.66669 23.3638 8.63622 29.3333 16 29.3333C23.3638 29.3333 29.3334 23.3638 29.3334 16ZM18.1144 17.3333L16.3905 19.0572C15.8698 19.5779 15.8698 20.4221 16.3905 20.9428C16.9112 21.4635 17.7555 21.4635 18.2762 20.9428L21.3334 17.8856C22.3748 16.8442 22.3748 15.1558 21.3334 14.1144L18.2762 11.0572C17.7555 10.5365 16.9112 10.5365 16.3905 11.0572C15.8698 11.5779 15.8698 12.4221 16.3905 12.9428L18.1144 14.6667H10.6667C9.93031 14.6667 9.33335 15.2636 9.33335 16C9.33335 16.7364 9.93031 17.3333 10.6667 17.3333H18.1144Z"
-        fill="currentColor"
-        fillRule="evenodd"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ArrowRightCircleIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="17"
-      height="16"
-      viewBox="0 0 17 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M15.3333 8C15.3333 4.3181 12.3486 1.33333 8.66667 1.33333C4.98477 1.33333 2 4.3181 2 8C2 11.6819 4.98477 14.6667 8.66667 14.6667C12.3486 14.6667 15.3333 11.6819 15.3333 8ZM10.2929 8.5L8.97978 9.81311C8.78452 10.0084 8.78452 10.325 8.97978 10.5202C9.17504 10.7155 9.49162 10.7155 9.68689 10.5202L11.3821 8.82495C11.8378 8.36934 11.8378 7.63065 11.3821 7.17504L9.68689 5.47977C9.49162 5.28451 9.17504 5.28451 8.97978 5.47977C8.78452 5.67504 8.78452 5.99162 8.97978 6.18688L10.2929 7.5H5.83333C5.55719 7.5 5.33333 7.72385 5.33333 8C5.33333 8.27614 5.55719 8.5 5.83333 8.5H10.2929Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/BranchIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const BranchIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M3.5 1C2.67157 1 2 1.67157 2 2.5C2 3.24325 2.54057 3.86024 3.25 3.97926V8.02074C2.54057 8.13976 2 8.75675 2 9.5C2 10.3284 2.67157 11 3.5 11C4.32843 11 5 10.3284 5 9.5C5 8.75675 4.45943 8.13976 3.75 8.02074V7C3.75 6.58579 4.08579 6.25 4.5 6.25H7.5C8.19036 6.25 8.75 5.69036 8.75 5V3.97926C9.45943 3.86024 10 3.24325 10 2.5C10 1.67157 9.32843 1 8.5 1C7.67157 1 7 1.67157 7 2.5C7 3.24325 7.54057 3.86024 8.25 3.97926V5C8.25 5.41421 7.91421 5.75 7.5 5.75H4.5C4.2186 5.75 3.95892 5.84299 3.75 5.99991V3.97926C4.45943 3.86024 5 3.24325 5 2.5C5 1.67157 4.32843 1 3.5 1Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const BranchStrokeIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M14.1667 9.99967V10.4997H14.6667V9.99967H14.1667ZM5.83333 9.99967V9.49967H5.33333V9.99967H5.83333ZM7.41667 4.16634C7.41667 5.04079 6.70778 5.74967 5.83333 5.74967V6.74967C7.26007 6.74967 8.41667 5.59308 8.41667 4.16634H7.41667ZM5.83333 5.74967C4.95888 5.74967 4.25 5.04079 4.25 4.16634H3.25C3.25 5.59308 4.4066 6.74967 5.83333 6.74967V5.74967ZM4.25 4.16634C4.25 3.29189 4.95888 2.58301 5.83333 2.58301V1.58301C4.4066 1.58301 3.25 2.73961 3.25 4.16634H4.25ZM5.83333 2.58301C6.70778 2.58301 7.41667 3.29189 7.41667 4.16634H8.41667C8.41667 2.73961 7.26007 1.58301 5.83333 1.58301V2.58301ZM7.41667 15.833C7.41667 16.7075 6.70778 17.4163 5.83333 17.4163V18.4163C7.26007 18.4163 8.41667 17.2597 8.41667 15.833H7.41667ZM5.83333 17.4163C4.95888 17.4163 4.25 16.7075 4.25 15.833H3.25C3.25 17.2597 4.4066 18.4163 5.83333 18.4163V17.4163ZM4.25 15.833C4.25 14.9586 4.95888 14.2497 5.83333 14.2497V13.2497C4.4066 13.2497 3.25 14.4063 3.25 15.833H4.25ZM5.83333 14.2497C6.70778 14.2497 7.41667 14.9586 7.41667 15.833H8.41667C8.41667 14.4063 7.26007 13.2497 5.83333 13.2497V14.2497ZM5.33333 6.24967V13.7497H6.33333V6.24967H5.33333ZM13.6667 6.24967V9.99967H14.6667V6.24967H13.6667ZM14.1667 9.49967H5.83333V10.4997H14.1667V9.49967ZM5.33333 9.99967V13.7497H6.33333V9.99967H5.33333ZM15.75 4.16634C15.75 5.04079 15.0411 5.74967 14.1667 5.74967V6.74967C15.5934 6.74967 16.75 5.59308 16.75 4.16634H15.75ZM14.1667 5.74967C13.2922 5.74967 12.5833 5.04079 12.5833 4.16634H11.5833C11.5833 5.59308 12.7399 6.74967 14.1667 6.74967V5.74967ZM12.5833 4.16634C12.5833 3.29189 13.2922 2.58301 14.1667 2.58301V1.58301C12.7399 1.58301 11.5833 2.73961 11.5833 4.16634H12.5833ZM14.1667 2.58301C15.0411 2.58301 15.75 3.29189 15.75 4.16634H16.75C16.75 2.73961 15.5934 1.58301 14.1667 1.58301V2.58301Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/BuildingIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const BuildingIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M3.75 19.25H14.25M3.75 19.25V5.75C3.75 4.64543 4.64543 3.75 5.75 3.75H12.25C13.3546 3.75 14.25 4.64543 14.25 5.75V8M3.75 19.25H1.75M14.25 19.25V8M14.25 19.25H20.25M14.25 8H18.25C19.3546 8 20.25 8.89543 20.25 10V19.25M20.25 19.25H22.25M10.25 8.75H7.75M7.75 12.75H10.25"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CalendarDaysIcon.tsx

@@ -1,40 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CalendarDaysIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M2.3335 5.00016H13.6668M4.33349 13.6668H11.6668C12.7714 13.6668 13.6668 12.7714 13.6668 11.6668V4.3335C13.6668 3.22893 12.7714 2.3335 11.6668 2.3335H4.3335C3.22893 2.3335 2.3335 3.22893 2.3335 4.33349V11.6668C2.3335 12.7714 3.22893 13.6668 4.33349 13.6668Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M4.6665 7.8335C4.6665 7.55735 4.89036 7.3335 5.1665 7.3335C5.44265 7.3335 5.6665 7.55735 5.6665 7.8335C5.6665 8.10964 5.44265 8.3335 5.1665 8.3335C4.89036 8.3335 4.6665 8.10964 4.6665 7.8335Z"
-        fill="currentColor"
-      />
-      <path
-        d="M4.6665 10.8335C4.6665 10.5574 4.89036 10.3335 5.1665 10.3335C5.44265 10.3335 5.6665 10.5574 5.6665 10.8335C5.6665 11.1096 5.44265 11.3335 5.1665 11.3335C4.89036 11.3335 4.6665 11.1096 4.6665 10.8335Z"
-        fill="currentColor"
-      />
-      <path
-        d="M7.49984 10.8335C7.49984 10.5574 7.72369 10.3335 7.99984 10.3335C8.27598 10.3335 8.49984 10.5574 8.49984 10.8335C8.49984 11.1096 8.27598 11.3335 7.99984 11.3335C7.72369 11.3335 7.49984 11.1096 7.49984 10.8335Z"
-        fill="currentColor"
-      />
-      <path
-        d="M7.49984 7.8335C7.49984 7.55735 7.72369 7.3335 7.99984 7.3335C8.27598 7.3335 8.49984 7.55735 8.49984 7.8335C8.49984 8.10964 8.27598 8.3335 7.99984 8.3335C7.72369 8.3335 7.49984 8.10964 7.49984 7.8335Z"
-        fill="currentColor"
-      />
-      <path
-        d="M10.3332 7.8335C10.3332 7.55735 10.557 7.3335 10.8332 7.3335C11.1093 7.3335 11.3332 7.55735 11.3332 7.8335C11.3332 8.10964 11.1093 8.3335 10.8332 8.3335C10.557 8.3335 10.3332 8.10964 10.3332 7.8335Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CalendarIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M2.625 7.125H15.375M5.625 3.375V1.875M12.375 3.375V1.875M4.125 15.375H13.875C14.7034 15.375 15.375 14.7034 15.375 13.875V4.875C15.375 4.04657 14.7034 3.375 13.875 3.375H4.125C3.29657 3.375 2.625 4.04657 2.625 4.875V13.875C2.625 14.7034 3.29657 15.375 4.125 15.375Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CheckIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M1.5 7.5L4.64706 10L10.5 2"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CheckRadioIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CheckRadioIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5ZM7.93079 12.3663L12.3055 7.01944L11.1446 6.06958L7.81944 10.1336L6.37511 8.68932L5.31445 9.74998L7.93079 12.3663Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CheckRadioOutlineIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M11.25 7.125L7.875 11.25L6.375 9.75M16.125 9C16.125 12.935 12.935 16.125 9 16.125C5.06497 16.125 1.875 12.935 1.875 9C1.875 5.06497 5.06497 1.875 9 1.875C12.935 1.875 16.125 5.06497 16.125 9Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx

@@ -1,14 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CheckRoundFilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon width="20" height="20" viewBox="0 0 20 20" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM13.774 8.13327C14.1237 7.70582 14.0607 7.0758 13.6332 6.72607C13.2058 6.37635 12.5758 6.43935 12.226 6.86679L8.42576 11.5116L7.20711 10.2929C6.81658 9.9024 6.18342 9.9024 5.79289 10.2929C5.40237 10.6834 5.40237 11.3166 5.79289 11.7071L7.79289 13.7071C7.99267 13.9069 8.26764 14.0129 8.54981 13.9988C8.83199 13.9847 9.09505 13.8519 9.27396 13.6333L13.774 8.13327Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronDoubleDownIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronDoubleDownIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="21"
-      viewBox="0 0 20 21"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M6.66699 12.0174L10.0003 15.3507L13.3337 12.0174M6.66699 6.18408L10.0003 9.51742L13.3337 6.18408"
-        stroke="currentColor"
-        strokeLinecap="square"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronDownIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronDownIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M20 9L13.4142 15.5858C12.6332 16.3668 11.3669 16.3668 10.5858 15.5858L4 9"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronDownSmallIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronDownSmallIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.4697 14.5303C11.7626 14.8232 12.2374 14.8232 12.5303 14.5303L16.5303 10.5303C16.8232 10.2374 16.8232 9.76256 16.5303 9.46967C16.2374 9.17678 15.7626 9.17678 15.4697 9.46967L12 12.9393L8.53033 9.46967C8.23744 9.17678 7.76256 9.17678 7.46967 9.46967C7.17678 9.76256 7.17678 10.2374 7.46967 10.5303L11.4697 14.5303Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronGrabberHorizontal = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M6.66666 12.5L9.99999 15.8333L13.3333 12.5M6.66666 7.5L9.99999 4.16666L13.3333 7.5"
-        stroke="currentColor"
-        strokeLinecap="square"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronLeft = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.7071 2.66666L5.37378 8.00001L10.7071 13.3333L10 14.0404L3.95956 8.00001L10 1.95956L10.7071 2.66666Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronRight = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.00001 1.95956L12.0405 7.99998L6.00001 14.0404L5.29291 13.3333L10.6262 7.99999L5.29291 2.66666L6.00001 1.95956Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronUpDown.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronUpDown = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M8 15L12 19L16 15M8 9L12 5L16 9"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ChevronUpSmallIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ChevronUpSmallIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.4697 9.46967C11.7626 9.17678 12.2374 9.17678 12.5303 9.46967L16.5303 13.4697C16.8232 13.7626 16.8232 14.2374 16.5303 14.5303C16.2374 14.8232 15.7626 14.8232 15.4697 14.5303L12 11.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L11.4697 9.46967Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CirclePlaceholderOnIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M16.125 9C16.125 12.935 12.935 16.125 9 16.125C5.06497 16.125 1.875 12.935 1.875 9C1.875 5.06497 5.06497 1.875 9 1.875C12.935 1.875 16.125 5.06497 16.125 9Z"
-        stroke="currentColor"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ClockIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ClockIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M6 1.125C5.03582 1.125 4.09329 1.41091 3.2916 1.94659C2.48991 2.48226 1.86507 3.24363 1.49609 4.13442C1.12711 5.02521 1.03057 6.00541 1.21867 6.95107C1.40678 7.89672 1.87108 8.76536 2.55286 9.44715C3.23464 10.1289 4.10328 10.5932 5.04894 10.7813C5.99459 10.9694 6.97479 10.8729 7.86558 10.5039C8.75637 10.1349 9.51775 9.51009 10.0534 8.7084C10.5891 7.90671 10.875 6.96418 10.875 6C10.8736 4.70749 10.3596 3.46831 9.44564 2.55436C8.5317 1.64042 7.29251 1.12636 6 1.125ZM8.625 6.375H6C5.90055 6.375 5.80516 6.33549 5.73484 6.26517C5.66451 6.19484 5.625 6.09946 5.625 6V3.375C5.625 3.27554 5.66451 3.18016 5.73484 3.10984C5.80516 3.03951 5.90055 3 6 3C6.09946 3 6.19484 3.03951 6.26517 3.10984C6.33549 3.18016 6.375 3.27554 6.375 3.375V5.625H8.625C8.72446 5.625 8.81984 5.66451 8.89017 5.73484C8.96049 5.80516 9 5.90054 9 6C9 6.09946 8.96049 6.19484 8.89017 6.26517C8.81984 6.33549 8.72446 6.375 8.625 6.375Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ClockOutlineIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M7.99984 5V8L9.99984 10M14.3332 8C14.3332 11.4978 11.4976 14.3333 7.99984 14.3333C4.50203 14.3333 1.6665 11.4978 1.6665 8C1.6665 4.5022 4.50203 1.66667 7.99984 1.66667C11.4976 1.66667 14.3332 4.5022 14.3332 8Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CollaboratorsIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M12.5002 2.08301C14.3411 2.08301 15.8335 3.57539 15.8335 5.41634C15.8335 7.25729 14.3411 8.74968 12.5002 8.74968M14.5835 11.1659C17.2451 12.0374 19.1668 14.498 19.1668 17.083H16.6668M7.50016 8.74968C5.65921 8.74968 4.16683 7.25729 4.16683 5.41634C4.16683 3.57539 5.65921 2.08301 7.50016 2.08301C9.34111 2.08301 10.8335 3.57539 10.8335 5.41634C10.8335 7.25729 9.34111 8.74968 7.50016 8.74968ZM0.833496 17.083C0.833496 13.8613 3.81826 10.833 7.50016 10.833C11.1821 10.833 14.1668 13.8613 14.1668 17.083H0.833496Z"
-        stroke="currentColor"
-        strokeLinecap="square"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CommitIcon.tsx

@@ -1,25 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CommitIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <g clipPath="url(#clip0_755_4058)">
-        <path
-          d="M15.5 7.50001H11.4637C11.343 6.66752 10.9264 5.90636 10.2904 5.35589C9.65427 4.80541 8.84121 4.50244 8 4.50244C7.15879 4.50244 6.34573 4.80541 5.70964 5.35589C5.07355 5.90636 4.65701 6.66752 4.53625 7.50001H0.5C0.367392 7.50001 0.240215 7.55269 0.146447 7.64646C0.0526784 7.74023 0 7.8674 0 8.00001C0 8.13262 0.0526784 8.2598 0.146447 8.35357C0.240215 8.44733 0.367392 8.50001 0.5 8.50001H4.53625C4.65701 9.33251 5.07355 10.0937 5.70964 10.6441C6.34573 11.1946 7.15879 11.4976 8 11.4976C8.84121 11.4976 9.65427 11.1946 10.2904 10.6441C10.9264 10.0937 11.343 9.33251 11.4637 8.50001H15.5C15.6326 8.50001 15.7598 8.44733 15.8536 8.35357C15.9473 8.2598 16 8.13262 16 8.00001C16 7.8674 15.9473 7.74023 15.8536 7.64646C15.7598 7.55269 15.6326 7.50001 15.5 7.50001ZM8 10.5C7.50555 10.5 7.0222 10.3534 6.61107 10.0787C6.19995 9.80398 5.87952 9.41354 5.6903 8.95672C5.50108 8.49991 5.45157 7.99724 5.54804 7.51229C5.6445 7.02733 5.8826 6.58188 6.23223 6.23224C6.58186 5.88261 7.02732 5.64451 7.51227 5.54805C7.99723 5.45158 8.49989 5.50109 8.95671 5.69031C9.41352 5.87953 9.80397 6.19996 10.0787 6.61109C10.3534 7.02221 10.5 7.50556 10.5 8.00001C10.5 8.66305 10.2366 9.29894 9.76777 9.76778C9.29893 10.2366 8.66304 10.5 8 10.5Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_755_4058">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CopyIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CopyIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.33301 2.66665C1.33301 1.93027 1.92996 1.33331 2.66634 1.33331H9.33301C10.0694 1.33331 10.6663 1.93027 10.6663 2.66665V5.33331H13.333C14.0694 5.33331 14.6663 5.93027 14.6663 6.66665V13.3333C14.6663 14.0697 14.0694 14.6666 13.333 14.6666H6.66634C5.92996 14.6666 5.33301 14.0697 5.33301 13.3333V10.6666H2.66634C1.92996 10.6666 1.33301 10.0697 1.33301 9.33331V2.66665ZM9.66634 5.33331H6.66634C5.92996 5.33331 5.33301 5.93027 5.33301 6.66665V9.66665H2.66634C2.48225 9.66665 2.33301 9.51741 2.33301 9.33331V2.66665C2.33301 2.48255 2.48225 2.33331 2.66634 2.33331H9.33301C9.5171 2.33331 9.66634 2.48255 9.66634 2.66665V5.33331Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CopyUnfilledIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CopyUnfilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M6 5.625V5.025C6 4.18492 6 3.76488 6.16349 3.44401C6.3073 3.16177 6.53677 2.9323 6.81901 2.78849C7.13988 2.625 7.55992 2.625 8.4 2.625H12.975C13.8151 2.625 14.2351 2.625 14.556 2.78849C14.8382 2.9323 15.0677 3.16177 15.2115 3.44401C15.375 3.76488 15.375 4.18492 15.375 5.025V9.975C15.375 10.8151 15.375 11.2351 15.2115 11.556C15.0677 11.8382 14.8382 12.0677 14.556 12.2115C14.2351 12.375 13.8151 12.375 12.975 12.375H12.375M12.375 8.025V12.975C12.375 13.8151 12.375 14.2351 12.2115 14.556C12.0677 14.8382 11.8382 15.0677 11.556 15.2115C11.2351 15.375 10.8151 15.375 9.975 15.375H5.025C4.18492 15.375 3.76488 15.375 3.44401 15.2115C3.16177 15.0677 2.9323 14.8382 2.78849 14.556C2.625 14.2351 2.625 13.8151 2.625 12.975V8.025C2.625 7.18492 2.625 6.76488 2.78849 6.44401C2.9323 6.16177 3.16177 5.9323 3.44401 5.78849C3.76488 5.625 4.18492 5.625 5.025 5.625H9.975C10.8151 5.625 11.2351 5.625 11.556 5.78849C11.8382 5.9323 12.0677 6.16177 12.2115 6.44401C12.375 6.76488 12.375 7.18492 12.375 8.025Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CrossCircleIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9ZM7.01516 6.48484C6.86872 6.33839 6.63128 6.33839 6.48484 6.48484C6.33839 6.63128 6.33839 6.86872 6.48484 7.01516L8.46967 9L6.48484 10.9848C6.33839 11.1313 6.33839 11.3687 6.48484 11.5152C6.63128 11.6616 6.86872 11.6616 7.01516 11.5152L9 9.53033L10.9848 11.5152C11.1313 11.6616 11.3687 11.6616 11.5152 11.5152C11.6616 11.3687 11.6616 11.1313 11.5152 10.9848L9.53033 9L11.5152 7.01516C11.6616 6.86872 11.6616 6.63128 11.5152 6.48484C11.3687 6.33839 11.1313 6.33839 10.9848 6.48484L9 8.46967L7.01516 6.48484Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CrossIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M5 5L19 19M19 5L5 19"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CursorBoxIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const CursorBoxIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M13.5 7V3.83333C13.5 3.09695 12.903 2.5 12.1667 2.5H3.83333C3.09695 2.5 2.5 3.09695 2.5 3.83333V12.1667C2.5 12.903 3.09695 13.5 3.83333 13.5H7M9.43391 14.0852L7.5218 7.9391C7.44202 7.68269 7.68269 7.44202 7.9391 7.5218L14.0852 9.43391C14.3658 9.52122 14.4043 9.90262 14.1468 10.0443L11.5848 11.4534C11.5294 11.4838 11.4838 11.5294 11.4534 11.5848L10.0443 14.1468C9.90262 14.4043 9.52122 14.3658 9.43391 14.0852Z"
-        stroke="currentColor"
-        strokeWidth="1.05263"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx

@@ -1,30 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-
-export interface CustomIconProps extends ComponentPropsWithoutRef<'svg'> {
-  size?: number | string; // width and height will both be set as the same value
-  name?: string;
-}
-
-export const CustomIcon = ({
-  children,
-  width = 24,
-  height = 24,
-  size,
-  viewBox = '0 0 24 24',
-  name,
-  ...rest
-}: CustomIconProps) => {
-  return (
-    <svg
-      aria-labelledby={name}
-      height={size || height}
-      role="presentation"
-      viewBox={viewBox}
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      {children}
-    </svg>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx

@@ -1,26 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const EditBigIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <g>
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M4.61304 1.99935L7.5 1.99935C7.77614 1.99935 8 2.22321 8 2.49935C8 2.77549 7.77614 2.99935 7.5 2.99935H4.63333C4.25171 2.99935 3.99557 2.99974 3.79832 3.01585C3.6069 3.03149 3.51538 3.05941 3.45501 3.09018C3.29821 3.17007 3.17072 3.29755 3.09083 3.45436C3.06007 3.51473 3.03214 3.60625 3.01651 3.79767C3.00039 3.99492 3 4.25106 3 4.63268V11.366C3 11.7476 3.00039 12.0038 3.01651 12.201C3.03214 12.3924 3.06007 12.484 3.09083 12.5443C3.17072 12.7011 3.29821 12.8286 3.45501 12.9085C3.51538 12.9393 3.6069 12.9672 3.79832 12.9828C3.99557 12.999 4.25171 12.9993 4.63333 12.9993H11.3667C11.7483 12.9993 12.0044 12.999 12.2017 12.9828C12.3931 12.9672 12.4846 12.9393 12.545 12.9085C12.7018 12.8286 12.8293 12.7011 12.9092 12.5443C12.9399 12.484 12.9679 12.3924 12.9835 12.201C12.9996 12.0038 13 11.7476 13 11.366V8.49935C13 8.22321 13.2239 7.99935 13.5 7.99935C13.7761 7.99935 14 8.22321 14 8.49935V11.3863C14 11.7424 14 12.0396 13.9802 12.2825C13.9595 12.5357 13.9147 12.7735 13.8002 12.9983C13.6244 13.3433 13.3439 13.6238 12.999 13.7995C12.7741 13.9141 12.5364 13.9588 12.2831 13.9795C12.0403 13.9994 11.7431 13.9994 11.387 13.9993H4.61303C4.25693 13.9994 3.95971 13.9994 3.71689 13.9795C3.46363 13.9588 3.22586 13.9141 3.00102 13.7995C2.65605 13.6238 2.37559 13.3433 2.19982 12.9983C2.08526 12.7735 2.04052 12.5357 2.01983 12.2825C1.99999 12.0396 1.99999 11.7424 2 11.3863V4.61239C1.99999 4.25629 1.99999 3.95906 2.01983 3.71624C2.04052 3.46298 2.08526 3.22521 2.19982 3.00037C2.37559 2.6554 2.65605 2.37494 3.00102 2.19917C3.22586 2.08461 3.46363 2.03987 3.71689 2.01918C3.95971 1.99934 4.25694 1.99934 4.61304 1.99935Z"
-          fill="currentColor"
-        />
-        <path
-          d="M13.963 1.92174C13.2471 1.20578 12.0863 1.20578 11.3703 1.92174L5.67504 7.617C5.45625 7.83579 5.33333 8.13254 5.33333 8.44196V10.1658C5.33333 10.442 5.55719 10.6658 5.83333 10.6658H7.55719C7.86661 10.6658 8.16336 10.5429 8.38215 10.3241L14.0774 4.62884C14.7934 3.91288 14.7934 2.75208 14.0774 2.03612L13.963 1.92174Z"
-          fill="currentColor"
-        />
-      </g>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/EllipseIcon.tsx

@@ -1,9 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const EllipseIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon width="9" height="8" viewBox="0 0 9 8" fill="none" {...props}>
-      <circle cx="4.5" cy="4" r="4" fill="#082F56" fillOpacity="0.1" />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/EllipsesIcon.tsx

@@ -1,13 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-import { EllipseIcon } from './EllipseIcon';
-
-export const EllipsesIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon width="51" height="8" viewBox="0 0 51 8" fill="none" {...props}>
-      <EllipseIcon />
-      <EllipseIcon x="14" />
-      <EllipseIcon x="28" />
-      <EllipseIcon x="42" />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const FolderIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        id="Icon"
-        d="M2.0835 4.58341V14.5834C2.0835 15.5039 2.82969 16.2501 3.75016 16.2501H16.2502C17.1706 16.2501 17.9168 15.5039 17.9168 14.5834V7.08341C17.9168 6.16294 17.1706 5.41675 16.2502 5.41675H10.8921C10.3349 5.41675 9.81449 5.13825 9.50539 4.67458L8.82827 3.65891C8.51916 3.19525 7.99878 2.91675 7.44152 2.91675H3.75016C2.82969 2.91675 2.0835 3.66294 2.0835 4.58341Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GearIcon.tsx

@@ -1,24 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GearIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <g>
-        <path
-          d="M7.62516 4.45898L5.05225 3.86523L3.86475 5.05273L4.4585 7.62565L2.0835 9.20898V10.7923L4.4585 12.3757L3.86475 14.9486L5.05225 16.1361L7.62516 15.5423L9.2085 17.9173H10.7918L12.3752 15.5423L14.9481 16.1361L16.1356 14.9486L15.5418 12.3757L17.9168 10.7923V9.20898L15.5418 7.62565L16.1356 5.05273L14.9481 3.86523L12.3752 4.45898L10.7918 2.08398H9.2085L7.62516 4.45898Z"
-          stroke="currentColor"
-        />
-        <path
-          d="M12.5002 10.0007C12.5002 11.3814 11.3809 12.5007 10.0002 12.5007C8.61945 12.5007 7.50016 11.3814 7.50016 10.0007C7.50016 8.61994 8.61945 7.50065 10.0002 7.50065C11.3809 7.50065 12.5002 8.61994 12.5002 10.0007Z"
-          fill="currentColor"
-        />
-      </g>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GitHubLogoIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GithubLogoIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M10.125 4.87501V5.25001C10.1242 5.88451 9.89387 6.4973 9.47652 6.97522C9.05917 7.45314 8.48299 7.76392 7.85437 7.85016C8.11096 8.1785 8.25024 8.5833 8.25 9.00001V10.875C8.25 10.9745 8.21049 11.0698 8.14017 11.1402C8.06984 11.2105 7.97446 11.25 7.875 11.25H4.875C4.77554 11.25 4.68016 11.2105 4.60984 11.1402C4.53951 11.0698 4.5 10.9745 4.5 10.875V10.125H3.375C2.87772 10.125 2.40081 9.92746 2.04917 9.57583C1.69754 9.2242 1.5 8.74729 1.5 8.25001C1.5 7.95164 1.38147 7.66549 1.1705 7.45451C0.959517 7.24353 0.673369 7.12501 0.375 7.12501C0.275544 7.12501 0.180161 7.0855 0.109835 7.01517C0.0395088 6.94484 0 6.84946 0 6.75001C0 6.65055 0.0395088 6.55517 0.109835 6.48484C0.180161 6.41451 0.275544 6.37501 0.375 6.37501C0.621229 6.37501 0.865046 6.4235 1.09253 6.51773C1.32002 6.61196 1.52672 6.75007 1.70083 6.92418C1.87494 7.09829 2.01305 7.30499 2.10727 7.53247C2.2015 7.75996 2.25 8.00378 2.25 8.25001C2.25 8.54837 2.36853 8.83452 2.5795 9.0455C2.79048 9.25648 3.07663 9.37501 3.375 9.37501H4.5V9.00001C4.49976 8.5833 4.63904 8.1785 4.89563 7.85016C4.26701 7.76392 3.69083 7.45314 3.27348 6.97522C2.85613 6.4973 2.62579 5.88451 2.625 5.25001V4.87501C2.62967 4.40896 2.75378 3.9519 2.98547 3.54751C2.87085 3.17775 2.83408 2.78826 2.87748 2.40359C2.92089 2.01892 3.04352 1.64742 3.23766 1.31251C3.27058 1.25549 3.31793 1.20814 3.37495 1.17523C3.43198 1.14231 3.49666 1.12499 3.5625 1.12501C3.99929 1.12409 4.43023 1.22535 4.82091 1.42069C5.21159 1.61602 5.55116 1.90003 5.8125 2.25001H6.9375C7.19884 1.90003 7.53841 1.61602 7.92909 1.42069C8.31977 1.22535 8.75071 1.12409 9.1875 1.12501C9.25334 1.12499 9.31802 1.14231 9.37505 1.17523C9.43207 1.20814 9.47942 1.25549 9.51234 1.31251C9.70651 1.64741 9.82912 2.01894 9.87245 2.40362C9.91577 2.78831 9.87887 3.1778 9.76406 3.54751C9.99619 3.95175 10.1205 4.40888 10.125 4.87501Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GitIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="37"
-      height="36"
-      viewBox="0 0 37 36"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M35.7782 16.4219L20.0791 0.723956C19.864 0.508762 19.6087 0.338053 19.3276 0.221583C19.0466 0.105114 18.7453 0.045166 18.4411 0.045166C18.1368 0.045166 17.8356 0.105114 17.5545 0.221583C17.2735 0.338053 17.0181 0.508762 16.8031 0.723956L13.5443 3.9843L17.6788 8.11882C18.1649 7.95374 18.6875 7.92797 19.1875 8.04442C19.6874 8.16088 20.1448 8.41491 20.5079 8.77778C20.8731 9.14329 21.128 9.60418 21.2435 10.1077C21.359 10.6113 21.3304 11.1372 21.161 11.6253L25.1473 15.6103C25.6355 15.4408 26.1616 15.4122 26.6653 15.5279C27.169 15.6437 27.6299 15.899 27.9952 16.2646C28.251 16.5204 28.454 16.8241 28.5925 17.1584C28.7309 17.4926 28.8022 17.8509 28.8022 18.2127C28.8022 18.5745 28.7309 18.9328 28.5925 19.267C28.454 19.6013 28.251 19.905 27.9952 20.1608C27.4779 20.6776 26.7766 20.9678 26.0455 20.9678C25.3143 20.9678 24.6131 20.6776 24.0958 20.1608C23.7116 19.7759 23.4497 19.286 23.3434 18.7526C23.237 18.2192 23.2907 17.6663 23.4979 17.1634L19.7805 13.4472V23.2287C20.1729 23.4225 20.5134 23.707 20.7739 24.0586C21.0345 24.4103 21.2075 24.8189 21.2786 25.2507C21.3497 25.6825 21.317 26.1251 21.183 26.5417C21.0491 26.9583 20.8178 27.337 20.5083 27.6465C20.2525 27.9023 19.9488 28.1053 19.6146 28.2438C19.2803 28.3822 18.922 28.4535 18.5602 28.4535C18.1984 28.4535 17.8402 28.3822 17.5059 28.2438C17.1716 28.1053 16.8679 27.9023 16.6121 27.6465C16.3562 27.3907 16.1532 27.0869 16.0147 26.7526C15.8762 26.4183 15.8049 26.06 15.8049 25.6982C15.8049 25.3363 15.8762 24.978 16.0147 24.6437C16.1532 24.3094 16.3562 24.0057 16.6121 23.7499C16.8699 23.4916 17.1763 23.2869 17.5137 23.1477V13.2762C17.1777 13.1378 16.8724 12.9344 16.6153 12.6777C16.3582 12.421 16.1543 12.116 16.0154 11.7802C15.8765 11.4445 15.8053 11.0846 15.8059 10.7212C15.8065 10.3579 15.8789 9.9982 16.0189 9.66291L11.9423 5.58552L1.17673 16.3483C0.742912 16.783 0.499268 17.372 0.499268 17.9862C0.499268 18.6003 0.742912 19.1893 1.17673 19.624L16.8766 35.3239C17.3113 35.7576 17.9002 36.0011 18.5143 36.0011C19.1283 36.0011 19.7172 35.7576 20.1519 35.3239L35.7782 19.6975C36.212 19.2629 36.4557 18.6738 36.4557 18.0597C36.4557 17.4456 36.212 16.8566 35.7782 16.4219Z"
-        fill="#0000F4"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx

@@ -1,26 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GitTeaIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M12.372 15.1312L8.40635 13.225C8.01573 13.0375 7.84698 12.5625 8.0376 12.1687L9.94385 8.20308C10.1314 7.81245 10.6064 7.6437 11.0001 7.83433C11.5376 8.0937 11.847 8.24058 11.847 8.24058L11.8439 4.82808L12.3657 4.82495L12.3689 8.48433C12.3689 8.48433 14.1626 9.24058 14.9657 9.73745C15.0814 9.80933 15.2845 9.94995 15.3689 10.1875C15.4345 10.3781 15.4314 10.5968 15.3376 10.7906L13.4314 14.7562C13.2376 15.1531 12.7626 15.3218 12.372 15.1312Z"
-        fill="white"
-      />
-      <path
-        d="M19.4595 4.68123C19.3314 4.5531 19.1595 4.55623 19.1595 4.55623C19.1595 4.55623 15.497 4.76248 13.6001 4.80623C13.1845 4.8156 12.772 4.82498 12.3626 4.8281C12.3626 6.04998 12.3626 7.27185 12.3626 8.4906C12.1907 8.40935 12.0157 8.32498 11.8439 8.24373C11.8439 7.10623 11.8407 4.83123 11.8407 4.83123C10.9345 4.84373 9.05324 4.76248 9.05324 4.76248C9.05324 4.76248 4.63449 4.5406 4.15324 4.49685C3.84699 4.4781 3.45011 4.43123 2.93449 4.54373C2.66261 4.59998 1.88761 4.77498 1.25324 5.38435C-0.153014 6.63748 0.206361 8.63123 0.250111 8.93123C0.303236 9.29685 0.465736 10.3125 1.24074 11.1969C2.67199 12.95 5.75324 12.9094 5.75324 12.9094C5.75324 12.9094 6.13136 13.8125 6.70949 14.6437C7.49074 15.6781 8.29386 16.4844 9.07511 16.5812C11.0439 16.5812 14.9782 16.5781 14.9782 16.5781C14.9782 16.5781 15.3532 16.5812 15.8626 16.2562C16.3001 15.9906 16.6907 15.525 16.6907 15.525C16.6907 15.525 17.0939 15.0937 17.6564 14.1094C17.8282 13.8062 17.972 13.5125 18.097 13.2344C18.097 13.2344 19.822 9.57498 19.822 6.01248C19.7876 4.93435 19.522 4.74373 19.4595 4.68123ZM3.92511 11.0594C3.11574 10.7937 2.77199 10.475 2.77199 10.475C2.77199 10.475 2.17511 10.0562 1.87511 9.23123C1.35949 7.84998 1.83136 7.00623 1.83136 7.00623C1.83136 7.00623 2.09386 6.3031 3.03449 6.06873C3.46574 5.9531 4.00324 5.97185 4.00324 5.97185C4.00324 5.97185 4.22511 7.8281 4.49386 8.9156C4.71886 9.8281 5.26886 11.3437 5.26886 11.3437C5.26886 11.3437 4.45324 11.2469 3.92511 11.0594ZM13.3095 14.4219C13.3095 14.4219 13.1189 14.875 12.697 14.9031C12.5157 14.9156 12.3751 14.8656 12.3751 14.8656C12.3751 14.8656 12.3657 14.8625 12.2095 14.8L8.68136 13.0812C8.68136 13.0812 8.34074 12.9031 8.28136 12.5937C8.21261 12.3406 8.36574 12.0281 8.36574 12.0281L10.0626 8.53123C10.0626 8.53123 10.2126 8.2281 10.4439 8.12498C10.4626 8.1156 10.5157 8.09373 10.5845 8.0781C10.8376 8.01248 11.147 8.1656 11.147 8.1656L14.6064 9.84373C14.6064 9.84373 15.0001 10.0219 15.0845 10.35C15.1439 10.5812 15.0689 10.7875 15.0282 10.8875C14.8314 11.3687 13.3095 14.4219 13.3095 14.4219Z"
-        fill="#609926"
-      />
-      <path
-        d="M10.2126 11.8781C9.95632 11.8813 9.73132 12.0594 9.67195 12.3094C9.61257 12.5594 9.73445 12.8187 9.95632 12.9344C10.1969 13.0594 10.5032 12.9906 10.6657 12.7656C10.8251 12.5437 10.8001 12.2375 10.6094 12.0437L11.3594 10.5094C11.4063 10.5125 11.4751 10.5156 11.5532 10.4937C11.6813 10.4656 11.7751 10.3813 11.7751 10.3813C11.9063 10.4375 12.0438 10.5 12.1876 10.5719C12.3376 10.6469 12.4782 10.725 12.6063 10.8C12.6344 10.8156 12.6626 10.8344 12.6938 10.8594C12.7438 10.9 12.8001 10.9562 12.8407 11.0312C12.9001 11.2031 12.7813 11.4969 12.7813 11.4969C12.7094 11.7344 12.2063 12.7656 12.2063 12.7656C11.9532 12.7594 11.7282 12.9219 11.6532 13.1562C11.5719 13.4094 11.6876 13.6969 11.9313 13.8219C12.1751 13.9469 12.4751 13.875 12.6344 13.6562C12.7907 13.4437 12.7782 13.1469 12.6001 12.95C12.6594 12.8344 12.7157 12.7188 12.7751 12.5969C12.9313 12.2719 13.1969 11.6469 13.1969 11.6469C13.2251 11.5938 13.3751 11.325 13.2813 10.9812C13.2032 10.625 12.8876 10.4594 12.8876 10.4594C12.5063 10.2125 11.9751 9.98438 11.9751 9.98438C11.9751 9.98438 11.9751 9.85625 11.9407 9.7625C11.9063 9.66562 11.8532 9.60313 11.8188 9.56563C11.9657 9.2625 12.1126 8.9625 12.2594 8.65938C12.1313 8.59688 12.0063 8.53437 11.8782 8.46875C11.7282 8.775 11.5751 9.08438 11.4251 9.39062C11.2157 9.3875 11.0219 9.5 10.9219 9.68437C10.8157 9.88125 10.8376 10.125 10.9813 10.3031C10.7251 10.8281 10.4688 11.3531 10.2126 11.8781Z"
-        fill="#609926"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GithubIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.9702 0.206024C4.45694 0.206024 0 4.69582 0 10.2503C0 14.6903 2.85571 18.4487 6.81735 19.7789C7.31265 19.8789 7.49408 19.5628 7.49408 19.2968C7.49408 19.064 7.47776 18.2658 7.47776 17.4342C4.70429 18.033 4.12674 16.2368 4.12674 16.2368C3.68102 15.0728 3.02061 14.7736 3.02061 14.7736C2.11286 14.1583 3.08673 14.1583 3.08673 14.1583C4.09367 14.2248 4.62204 15.1893 4.62204 15.1893C5.51327 16.7191 6.94939 16.2868 7.52714 16.0207C7.60959 15.3721 7.87388 14.9232 8.15449 14.6738C5.94245 14.4409 3.6151 13.5762 3.6151 9.71807C3.6151 8.62051 4.01102 7.72256 4.63837 7.02419C4.53939 6.7748 4.19265 5.74358 4.73755 4.36337C4.73755 4.36337 5.57939 4.09725 7.47755 5.39439C8.29022 5.17453 9.12832 5.06268 9.9702 5.06174C10.812 5.06174 11.6702 5.17827 12.4627 5.39439C14.361 4.09725 15.2029 4.36337 15.2029 4.36337C15.7478 5.74358 15.4008 6.7748 15.3018 7.02419C15.9457 7.72256 16.3253 8.62051 16.3253 9.71807C16.3253 13.5762 13.998 14.4242 11.7694 14.6738C12.1327 14.9897 12.4461 15.5883 12.4461 16.5362C12.4461 17.8832 12.4298 18.9642 12.4298 19.2966C12.4298 19.5628 12.6114 19.8789 13.1065 19.7791C17.0682 18.4485 19.9239 14.6903 19.9239 10.2503C19.9402 4.69582 15.4669 0.206024 9.9702 0.206024Z"
-        fill="#FBFBFB"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GithubStrokeIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GithubStrokeIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M13.0194 4.73001C13.1722 4.23701 13.2212 3.71768 13.1634 3.20479C13.1055 2.6919 12.942 2.19656 12.6831 1.75001C12.6392 1.67398 12.5761 1.61085 12.5001 1.56697C12.424 1.52308 12.3378 1.49999 12.25 1.50001C11.6676 1.49879 11.093 1.6338 10.5721 1.89425C10.0512 2.1547 9.59845 2.53337 9.25 3.00001H7.75C7.40155 2.53337 6.94878 2.1547 6.42788 1.89425C5.90698 1.6338 5.33238 1.49879 4.75 1.50001C4.66221 1.49999 4.57597 1.52308 4.49994 1.56697C4.4239 1.61085 4.36077 1.67398 4.31687 1.75001C4.05803 2.19656 3.89452 2.6919 3.83664 3.20479C3.77877 3.71768 3.8278 4.23701 3.98062 4.73001C3.6717 5.26921 3.50623 5.87862 3.5 6.50001V7.00001C3.50105 7.84601 3.80817 8.66306 4.36464 9.30029C4.92111 9.93752 5.68935 10.3519 6.5275 10.4669C6.18538 10.9047 5.99968 11.4444 6 12V12.5H4.5C4.10218 12.5 3.72064 12.342 3.43934 12.0607C3.15804 11.7794 3 11.3978 3 11C3 10.6717 2.93534 10.3466 2.8097 10.0433C2.68406 9.73999 2.49991 9.46439 2.26777 9.23224C2.03562 9.00009 1.76002 8.81595 1.45671 8.69031C1.15339 8.56467 0.828305 8.50001 0.5 8.50001C0.367392 8.50001 0.240215 8.55269 0.146447 8.64645C0.0526784 8.74022 0 8.8674 0 9.00001C0 9.13262 0.0526784 9.25979 0.146447 9.35356C0.240215 9.44733 0.367392 9.50001 0.5 9.50001C0.897825 9.50001 1.27936 9.65804 1.56066 9.93935C1.84196 10.2207 2 10.6022 2 11C2 11.663 2.26339 12.2989 2.73223 12.7678C3.20107 13.2366 3.83696 13.5 4.5 13.5H6V14.5C6 14.6326 6.05268 14.7598 6.14645 14.8536C6.24021 14.9473 6.36739 15 6.5 15C6.63261 15 6.75979 14.9473 6.85355 14.8536C6.94732 14.7598 7 14.6326 7 14.5V12C7 11.6022 7.15804 11.2207 7.43934 10.9393C7.72064 10.658 8.10218 10.5 8.5 10.5C8.89782 10.5 9.27936 10.658 9.56066 10.9393C9.84196 11.2207 10 11.6022 10 12V14.5C10 14.6326 10.0527 14.7598 10.1464 14.8536C10.2402 14.9473 10.3674 15 10.5 15C10.6326 15 10.7598 14.9473 10.8536 14.8536C10.9473 14.7598 11 14.6326 11 14.5V12C11.0003 11.4444 10.8146 10.9047 10.4725 10.4669C11.3107 10.3519 12.0789 9.93752 12.6354 9.30029C13.1918 8.66306 13.4989 7.84601 13.5 7.00001V6.50001C13.4938 5.87862 13.3283 5.26921 13.0194 4.73001ZM12.5 7.00001C12.5 7.66305 12.2366 8.29893 11.7678 8.76778C11.2989 9.23662 10.663 9.50001 10 9.50001H7C6.33696 9.50001 5.70107 9.23662 5.23223 8.76778C4.76339 8.29893 4.5 7.66305 4.5 7.00001V6.50001C4.50613 6.00002 4.65582 5.51233 4.93125 5.09501C4.98259 5.02733 5.01585 4.94769 5.02788 4.8636C5.03991 4.77951 5.03031 4.69374 5 4.61438C4.86976 4.27851 4.80709 3.92023 4.81556 3.56009C4.82403 3.19995 4.90349 2.84501 5.04938 2.51563C5.45857 2.55965 5.85262 2.6952 6.2023 2.91224C6.55198 3.12928 6.84832 3.42223 7.06938 3.76938C7.11442 3.83982 7.17641 3.89784 7.24968 3.93813C7.32294 3.97842 7.40514 3.9997 7.48875 4.00001H9.51062C9.59455 4.00001 9.67713 3.97889 9.75075 3.93858C9.82437 3.89828 9.88666 3.84009 9.93188 3.76938C10.1529 3.4222 10.4492 3.12922 10.7989 2.91218C11.1486 2.69514 11.5427 2.55961 11.9519 2.51563C12.0976 2.8451 12.1768 3.20007 12.1851 3.56021C12.1933 3.92036 12.1304 4.27859 12 4.61438C11.9698 4.69298 11.9597 4.77788 11.9706 4.86138C11.9815 4.94487 12.0131 5.02432 12.0625 5.09251C12.3407 5.50984 12.4926 5.99853 12.5 6.50001V7.00001Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GlobeIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M10 17.9167C14.3723 17.9167 17.9167 14.3723 17.9167 10C17.9167 5.62776 14.3723 2.08334 10 2.08334M10 17.9167C5.62776 17.9167 2.08334 14.3723 2.08334 10C2.08334 5.62776 5.62776 2.08334 10 2.08334M10 17.9167C8.15906 17.9167 6.66668 14.3723 6.66668 10C6.66668 5.62776 8.15906 2.08334 10 2.08334M10 17.9167C11.841 17.9167 13.3333 14.3723 13.3333 10C13.3333 5.62776 11.841 2.08334 10 2.08334M17.5 10H2.50001"
-        stroke="currentColor"
-        strokeLinecap="square"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/GoogleIcon.tsx

@@ -1,38 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const GoogleIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 21 21"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="#4285F4"
-        fillRule="evenodd"
-        d="M19.3 11.219c0-.65-.058-1.275-.167-1.875H10.5v3.546h4.933a4.217 4.217 0 01-1.829 2.766v2.3h2.963C18.3 16.36 19.3 14.01 19.3 11.22z"
-        clipRule="evenodd"
-      ></path>
-      <path
-        fill="#34A853"
-        fillRule="evenodd"
-        d="M10.5 20.179c2.475 0 4.55-.82 6.066-2.22l-2.962-2.3c-.82.55-1.87.874-3.104.874-2.388 0-4.409-1.612-5.13-3.78H2.309v2.376a9.163 9.163 0 008.192 5.05z"
-        clipRule="evenodd"
-      ></path>
-      <path
-        fill="#FBBC05"
-        fillRule="evenodd"
-        d="M5.37 12.753a5.51 5.51 0 01-.287-1.742c0-.604.104-1.191.288-1.741V6.895H2.308a9.163 9.163 0 00-.975 4.116c0 1.48.354 2.88.975 4.117l3.063-2.375z"
-        clipRule="evenodd"
-      ></path>
-      <path
-        fill="#EA4335"
-        fillRule="evenodd"
-        d="M10.5 5.49c1.346 0 2.554.462 3.504 1.37l2.63-2.629C15.045 2.752 12.97 1.844 10.5 1.844a9.163 9.163 0 00-8.192 5.05l3.063 2.375c.72-2.167 2.741-3.78 5.129-3.78z"
-        clipRule="evenodd"
-      ></path>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const HideEyeOffIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M2.02012 1.31246C1.82486 1.1172 1.50828 1.1172 1.31301 1.31246C1.11775 1.50772 1.11775 1.82431 1.31301 2.01957L2.02012 1.31246ZM1.62744 7.42685L1.1887 7.18704L1.62744 7.42685ZM11.7196 11.719L12.0731 11.3655L11.7196 11.719ZM13.9797 14.6862C14.1749 14.8815 14.4915 14.8815 14.6868 14.6862C14.8821 14.491 14.8821 14.1744 14.6868 13.9791L13.9797 14.6862ZM1.62804 8.57302L1.18932 8.81287H1.18932L1.62804 8.57302ZM5.2498 3.12216C4.99958 3.23898 4.89145 3.53652 5.00828 3.78674C5.1251 4.03695 5.42264 4.14508 5.67286 4.02826L5.2498 3.12216ZM14.3718 7.42567L14.8105 7.18582L14.3718 7.42567ZM12.3668 10.4904C12.1743 10.6884 12.1786 11.0049 12.3766 11.1975C12.5745 11.39 12.891 11.3857 13.0836 11.1877L12.3668 10.4904ZM14.3724 8.57183L13.9336 8.33203V8.33203L14.3724 8.57183ZM6.58569 6.58512L6.93924 6.23157C6.74398 6.03631 6.4274 6.03631 6.23213 6.23157L6.58569 6.58512ZM9.41411 9.41355L9.76767 9.7671C9.86144 9.67334 9.91411 9.54616 9.91411 9.41355C9.91411 9.28094 9.86144 9.15377 9.76767 9.06L9.41411 9.41355ZM1.31301 2.01957L3.92667 4.63323L4.63378 3.92612L2.02012 1.31246L1.31301 2.01957ZM2.06618 7.66665C2.78183 6.35732 3.64551 5.3672 4.57648 4.68246L3.98397 3.87689C2.91986 4.65956 1.96456 5.76756 1.1887 7.18704L2.06618 7.66665ZM3.92667 4.63323L11.366 12.0726L12.0731 11.3655L4.63378 3.92612L3.92667 4.63323ZM11.366 12.0726L13.9797 14.6862L14.6868 13.9791L12.0731 11.3655L11.366 12.0726ZM1.18932 8.81287C2.47954 11.1728 4.26886 12.674 6.21987 13.243C8.17733 13.8138 10.2399 13.428 12.0158 12.1218L11.4233 11.3162C9.88108 12.4506 8.13835 12.7608 6.49983 12.283C4.85485 11.8033 3.25748 10.5112 2.06675 8.33317L1.18932 8.81287ZM1.1887 7.18704C0.911724 7.69378 0.912792 8.30707 1.18932 8.81287L2.06675 8.33317C1.95313 8.12535 1.95308 7.87358 2.06618 7.66665L1.1887 7.18704ZM5.67286 4.02826C7.09829 3.36272 8.63166 3.32591 10.0669 3.91426C11.5069 4.50457 12.8795 5.7385 13.933 7.66553L14.8105 7.18582C13.6688 5.09759 12.1371 3.68216 10.4462 2.98899C8.75047 2.29385 6.92622 2.33943 5.2498 3.12216L5.67286 4.02826ZM13.0836 11.1877C13.7227 10.5308 14.305 9.7376 14.8111 8.81164L13.9336 8.33203C13.4669 9.18586 12.9371 9.90419 12.3668 10.4904L13.0836 11.1877ZM13.933 7.66553C14.0467 7.87336 14.0467 8.12511 13.9336 8.33203L14.8111 8.81164C15.0881 8.30489 15.087 7.69161 14.8105 7.18582L13.933 7.66553ZM7.9999 9.49934C7.17147 9.49934 6.4999 8.82776 6.4999 7.99934H5.4999C5.4999 9.38005 6.61919 10.4993 7.9999 10.4993V9.49934ZM6.4999 7.99934C6.4999 7.58499 6.66725 7.21067 6.93924 6.93868L6.23213 6.23157C5.78027 6.68343 5.4999 7.30912 5.4999 7.99934H6.4999ZM6.23213 6.93868L9.06056 9.7671L9.76767 9.06L6.93924 6.23157L6.23213 6.93868ZM9.06056 9.06C8.78857 9.33199 8.41425 9.49934 7.9999 9.49934V10.4993C8.69012 10.4993 9.3158 10.219 9.76767 9.7671L9.06056 9.06Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/HorizontalDotIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const HorizontalDotIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M10.9375 10C10.9375 10.1854 10.8825 10.3667 10.7795 10.5208C10.6765 10.675 10.5301 10.7952 10.3588 10.8661C10.1875 10.9371 9.99896 10.9557 9.8171 10.9195C9.63525 10.8833 9.4682 10.794 9.33709 10.6629C9.20598 10.5318 9.11669 10.3648 9.08051 10.1829C9.04434 10.001 9.06291 9.81254 9.13386 9.64123C9.20482 9.46993 9.32498 9.32351 9.47915 9.2205C9.63332 9.11748 9.81458 9.0625 10 9.0625C10.2486 9.0625 10.4871 9.16127 10.6629 9.33709C10.8387 9.5129 10.9375 9.75136 10.9375 10ZM15.3125 9.0625C15.1271 9.0625 14.9458 9.11748 14.7917 9.2205C14.6375 9.32351 14.5173 9.46993 14.4464 9.64123C14.3754 9.81254 14.3568 10.001 14.393 10.1829C14.4292 10.3648 14.5185 10.5318 14.6496 10.6629C14.7807 10.794 14.9477 10.8833 15.1296 10.9195C15.3115 10.9557 15.5 10.9371 15.6713 10.8661C15.8426 10.7952 15.989 10.675 16.092 10.5208C16.195 10.3667 16.25 10.1854 16.25 10C16.25 9.75136 16.1512 9.5129 15.9754 9.33709C15.7996 9.16127 15.5611 9.0625 15.3125 9.0625ZM4.6875 9.0625C4.50208 9.0625 4.32082 9.11748 4.16665 9.2205C4.01248 9.32351 3.89232 9.46993 3.82136 9.64123C3.75041 9.81254 3.73184 10.001 3.76801 10.1829C3.80419 10.3648 3.89348 10.5318 4.02459 10.6629C4.1557 10.794 4.32275 10.8833 4.5046 10.9195C4.68646 10.9557 4.87496 10.9371 5.04627 10.8661C5.21757 10.7952 5.36399 10.675 5.467 10.5208C5.57002 10.3667 5.625 10.1854 5.625 10C5.625 9.75136 5.52623 9.5129 5.35041 9.33709C5.1746 9.16127 4.93614 9.0625 4.6875 9.0625Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const InfoRoundFilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10 11C10 10.4477 10.4477 10 11 10H12C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C10.4477 12 10 11.5523 10 11ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/InfoSquareIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const InfoSquareIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.96786 2.5C5.52858 2.49999 5.14962 2.49997 4.83748 2.52548C4.50802 2.55239 4.18034 2.61182 3.86503 2.77249C3.39462 3.01217 3.01217 3.39462 2.77249 3.86503C2.61182 4.18034 2.55239 4.50802 2.52548 4.83748C2.49997 5.14962 2.49999 5.52857 2.5 5.96785V14.0321C2.49999 14.4714 2.49997 14.8504 2.52548 15.1625C2.55239 15.492 2.61182 15.8197 2.77249 16.135C3.01217 16.6054 3.39462 16.9878 3.86503 17.2275C4.18034 17.3882 4.50802 17.4476 4.83748 17.4745C5.14962 17.5 5.52858 17.5 5.96786 17.5H14.0321C14.4714 17.5 14.8504 17.5 15.1625 17.4745C15.492 17.4476 15.8197 17.3882 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.3882 15.8197 17.4476 15.492 17.4745 15.1625C17.5 14.8504 17.5 14.4714 17.5 14.0321V5.96786C17.5 5.52858 17.5 5.14962 17.4745 4.83748C17.4476 4.50802 17.3882 4.18034 17.2275 3.86503C16.9878 3.39462 16.6054 3.01217 16.135 2.77249C15.8197 2.61182 15.492 2.55239 15.1625 2.52548C14.8504 2.49997 14.4714 2.49999 14.0322 2.5H5.96786ZM8.33333 9.16667C8.33333 8.70643 8.70643 8.33333 9.16667 8.33333H10C10.4602 8.33333 10.8333 8.70643 10.8333 9.16667V13.3333C10.8333 13.7936 10.4602 14.1667 10 14.1667C9.53976 14.1667 9.16667 13.7936 9.16667 13.3333V10C8.70643 10 8.33333 9.6269 8.33333 9.16667ZM10 5.83333C9.53976 5.83333 9.16667 6.20643 9.16667 6.66667C9.16667 7.1269 9.53976 7.5 10 7.5C10.4602 7.5 10.8333 7.1269 10.8333 6.66667C10.8333 6.20643 10.4602 5.83333 10 5.83333Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/KeyIcon.tsx

@@ -1,80 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const KeyIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      {...props}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="33"
-        height="33"
-        fill="none"
-        viewBox="0 0 33 33"
-      >
-        <g clipPath="url(#clip0_2415_13439)">
-          <g filter="url(#filter0_i_2415_13439)">
-            <path
-              fill="#0F86F5"
-              fillRule="evenodd"
-              d="M1.833 16.691a8 8 0 0114.499-4.666h12.142l3.733 4.666-3.733 4.667h-4.289l-2.352-1.176-2.352 1.176h-3.15a8 8 0 01-14.498-4.667zm8 2a2 2 0 100-4 2 2 0 000 4z"
-              clipRule="evenodd"
-            ></path>
-          </g>
-          <path
-            stroke="#000"
-            strokeOpacity="0.1"
-            d="M15.926 12.317l.15.208h12.158l3.333 4.166-3.333 4.167h-3.93l-2.247-1.123-.224-.112-.223.112-2.247 1.123H16.075l-.15.208a7.5 7.5 0 110-8.75zM9.833 19.19a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
-          ></path>
-        </g>
-        <defs>
-          <filter
-            id="filter0_i_2415_13439"
-            width="30.374"
-            height="17.5"
-            x="1.833"
-            y="8.691"
-            colorInterpolationFilters="sRGB"
-            filterUnits="userSpaceOnUse"
-          >
-            <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
-            <feBlend
-              in="SourceGraphic"
-              in2="BackgroundImageFix"
-              result="shape"
-            ></feBlend>
-            <feColorMatrix
-              in="SourceAlpha"
-              result="hardAlpha"
-              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            ></feColorMatrix>
-            <feOffset dy="2"></feOffset>
-            <feGaussianBlur stdDeviation="0.75"></feGaussianBlur>
-            <feComposite
-              in2="hardAlpha"
-              k2="-1"
-              k3="1"
-              operator="arithmetic"
-            ></feComposite>
-            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
-            <feBlend
-              in2="shape"
-              result="effect1_innerShadow_2415_13439"
-            ></feBlend>
-          </filter>
-          <clipPath id="clip0_2415_13439">
-            <path
-              fill="#fff"
-              d="M0 0H32V32H0z"
-              transform="translate(.5 .691)"
-            ></path>
-          </clipPath>
-        </defs>
-      </svg>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LifeBuoyIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        id="Icon"
-        d="M4.5835 4.58325L7.35092 7.35068M7.35092 12.6492L4.5835 15.4166M12.6494 12.6492L15.4168 15.4166M15.4168 4.58325L12.6494 7.35068M17.9168 9.99992C17.9168 14.3722 14.3724 17.9166 10.0002 17.9166C5.62791 17.9166 2.0835 14.3722 2.0835 9.99992C2.0835 5.62766 5.62791 2.08325 10.0002 2.08325C14.3724 2.08325 17.9168 5.62766 17.9168 9.99992ZM13.7502 9.99992C13.7502 12.071 12.0712 13.7499 10.0002 13.7499C7.92909 13.7499 6.25016 12.071 6.25016 9.99992C6.25016 7.92885 7.92909 6.24992 10.0002 6.24992C12.0712 6.24992 13.7502 7.92885 13.7502 9.99992Z"
-        stroke="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LinkChainIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LinkChainIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M9.75027 5.52371L10.7168 4.55722C13.1264 2.14759 17.0332 2.14759 19.4428 4.55722C21.8524 6.96684 21.8524 10.8736 19.4428 13.2832L18.4742 14.2519M5.52886 9.74513L4.55722 10.7168C2.14759 13.1264 2.1476 17.0332 4.55722 19.4428C6.96684 21.8524 10.8736 21.8524 13.2832 19.4428L14.2478 18.4782M9.5 14.5L14.5 9.5"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LinkIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LinkIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.99634 4.3125C5.99634 4.00184 6.24818 3.75 6.55884 3.75H12.1875C13.3266 3.75 14.25 4.67341 14.25 5.8125V12.1844C14.25 12.495 13.9982 12.7469 13.6875 12.7469C13.3769 12.7469 13.125 12.495 13.125 12.1844V5.8125C13.125 5.76745 13.1218 5.72315 13.1157 5.6798L5.27275 13.5227C5.05308 13.7424 4.69692 13.7424 4.47725 13.5227C4.25758 13.3031 4.25758 12.9469 4.47725 12.7273L12.3202 4.88432C12.2768 4.87818 12.2326 4.875 12.1875 4.875H6.55884C6.24818 4.875 5.99634 4.62316 5.99634 4.3125Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LoaderIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LoaderIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M12.5003 3V6M12.5003 18V21M6.13634 5.63604L8.25766 7.75736M16.7429 16.2426L18.8643 18.364M3.5 12.0007H6.5M18.5 12.0007H21.5M6.13634 18.364L8.25766 16.2426M16.7429 7.75736L18.8643 5.63604"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LoadingIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.0002 1.66669C10.4605 1.66669 10.8336 2.03978 10.8336 2.50002V5.00002C10.8336 5.46026 10.4605 5.83335 10.0002 5.83335C9.54 5.83335 9.1669 5.46026 9.1669 5.00002V2.50002C9.1669 2.03978 9.54 1.66669 10.0002 1.66669ZM15.8928 4.10746C16.2182 4.4329 16.2182 4.96054 15.8928 5.28597L14.125 7.05374C13.7996 7.37918 13.272 7.37918 12.9465 7.05374C12.6211 6.7283 12.6211 6.20067 12.9465 5.87523L14.7143 4.10746C15.0397 3.78203 15.5674 3.78203 15.8928 4.10746ZM4.10768 4.10746C4.43312 3.78203 4.96076 3.78203 5.28619 4.10746L7.05396 5.87523C7.3794 6.20067 7.3794 6.7283 7.05396 7.05374C6.72852 7.37918 6.20088 7.37918 5.87545 7.05374L4.10768 5.28597C3.78224 4.96054 3.78224 4.4329 4.10768 4.10746ZM1.66666 10.0006C1.66666 9.54035 2.03975 9.16725 2.49999 9.16725H4.99999C5.46023 9.16725 5.83332 9.54035 5.83332 10.0006C5.83332 10.4608 5.46023 10.8339 4.99999 10.8339H2.49999C2.03975 10.8339 1.66666 10.4608 1.66666 10.0006ZM14.1667 10.0006C14.1667 9.54035 14.5398 9.16725 15 9.16725H17.5C17.9602 9.16725 18.3333 9.54035 18.3333 10.0006C18.3333 10.4608 17.9602 10.8339 17.5 10.8339H15C14.5398 10.8339 14.1667 10.4608 14.1667 10.0006ZM7.05396 12.9463C7.3794 13.2717 7.3794 13.7994 7.05396 14.1248L5.28619 15.8926C4.96076 16.218 4.43312 16.218 4.10768 15.8926C3.78224 15.5671 3.78224 15.0395 4.10768 14.7141L5.87545 12.9463C6.20088 12.6209 6.72852 12.6209 7.05396 12.9463ZM12.9465 12.9463C13.272 12.6209 13.7996 12.6209 14.125 12.9463L15.8928 14.7141C16.2182 15.0395 16.2182 15.5671 15.8928 15.8926C15.5674 16.218 15.0397 16.218 14.7143 15.8926L12.9465 14.1248C12.6211 13.7994 12.6211 13.2717 12.9465 12.9463ZM10.0002 14.1667C10.4605 14.1667 10.8336 14.5398 10.8336 15V17.5C10.8336 17.9603 10.4605 18.3334 10.0002 18.3334C9.54 18.3334 9.1669 17.9603 9.1669 17.5V15C9.1669 14.5398 9.54 14.1667 10.0002 14.1667Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LockIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LockIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99984 1.5C6.15889 1.5 4.6665 2.99238 4.6665 4.83333V6H4.49984C3.48732 6 2.6665 6.82081 2.6665 7.83333V12.8333C2.6665 13.8459 3.48732 14.6667 4.49984 14.6667H11.4998C12.5124 14.6667 13.3332 13.8459 13.3332 12.8333V7.83333C13.3332 6.82081 12.5124 6 11.4998 6H11.3332V4.83333C11.3332 2.99238 9.84079 1.5 7.99984 1.5ZM10.3332 6V4.83333C10.3332 3.54467 9.2885 2.5 7.99984 2.5C6.71117 2.5 5.6665 3.54467 5.6665 4.83333V6H10.3332ZM7.99984 8.83333C8.27598 8.83333 8.49984 9.05719 8.49984 9.33333V11.3333C8.49984 11.6095 8.27598 11.8333 7.99984 11.8333C7.72369 11.8333 7.49984 11.6095 7.49984 11.3333V9.33333C7.49984 9.05719 7.72369 8.83333 7.99984 8.83333Z"
-        fill="#EA580C"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/LogoutIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const LogoutIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.3125 3.375C3.79473 3.375 3.375 3.79473 3.375 4.3125L3.375 13.6875C3.375 14.2053 3.79473 14.625 4.3125 14.625H8.4375C8.74816 14.625 9 14.8768 9 15.1875C9 15.4982 8.74816 15.75 8.4375 15.75H4.3125C3.17341 15.75 2.25 14.8266 2.25 13.6875L2.25 4.3125C2.25 3.17341 3.17341 2.25 4.3125 2.25L8.4375 2.25C8.74816 2.25 9 2.50184 9 2.8125C9 3.12316 8.74816 3.375 8.4375 3.375L4.3125 3.375ZM11.4148 5.22725C11.6344 5.00758 11.9906 5.00758 12.2102 5.22725L15.5852 8.60224C15.8049 8.82191 15.8049 9.17807 15.5852 9.39774L12.2102 12.7727C11.9906 12.9924 11.6344 12.9924 11.4148 12.7727C11.1951 12.5531 11.1951 12.1969 11.4148 11.9773L13.8295 9.56249L6.75 9.56249C6.43934 9.56249 6.1875 9.31065 6.1875 8.99999C6.1875 8.68933 6.43934 8.43749 6.75 8.43749L13.8295 8.43749L11.4148 6.02275C11.1951 5.80308 11.1951 5.44692 11.4148 5.22725Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/MenuIcon.tsx

@@ -1,26 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const MenuIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M2 4.5C2 4.22386 2.22386 4 2.5 4H18.5C18.7761 4 19 4.22386 19 4.5C19 4.77614 18.7761 5 18.5 5H2.5C2.22386 5 2 4.77614 2 4.5Z"
-        fill="currentColor"
-      />
-      <path
-        d="M2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
-        fill="currentColor"
-      />
-      <path
-        d="M2 16.5C2 16.2239 2.22386 16 2.5 16H18.5C18.7761 16 19 16.2239 19 16.5C19 16.7761 18.7761 17 18.5 17H2.5C2.22386 17 2 16.7761 2 16.5Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/MinusCircleIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const MinusCircleIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 12C2.5 6.47715 6.97715 2 12.5 2C18.0228 2 22.5 6.47715 22.5 12C22.5 17.5228 18.0228 22 12.5 22C6.97715 22 2.5 17.5228 2.5 12ZM16.5 12.9999C17.0523 12.9999 17.5 12.5522 17.5 11.9999C17.5 11.4476 17.0523 10.9999 16.5 10.9999L8.49997 11.0001C7.94769 11.0001 7.49998 11.4479 7.5 12.0001C7.50002 12.5524 7.94774 13.0001 8.50003 13.0001L16.5 12.9999Z"
-        fill="#0F86F5"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/NotificationBellIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const NotificationBellIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        id="Icon"
-        d="M13.3333 15.4166C12.7722 16.8882 11.4909 17.9166 9.99997 17.9166C8.50903 17.9166 7.22769 16.8882 6.66664 15.4166M4.80461 15.4166H15.1953C16.1978 15.4166 16.9735 14.5379 16.8491 13.5432L16.0885 7.45809C15.7047 4.38751 13.0944 2.08325 9.99997 2.08325C6.90549 2.08325 4.29527 4.38751 3.91145 7.45809L3.15081 13.5432C3.02647 14.5379 3.80211 15.4166 4.80461 15.4166Z"
-        stroke="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/PencilIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const PencilIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M8.625 3.125C8.90114 3.125 9.125 2.90114 9.125 2.625C9.125 2.34886 8.90114 2.125 8.625 2.125V3.125ZM15.875 9.375C15.875 9.09886 15.6511 8.875 15.375 8.875C15.0989 8.875 14.875 9.09886 14.875 9.375H15.875ZM3.44401 15.2115L3.67101 14.766L3.67101 14.766L3.44401 15.2115ZM2.78849 14.556L3.23399 14.329H3.23399L2.78849 14.556ZM14.556 15.2115L14.329 14.766L14.329 14.766L14.556 15.2115ZM15.2115 14.556L14.766 14.329L14.766 14.329L15.2115 14.556ZM2.78849 3.44401L2.34299 3.21702L2.78849 3.44401ZM3.44401 2.78849L3.21702 2.34299V2.34299L3.44401 2.78849ZM9.375 6.375L9.02145 6.02145C8.92768 6.11521 8.875 6.24239 8.875 6.375H9.375ZM9.375 8.625H8.875C8.875 8.90114 9.09886 9.125 9.375 9.125V8.625ZM11.625 8.625V9.125C11.7576 9.125 11.8848 9.07232 11.9786 8.97855L11.625 8.625ZM13.3768 2.37316L13.7304 2.72671V2.72671L13.3768 2.37316ZM15.4982 2.37316L15.8517 2.01961L15.8517 2.01961L15.4982 2.37316ZM15.6268 2.50184L15.2733 2.85539V2.85539L15.6268 2.50184ZM15.6268 4.62316L15.9804 4.97671V4.97671L15.6268 4.62316ZM12.975 14.875H5.025V15.875H12.975V14.875ZM3.125 12.975V5.025H2.125V12.975H3.125ZM5.025 3.125H8.625V2.125H5.025V3.125ZM14.875 9.375V12.975H15.875V9.375H14.875ZM5.025 14.875C4.59671 14.875 4.30556 14.8746 4.08052 14.8562C3.86131 14.8383 3.74921 14.8059 3.67101 14.766L3.21702 15.657C3.45969 15.7807 3.71804 15.8299 3.99909 15.8529C4.2743 15.8754 4.61321 15.875 5.025 15.875V14.875ZM2.125 12.975C2.125 13.3868 2.12461 13.7257 2.1471 14.0009C2.17006 14.282 2.21934 14.5403 2.34299 14.783L3.23399 14.329C3.19415 14.2508 3.16169 14.1387 3.14378 13.9195C3.12539 13.6944 3.125 13.4033 3.125 12.975H2.125ZM3.67101 14.766C3.48285 14.6701 3.32987 14.5172 3.23399 14.329L2.34299 14.783C2.53473 15.1593 2.8407 15.4653 3.21702 15.657L3.67101 14.766ZM12.975 15.875C13.3868 15.875 13.7257 15.8754 14.0009 15.8529C14.282 15.8299 14.5403 15.7807 14.783 15.657L14.329 14.766C14.2508 14.8059 14.1387 14.8383 13.9195 14.8562C13.6944 14.8746 13.4033 14.875 12.975 14.875V15.875ZM14.875 12.975C14.875 13.4033 14.8746 13.6944 14.8562 13.9195C14.8383 14.1387 14.8059 14.2508 14.766 14.329L15.657 14.783C15.7807 14.5403 15.8299 14.282 15.8529 14.0009C15.8754 13.7257 15.875 13.3868 15.875 12.975H14.875ZM14.783 15.657C15.1593 15.4653 15.4653 15.1593 15.657 14.783L14.766 14.329C14.6701 14.5172 14.5172 14.6701 14.329 14.766L14.783 15.657ZM3.125 5.025C3.125 4.59671 3.12539 4.30556 3.14378 4.08052C3.16169 3.86131 3.19415 3.74921 3.23399 3.67101L2.34299 3.21702C2.21934 3.45969 2.17006 3.71804 2.1471 3.99909C2.12461 4.2743 2.125 4.61321 2.125 5.025H3.125ZM5.025 2.125C4.61321 2.125 4.2743 2.12461 3.99909 2.1471C3.71804 2.17006 3.45969 2.21934 3.21702 2.34299L3.67101 3.23399C3.74921 3.19415 3.86131 3.16169 4.08052 3.14378C4.30556 3.12539 4.59671 3.125 5.025 3.125V2.125ZM3.23399 3.67101C3.32987 3.48285 3.48285 3.32987 3.67101 3.23399L3.21702 2.34299C2.84069 2.53473 2.53473 2.84069 2.34299 3.21702L3.23399 3.67101ZM8.875 6.375V8.625H9.875V6.375H8.875ZM9.375 9.125H11.625V8.125H9.375V9.125ZM9.72855 6.72855L13.7304 2.72671L13.0233 2.01961L9.02145 6.02145L9.72855 6.72855ZM15.1446 2.72671L15.2733 2.85539L15.9804 2.14829L15.8517 2.01961L15.1446 2.72671ZM15.2733 4.26961L11.2714 8.27145L11.9786 8.97855L15.9804 4.97671L15.2733 4.26961ZM15.2733 2.85539C15.6638 3.24592 15.6638 3.87908 15.2733 4.26961L15.9804 4.97671C16.7614 4.19566 16.7614 2.92933 15.9804 2.14829L15.2733 2.85539ZM13.7304 2.72671C14.1209 2.33619 14.7541 2.33619 15.1446 2.72671L15.8517 2.01961C15.0707 1.23856 13.8043 1.23856 13.0233 2.01961L13.7304 2.72671Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const PlusIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.66666 9.99999C1.66666 5.39762 5.39762 1.66666 9.99999 1.66666C14.6024 1.66666 18.3333 5.39762 18.3333 9.99999C18.3333 14.6024 14.6024 18.3333 9.99999 18.3333C5.39762 18.3333 1.66666 14.6024 1.66666 9.99999ZM10.625 6.46483C10.625 6.11966 10.3452 5.83983 9.99999 5.83983C9.65481 5.83983 9.37499 6.11966 9.37499 6.46483V9.37537H6.46446C6.11928 9.37537 5.83946 9.65519 5.83946 10.0004C5.83946 10.3455 6.11928 10.6254 6.46446 10.6254H9.37499V13.5359C9.37499 13.8811 9.65481 14.1609 9.99999 14.1609C10.3452 14.1609 10.625 13.8811 10.625 13.5359V10.6254H13.5355C13.8807 10.6254 14.1605 10.3455 14.1605 10.0004C14.1605 9.65519 13.8807 9.37537 13.5355 9.37537H10.625V6.46483Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundFilledIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const QuestionMarkRoundFilledIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM10 7C9.62268 7 9.29263 7.2086 9.12148 7.52152C8.85646 8.00606 8.24881 8.18401 7.76427 7.91899C7.27973 7.65396 7.10178 7.04632 7.3668 6.56178C7.87463 5.63331 8.86264 5 10 5C11.5148 5 12.5669 6.00643 12.8664 7.189C13.1676 8.37785 12.7101 9.76299 11.3416 10.4472C11.1323 10.5519 11 10.7659 11 11C11 11.5523 10.5523 12 10 12C9.44772 12 9.00001 11.5523 9.00001 11C9.00001 10.0084 9.56027 9.10183 10.4472 8.65836C10.902 8.43099 11.0188 8.03973 10.9277 7.6801C10.835 7.31417 10.5283 7 10 7ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx

@@ -1,32 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const QuestionMarkRoundIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <g>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.99984 2.50008C5.8577 2.50008 2.49984 5.85795 2.49984 10.0001C2.49984 14.1422 5.8577 17.5001 9.99984 17.5001C14.142 17.5001 17.4998 14.1422 17.4998 10.0001C17.4998 5.85795 14.142 2.50008 9.99984 2.50008ZM1.6665 10.0001C1.6665 5.39771 5.39746 1.66675 9.99984 1.66675C14.6022 1.66675 18.3332 5.39771 18.3332 10.0001C18.3332 14.6025 14.6022 18.3334 9.99984 18.3334C5.39746 18.3334 1.6665 14.6025 1.6665 10.0001Z"
-          fill="currentColor"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.58317 6.66675C8.89281 6.66675 8.33317 7.22639 8.33317 7.91675C8.33317 8.14687 8.14662 8.33342 7.9165 8.33342C7.68639 8.33342 7.49984 8.14687 7.49984 7.91675C7.49984 6.76616 8.43258 5.83342 9.58317 5.83342H10.4869C11.5986 5.83342 12.4998 6.73462 12.4998 7.84631C12.4998 8.55337 12.1289 9.20858 11.5226 9.57236L11.0234 9.87187C10.6469 10.0978 10.4165 10.5047 10.4165 10.9437V12.0834C10.4165 12.3135 10.23 12.5001 9.99984 12.5001C9.76972 12.5001 9.58317 12.3135 9.58317 12.0834V10.9437C9.58317 10.2119 9.96713 9.5338 10.5946 9.15729L11.0938 8.85778C11.4491 8.6446 11.6665 8.26065 11.6665 7.84631C11.6665 7.19486 11.1384 6.66675 10.4869 6.66675H9.58317Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.58317 13.7501C9.58317 13.52 9.76972 13.3334 9.99984 13.3334C10.23 13.3334 10.4165 13.52 10.4165 13.7501C10.4165 13.9802 10.23 14.1667 9.99984 14.1667C9.76972 14.1667 9.58317 13.9802 9.58317 13.7501Z"
-          fill="currentColor"
-        />
-      </g>
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/README.md

@@ -1,24 +0,0 @@
-# 1. What icons are compatible with this component?
-
-- Viewbox "0 0 24 24": From where you're exporting from, please make sure the icon is using viewBox="0 0 24 24" before downloading/exporting. Not doing so will result in incorrect icon scaling
-
-# 2. How to add a new icon?
-
-**2.1 Sanitising the icon**
-
-1. Duplicate a current icon e.g. CrossIcon and rename it accordingly.
-2. Rename the function inside the new file you duplicated too
-3. Replace the markup with your SVG markup (make sure it complies with the above section's rule)
-4. Depending on the svg you pasted...
-   A. If the `<svg>` has only 1 child, remove the `<svg>` parent entirely so you only have the path left
-   B. If your component has more than 1 paths, rename `<svg>` tag with the `<g>` tag. Then, remove all attributes of this `<g>` tag so that it's just `<g>`
-5. Usually, icons are single colored. If that's the case, replace all fill/stroke color with `currentColor`. E.g. <path d="..." fill="currentColor">. Leave the other attributes without removing them.
-6. If your icon has more than one colour, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors
-7. Lastly, export your icon in `index.ts` by following what was done for CrossIcon
-8. Make sure to provide a name to the `<CustomIcon>` component for accessibility sake
-9. Done!
-
-**2.3 Use your newly imported icon**
-
-1. You can change simply use `<BellIcon size="32" />` to quickly change both width and height with the same value (square). For custom viewBox, width and height, simply provide all three props.
-2. Coloring the icon: Simply add a className with text color. E.g. `<BellIcon className="text-gray-500" />`

packages/frontend/src/components/shared/CustomIcon/RefreshIcon.tsx

@@ -1,22 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const RefreshIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M4.7586 5.25C5.80171 4.1001 7.33209 3.375 9 3.375C12.1066 3.375 14.625 5.8934 14.625 9C14.625 9.23861 14.6102 9.47349 14.5815 9.70383C14.543 10.0121 14.7618 10.2932 15.07 10.3316C15.3783 10.3701 15.6594 10.1513 15.6978 9.84304C15.7323 9.56663 15.75 9.28526 15.75 9C15.75 5.27208 12.7279 2.25 9 2.25C7.10933 2.25 5.36655 3.02807 4.125 4.28342V2.8125C4.125 2.50184 3.87316 2.25 3.5625 2.25C3.25184 2.25 3 2.50184 3 2.8125L3 5.25C3 5.87132 3.50368 6.375 4.125 6.375H6.5625C6.87316 6.375 7.125 6.12316 7.125 5.8125C7.125 5.50184 6.87316 5.25 6.5625 5.25H4.7586Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.41855 8.29617C3.45699 7.98789 3.23825 7.70683 2.92997 7.66839C2.6217 7.62994 2.34063 7.84869 2.30219 8.15696C2.26773 8.43337 2.25 8.71474 2.25 9C2.25 12.7279 5.27208 15.75 9 15.75C10.8952 15.75 12.6418 14.9682 13.8839 13.7076V15.1875C13.8839 15.4982 14.1357 15.75 14.4464 15.75C14.757 15.75 15.0089 15.4982 15.0089 15.1875V12.75C15.0089 12.1287 14.5052 11.625 13.8839 11.625L11.4464 11.625C11.1357 11.625 10.8839 11.8768 10.8839 12.1875C10.8839 12.4982 11.1357 12.75 11.4464 12.75H13.2414C12.1983 13.8999 10.6679 14.625 9 14.625C5.8934 14.625 3.375 12.1066 3.375 9C3.375 8.76139 3.38982 8.52651 3.41855 8.29617Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/RocketIcon.tsx

@@ -1,19 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const RocketIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M4.87626 10.1252H3.34633C2.77976 10.1252 2.41778 9.52109 2.68496 9.02148L4.07738 6.41779C4.33833 5.92983 4.84675 5.62517 5.40011 5.62517H8.40751M4.87626 10.1252L7.87626 13.1252M4.87626 10.1252L8.40751 5.62517M7.87626 13.1252V14.6551C7.87626 15.2217 8.48034 15.5836 8.97995 15.3165L11.5836 13.924C12.0716 13.6631 12.3763 13.1547 12.3763 12.6013V9.66486M7.87626 13.1252L12.3763 9.66486M12.3763 9.66486C14.5604 7.66276 15.8988 5.43328 16.0998 2.62499C16.1294 2.21183 15.7895 1.87198 15.3764 1.90172C12.5784 2.10308 10.4093 3.4414 8.40751 5.62517M3.37626 16.1252H1.875V14.6258C1.875 13.797 2.54717 13.1252 3.37594 13.1252C4.20437 13.1252 4.87626 13.7967 4.87626 14.6252C4.87626 15.4536 4.20469 16.1252 3.37626 16.1252Z"
-        stroke="currentColor"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx

@@ -1,20 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const SearchIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M15.375 15.375L12.225 12.225M13.875 8.25C13.875 11.3566 11.3566 13.875 8.25 13.875C5.1434 13.875 2.625 11.3566 2.625 8.25C2.625 5.1434 5.1434 2.625 8.25 2.625C11.3566 2.625 13.875 5.1434 13.875 8.25Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx

@@ -1,21 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const SettingsSlidersIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      {...props}
-    >
-      <path
-        id="Icon"
-        d="M11.2498 5.83341H2.9165M11.2498 5.83341C11.2498 4.22196 12.555 2.91675 14.1665 2.91675C15.778 2.91675 17.0832 4.22196 17.0832 5.83341C17.0832 7.44487 15.778 8.75008 14.1665 8.75008C12.555 8.75008 11.2498 7.44487 11.2498 5.83341ZM17.0832 14.1667H10.4165M10.4165 14.1667C10.4165 15.7782 9.1113 17.0834 7.49984 17.0834C5.88838 17.0834 4.58317 15.7782 4.58317 14.1667M10.4165 14.1667C10.4165 12.5553 9.1113 11.2501 7.49984 11.2501C5.88838 11.2501 4.58317 12.5553 4.58317 14.1667M4.58317 14.1667H2.9165"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx

@@ -1,18 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const ShowEyeIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        d="M1.62774 7.42694L2.06646 7.66677L1.62774 7.42694ZM14.3721 7.42686L13.9333 7.66669V7.66669L14.3721 7.42686ZM1.62774 8.5731L2.06646 8.33327H2.06646L1.62774 8.5731ZM14.3721 8.57302L14.8108 8.81285L14.8108 8.81285L14.3721 8.57302ZM2.06646 7.66677C3.61474 4.83447 5.84609 3.50002 7.99991 3.5C10.1537 3.49998 12.3851 4.8344 13.9333 7.66669L14.8108 7.18703C13.1325 4.11679 10.6049 2.49998 7.9999 2.5C5.39486 2.50002 2.86735 4.11687 1.18901 7.18711L2.06646 7.66677ZM1.18901 8.81293C2.86735 11.8832 5.39486 13.5 7.99991 13.5C10.6049 13.4999 13.1325 11.8831 14.8108 8.81285L13.9333 8.33319C12.3851 11.1655 10.1537 12.4999 7.9999 12.5C5.84609 12.5 3.61473 11.1656 2.06646 8.33327L1.18901 8.81293ZM1.18901 7.18711C0.912257 7.69338 0.912257 8.30665 1.18901 8.81293L2.06646 8.33327C1.95311 8.1259 1.95311 7.87414 2.06646 7.66677L1.18901 7.18711ZM13.9333 7.66669C14.0467 7.87406 14.0467 8.12582 13.9333 8.33319L14.8108 8.81285C15.0875 8.30658 15.0875 7.69331 14.8108 7.18703L13.9333 7.66669ZM9.4999 8C9.4999 8.82843 8.82833 9.5 7.9999 9.5V10.5C9.38062 10.5 10.4999 9.38071 10.4999 8H9.4999ZM7.9999 9.5C7.17148 9.5 6.4999 8.82843 6.4999 8H5.4999C5.4999 9.38071 6.61919 10.5 7.9999 10.5V9.5ZM6.4999 8C6.4999 7.17157 7.17148 6.5 7.9999 6.5V5.5C6.61919 5.5 5.4999 6.61929 5.4999 8H6.4999ZM7.9999 6.5C8.82833 6.5 9.4999 7.17157 9.4999 8H10.4999C10.4999 6.61929 9.38062 5.5 7.9999 5.5V6.5Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};

packages/frontend/src/components/shared/CustomIcon/SnowballIcon.tsx

@@ -1,38 +0,0 @@
-import { CustomIcon, CustomIconProps } from './CustomIcon';
-
-export const SnowballIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="41"
-      height="28"
-      viewBox="0 0 41 28"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.2898 0.0141679C16.9879 0.197656 19.8512 2.8136 22.4926 5.37543C25.1675 7.96975 27.9859 10.7641 28.1852 14.4608C28.3924 18.3031 26.397 21.9641 23.5274 24.5678C20.7709 27.0689 17.0322 27.8722 13.2898 27.9763C9.40947 28.0842 5.13223 27.9321 2.45841 25.1539C-0.178535 22.414 0.162951 18.2384 0.282169 14.4608C0.396158 10.8489 0.681118 7.11475 3.11295 4.41388C5.67064 1.57324 9.44481 -0.176604 13.2898 0.0141679Z"
-        fill="#4BA4F7"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.4897 0.0139543C21.1879 0.197442 24.0511 2.81338 26.6926 5.37521C29.3675 7.96953 32.1858 10.7639 32.3852 14.4606C32.5923 18.3029 30.597 21.9638 27.7274 24.5676C24.9709 27.0687 21.2321 27.872 17.4897 27.9761C13.6094 28.084 9.33219 27.9319 6.65836 25.1537C4.02142 22.4138 4.3629 18.2382 4.48212 14.4606C4.59611 10.8487 4.88107 7.11454 7.3129 4.41367C9.87059 1.57303 13.6448 -0.176818 17.4897 0.0139543Z"
-        fill="#8AC4FA"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21.6899 0.0139543C25.3881 0.197442 28.2513 2.81338 30.8928 5.37521C33.5677 7.96953 36.386 10.7639 36.5853 14.4606C36.7925 18.3029 34.7972 21.9638 31.9276 24.5676C29.1711 27.0687 25.4323 27.872 21.6899 27.9761C17.8096 28.084 13.5324 27.9319 10.8586 25.1537C8.22161 22.4138 8.5631 18.2382 8.68232 14.4606C8.7963 10.8487 9.08126 7.11454 11.5131 4.41367C14.0708 1.57303 17.845 -0.176818 21.6899 0.0139543Z"
-        fill="#CAE4FD"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M25.8899 0.0139543C29.588 0.197442 32.4513 2.81338 35.0927 5.37521C37.7676 7.96953 40.586 10.7639 40.7853 14.4606C40.9925 18.3029 38.9971 21.9638 36.1275 24.5676C33.371 27.0687 29.6323 27.872 25.8899 27.9761C22.0096 28.084 17.7323 27.9319 15.0585 25.1537C12.4216 22.4138 12.763 18.2382 12.8823 14.4606C12.9963 10.8487 13.2812 7.11454 15.7131 4.41367C18.2707 1.57303 22.0449 -0.176818 25.8899 0.0139543Z"
-        fill="white"
-      />
-    </CustomIcon>
-  );
-};