droplinked-editor-configs 1.8.0

package/src/assets/icon/SocialMedia/Colored/TikTokLight/TiktoklightMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TiktoklightMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14.314 7.21939C15.6001 8.14204 17.1757 8.6849 18.8774 8.6849V5.39868C18.5553 5.39875 18.2341 5.36505 17.919 5.29805V7.88478C16.2175 7.88478 14.6421 7.34191 13.3557 6.41934V13.1256C13.3557 16.4804 10.6457 19.1998 7.30306 19.1998C6.05583 19.1998 4.89658 18.8214 3.93359 18.1724C5.03269 19.3002 6.56546 19.9998 8.2612 19.9998C11.6041 19.9998 14.3141 17.2804 14.3141 13.9255V7.21939H14.314ZM15.4962 3.904C14.8389 3.18336 14.4074 2.25207 14.314 1.22248V0.799805H13.4058C13.6344 2.10841 14.4142 3.2264 15.4962 3.904ZM6.04783 15.598C5.6806 15.1148 5.48215 14.5237 5.48304 13.9159C5.48304 12.3815 6.72255 11.1374 8.25176 11.1374C8.53676 11.1374 8.82004 11.1812 9.09164 11.2676V7.90798C8.77424 7.86433 8.4539 7.84579 8.13371 7.85259V10.4676C7.86191 10.3811 7.57848 10.3372 7.29342 10.3375C5.76421 10.3375 4.52477 11.5814 4.52477 13.116C4.52477 14.201 5.14432 15.1404 6.04783 15.598Z" fill="#FF004F" />
+        <path d="M13.3551 6.41927C14.6416 7.34185 16.217 7.88471 17.9185 7.88471V5.29799C16.9687 5.09495 16.1279 4.59684 15.4957 3.904C14.4136 3.22633 13.6339 2.10834 13.4053 0.799805H11.0198V13.9253C11.0144 15.4555 9.77704 16.6945 8.25111 16.6945C7.3519 16.6945 6.55304 16.2644 6.04711 15.598C5.14366 15.1404 4.52412 14.2009 4.52412 13.116C4.52412 11.5816 5.76355 10.3375 7.29277 10.3375C7.58576 10.3375 7.86815 10.3833 8.13305 10.4677V7.85266C4.8491 7.92075 2.20801 10.6136 2.20801 13.9254C2.20801 15.5787 2.8657 17.0774 3.93314 18.1724C4.89613 18.8214 6.05538 19.1998 7.30261 19.1998C10.6453 19.1998 13.3552 16.4803 13.3552 13.1256V6.41927H13.3551Z" fill="white" />
+        <path d="M17.9188 5.29817V4.59874C17.0623 4.60004 16.2226 4.35932 15.496 3.90411C16.1392 4.61089 16.9863 5.09822 17.9188 5.29817ZM13.4056 0.799986C13.3838 0.674926 13.367 0.549042 13.3554 0.422678V0H10.0617V13.1257C10.0564 14.6556 8.8191 15.8946 7.29303 15.8946C6.845 15.8946 6.42199 15.7879 6.04737 15.5983C6.55331 16.2645 7.35216 16.6946 8.25137 16.6946C9.77717 16.6946 11.0148 15.4558 11.0201 13.9256V0.799986H13.4056ZM8.13345 7.85284V7.10824C7.85823 7.07049 7.58076 7.05155 7.30294 7.05169C3.95993 7.05162 1.25 9.77116 1.25 13.1257C1.25 15.2288 2.31505 17.0822 3.93347 18.1725C2.86603 17.0775 2.20834 15.5787 2.20834 13.9255C2.20834 10.6138 4.84936 7.92093 8.13345 7.85284Z" fill="#00F2EA" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/TikTokLight/TiktoklightSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TiktoklightSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M11.4508 5.77581C12.4797 6.51392 13.7402 6.94822 15.1015 6.94822V4.31924C14.8439 4.31929 14.5869 4.29233 14.3348 4.23874V6.30812C12.9736 6.30812 11.7133 5.87382 10.6841 5.13576V10.5007C10.6841 13.1846 8.5162 15.3601 5.84206 15.3601C4.84428 15.3601 3.91688 15.0574 3.14648 14.5382C4.02576 15.4404 5.25197 16.0001 6.60857 16.0001C9.28287 16.0001 11.4509 13.8246 11.4509 11.1407V5.77581H11.4508ZM12.3966 3.12349C11.8708 2.54698 11.5255 1.80195 11.4508 0.978279V0.640137H10.7243C10.9072 1.68702 11.5309 2.58141 12.3966 3.12349ZM4.83788 12.4787C4.54409 12.0921 4.38533 11.6192 4.38604 11.133C4.38604 9.90551 5.37765 8.91024 6.60102 8.91024C6.82901 8.91019 7.05564 8.94522 7.27292 9.01441V6.32668C7.019 6.29175 6.76273 6.27693 6.50657 6.28236V8.37437C6.28913 8.30518 6.0624 8.27004 5.83435 8.27026C4.61098 8.27026 3.61943 9.26541 3.61943 10.4931C3.61943 11.3611 4.11506 12.1126 4.83788 12.4787Z" fill="#FF004F" />
+        <path d="M10.6843 5.13571C11.7135 5.87377 12.9738 6.30806 14.335 6.30806V4.23868C13.5752 4.07625 12.9025 3.67776 12.3968 3.12349C11.531 2.58135 10.9073 1.68696 10.7245 0.640137H8.81606V11.1406C8.81174 12.3647 7.82183 13.3559 6.60108 13.3559C5.88171 13.3559 5.24263 13.0118 4.83788 12.4787C4.11513 12.1126 3.61949 11.361 3.61949 10.4931C3.61949 9.26557 4.61104 8.27031 5.83441 8.27031C6.0688 8.27031 6.29472 8.30694 6.50663 8.37442V6.28242C3.87947 6.33689 1.7666 8.49116 1.7666 11.1406C1.7666 12.4632 2.29276 13.6622 3.14671 14.5382C3.9171 15.0574 4.8445 15.3602 5.84228 15.3602C8.51647 15.3602 10.6844 13.1845 10.6844 10.5007V5.13571H10.6843Z" fill="white" />
+        <path d="M14.335 4.23853V3.67899C13.6498 3.68003 12.9781 3.48746 12.3968 3.12329C12.9114 3.68871 13.589 4.07858 14.335 4.23853ZM10.7245 0.639989C10.707 0.539941 10.6936 0.439234 10.6843 0.338143V0H8.04935V10.5005C8.04513 11.7245 7.05528 12.7157 5.83442 12.7157C5.476 12.7157 5.13759 12.6303 4.8379 12.4786C5.24264 13.0116 5.88173 13.3557 6.6011 13.3557C7.82173 13.3557 8.81181 12.3646 8.81607 11.1405V0.639989H10.7245ZM6.50676 6.28227V5.68659C6.28658 5.65639 6.06461 5.64124 5.84235 5.64135C3.16794 5.64129 1 7.81693 1 10.5005C1 12.183 1.85204 13.6658 3.14678 14.538C2.29283 13.662 1.76667 12.463 1.76667 11.1404C1.76667 8.49101 3.87949 6.33674 6.50676 6.28227Z" fill="#00F2EA" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/WhatsApp/WhatsappLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const WhatsappLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M0 24L1.69505 17.837C0.649083 16.033 0.0994725 13.988 0.100477 11.891C0.103492 5.335 5.46395 0 12.0502 0C15.2464 0.001 18.2467 1.24 20.5034 3.488C22.7591 5.736 24.001 8.724 24 11.902C23.997 18.459 18.6365 23.794 12.0502 23.794C10.0507 23.793 8.08038 23.294 6.33509 22.346L0 24ZM6.62848 20.193C8.31248 21.188 9.92012 21.784 12.0462 21.785C17.5202 21.785 21.9794 17.351 21.9824 11.9C21.9844 6.438 17.5463 2.01 12.0543 2.008C6.57624 2.008 2.12007 6.442 2.11806 11.892C2.11706 14.117 2.77217 15.783 3.87239 17.526L2.86863 21.174L6.62848 20.193ZM18.0698 14.729C17.9955 14.605 17.7965 14.531 17.4971 14.382C17.1987 14.233 15.7307 13.514 15.4564 13.415C15.1831 13.316 14.9842 13.266 14.7842 13.564C14.5853 13.861 14.0126 14.531 13.8387 14.729C13.6649 14.927 13.4901 14.952 13.1917 14.803C12.8932 14.654 11.9307 14.341 10.7903 13.328C9.90304 12.54 9.30319 11.567 9.12936 11.269C8.95554 10.972 9.11128 10.811 9.25998 10.663C9.39462 10.53 9.5584 10.316 9.70811 10.142C9.85983 9.97 9.90907 9.846 10.0095 9.647C10.109 9.449 10.0598 9.275 9.98442 9.126C9.90907 8.978 9.31223 7.515 9.06405 6.92C8.8209 6.341 8.57473 6.419 8.39186 6.41L7.81914 6.4C7.62019 6.4 7.29666 6.474 7.02336 6.772C6.75006 7.07 5.9784 7.788 5.9784 9.251C5.9784 10.714 7.04848 12.127 7.19719 12.325C7.3469 12.523 9.30218 15.525 12.2974 16.812C13.0098 17.118 13.5664 17.301 13.9995 17.438C14.7149 17.664 15.366 17.632 15.8804 17.556C16.4542 17.471 17.6468 16.837 17.896 16.143C18.1452 15.448 18.1452 14.853 18.0698 14.729Z" fill="#25D366" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/WhatsApp/WhatsappMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const WhatsappMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M0 20L1.41254 14.8642C0.540902 13.3608 0.0828937 11.6567 0.0837311 9.90917C0.086243 4.44583 4.55329 0 10.0419 0C12.7053 0.000833333 15.2056 1.03333 17.0862 2.90667C18.9659 4.78 20.0008 7.27 20 9.91833C19.9975 15.3825 15.5304 19.8283 10.0419 19.8283C8.37562 19.8275 6.73365 19.4117 5.27924 18.6217L0 20ZM5.52374 16.8275C6.92707 17.6567 8.26677 18.1533 10.0385 18.1542C14.6002 18.1542 18.3162 14.4592 18.3187 9.91667C18.3204 5.365 14.622 1.675 10.0452 1.67333C5.4802 1.67333 1.76673 5.36833 1.76505 9.91C1.76421 11.7642 2.31014 13.1525 3.22699 14.605L2.39052 17.645L5.52374 16.8275ZM15.0582 12.2742C14.9962 12.1708 14.8304 12.1092 14.5809 11.985C14.3322 11.8608 13.1089 11.2617 12.8803 11.1792C12.6526 11.0967 12.4868 11.055 12.3202 11.3033C12.1544 11.5508 11.6771 12.1092 11.5323 12.2742C11.3874 12.4392 11.2417 12.46 10.993 12.3358C10.7444 12.2117 9.94222 11.9508 8.99188 11.1067C8.25253 10.45 7.75266 9.63917 7.6078 9.39083C7.46295 9.14333 7.59273 9.00917 7.71665 8.88583C7.82885 8.775 7.96533 8.59667 8.09009 8.45167C8.21653 8.30833 8.25756 8.205 8.34129 8.03917C8.42418 7.87417 8.38315 7.72917 8.32035 7.605C8.25756 7.48167 7.76019 6.2625 7.55338 5.76667C7.35075 5.28417 7.14561 5.34917 6.99322 5.34167L6.51595 5.33333C6.35016 5.33333 6.08055 5.395 5.8528 5.64333C5.62505 5.89167 4.982 6.49 4.982 7.70917C4.982 8.92833 5.87373 10.1058 5.99765 10.2708C6.12241 10.4358 7.75182 12.9375 10.2478 14.01C10.8415 14.265 11.3054 14.4175 11.6662 14.5317C12.2624 14.72 12.805 14.6933 13.2337 14.63C13.7118 14.5592 14.7057 14.0308 14.9133 13.4525C15.121 12.8733 15.121 12.3775 15.0582 12.2742Z" fill="#25D366" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/WhatsApp/WhatsappSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const WhatsappSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M0 16L1.12467 11.8913C0.430667 10.6887 0.066 9.32533 0.0666667 7.92733C0.0686667 3.55667 3.62533 0 7.99534 0C10.116 0.000666667 12.1067 0.826667 13.604 2.32533C15.1007 3.824 15.9247 5.816 15.924 7.93467C15.922 12.306 12.3653 15.8627 7.99534 15.8627C6.66867 15.862 5.36133 15.5293 4.20333 14.8973L0 16ZM4.398 13.462C5.51533 14.1253 6.582 14.5227 7.99267 14.5233C11.6247 14.5233 14.5833 11.5673 14.5853 7.93333C14.5867 4.292 11.642 1.34 7.998 1.33867C4.36333 1.33867 1.40667 4.29467 1.40533 7.928C1.40467 9.41133 1.83933 10.522 2.56933 11.684L1.90333 14.116L4.398 13.462ZM11.9893 9.81933C11.94 9.73667 11.808 9.68733 11.6093 9.588C11.4113 9.48867 10.4373 9.00933 10.2553 8.94333C10.074 8.87733 9.942 8.844 9.80934 9.04267C9.67734 9.24067 9.29734 9.68733 9.182 9.81933C9.06667 9.95133 8.95067 9.968 8.75267 9.86867C8.55467 9.76933 7.916 9.56067 7.15934 8.88533C6.57067 8.36 6.17267 7.71133 6.05733 7.51267C5.942 7.31467 6.04533 7.20733 6.144 7.10867C6.23334 7.02 6.342 6.87733 6.44134 6.76133C6.542 6.64667 6.57467 6.564 6.64134 6.43133C6.70734 6.29933 6.67467 6.18333 6.62467 6.084C6.57467 5.98533 6.17867 5.01 6.014 4.61333C5.85267 4.22733 5.68934 4.27933 5.568 4.27333L5.188 4.26667C5.056 4.26667 4.84133 4.316 4.66 4.51467C4.47867 4.71333 3.96667 5.192 3.96667 6.16733C3.96667 7.14267 4.67667 8.08467 4.77533 8.21667C4.87467 8.34867 6.172 10.35 8.15934 11.208C8.632 11.412 9.00134 11.534 9.28867 11.6253C9.76334 11.776 10.1953 11.7547 10.5367 11.704C10.9173 11.6473 11.7087 11.2247 11.874 10.762C12.0393 10.2987 12.0393 9.902 11.9893 9.81933Z" fill="#25D366" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/YouTube/YoutubeLg.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const YoutubeLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10025_4342)">
+            <path d="M23.5206 6.18541C23.385 5.67482 23.1175 5.20883 22.7452 4.83407C22.3728 4.4593 21.9085 4.18891 21.3988 4.04996C19.5225 3.54541 12.0225 3.54541 12.0225 3.54541C12.0225 3.54541 4.52246 3.54541 2.6461 4.04996C2.13639 4.18891 1.67212 4.4593 1.29975 4.83407C0.927377 5.20883 0.659966 5.67482 0.524279 6.18541C0.022461 8.06996 0.0224609 12 0.0224609 12C0.0224609 12 0.022461 15.93 0.524279 17.8145C0.659966 18.3251 0.927377 18.7911 1.29975 19.1658C1.67212 19.5406 2.13639 19.811 2.6461 19.95C4.52246 20.4545 12.0225 20.4545 12.0225 20.4545C12.0225 20.4545 19.5225 20.4545 21.3988 19.95C21.9085 19.811 22.3728 19.5406 22.7452 19.1658C23.1175 18.7911 23.385 18.3251 23.5206 17.8145C24.0225 15.93 24.0225 12 24.0225 12C24.0225 12 24.0225 8.06996 23.5206 6.18541Z" fill="#FF0302" />
+            <path d="M9.56836 15.5689V8.43164L15.8411 12.0003L9.56836 15.5689Z" fill="#FEFEFE" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10025_4342">
+                <rect width="24" height="24" fill="white" transform="translate(-0.000976562)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/YouTube/YoutubeMd.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const YoutubeMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10025_4339)">
+            <path d="M19.6004 5.15459C19.4873 4.7291 19.2645 4.34077 18.9541 4.02847C18.6438 3.71617 18.2569 3.49084 17.8322 3.37504C16.2686 2.95459 10.0186 2.95459 10.0186 2.95459C10.0186 2.95459 3.76855 2.95459 2.20492 3.37504C1.78016 3.49084 1.39327 3.71617 1.08296 4.02847C0.772651 4.34077 0.549809 4.7291 0.436737 5.15459C0.0185547 6.72504 0.0185547 10 0.0185547 10C0.0185547 10 0.0185547 13.275 0.436737 14.8455C0.549809 15.271 0.772651 15.6593 1.08296 15.9716C1.39327 16.2839 1.78016 16.5092 2.20492 16.625C3.76855 17.0455 10.0186 17.0455 10.0186 17.0455C10.0186 17.0455 16.2686 17.0455 17.8322 16.625C18.2569 16.5092 18.6438 16.2839 18.9541 15.9716C19.2645 15.6593 19.4873 15.271 19.6004 14.8455C20.0186 13.275 20.0186 10 20.0186 10C20.0186 10 20.0186 6.72504 19.6004 5.15459Z" fill="#FF0302" />
+            <path d="M7.97363 12.9741V7.02637L13.2009 10.0002L7.97363 12.9741Z" fill="#FEFEFE" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10025_4339">
+                <rect width="20" height="20" fill="white" transform="translate(-0.000976562)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colored/YouTube/YoutubeSm.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const YoutubeSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_10025_4336)">
+            <path d="M15.6801 4.12377C15.5896 3.78338 15.4114 3.47272 15.1631 3.22287C14.9149 2.97303 14.6054 2.79277 14.2656 2.70013C13.0146 2.36377 8.01465 2.36377 8.01465 2.36377C8.01465 2.36377 3.01465 2.36377 1.76374 2.70013C1.42394 2.79277 1.11442 2.97303 0.866174 3.22287C0.617926 3.47272 0.439652 3.78338 0.349194 4.12377C0.0146485 5.38013 0.0146484 8.00013 0.0146484 8.00013C0.0146484 8.00013 0.0146485 10.6201 0.349194 11.8765C0.439652 12.2169 0.617926 12.5275 0.866174 12.7774C1.11442 13.0272 1.42394 13.2075 1.76374 13.3001C3.01465 13.6365 8.01465 13.6365 8.01465 13.6365C8.01465 13.6365 13.0146 13.6365 14.2656 13.3001C14.6054 13.2075 14.9149 13.0272 15.1631 12.7774C15.4114 12.5275 15.5896 12.2169 15.6801 11.8765C16.0147 10.6201 16.0146 8.00013 16.0146 8.00013C16.0146 8.00013 16.0147 5.38013 15.6801 4.12377Z" fill="#FF0302" />
+            <path d="M6.37891 10.3793V5.62109L10.5607 8.00018L6.37891 10.3793Z" fill="#FEFEFE" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10025_4336">
+                <rect width="16" height="16" fill="white" transform="translate(-0.000976562)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Behance/BehanceLg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BehanceLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M3 11.625H8.8125C9.65788 11.625 10.4686 11.9608 11.0664 12.5586C11.6642 13.1564 12 13.9671 12 14.8125C12 15.6579 11.6642 16.4686 11.0664 17.0664C10.4686 17.6642 9.65788 18 8.8125 18H3V6H8.4375C9.18342 6 9.89879 6.29632 10.4262 6.82376C10.9537 7.35121 11.25 8.06658 11.25 8.8125C11.25 9.55842 10.9537 10.2738 10.4262 10.8012C9.89879 11.3287 9.18342 11.625 8.4375 11.625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15.75 7.5H21.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M21.75 16.5C21.2157 17.2124 20.4454 17.7114 19.5769 17.9077C18.7084 18.1041 17.7983 17.9849 17.0096 17.5717C16.2209 17.1584 15.6049 16.478 15.272 15.6521C14.9391 14.8263 14.9109 13.9089 15.1924 13.0642C15.474 12.2194 16.047 11.5024 16.8089 11.0415C17.5707 10.5806 18.4717 10.4058 19.3507 10.5484C20.2296 10.6911 21.0291 11.1418 21.6061 11.82C22.1831 12.4982 22.5 13.3596 22.5 14.25H15" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Behance/BehanceMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BehanceMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M2.5 9.6875H7.34375C8.04823 9.6875 8.72386 9.96735 9.222 10.4655C9.72015 10.9636 10 11.6393 10 12.3438C10 13.0482 9.72015 13.7239 9.222 14.222C8.72386 14.7201 8.04823 15 7.34375 15H2.5V5H7.03125C7.65285 5 8.24899 5.24693 8.68853 5.68647C9.12807 6.12601 9.375 6.72215 9.375 7.34375C9.375 7.96535 9.12807 8.56149 8.68853 9.00103C8.24899 9.44057 7.65285 9.6875 7.03125 9.6875" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.125 6.25H18.125" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M18.125 13.75C17.6798 14.3436 17.0379 14.7595 16.3141 14.9231C15.5903 15.0867 14.8319 14.9874 14.1747 14.6431C13.5174 14.2987 13.0041 13.7317 12.7267 13.0434C12.4492 12.3552 12.4257 11.5907 12.6604 10.8868C12.895 10.1828 13.3725 9.58536 14.0074 9.20125C14.6423 8.81715 15.3931 8.6715 16.1256 8.79036C16.858 8.90922 17.5243 9.28484 18.0051 9.84999C18.486 10.4152 18.75 11.133 18.75 11.875H12.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Behance/BehanceSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BehanceSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M2 7.75H5.875C6.43859 7.75 6.97909 7.97388 7.3776 8.3724C7.77612 8.77091 8 9.31141 8 9.875C8 10.4386 7.77612 10.9791 7.3776 11.3776C6.97909 11.7761 6.43859 12 5.875 12H2V4H5.625C6.12228 4 6.59919 4.19754 6.95083 4.54917C7.30246 4.90081 7.5 5.37772 7.5 5.875C7.5 6.37228 7.30246 6.84919 6.95083 7.20083C6.59919 7.55246 6.12228 7.75 5.625 7.75" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.5 5H14.5" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.5 11C14.1438 11.4749 13.6303 11.8076 13.0513 11.9385C12.4723 12.0694 11.8656 11.99 11.3397 11.7145C10.8139 11.4389 10.4033 10.9853 10.1813 10.4348C9.95937 9.88418 9.94057 9.2726 10.1283 8.70944C10.316 8.14627 10.698 7.66828 11.2059 7.361C11.7138 7.05372 12.3145 6.9372 12.9005 7.03229C13.4864 7.12738 14.0194 7.42787 14.4041 7.88C14.7888 8.33212 15 8.90638 15 9.50001H10" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Bluesky/BlueskyLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BlueskyLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.01276 4.06452C8.39959 5.83949 10.9669 9.43841 11.9095 11.3698C12.8521 9.43855 15.4193 5.83946 17.8062 4.06452C19.5284 2.78376 22.3188 1.79279 22.3188 4.94612C22.3188 5.57588 21.9543 10.2365 21.7406 10.9931C20.9974 13.6236 18.2895 14.2946 15.8808 13.8885C20.0912 14.5983 21.1623 16.9496 18.8492 19.3008C14.456 23.7662 12.535 18.1804 12.0425 16.7491C11.9523 16.4867 11.91 16.364 11.9094 16.4683C11.9088 16.364 11.8666 16.4867 11.7763 16.7491C11.2841 18.1804 9.36305 23.7664 4.96969 19.3008C2.65652 16.9496 3.72757 14.5982 7.93805 13.8885C5.52925 14.2946 2.82131 13.6236 2.07829 10.9931C1.8645 10.2364 1.5 5.57581 1.5 4.94612C1.5 1.79279 4.2905 2.78376 6.01264 4.06452H6.01276Z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Bluesky/BlueskyMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BlueskyMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M5.01063 3.38718C6.99966 4.86633 9.13908 7.86542 9.92457 9.47491C10.7101 7.86554 12.8494 4.8663 14.8385 3.38718C16.2737 2.31988 18.599 1.49407 18.599 4.12185C18.599 4.64665 18.2953 8.53046 18.1171 9.16099C17.4979 11.3531 15.2413 11.9122 13.234 11.5738C16.7427 12.1654 17.6352 14.1247 15.7076 16.0841C12.0467 19.8053 10.4458 15.1504 10.0354 13.9577C9.96023 13.739 9.92504 13.6367 9.92452 13.7237C9.924 13.6367 9.88881 13.739 9.81361 13.9577C9.4034 15.1504 7.80254 19.8054 4.14141 16.0841C2.21376 14.1247 3.10631 12.1652 6.61504 11.5738C4.60771 11.9122 2.35109 11.3531 1.73191 9.16099C1.55375 8.5304 1.25 4.64659 1.25 4.12185C1.25 1.49407 3.57542 2.31988 5.01053 3.38718H5.01063Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Bluesky/BlueskySm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const BlueskySm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4.00851 2.70984C5.59973 3.89316 7.31127 6.29244 7.93966 7.58003C8.56809 6.29253 10.2795 3.89314 11.8708 2.70984C13.0189 1.85601 14.8792 1.19536 14.8792 3.29758C14.8792 3.71742 14.6362 6.82447 14.4937 7.32889C13.9983 9.08259 12.193 9.52988 10.5872 9.25916C13.3941 9.73238 14.1082 11.2999 12.5661 12.8674C9.63736 15.8443 8.35665 12.1204 8.02834 11.1662C7.96818 10.9913 7.94003 10.9095 7.93962 10.9791C7.9392 10.9095 7.91105 10.9913 7.85089 11.1662C7.52272 12.1204 6.24204 15.8444 3.31313 12.8674C1.77101 11.2999 2.48505 9.73229 5.29203 9.25916C3.68617 9.52988 1.88087 9.08259 1.38553 7.32889C1.243 6.82442 1 3.71737 1 3.29758C1 1.19536 2.86033 1.85601 4.00843 2.70984H4.00851Z" stroke={color} strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Discord/DiscordLg.tsx

