feat(icon): add Logo, Communication/location

sopt-makers · Dec 19, 2024 · 4858884 · 4858884
1 parent 2b54cda
commit 4858884
Show file tree

Hide file tree

Showing 16 changed files with 381 additions and 9 deletions.
diff --git a/apps/docs/src/stories/Icons.stories.tsx b/apps/docs/src/stories/Icons.stories.tsx
@@ -95,6 +95,14 @@ export const Default = {
             <Icons.IconSend style={style} />
             <p>send</p>
           </div>
+          <div>
+            <Icons.IconLocation style={style} />
+            <p>location</p>
+          </div>
+          <div>
+            <Icons.IconLocationFilled style={style} />
+            <p>location-filled</p>
+          </div>
         </div>
 
         <div className='icons-group'>
@@ -616,6 +624,50 @@ export const Default = {
             <p>users</p>
           </div>
         </div>
+
+        <div className='icons-group'>
+          <h4>Logo</h4>
+          <div>
+            <Icons.IconApple style={style} />
+            <p>apple</p>
+          </div>
+          <div>
+            <Icons.IconBehance style={style} />
+            <p>behance</p>
+          </div>
+          <div>
+            <Icons.IconFacebook style={style} />
+            <p>facebook</p>
+          </div>
+          <div>
+            <Icons.IconGithub style={style} />
+            <p>github</p>
+          </div>
+          <div>
+            <Icons.IconGoogleColor style={style} />
+            <p>google-color</p>
+          </div>
+          <div>
+            <Icons.IconGoogleMono style={style} />
+            <p>google-mono</p>
+          </div>
+          <div>
+            <Icons.IconInstagram style={style} />
+            <p>instagram</p>
+          </div>
+          <div>
+            <Icons.IconKakao style={style} />
+            <p>kakao</p>
+          </div>
+          <div>
+            <Icons.IconLinkedin style={style} />
+            <p>linkedin</p>
+          </div>
+          <div>
+            <Icons.IconPlaystore style={style} />
+            <p>playstore</p>
+          </div>
+        </div>
       </div>
     );
   },

