gear icon on settings page

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

@@ -0,0 +1,16 @@
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const GearIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+        <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"/>
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -62,6 +62,7 @@ export * from './WarningTriangleIcon';
 export * from './CheckRadioOutlineIcon';
 export * from './TrendingIcon';
 export * from './ChevronDoubleDownIcon';
+export * from './GearIcon';
 
 // Templates
 export * from './templates';

packages/frontend/src/pages/org-slug/projects/id/Settings.tsx

@@ -9,31 +9,32 @@ import {
 } from '@snowballtools/material-tailwind-react-fork';
 
 import { OutletContextType } from '../../../../types/types';
+import { GearIcon } from '../../../../components/shared/CustomIcon/GearIcon';
 
 const tabsData = [
   {
     label: 'General',
-    icon: '^',
+    icon: <GearIcon />,
     value: 'general',
   },
   {
     label: 'Domains',
-    icon: '^',
+    icon: '',
     value: 'domains',
   },
   {
     label: 'Git',
-    icon: '^',
+    icon: '',
     value: 'git',
   },
   {
     label: 'Environment variables',
-    icon: '^',
+    icon: '',
     value: 'environment-variables',
   },
   {
     label: 'Members',
-    icon: '^',
+    icon: '',
     value: 'members',
   },
 ];