@@ -0,0 +1,13 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DiscordLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.9375 14.1875C9.66237 14.1875 10.25 13.5019 10.25 12.6563C10.25 11.8106 9.66237 11.125 8.9375 11.125C8.21263 11.125 7.625 11.8106 7.625 12.6563C7.625 13.5019 8.21263 14.1875 8.9375 14.1875Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+        <path d="M15.0625 14.1875C15.7874 14.1875 16.375 13.5019 16.375 12.6563C16.375 11.8106 15.7874 11.125 15.0625 11.125C14.3376 11.125 13.75 11.8106 13.75 12.6563C13.75 13.5019 14.3376 14.1875 15.0625 14.1875Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+        <path d="M9.8125 6.3125C9.8125 6.3125 10.7571 5.875 12 5.875C13.2429 5.875 14.1875 6.3125 14.1875 6.3125L14.625 5C16.161 5 17.3029 5.25657 18.5625 5.875C19.4375 7.33334 21.1875 11.475 21.1875 16.375C19.5564 18.0586 18.2968 18.7689 16.375 19L15.0625 16.8125C14.625 16.9584 13.4 17.25 12 17.25C10.6 17.25 9.375 16.9584 8.9375 16.8125L7.625 19C5.70325 18.7689 4.44362 18.0586 2.8125 16.375C2.8125 11.475 4.5625 7.33334 5.4375 5.875C6.69712 5.25657 7.83901 5 9.375 5L9.8125 6.3125Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.9375 16.8125C7.98703 16.5697 7.1875 15.9375 7.1875 15.9375" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M15.0625 16.8125C16.013 16.5697 16.8125 15.9375 16.8125 15.9375" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Discord/DiscordMd.tsx