diff --git a/packages/icons/index.ts b/packages/icons/index.ts
@@ -1,9 +1,10 @@
-export * from "./src/Communication/index";
-export * from "./src/Editor/index";
-export * from "./src/Feedback/index";
-export * from "./src/Files/index";
-export * from "./src/General/index";
-export * from "./src/Interaction/index";
-export * from "./src/Media/index";
-export * from "./src/Time/index";
-export * from "./src/Users/index";
+export * from './src/Communication/index';
+export * from './src/Editor/index';
+export * from './src/Feedback/index';
+export * from './src/Files/index';
+export * from './src/General/index';
+export * from './src/Interaction/index';
+export * from './src/Media/index';
+export * from './src/Time/index';
+export * from './src/Users/index';
+export * from './src/Logo/index';
diff --git a/packages/icons/src/Communication/ic-location-filled.tsx b/packages/icons/src/Communication/ic-location-filled.tsx
@@ -0,0 +1,18 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconLocationFilledProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconLocationFilled = forwardRef<SVGSVGElement, IconLocationFilledProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M3.73697 9.91307C3.73697 5.34951 7.43646 1.65002 12 1.65002C16.5636 1.65002 20.2631 5.34951 20.2631 9.91307C20.2631 11.163 19.8561 12.453 19.2693 13.674C18.6796 14.9012 17.8857 16.1046 17.0591 17.1941C15.4065 19.3726 13.5754 21.1575 12.8395 21.8469C12.3661 22.2904 11.6339 22.2905 11.1605 21.8469C10.4246 21.1575 8.59356 19.3726 6.94089 17.1941C6.11437 16.1046 5.32047 14.9012 4.7307 13.674C4.14389 12.453 3.73697 11.163 3.73697 9.91307ZM8.85031 9.60019C8.85031 7.8605 10.2606 6.4502 12.0003 6.4502C13.74 6.4502 15.1503 7.8605 15.1503 9.60019C15.1503 11.3399 13.74 12.7502 12.0003 12.7502C10.2606 12.7502 8.85031 11.3399 8.85031 9.60019Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+});
+
+export default IconLocationFilled;
diff --git a/packages/icons/src/Communication/ic-location.tsx b/packages/icons/src/Communication/ic-location.tsx
@@ -0,0 +1,18 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconLocationProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconLocation = forwardRef<SVGSVGElement, IconLocationProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M12.2436 3.15002C8.50848 3.15002 5.48056 6.17794 5.48056 9.91307C5.48056 10.8524 5.79135 11.9112 6.32626 13.0243C6.85821 14.1311 7.59002 15.2469 8.37951 16.2875C9.83471 18.2057 11.4451 19.8159 12.2436 20.5765C13.0421 19.8159 14.6525 18.2057 16.1077 16.2875C16.8972 15.2469 17.629 14.1311 18.1609 13.0243C18.6959 11.9112 19.0066 10.8524 19.0066 9.91307C19.0066 6.17794 15.9787 3.15002 12.2436 3.15002ZM3.98056 9.91307C3.98056 5.34951 7.68005 1.65002 12.2436 1.65002C16.8072 1.65002 20.5066 5.34951 20.5066 9.91307C20.5066 11.163 20.0997 12.453 19.5129 13.674C18.9232 14.9012 18.1292 16.1046 17.3027 17.1941C15.6501 19.3726 13.819 21.1575 13.0831 21.8469C12.6097 22.2904 11.8775 22.2905 11.4041 21.8469C10.6682 21.1575 8.83715 19.3726 7.18448 17.1941C6.35796 16.1046 5.56406 14.9012 4.97429 13.674C4.38748 12.453 3.98056 11.163 3.98056 9.91307ZM12.2439 7.95018C11.3326 7.95018 10.5939 8.68891 10.5939 9.60018C10.5939 10.5114 11.3326 11.2502 12.2439 11.2502C13.1552 11.2502 13.8939 10.5114 13.8939 9.60018C13.8939 8.68891 13.1552 7.95018 12.2439 7.95018ZM9.09391 9.60018C9.09391 7.86048 10.5042 6.45018 12.2439 6.45018C13.9836 6.45018 15.3939 7.86048 15.3939 9.60018C15.3939 11.3399 13.9836 12.7502 12.2439 12.7502C10.5042 12.7502 9.09391 11.3399 9.09391 9.60018Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+});
+
+export default IconLocation;
diff --git a/packages/icons/src/Communication/index.ts b/packages/icons/src/Communication/index.ts
@@ -19,3 +19,5 @@ export { default as IconMessageX } from './ic-message-x';
 export { default as IconPhone } from './ic-phone';
 export { default as IconPin } from './ic-pin';
 export { default as IconSend } from './ic-send';
