From 187f75d561038a00b79cfa27d61f6e9fb70b727a Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Wed, 1 May 2024 21:31:22 -0400
Subject: [PATCH] gear icon on settings page

---
 .../components/shared/CustomIcon/GearIcon.tsx    | 16 ++++++++++++++++
 .../src/components/shared/CustomIcon/index.ts    |  1 +
 .../src/pages/org-slug/projects/id/Settings.tsx  | 11 ++++++-----
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/GearIcon.tsx

diff --git a/packages/frontend/src/components/shared/CustomIcon/GearIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GearIcon.tsx
new file mode 100644
index 00000000..c1ee9e6b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index 4d77a8b9..805e70aa 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/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';
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
index 2b334c36..8b2f1f31 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
+++ b/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',
   },
 ];