@@ -0,0 +1,13 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DiscordMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M7.44775 11.8231C8.05182 11.8231 8.5415 11.2518 8.5415 10.547C8.5415 9.8423 8.05182 9.271 7.44775 9.271C6.84369 9.271 6.354 9.8423 6.354 10.547C6.354 11.2518 6.84369 11.8231 7.44775 11.8231Z" stroke={color} strokeLinejoin="round" />
+        <path d="M12.5522 11.8231C13.1563 11.8231 13.646 11.2518 13.646 10.547C13.646 9.8423 13.1563 9.271 12.5522 9.271C11.9482 9.271 11.4585 9.8423 11.4585 10.547C11.4585 11.2518 11.9482 11.8231 12.5522 11.8231Z" stroke={color} strokeLinejoin="round" />
+        <path d="M8.17708 5.26025C8.17708 5.26025 8.96429 4.89567 10 4.89567C11.0357 4.89567 11.8229 5.26025 11.8229 5.26025L12.1875 4.1665C13.4675 4.1665 14.419 4.38031 15.4688 4.89567C16.1979 6.11095 17.6563 9.56234 17.6563 13.6457C16.297 15.0487 15.2473 15.6406 13.6458 15.8332L12.5521 14.0103C12.1875 14.1318 11.1667 14.3748 10 14.3748C8.83333 14.3748 7.8125 14.1318 7.44792 14.0103L6.35417 15.8332C4.75271 15.6406 3.70302 15.0487 2.34375 13.6457C2.34375 9.56234 3.80208 6.11095 4.53125 4.89567C5.58094 4.38031 6.53251 4.1665 7.8125 4.1665L8.17708 5.26025Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M7.44808 14.0104C6.65602 13.8081 5.98975 13.2812 5.98975 13.2812" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12.5522 14.0104C13.3443 13.8081 14.0106 13.2812 14.0106 13.2812" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Discord/DiscordSm.tsx