+export { default as IconLocation } from './ic-location';
+export { default as IconLocationFilled } from './ic-location-filled';
diff --git a/packages/icons/src/Logo/ic-apple.tsx b/packages/icons/src/Logo/ic-apple.tsx
@@ -0,0 +1,16 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconAppleProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconApple = forwardRef<SVGSVGElement, IconAppleProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M8.95557 21.9477C10.2363 21.9477 10.798 21.0602 12.3933 21.0602C13.9887 21.0602 14.3706 21.914 15.7862 21.914C17.2017 21.914 18.1117 20.5883 18.9993 19.2851C19.9879 17.7909 20.3924 16.3304 20.4261 16.263C20.3362 16.2406 17.6624 15.1059 17.6624 11.949C17.6624 9.20773 19.7745 7.97193 19.8868 7.88205C18.4937 5.81489 16.3704 5.76995 15.7974 5.76995C14.2358 5.76995 12.9551 6.74736 12.1462 6.74736C11.2811 6.74736 10.1352 5.82612 8.77582 5.82612C6.19187 5.82612 3.57422 8.0281 3.57422 12.1737C3.57422 14.7464 4.55163 17.4764 5.74249 19.2402C6.76483 20.7344 7.6636 21.959 8.95557 21.959V21.9477ZM12.2473 5.52279C13.1798 5.52279 14.3594 4.87119 15.0559 4.00613C15.6851 3.21971 16.1457 2.11872 16.1457 1.01773C16.1457 0.87168 16.1345 0.714396 16.1007 0.602051C15.0559 0.646989 13.8089 1.32106 13.0562 2.23106C12.4608 2.92761 11.9215 4.00613 11.9215 5.11835C11.9215 5.27563 11.944 5.44415 11.9664 5.50032C12.0338 5.51156 12.135 5.52279 12.2473 5.52279Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+});
+
+export default IconApple;
diff --git a/packages/icons/src/Logo/ic-behance.tsx b/packages/icons/src/Logo/ic-behance.tsx
@@ -0,0 +1,37 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconBehanceProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconBehance = forwardRef<SVGSVGElement, IconBehanceProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g clip-path='url(#clip0_8887_2549)'>
+        <path
+          d='M8.73179 10.7801C9.08348 10.7801 9.37194 10.6853 9.59323 10.5233C9.81452 10.3612 9.91331 10.0767 9.91331 9.72504C9.91331 9.53142 9.88169 9.34174 9.81847 9.21529C9.75525 9.08884 9.66041 8.99005 9.53001 8.89522C9.40356 8.83199 9.27316 8.76877 9.11509 8.73715C8.95703 8.70554 8.79502 8.70554 8.60534 8.70554H6.75207V10.7841C6.75207 10.7801 8.73179 10.7801 8.73179 10.7801Z'
+          fill='currentColor'
+        />
+        <path
+          d='M8.82663 14.5538C9.02026 14.5538 9.20993 14.5222 9.37194 14.4906C9.53001 14.459 9.69202 14.3958 9.81847 14.297C9.94492 14.1982 10.0437 14.1034 10.1385 13.9453C10.2018 13.7872 10.265 13.5936 10.265 13.3684C10.265 12.9218 10.1385 12.6018 9.88169 12.3765C9.62484 12.1829 9.27316 12.0881 8.85824 12.0881H6.75207V14.5499H8.82663V14.5538Z'
+          fill='currentColor'
+        />
+        <path
+          d='M16.0224 10.8117C16.4373 10.8117 16.789 10.9382 17.0142 11.1634C17.2355 11.3886 17.3975 11.7087 17.4608 12.1829H14.584C14.584 12.0762 14.6066 11.9666 14.6326 11.84C14.6374 11.8166 14.6423 11.7926 14.6473 11.768C14.6789 11.6099 14.7461 11.4479 14.8725 11.3215C14.8772 11.3168 14.8819 11.3121 14.8865 11.3074C15.0084 11.1854 15.1326 11.0611 15.319 10.9698C15.5127 10.8749 15.7339 10.8117 16.0224 10.8117Z'
+          fill='currentColor'
+        />
+        <path
+          fill-rule='evenodd'
+          clip-rule='evenodd'
+          d='M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM8.98864 7.2C9.40356 7.2 9.78686 7.23161 10.1385 7.32645C10.4902 7.38968 10.7787 7.52008 11.0355 7.67814C11.2924 7.8362 11.4821 8.06144 11.6125 8.3499C11.7389 8.63837 11.8061 8.99005 11.8061 9.37335C11.8061 9.81988 11.7113 10.2032 11.486 10.4916C11.2924 10.7801 10.9763 11.037 10.589 11.2266C11.1343 11.3847 11.5492 11.6732 11.8021 12.0565C12.055 12.4398 12.2171 12.9179 12.2171 13.4632C12.2171 13.9097 12.1222 14.293 11.9602 14.6131C11.8021 14.9332 11.5453 15.2217 11.2568 15.4113C10.9684 15.605 10.6167 15.763 10.2334 15.8579C9.85008 15.9527 9.46678 16.0159 9.08348 16.0159L4.8 16.0238V7.2H8.98864ZM16.1489 14.9055C15.6391 14.9055 15.2558 14.7791 14.999 14.5222C14.7421 14.2654 14.5524 13.7872 14.5524 13.2656H19.1876C19.2192 12.7559 19.1876 12.3054 19.1244 11.8589C18.994 11.4124 18.8043 10.9974 18.5474 10.6458C18.2906 10.2625 17.9705 10.0096 17.5556 9.78432C17.1407 9.55908 16.6626 9.46424 16.1172 9.46424C15.6035 9.46424 15.1886 9.56303 14.7737 9.72109C14.3904 9.87916 14.0387 10.136 13.7503 10.4245C13.4618 10.7445 13.2405 11.0962 13.0785 11.5111C12.9165 11.9261 12.8533 12.3765 12.8533 12.8547C12.8533 13.3684 12.9204 13.8149 13.0785 14.2298C13.2089 14.6447 13.4302 14.9964 13.7187 15.2849C14.0071 15.605 14.3272 15.8302 14.7421 15.9883C15.157 16.1503 15.6075 16.2451 16.1172 16.2451C16.8522 16.2451 17.4608 16.0554 17.9705 15.7354C18.4803 15.3837 18.8636 14.8384 19.1204 14.0718H17.5556C17.4924 14.2654 17.3343 14.4551 17.0775 14.6487C16.8206 14.8107 16.5005 14.9055 16.1489 14.9055ZM17.7808 7.80854H14.2007V8.66998H17.7808V7.80854Z'
+          fill='currentColor'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_8887_2549'>
+          <rect width='24' height='24' fill='currentColor' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+export default IconBehance;
diff --git a/packages/icons/src/Logo/ic-facebook.tsx b/packages/icons/src/Logo/ic-facebook.tsx
@@ -0,0 +1,16 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconFacebookProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconFacebook = forwardRef<SVGSVGElement, IconFacebookProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M13.884 23.9256C19.6164 23.0217 24 18.0591 24 12.0726C24 5.44521 18.6274 0.0726318 12 0.0726318C5.37258 0.0726318 0 5.44521 0 12.0726C0 18.0632 4.38971 23.0286 10.128 23.9275V15.5407H7.07997V12.0727H10.128V9.43269C10.128 6.42069 11.916 4.76469 14.664 4.76469C15.972 4.76469 17.352 5.00469 17.352 5.00469V7.95669H15.84C14.352 7.95669 13.884 8.88069 13.884 9.82869V12.0847H17.208L16.68 15.5527H13.884V23.9256Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+});
+
+export default IconFacebook;
diff --git a/packages/icons/src/Logo/ic-github.tsx b/packages/icons/src/Logo/ic-github.tsx
@@ -0,0 +1,27 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconGithubProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconGithub = forwardRef<SVGSVGElement, IconGithubProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g clip-path='url(#clip0_8887_2547)'>
+        <path
+          d='M24 11.9999C24 18.6272 18.6274 23.9997 12 23.9997C5.37258 23.9997 0 18.6272 0 11.9999C0 5.37252 5.37258 0 12 0C18.6274 0 24 5.37252 24 11.9999Z'
+          fill='currentColor'
+        />
+        <path
+          d='M1.68811 18.1412C3.14889 20.5884 5.45639 22.4717 8.20636 23.3872C8.80674 23.497 9.02553 23.1264 9.02553 22.8082C9.02553 22.6764 9.02332 22.4436 9.02036 22.1321C9.01693 21.7713 9.01249 21.3049 9.00933 20.7676C5.67147 21.4925 4.96722 19.1588 4.96722 19.1588C4.42134 17.7731 3.63458 17.404 3.63458 17.404C2.54504 16.6593 3.71709 16.674 3.71709 16.674C4.92154 16.7594 5.55508 17.9108 5.55508 17.9108C6.62546 19.7444 8.364 19.2147 9.04763 18.9083C9.15666 18.1326 9.46606 17.6037 9.80935 17.3038C7.14481 17.0011 4.34326 15.9712 4.34326 11.373C4.34326 10.0632 4.81104 8.99208 5.57865 8.15302C5.45489 7.84952 5.04309 6.6296 5.69578 4.97727C5.69578 4.97727 6.70355 4.65461 8.99607 6.2075C9.953 5.94156 10.9799 5.80823 12.0002 5.80381C13.019 5.80823 14.0459 5.94156 15.0044 6.2075C17.2954 4.65461 18.301 4.97727 18.301 4.97727C18.9559 6.6296 18.5441 7.84952 18.4203 8.15302C19.1894 8.99208 19.6542 10.0632 19.6542 11.373C19.6542 15.983 16.8482 16.9974 14.1749 17.2943C14.6058 17.6648 14.9896 18.397 14.9896 19.5168C14.9896 20.5893 14.983 21.5234 14.9787 22.1423C14.9765 22.4487 14.9749 22.6779 14.9749 22.8082C14.9749 23.1294 15.1907 23.5028 15.8 23.3857C17.9906 22.6545 19.9003 21.3094 21.3242 19.5544C19.1241 22.2666 15.7645 23.9997 12 23.9997C7.61678 23.9997 3.78229 21.6501 1.68811 18.1412Z'
+          fill='#1E1E1E'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_8887_2547'>
+          <rect width='24' height='24' fill='currentColor' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+export default IconGithub;
diff --git a/packages/icons/src/Logo/ic-google-color.tsx b/packages/icons/src/Logo/ic-google-color.tsx
@@ -0,0 +1,36 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconGoogleColorProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconGoogleColor = forwardRef<SVGSVGElement, IconGoogleColorProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M21.5041 12.2255C21.5041 11.5237 21.4414 10.8483 21.3237 10.2004H12.0001V14.0295H17.3285C17.0986 15.267 16.4012 16.3164 15.3529 17.0182V19.502H18.5517C20.4239 17.7783 21.5041 15.2406 21.5041 12.2255Z'
+        fill='#3D82F0'
+      />
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M12.0004 21.9004C14.6734 21.9004 16.9138 21.0134 18.5517 19.502L15.3529 17.0182C14.4663 17.6122 13.3325 17.9624 12.0004 17.9624C9.42197 17.9624 7.23957 16.2211 6.46077 13.8814H3.15307V16.4466C4.78217 19.6817 8.13057 21.9004 12.0004 21.9004Z'
+        fill='#31A752'
+      />
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M6.46077 13.8814C6.26277 13.2874 6.1503 12.6527 6.1503 12.0004C6.1503 11.3481 6.2625 10.7134 6.4605 10.1194V7.55416H3.1528C2.4829 8.89066 2.1001 10.4032 2.1001 12.0004C2.1001 13.5976 2.48317 15.1101 3.15307 16.4466L6.46077 13.8814Z'
+        fill='#F9BA00'
+      />
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M12.0004 6.03798C13.4535 6.03798 14.7592 6.53738 15.7844 7.51858L18.6246 4.67948C16.9097 3.08118 14.669 2.09998 12.0004 2.09998C8.13057 2.09998 4.7819 4.31796 3.1528 7.55416L6.4605 10.1194C7.2393 7.77966 9.42197 6.03798 12.0004 6.03798Z'
+        fill='#E64234'
+      />
+    </svg>
+  );
+});
+
+export default IconGoogleColor;
diff --git a/packages/icons/src/Logo/ic-google-mono.tsx b/packages/icons/src/Logo/ic-google-mono.tsx
@@ -0,0 +1,16 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconGoogleMonoProps extends HTMLAttributes<SVGSVGElement> {}
+
+const IconGoogleMono = forwardRef<SVGSVGElement, IconGoogleMonoProps>((props, ref) => {
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M15.7836 7.51858C14.7584 6.53738 13.4527 6.03798 11.9996 6.03798C9.42124 6.03798 7.23884 7.77928 6.46004 10.119C6.26204 10.713 6.14981 11.3481 6.14981 12.0004C6.14981 12.6527 6.262 13.2874 6.45999 13.8813C7.23879 16.221 9.42124 17.9623 11.9996 17.9623C13.3317 17.9623 14.4658 17.6114 15.3524 17.0174C16.4004 16.3156 17.0981 15.2668 17.3279 14.0295H11.9995V10.2004H21.3231C21.4408 10.8483 21.5035 11.5237 21.5035 12.2255C21.5035 15.2406 20.4233 17.7783 18.5511 19.502C16.9132 21.0134 14.6726 21.9004 11.9996 21.9004C8.12985 21.9004 4.78146 19.6817 3.15235 16.4466C2.48245 15.1101 2.09961 13.5976 2.09961 12.0004C2.09961 10.4032 2.48241 8.8907 3.15231 7.5542C4.78154 4.31837 8.13011 2.09998 11.9996 2.09998C14.6682 2.09998 16.9089 3.08118 18.6238 4.67948L15.7836 7.51858Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+});
+
+export default IconGoogleMono;
diff --git a/packages/icons/src/Logo/ic-instagram.tsx b/packages/icons/src/Logo/ic-instagram.tsx
@@ -0,0 +1,38 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface IconInstagramProps extends HTMLAttributes<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+const IconInstagram = forwardRef<SVGSVGElement, IconInstagramProps>((props, ref) => {
+  const { width = 24, height = 24 } = props;
+
+  return (
+    <svg {...props} ref={ref} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g clip-path='url(#clip0_8887_2614)'>
+        <path
+          fill-rule='evenodd'
+          clip-rule='evenodd'
+          d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM9.03125 4.84313C9.79921 4.80809 10.0444 4.7998 11.9998 4.7998C13.9552 4.7998 14.2004 4.80809 14.9684 4.84313C15.7347 4.87809 16.2581 4.99981 16.7161 5.17778C17.1895 5.36178 17.5911 5.60797 17.9914 6.00824C18.3916 6.40854 18.6378 6.81006 18.8218 7.28352C18.9998 7.74149 19.1215 8.26489 19.1565 9.03124C19.1915 9.79919 19.1998 10.0444 19.1998 11.9998C19.1998 13.9552 19.1915 14.2004 19.1565 14.9683C19.1215 15.7347 18.9998 16.2581 18.8218 16.716C18.6378 17.1895 18.3916 17.591 17.9914 17.9913C17.5911 18.3916 17.1895 18.6378 16.7161 18.8218C16.2581 18.9997 15.7347 19.1215 14.9684 19.1564C14.2004 19.1915 13.9552 19.1998 11.9998 19.1998C10.0444 19.1998 9.79921 19.1915 9.03125 19.1564C8.2649 19.1215 7.7415 18.9997 7.28353 18.8218C6.81007 18.6378 6.40854 18.3916 6.00824 17.9913C5.60797 17.591 5.36178 17.1895 5.17781 16.716C4.99981 16.2581 4.87809 15.7347 4.84313 14.9683C4.80809 14.2004 4.7998 13.9552 4.7998 11.9998C4.7998 10.0444 4.80809 9.79919 4.84313 9.03124C4.87809 8.26489 4.99981 7.74149 5.17781 7.28352C5.36178 6.81006 5.60797 6.40854 6.00824 6.00824C6.40854 5.60797 6.81007 5.36178 7.28353 5.17778C7.7415 4.99981 8.2649 4.87809 9.03125 4.84313Z'
+          fill='currentColor'
+        />
+        <path
+          d='M12.0034 8.30605C9.96137 8.30605 8.30605 9.96137 8.30605 12.0033C8.30605 14.0453 9.96137 15.7006 12.0034 15.7006C14.0453 15.7006 15.7006 14.0453 15.7006 12.0033C15.7006 9.96137 14.0453 8.30605 12.0034 8.30605ZM12.0034 14.4033C10.6779 14.4033 9.60334 13.3288 9.60334 12.0033C9.60334 10.6778 10.6779 9.60334 12.0034 9.60334C13.3288 9.60334 14.4033 10.6778 14.4033 12.0033C14.4033 13.3288 13.3288 14.4033 12.0034 14.4033Z'
+          fill='currentColor'
+        />
+        <path
+          d='M16.7105 8.15769C16.7105 8.63484 16.3236 9.02168 15.8465 9.02168C15.3693 9.02168 14.9825 8.63484 14.9825 8.15769C14.9825 7.68052 15.3693 7.29368 15.8465 7.29368C16.3236 7.29368 16.7105 7.68052 16.7105 8.15769Z'
+          fill='currentColor'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_8887_2614'>
+          <rect width={width} height={height} fill='currentColor' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+export default IconInstagram;