@@ -0,0 +1,13 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DiscordSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M5.9585 9.45817C6.44175 9.45817 6.8335 9.00113 6.8335 8.43734C6.8335 7.87355 6.44175 7.4165 5.9585 7.4165C5.47525 7.4165 5.0835 7.87355 5.0835 8.43734C5.0835 9.00113 5.47525 9.45817 5.9585 9.45817Z" stroke={color} strokeLinejoin="round" />
+        <path d="M10.0415 9.45817C10.5248 9.45817 10.9165 9.00113 10.9165 8.43734C10.9165 7.87355 10.5248 7.4165 10.0415 7.4165C9.55825 7.4165 9.1665 7.87355 9.1665 8.43734C9.1665 9.00113 9.55825 9.45817 10.0415 9.45817Z" stroke={color} strokeLinejoin="round" />
+        <path d="M6.54167 4.2085C6.54167 4.2085 7.17143 3.91683 8 3.91683C8.82857 3.91683 9.45833 4.2085 9.45833 4.2085L9.75 3.3335C10.774 3.3335 11.5352 3.50454 12.375 3.91683C12.9583 4.88905 14.125 7.65016 14.125 10.9168C13.0376 12.0392 12.1978 12.5128 10.9167 12.6668L10.0417 11.2085C9.75 11.3057 8.93333 11.5002 8 11.5002C7.06667 11.5002 6.25 11.3057 5.95833 11.2085L5.08333 12.6668C3.80217 12.5128 2.96241 12.0392 1.875 10.9168C1.875 7.65016 3.04167 4.88905 3.625 3.91683C4.46475 3.50454 5.226 3.3335 6.25 3.3335L6.54167 4.2085Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5.95817 11.2083C5.32452 11.0465 4.7915 10.625 4.7915 10.625" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.0415 11.2083C10.6752 11.0465 11.2082 10.625 11.2082 10.625" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Dribbble/DribbbleLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DribbbleLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.65625 19.2441C7.99157 17.0323 9.87573 15.2032 12.126 13.934C14.3764 12.6648 16.9164 11.9986 19.5 12C20.0053 12 20.5059 12.0253 21 12.0741" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M17.6254 4.97705C16.2203 6.7041 14.4476 8.09602 12.4366 9.05142C10.4256 10.0068 8.22679 10.5016 6.00035 10.4999C5.05158 10.5001 4.1049 10.411 3.17285 10.2336" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.05566 3.9082C10.3113 5.23138 12.1816 7.12158 13.4809 9.39112C14.7801 11.6607 15.4631 14.2306 15.4619 16.8457C15.4627 18.0711 15.3138 19.292 15.0185 20.4813" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Dribbble/DribbbleMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DribbbleMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5.54688 16.0367C6.65964 14.1936 8.22978 12.6693 10.105 11.6117C11.9803 10.554 14.097 9.99882 16.25 10C16.6711 10 17.0883 10.0211 17.5 10.0617" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.6873 4.14746C13.5164 5.58667 12.0392 6.7466 10.3634 7.54277C8.6875 8.33893 6.85517 8.75129 4.9998 8.7498C4.20916 8.75 3.42026 8.67571 2.64355 8.52793" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.71289 3.25684C8.59261 4.35948 10.1512 5.93465 11.2339 7.82594C12.3166 9.71722 12.8857 11.8588 12.8848 14.0381C12.8855 15.0593 12.7614 16.0767 12.5152 17.0678" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Dribbble/DribbbleSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const DribbbleSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.4375 12.8294C5.32771 11.3549 6.58382 10.1355 8.08403 9.28932C9.58423 8.44319 11.2776 7.99906 13 8C13.3369 8 13.6706 8.01688 14 8.04938" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.7502 3.31836C10.8135 4.46973 9.63176 5.39767 8.29108 6.0346C6.95039 6.67154 5.48452 7.00142 4.00023 7.00023C3.36772 7.00039 2.7366 6.94096 2.11523 6.82273" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5.37109 2.60547C6.87487 3.48758 8.12174 4.74772 8.9879 6.26075C9.85405 7.77378 10.3094 9.48706 10.3086 11.2305C10.3091 12.0474 10.2099 12.8614 10.013 13.6542" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Facebook/FacebookLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FacebookLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M17 2H14C12.6739 2 11.4021 2.52678 10.4645 3.46447C9.52678 4.40215 9 5.67392 9 7V10H6V14H9V22H13V14H16L17 10H13V7C13 6.73478 13.1054 6.48043 13.2929 6.29289C13.4804 6.10536 13.7348 6 14 6H17V2Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Facebook/FacebookMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FacebookMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14.1667 1.6665H11.6667C10.5616 1.6665 9.50175 2.10549 8.72042 2.8869C7.93898 3.6683 7.5 4.7281 7.5 5.83317V8.33317H5V11.6665H7.5V18.3332H10.8333V11.6665H13.3333L14.1667 8.33317H10.8333V5.83317C10.8333 5.61215 10.9212 5.4002 11.0774 5.24391C11.2337 5.08764 11.4457 4.99984 11.6667 4.99984H14.1667V1.6665Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Facebook/FacebookSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FacebookSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M11.3333 1.3335H9.33333C8.44927 1.3335 7.6014 1.68468 6.97633 2.30981C6.35119 2.93493 6 3.78278 6 4.66683V6.66683H4V9.3335H6V14.6668H8.66667V9.3335H10.6667L11.3333 6.66683H8.66667V4.66683C8.66667 4.49002 8.73693 4.32045 8.86193 4.19542C8.98693 4.0704 9.15653 4.00016 9.33333 4.00016H11.3333V1.3335Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Figma/FigmaLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FigmaLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 3H9C7.34315 3 6 4.34315 6 6C6 7.65685 7.34315 9 9 9M12 3V9M12 3H15C16.6569 3 18 4.34315 18 6C18 7.65685 16.6569 9 15 9M9 9H12M9 9C7.34315 9 6 10.3431 6 12C6 13.6569 7.34315 15 9 15M12 9H15M12 9V15M15 9C16.6569 9 18 10.3431 18 12C18 13.6569 16.6569 15 15 15C13.3431 15 12 13.6569 12 12C12 10.3431 13.3431 9 15 9ZM12 15H9M12 15V18C12 19.6569 10.6569 21 9 21C7.34315 21 6 19.6569 6 18C6 16.3431 7.34315 15 9 15" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Figma/FigmaMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FigmaMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 2.5H7.5C6.11929 2.5 5 3.61929 5 5C5 6.38071 6.11929 7.5 7.5 7.5M10 2.5V7.5M10 2.5H12.5C13.8807 2.5 15 3.61929 15 5C15 6.38071 13.8807 7.5 12.5 7.5M7.5 7.5H10M7.5 7.5C6.11929 7.5 5 8.61925 5 10C5 11.3807 6.11929 12.5 7.5 12.5M10 7.5H12.5M10 7.5V12.5M12.5 7.5C13.8807 7.5 15 8.61925 15 10C15 11.3807 13.8807 12.5 12.5 12.5C11.1192 12.5 10 11.3807 10 10C10 8.61925 11.1192 7.5 12.5 7.5ZM10 12.5H7.5M10 12.5V15C10 16.3807 8.88075 17.5 7.5 17.5C6.11929 17.5 5 16.3807 5 15C5 13.6192 6.11929 12.5 7.5 12.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Figma/FigmaSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const FigmaSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 2H6C4.89543 2 4 2.89543 4 4C4 5.10457 4.89543 6 6 6M8 2V6M8 2H10C11.1046 2 12 2.89543 12 4C12 5.10457 11.1046 6 10 6M6 6H8M6 6C4.89543 6 4 6.8954 4 8C4 9.1046 4.89543 10 6 10M8 6H10M8 6V10M10 6C11.1046 6 12 6.8954 12 8C12 9.1046 11.1046 10 10 10C8.8954 10 8 9.1046 8 8C8 6.8954 8.8954 6 10 6ZM8 10H6M8 10V12C8 13.1046 7.1046 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/GitHub/GithubLg.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GithubLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_185)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9992 0C5.37299 0 0 5.50829 0 12.3047C0 17.7399 3.43799 22.3516 8.20724 23.9788C8.80725 24.0918 9.02625 23.7119 9.02625 23.3859C9.02625 23.0936 9.01573 22.32 9.00974 21.2934C5.67148 22.0371 4.96725 19.644 4.96725 19.644C4.422 18.2229 3.63525 17.8445 3.63525 17.8445C2.5455 17.0809 3.71774 17.0963 3.71774 17.0963C4.92149 17.1831 5.55524 18.3643 5.55524 18.3643C6.62624 20.2445 8.364 19.7016 9.048 19.3863C9.15675 18.5912 9.46725 18.0491 9.81 17.7415C7.14525 17.4308 4.34399 16.3757 4.34399 11.661C4.34399 10.3176 4.81125 9.21946 5.57925 8.35896C5.4555 8.04752 5.04376 6.79714 5.69626 5.10305C5.69626 5.10305 6.70425 4.77237 8.99625 6.36418C9.954 6.09119 10.98 5.95508 12.0008 5.9497C13.02 5.95508 14.0467 6.09119 15.0052 6.36418C17.2957 4.77237 18.3015 5.10305 18.3015 5.10305C18.9563 6.79714 18.5445 8.04752 18.4207 8.35896C19.1902 9.21946 19.6545 10.3176 19.6545 11.661C19.6545 16.3873 16.8488 17.4277 14.1758 17.7322C14.6063 18.1121 14.9903 18.8627 14.9903 20.0108C14.9903 21.6556 14.9753 22.9821 14.9753 23.3859C14.9753 23.715 15.1913 24.0979 15.8003 23.9772C20.565 22.347 24 17.7384 24 12.3047C24 5.50829 18.627 0 11.9992 0Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_185">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/GitHub/GithubMd.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GithubMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_181)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99936 0C4.47749 0 0 4.59024 0 10.2539C0 14.7833 2.865 18.6263 6.83937 19.9823C7.33937 20.0765 7.52187 19.7599 7.52187 19.4882C7.52187 19.2447 7.51311 18.6 7.50811 17.7445C4.72624 18.3642 4.13938 16.37 4.13938 16.37C3.685 15.1857 3.02938 14.8704 3.02938 14.8704C2.12125 14.2341 3.09812 14.2469 3.09812 14.2469C4.10124 14.3193 4.62936 15.3036 4.62936 15.3036C5.52186 16.8704 6.97 16.418 7.54 16.1553C7.63063 15.4927 7.88937 15.0409 8.175 14.7846C5.95437 14.5257 3.62 13.6464 3.62 9.71752C3.62 8.598 4.00938 7.68289 4.64938 6.9658C4.54625 6.70626 4.20313 5.66428 4.74688 4.25254C4.74688 4.25254 5.58687 3.97697 7.49687 5.30349C8.295 5.07599 9.15001 4.96257 10.0006 4.95808C10.85 4.96257 11.7056 5.07599 12.5044 5.30349C14.4131 3.97697 15.2513 4.25254 15.2513 4.25254C15.7969 5.66428 15.4537 6.70626 15.3506 6.9658C15.9919 7.68289 16.3788 8.598 16.3788 9.71752C16.3788 13.6561 14.0406 14.5231 11.8131 14.7768C12.1719 15.0934 12.4919 15.7189 12.4919 16.6756C12.4919 18.0464 12.4794 19.1518 12.4794 19.4882C12.4794 19.7625 12.6594 20.0816 13.1669 19.981C17.1375 18.6225 20 14.782 20 10.2539C20 4.59024 15.5225 0 9.99936 0Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_181">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/GitHub/GithubSm.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GithubSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_177)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99949 0C3.58199 0 0 3.67219 0 8.2031C0 11.8266 2.292 14.9011 5.4715 15.9859C5.8715 16.0612 6.0175 15.8079 6.0175 15.5906C6.0175 15.3958 6.01049 14.88 6.00649 14.1956C3.78099 14.6914 3.3115 13.096 3.3115 13.096C2.948 12.1486 2.4235 11.8963 2.4235 11.8963C1.697 11.3873 2.4785 11.3975 2.4785 11.3975C3.281 11.4554 3.70349 12.2429 3.70349 12.2429C4.41749 13.4964 5.576 13.1344 6.032 12.9242C6.1045 12.3941 6.3115 12.0327 6.54 11.8276C4.7635 11.6205 2.896 10.9172 2.896 7.77402C2.896 6.8784 3.2075 6.14631 3.7195 5.57264C3.637 5.36501 3.36251 4.53143 3.79751 3.40203C3.79751 3.40203 4.4695 3.18158 5.9975 4.24279C6.636 4.06079 7.32001 3.97005 8.00051 3.96646C8.68001 3.97005 9.3645 4.06079 10.0035 4.24279C11.5305 3.18158 12.201 3.40203 12.201 3.40203C12.6375 4.53143 12.363 5.36501 12.2805 5.57264C12.7935 6.14631 13.103 6.8784 13.103 7.77402C13.103 10.9248 11.2325 11.6185 9.4505 11.8215C9.7375 12.0747 9.99351 12.5751 9.99351 13.3405C9.99351 14.4371 9.9835 15.3214 9.9835 15.5906C9.9835 15.81 10.1275 16.0653 10.5335 15.9848C13.71 14.898 16 11.8256 16 8.2031C16 3.67219 12.418 0 7.99949 0Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_177">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Google/GoogleLg.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GoogleLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_198)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1687 9.62375V14.3762C12.1687 14.3762 16.8439 14.3701 18.7475 14.3701C17.7167 17.451 16.1138 19.1287 12.1687 19.1287C8.17627 19.1287 5.06024 15.9371 5.06024 12C5.06024 8.06293 8.17627 4.87129 12.1687 4.87129C14.2795 4.87129 15.6428 5.60295 16.8933 6.62271C17.8942 5.63562 17.8106 5.49492 20.3573 3.12332C18.1954 1.18288 15.3222 0 12.1687 0C5.44807 0 0 5.37255 0 12C0 18.6273 5.44807 24 12.1687 24C22.2141 24 24.6694 15.3742 23.8555 9.62375H12.1687Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_198">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Google/GoogleMd.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GoogleMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_194)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1406 8.0198V11.9802C10.1406 11.9802 14.0366 11.975 15.6229 11.975C14.7639 14.5425 13.4281 15.9406 10.1406 15.9406C6.81356 15.9406 4.21687 13.2809 4.21687 10C4.21687 6.71911 6.81356 4.05941 10.1406 4.05941C11.8996 4.05941 13.0357 4.66912 14.0777 5.51892C14.9119 4.69635 14.8422 4.5791 16.9644 2.60276C15.1629 0.985733 12.7685 0 10.1406 0C4.54006 0 0 4.47713 0 10C0 15.5228 4.54006 20 10.1406 20C18.5118 20 20.5579 12.8119 19.8795 8.0198H10.1406Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_194">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Google/GoogleSm.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const GoogleSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clip-path="url(#clip0_9235_190)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.11246 6.41584V9.58416C8.11246 9.58416 11.2293 9.58004 12.4983 9.58004C11.8111 11.634 10.7425 12.7525 8.11246 12.7525C5.45085 12.7525 3.37349 10.6247 3.37349 8C3.37349 5.37529 5.45085 3.24753 8.11246 3.24753C9.51969 3.24753 10.4285 3.7353 11.2622 4.41514C11.9295 3.75708 11.8737 3.66328 13.5715 2.08221C12.1303 0.788587 10.2148 0 8.11246 0C3.63205 0 0 3.5817 0 8C0 12.4182 3.63205 16 8.11246 16C14.8094 16 16.4463 10.2495 15.9036 6.41584H8.11246Z" fill={color} />
+        </g>
+        <defs>
+            <clipPath id="clip0_9235_190">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Instagram/InstagramLg.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const InstagramLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke={color} strokeWidth="2" stroke-miterlimit="10" />
+        <path d="M16.5 3H7.5C5.01472 3 3 5.01472 3 7.5V16.5C3 18.9853 5.01472 21 7.5 21H16.5C18.9853 21 21 18.9853 21 16.5V7.5C21 5.01472 18.9853 3 16.5 3Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M16.875 8.25C17.4963 8.25 18 7.74632 18 7.125C18 6.50368 17.4963 6 16.875 6C16.2537 6 15.75 6.50368 15.75 7.125C15.75 7.74632 16.2537 8.25 16.875 8.25Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Instagram/InstagramMd.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const InstagramMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125Z" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" />
+        <path d="M13.75 2.5H6.25C4.17893 2.5 2.5 4.17893 2.5 6.25V13.75C2.5 15.8211 4.17893 17.5 6.25 17.5H13.75C15.8211 17.5 17.5 15.8211 17.5 13.75V6.25C17.5 4.17893 15.8211 2.5 13.75 2.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M14.0625 6.875C14.5803 6.875 15 6.45527 15 5.9375C15 5.41973 14.5803 5 14.0625 5C13.5447 5 13.125 5.41973 13.125 5.9375C13.125 6.45527 13.5447 6.875 14.0625 6.875Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Instagram/InstagramSm.tsx

@@ -0,0 +1,11 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const InstagramSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C6.61929 5.5 5.5 6.61929 5.5 8C5.5 9.38071 6.61929 10.5 8 10.5Z" stroke={color} stroke-miterlimit="10" />
+        <path d="M11 2H5C3.34315 2 2 3.34315 2 5V11C2 12.6569 3.34315 14 5 14H11C12.6569 14 14 12.6569 14 11V5C14 3.34315 12.6569 2 11 2Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.25 5.5C11.6642 5.5 12 5.16421 12 4.75C12 4.33579 11.6642 4 11.25 4C10.8358 4 10.5 4.33579 10.5 4.75C10.5 5.16421 10.8358 5.5 11.25 5.5Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/LinkedIn/LinkedinLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const LinkedinLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M10 9V19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6 9V19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 13.375C10 12.2147 10.4741 11.1019 11.318 10.2814C12.1619 9.46094 13.3065 9 14.5 9C15.6935 9 16.8381 9.46094 17.682 10.2814C18.5259 11.1019 19 12.2147 19 13.375V19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/LinkedIn/LinkedinMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const LinkedinMd = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.3335 7.5V15.8333" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5 7.5V15.8333" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.3335 11.1458C8.3335 10.1789 8.72858 9.25157 9.43184 8.56784C10.1351 7.88411 11.0889 7.5 12.0835 7.5C13.0781 7.5 14.0319 7.88411 14.7351 8.56784C15.4384 9.25157 15.8335 10.1789 15.8335 11.1458V15.8333" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.99984 5.83317C5.46007 5.83317 5.83317 5.46007 5.83317 4.99984C5.83317 4.5396 5.46007 4.1665 4.99984 4.1665C4.5396 4.1665 4.1665 4.5396 4.1665 4.99984C4.1665 5.46007 4.5396 5.83317 4.99984 5.83317Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/LinkedIn/LinkedinSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const LinkedinSm = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M6.6665 6V12.6667" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 6V12.6667" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.6665 8.91667C6.6665 8.14312 6.98257 7.40125 7.54518 6.85427C8.10779 6.30729 8.87085 6 9.6665 6C10.4622 6 11.2252 6.30729 11.7878 6.85427C12.3504 7.40125 12.6665 8.14312 12.6665 8.91667V12.6667" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.00016 4.66683C4.36835 4.66683 4.66683 4.36835 4.66683 4.00016C4.66683 3.63197 4.36835 3.3335 4.00016 3.3335C3.63197 3.3335 3.3335 3.63197 3.3335 4.00016C3.3335 4.36835 3.63197 4.66683 4.00016 4.66683Z" fill={color} />
+    </svg>
+
+);

package/src/assets/icon/SocialMedia/Colorless/Messenger/MessengerLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const MessengerLg = ({ color = "black", ...props }: SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M7 14L8.9954 11.6055C9.63153 10.8422 9.9496 10.4605 10.3333 10.4605C10.7171 10.4605 11.0351 10.8422 11.6713 11.6055L12.3287 12.3945C12.9649 13.1578 13.2829 13.5395 13.6667 13.5395C14.0504 13.5395 14.3685 13.1578 15.0046 12.3945L17 10" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.3789 2.27907 14.6926 2.78382 15.8877C3.06278 16.5481 3.20226 16.8784 3.21953 17.128C3.2368 17.3776 3.16334 17.6521 3.01642 18.2012L2 22L5.79877 20.9836C6.34788 20.8367 6.62244 20.7632 6.87202 20.7805C7.12161 20.7977 7.45185 20.9372 8.11235 21.2162C9.30745 21.7209 10.6211 22 12 22Z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
+    </svg>
+
+);