diff --git a/package-lock.json b/package-lock.json
index 3bef4554..8dd15e45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@code4rena/components-library",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@code4rena/components-library",
-      "version": "4.5.1",
+      "version": "4.5.2",
       "license": "ISC",
       "dependencies": {
         "clsx": "^1.2.1",
diff --git a/package.json b/package.json
index 23878db9..95283e46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {
diff --git a/src/lib/Icon/iconList.tsx b/src/lib/Icon/iconList.tsx
index fe4e41d5..5f6ef79d 100644
--- a/src/lib/Icon/iconList.tsx
+++ b/src/lib/Icon/iconList.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 
 export const icons = (size: string, color: string, className?: string): Record<string, ReactElement> => ({
-    "a": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "a": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1197)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M11.1641 20.1484C11.7891 20.1484 12.1406 19.8359 12.3594 19.0859L12.9531 17.3281H17.0234L17.6172 19.1094C17.8281 19.8438 18.1797 20.1484 18.8438 20.1484C19.5312 20.1484 20.0234 19.6875 20.0234 19.0391C20.0234 18.8047 19.9844 18.5938 19.875 18.2891L16.7812 9.89844C16.4453 8.97656 15.8984 8.57031 14.9766 8.57031C14.0859 8.57031 13.5312 8.99219 13.2031 9.90625L10.125 18.2891C10.0234 18.5781 9.96875 18.8438 9.96875 19.0391C9.96875 19.7188 10.4297 20.1484 11.1641 20.1484ZM13.4688 15.5L14.9297 10.8828H14.9844L16.4766 15.5H13.4688Z" fill={color}/>
@@ -11,8 +11,8 @@ export const icons = (size: string, color: string, className?: string): Record<s
                     <rect width="30" height="30" fill={color}/>
                 </clipPath>
             </defs>
-    </svg>,
-    "approximate": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        </svg>,
+    "approximate": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1941)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M10 12.5C10.8333 11.3681 13 9.78336 15 12.5C17 15.2166 19.1667 13.6319 20 12.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
@@ -36,7 +36,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M10.6803 4.2636C11.0317 3.91213 11.6016 3.91213 11.953 4.2636L18.3697 10.6803C18.5385 10.8491 18.6333 11.078 18.6333 11.3167C18.6333 11.5554 18.5385 11.7843 18.3697 11.9531L11.953 18.3697C11.6016 18.7212 11.0317 18.7212 10.6803 18.3697C10.3288 18.0183 10.3288 17.4484 10.6803 17.0969L15.5605 12.2167H4.89998C4.40293 12.2167 3.99998 11.8137 3.99998 11.3167C3.99998 10.8196 4.40293 10.4167 4.89998 10.4167H15.5605L10.6803 5.5364C10.3288 5.18492 10.3288 4.61508 10.6803 4.2636Z" />
             </g>
       </svg>,
-    "b": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "b": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1208)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M12 20H15.8125C18.2188 20 19.7109 18.7578 19.7109 16.7734C19.7109 15.2812 18.5859 14.1641 17.0547 14.0469V13.9844C18.25 13.8047 19.1719 12.7734 19.1719 11.5391C19.1719 9.8125 17.8438 8.72656 15.7266 8.72656H12C11.2578 8.72656 10.8203 9.17969 10.8203 9.95312V18.7656C10.8203 19.5469 11.2578 20 12 20ZM13.1797 13.4141V10.4844H15.1172C16.2188 10.4844 16.8516 11 16.8516 11.9062C16.8516 12.8594 16.1328 13.4141 14.875 13.4141H13.1797ZM13.1797 18.2422V14.9688H15.1562C16.5469 14.9688 17.3047 15.5312 17.3047 16.5859C17.3047 17.6641 16.5703 18.2422 15.2109 18.2422H13.1797Z" fill={color}/>
@@ -79,7 +79,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
           <path fillRule="evenodd" clipRule="evenodd" d="M7.49981 3.37487C8.42811 2.44657 9.68717 1.92505 11 1.92505C12.3128 1.92505 13.5719 2.44657 14.5002 3.37487C15.4285 4.30317 15.95 5.56223 15.95 6.87505V7.79172H14.3V6.87505C14.3 5.99983 13.9523 5.16047 13.3334 4.5416C12.7146 3.92273 11.8752 3.57505 11 3.57505C10.1248 3.57505 9.28541 3.92273 8.66654 4.5416C8.04767 5.16047 7.69999 5.99983 7.69999 6.87505V7.79172H6.04999V6.87505C6.04999 5.56223 6.5715 4.30317 7.49981 3.37487Z" fill={color}/>
           <path fillRule="evenodd" clipRule="evenodd" d="M2.44234 7.02688C2.61156 6.60383 3.09168 6.39806 3.51473 6.56728L5.34806 7.30062C5.77111 7.46983 5.97688 7.94996 5.80766 8.37301C5.63844 8.79605 5.15831 9.00182 4.73527 8.8326L2.90193 8.09927C2.47889 7.93005 2.27312 7.44993 2.44234 7.02688ZM19.5577 7.02688C19.7269 7.44993 19.5211 7.93005 19.0981 8.09927L17.2647 8.8326C16.8417 9.00182 16.3616 8.79605 16.1923 8.37301C16.0231 7.94996 16.2289 7.46983 16.6519 7.30062L18.4853 6.56728C18.9083 6.39806 19.3884 6.60383 19.5577 7.02688ZM1.00833 12.8333C1.00833 12.3776 1.3777 12.0083 1.83333 12.0083H4.58333C5.03897 12.0083 5.40833 12.3776 5.40833 12.8333C5.40833 13.2889 5.03897 13.6583 4.58333 13.6583H1.83333C1.3777 13.6583 1.00833 13.2889 1.00833 12.8333ZM16.5917 12.8333C16.5917 12.3776 16.961 12.0083 17.4167 12.0083H20.1667C20.6223 12.0083 20.9917 12.3776 20.9917 12.8333C20.9917 13.2889 20.6223 13.6583 20.1667 13.6583H17.4167C16.961 13.6583 16.5917 13.2889 16.5917 12.8333ZM11 12.9249C11.4556 12.9249 11.825 13.2943 11.825 13.7499V19.7083C11.825 20.1639 11.4556 20.5333 11 20.5333C10.5444 20.5333 10.175 20.1639 10.175 19.7083V13.7499C10.175 13.2943 10.5444 12.9249 11 12.9249ZM5.80766 17.2935C5.97688 17.7166 5.77111 18.1967 5.34806 18.3659L3.51473 19.0993C3.09168 19.2685 2.61156 19.0627 2.44234 18.6397C2.27312 18.2166 2.47889 17.7365 2.90193 17.5673L4.73527 16.834C5.15831 16.6647 5.63844 16.8705 5.80766 17.2935ZM16.1923 17.2935C16.3616 16.8705 16.8417 16.6647 17.2647 16.834L19.0981 17.5673C19.5211 17.7365 19.7269 18.2166 19.5577 18.6397C19.3884 19.0627 18.9083 19.2685 18.4853 19.0993L16.6519 18.3659C16.2289 18.1967 16.0231 17.7166 16.1923 17.2935Z" fill={color}/>
         </svg>,
-    "c": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "c": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1212)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M15.2578 20.1875C17.3906 20.1875 19.0703 19.2266 19.7734 17.6641C19.8906 17.3906 19.9531 17.1406 19.9531 16.875C19.9531 16.25 19.5156 15.8281 18.8516 15.8281C18.3516 15.8281 18.0547 16.0391 17.8125 16.5703C17.3047 17.7031 16.4141 18.2422 15.2266 18.2422C13.4219 18.2422 12.2891 16.7578 12.2891 14.3516C12.2891 11.9766 13.4375 10.4844 15.2188 10.4844C16.3438 10.4844 17.2656 11.0625 17.7812 12.2109C18.0391 12.7578 18.375 12.9922 18.9062 12.9922C19.5312 12.9922 19.9453 12.5938 19.9453 11.9766C19.9453 11.6953 19.8672 11.3906 19.7109 11.0938C18.9375 9.46875 17.3047 8.53125 15.1953 8.53125C11.9531 8.53125 9.88281 10.7266 9.88281 14.3594C9.88281 18 11.9141 20.1875 15.2578 20.1875Z" fill={color}/>
@@ -143,7 +143,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M4.2635 5.2636C4.61498 4.91213 5.18483 4.91213 5.5363 5.2636L10.5363 10.2636C10.8878 10.6151 10.8878 11.1849 10.5363 11.5364L5.5363 16.5364C5.18483 16.8879 4.61498 16.8879 4.2635 16.5364C3.91203 16.1849 3.91203 15.6151 4.2635 15.2636L8.62711 10.9L4.2635 6.5364C3.91203 6.18492 3.91203 5.61508 4.2635 5.2636ZM11.2635 5.2636C11.615 4.91213 12.1848 4.91213 12.5363 5.2636L17.5363 10.2636C17.8878 10.6151 17.8878 11.1849 17.5363 11.5364L12.5363 16.5364C12.1848 16.8879 11.615 16.8879 11.2635 16.5364C10.912 16.1849 10.912 15.6151 11.2635 15.2636L15.6271 10.9L11.2635 6.5364C10.912 6.18492 10.912 5.61508 11.2635 5.2636Z" />
             </g>
           </svg>,
-    "circle-25": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "circle-25": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1594)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M9.04688 19H13.7285C14.1855 19 14.4609 18.7129 14.4609 18.2969C14.4609 17.8691 14.1855 17.5938 13.7285 17.5938H10.541V17.5586L12.3691 15.8008C13.752 14.4941 14.2559 13.8496 14.2559 12.8184C14.2559 11.3652 13.0488 10.3574 11.2559 10.3574C9.65625 10.3574 8.5957 11.2305 8.30859 12.168C8.26758 12.291 8.24414 12.4141 8.24414 12.5488C8.24414 12.9883 8.52539 13.2695 9 13.2695C9.38086 13.2695 9.58594 13.1055 9.78516 12.7539C10.0898 12.0742 10.5586 11.7344 11.2383 11.7344C11.9941 11.7344 12.5332 12.2324 12.5332 12.9297C12.5332 13.5391 12.2637 13.9492 11.2207 14.9512L8.70117 17.3594C8.34375 17.6875 8.21484 17.9102 8.21484 18.2441C8.21484 18.6895 8.49023 19 9.04688 19ZM18.7148 19.1875C20.6426 19.1875 21.9844 17.9688 21.9844 16.1641C21.9844 14.5527 20.8359 13.416 19.2188 13.416C18.3574 13.416 17.666 13.7559 17.3203 14.3008H17.2852L17.4844 11.9512H20.8242C21.2695 11.9512 21.5508 11.6758 21.5508 11.248C21.5508 10.8203 21.2637 10.5449 20.8242 10.5449H17.1152C16.4297 10.5449 16.0605 10.832 16.002 11.5469L15.7559 14.6465C15.75 14.6758 15.75 14.6934 15.75 14.7168C15.7266 15.1914 16.002 15.5957 16.582 15.5957C16.9746 15.5957 17.1504 15.5078 17.4961 15.1855C17.7949 14.8984 18.2168 14.6816 18.7207 14.6816C19.6406 14.6816 20.2969 15.3145 20.2969 16.2051C20.2969 17.1191 19.6348 17.7812 18.7148 17.7812C17.9531 17.7812 17.4551 17.4121 17.1504 16.8027C16.9512 16.4863 16.7285 16.3633 16.377 16.3633C15.9199 16.3633 15.6387 16.6328 15.6387 17.084C15.6387 17.2949 15.6914 17.4766 15.7793 17.6641C16.2012 18.5605 17.373 19.1875 18.7148 19.1875Z" fill={color}/>
@@ -154,7 +154,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,    
-    "circle-50": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "circle-50": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1590)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M11.1562 19.1875C13.084 19.1875 14.4258 17.9688 14.4258 16.1641C14.4258 14.5527 13.2773 13.416 11.6602 13.416C10.7988 13.416 10.1074 13.7559 9.76172 14.3008H9.72656L9.92578 11.9512H13.2656C13.7109 11.9512 13.9922 11.6758 13.9922 11.248C13.9922 10.8203 13.7051 10.5449 13.2656 10.5449H9.55664C8.87109 10.5449 8.50195 10.832 8.44336 11.5469L8.19727 14.6465C8.19141 14.6758 8.19141 14.6934 8.19141 14.7168C8.16797 15.1914 8.44336 15.5957 9.02344 15.5957C9.41602 15.5957 9.5918 15.5078 9.9375 15.1855C10.2363 14.8984 10.6582 14.6816 11.1621 14.6816C12.082 14.6816 12.7383 15.3145 12.7383 16.2051C12.7383 17.1191 12.0762 17.7812 11.1562 17.7812C10.3945 17.7812 9.89648 17.4121 9.5918 16.8027C9.39258 16.4863 9.16992 16.3633 8.81836 16.3633C8.36133 16.3633 8.08008 16.6328 8.08008 17.084C8.08008 17.2949 8.13281 17.4766 8.2207 17.6641C8.64258 18.5605 9.81445 19.1875 11.1562 19.1875ZM18.75 19.1875C20.8945 19.1875 22.1953 17.4824 22.1953 14.752C22.1953 12.0215 20.8828 10.3516 18.75 10.3516C16.6172 10.3516 15.2988 12.0273 15.2988 14.7578C15.2988 17.4941 16.6055 19.1875 18.75 19.1875ZM18.75 17.7695C17.707 17.7695 17.0977 16.6973 17.0977 14.7578C17.0977 12.8359 17.7188 11.7695 18.75 11.7695C19.7871 11.7695 20.3965 12.8301 20.3965 14.7578C20.3965 16.6973 19.793 17.7695 18.75 17.7695Z" fill={color}/>
@@ -165,7 +165,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "circle-75": <svg width="30" height="30" fill="none" version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+    "circle-75": <svg className={className} width="30" height="30" fill="none" version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1590)">
                 <path d="m15 26c6.0751 0 11-4.9249 11-11s-4.9249-11-11-11-11 4.9249-11 11 4.9249 11 11 11z" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
                 <path d="m18.368 19.188c1.9278 0 3.2696-1.2187 3.2696-3.0234 0-1.6114-1.1485-2.7481-2.7656-2.7481-0.8614 0-1.5528 0.3399-1.8985 0.8848h-0.03516l0.19922-2.3496h3.3398c0.4453 0 0.7266-0.2754 0.7266-0.7032 0-0.4277-0.2871-0.7031-0.7266-0.7031h-3.709c-0.68555 0-1.0547 0.2871-1.1133 1.002l-0.24609 3.0996c-0.0059 0.0293-0.0059 0.0469-0.0059 0.0703-0.02344 0.4746 0.25195 0.8789 0.83203 0.8789 0.39258 0 0.56836-0.0879 0.91406-0.4102 0.2988-0.2871 0.7207-0.5039 1.2246-0.5039 0.9199 0 1.5762 0.6329 1.5762 1.5235 0 0.914-0.6621 1.5761-1.5821 1.5761-0.7617 0-1.2597-0.3691-1.5644-0.9785-0.19922-0.3164-0.42188-0.4394-0.77344-0.4394-0.45703 0-0.73828 0.2695-0.73828 0.7207 0 0.2109 0.05273 0.3926 0.14062 0.5801 0.42188 0.8964 1.5938 1.5234 2.9355 1.5234z" fill={color}/>
@@ -177,7 +177,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "circle-exclamation": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "circle-exclamation": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1167)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M15 26C8.92487 26 4 21.0751 4 15C4 8.92487 8.92487 4 15 4C21.0751 4 26 8.92487 26 15C26 21.0751 21.0751 26 15 26ZM15 24C19.9706 24 24 19.9706 24 15C24 10.0294 19.9706 6 15 6C10.0294 6 6 10.0294 6 15C6 19.9706 10.0294 24 15 24ZM15.0003 20.9983C14.4479 20.9983 14 20.5506 14 19.9983C14 19.4461 14.4479 18.9983 15.0003 18.9983C15.5528 18.9983 16.0007 19.4461 16.0007 19.9983C16.0007 20.5506 15.5528 20.9983 15.0003 20.9983ZM14.003 8.99835H16.0036V16.9983H14.003V8.99835Z" fill={color}/>
             </g>
@@ -241,7 +241,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
     "facebook": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path fill={color} d="M13 4H11.0909C10.247 4 9.43773 4.36875 8.84102 5.02513C8.24432 5.6815 7.90909 6.57174 7.90909 7.5V9.6H6V12.4H7.90909V18H10.4545V12.4H12.3636L13 9.6H10.4545V7.5C10.4545 7.31435 10.5216 7.1363 10.6409 7.00503C10.7603 6.87375 10.9221 6.8 11.0909 6.8H13V4Z" />
         </svg>,
-    "file" : <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "file" : <svg className={className} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M12.875 3H6.75C6.28587 3 5.84075 3.18437 5.51256 3.51256C5.18437 3.84075 5 4.28587 5 4.75V18.75C5 19.2141 5.18437 19.6592 5.51256 19.9874C5.84075 20.3156 6.28587 20.5 6.75 20.5H17.25C17.7141 20.5 18.1592 20.3156 18.4874 19.9874C18.8156 19.6592 19 19.2141 19 18.75V9.125L12.875 3Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
             <path d="M12.875 3V9.125H19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
         </svg>,    
@@ -255,11 +255,11 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
-    "first": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "first": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect x="3" y="3" width="24" height="24" rx="12" stroke={color} strokeWidth="2"/>
           <path d="M15.2834 11.1535H12.8252V9.38672H17.1577V20.6175H15.2834V11.1535Z" fill={color}/>
       </svg>,
-    "flag": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "flag": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1956)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M8 24V4H10V5H24.1247L21.126 10.9999L24.126 17H10V24H11V26H7V24H8ZM10 15H20.89L18.89 11.0001L20.8893 7H10V15Z" fill={color}/>
             </g>
@@ -269,7 +269,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "g": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "g": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1574)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M15.1953 21.1875C18.375 21.1875 20.1953 19.2578 20.1953 16.3906V16.2188C20.1953 15.4453 19.7578 14.9922 19.0156 14.9922H16.2578C15.6875 14.9922 15.3125 15.3125 15.3125 15.8516C15.3125 16.3906 15.6953 16.7109 16.2578 16.7109H17.8984L17.8906 16.8906C17.8438 18.2891 16.7734 19.2344 15.2344 19.2344C13.3594 19.2344 12.1719 17.7422 12.1719 15.2969C12.1719 12.8984 13.2891 11.4844 15.1484 11.4844C16.2578 11.4844 17.0781 11.9766 17.6328 12.9844C17.9219 13.4609 18.2734 13.6719 18.7734 13.6719C19.3906 13.6719 19.8047 13.2578 19.8047 12.6562C19.8047 12.4297 19.7656 12.2031 19.6328 11.9297C19 10.5469 17.3047 9.53125 15.1406 9.53125C11.8281 9.53125 9.76562 11.7188 9.76562 15.3281C9.76562 18.9922 11.8281 21.1875 15.1953 21.1875Z" fill={color}/>
@@ -288,7 +288,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
             <circle fill={color} cx="7.75" cy="11.0833" r="1.75" />
             <circle fill={color} cx="7.75" cy="17.0833" r="1.75" />
       </svg>,
-    "h": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "h": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1558)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M11.2812 21.1484C12.0234 21.1484 12.4609 20.6953 12.4609 19.9219V16.25H17.5391V19.9219C17.5391 20.6953 17.9766 21.1484 18.7188 21.1484C19.4609 21.1484 19.8984 20.6953 19.8984 19.9219V10.8047C19.8984 10.0234 19.4609 9.57031 18.7188 9.57031C17.9766 9.57031 17.5391 10.0234 17.5391 10.8047V14.3047H12.4609V10.8047C12.4609 10.0234 12.0234 9.57031 11.2812 9.57031C10.5391 9.57031 10.1016 10.0234 10.1016 10.8047V19.9219C10.1016 20.6953 10.5391 21.1484 11.2812 21.1484Z" fill={color}/>
@@ -363,7 +363,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
     "linkedin": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M9 8.90503H11.827V10.346H11.858C12.289 9.56903 13.562 8.78003 15.136 8.78003C18.157 8.78003 19 10.384 19 13.355V18.905H16V13.902C16 12.572 15.469 11.405 14.227 11.405C12.719 11.405 12 12.426 12 14.102V18.905H9V8.90503ZM4 18.905H7V8.90503H4V18.905ZM7.375 5.40503C7.375 6.44103 6.536 7.28003 5.5 7.28003C4.464 7.28003 3.625 6.44103 3.625 5.40503C3.625 4.36903 4.464 3.53003 5.5 3.53003C6.536 3.53003 7.375 4.36903 7.375 5.40503Z" />
         </svg>,
-    "location": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "location": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1165)">
                 <path d="M15 15C16.6569 15 18 13.6569 18 12C18 10.3431 16.6569 9 15 9C13.3431 9 12 10.3431 12 12C12 13.6569 13.3431 15 15 15Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M21.999 12.1429C22.0197 13.3449 21.7197 14.53 21.1312 15.5714C19.7034 18 15.0004 25 15.0004 25C15.0004 25 10.2973 18 8.85559 15.5857C8.26945 14.5387 7.97424 13.3484 8.00176 12.1429C8.00176 10.2485 8.73911 8.43164 10.0516 7.09209C11.3641 5.75255 13.1442 5 15.0004 5C16.8565 5 18.6367 5.75255 19.9491 7.09209C21.2616 8.43164 21.999 10.2485 21.999 12.1429V12.1429Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -413,7 +413,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
             <path id="Vector" d="M12.5222 9.77143L18.4785 3H17.0671L11.8952 8.87954L7.76437 3H3L9.24656 11.8909L3 18.9918H4.41155L9.87321 12.7828L14.2356 18.9918H19L12.5218 9.77143H12.5222ZM10.5889 11.9692L9.95596 11.0839L4.92015 4.03921H7.0882L11.1522 9.7245L11.7851 10.6098L17.0677 17.9998H14.8997L10.5889 11.9696V11.9692Z" fill={color} />
           </g>
         </svg>,
-    "m": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "m": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1562)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M10.0859 21.1484C10.75 21.1484 11.1328 20.7422 11.1328 20.0469V13.3906H11.1953L13.9844 20.2188C14.1797 20.7031 14.5078 20.9297 15.0078 20.9297C15.5 20.9297 15.8125 20.7109 16.0156 20.2109L18.8047 13.3906H18.8672V20.0469C18.8672 20.7422 19.25 21.1484 19.9141 21.1484C20.5781 21.1484 20.9688 20.7422 20.9688 20.0469V11.0938C20.9688 10.1328 20.4062 9.57031 19.4531 9.57031C18.625 9.57031 18.1641 9.92188 17.8203 10.7891L15.0312 17.7188H14.9688L12.1719 10.7891C11.8281 9.91406 11.375 9.57031 10.5547 9.57031C9.59375 9.57031 9.03125 10.1406 9.03125 11.0938V20.0469C9.03125 20.7422 9.42188 21.1484 10.0859 21.1484Z" fill={color}/>
@@ -433,7 +433,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
-    "minus": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "minus": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_397_2180)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M15 5C9.47715 5 5 9.47715 5 15C5 20.5228 9.47715 25 15 25C20.5228 25 25 20.5228 25 15C25 9.47715 20.5228 5 15 5ZM3 15C3 8.37258 8.37258 3 15 3C21.6274 3 27 8.37258 27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15Z" fill={color}/>
                 <path fillRule="evenodd" clipRule="evenodd" d="M8.5 15C8.5 14.1716 9.17157 13.5 10 13.5H20C20.8284 13.5 21.5 14.1716 21.5 15C21.5 15.8284 20.8284 16.5 20 16.5H10C9.17157 16.5 8.5 15.8284 8.5 15Z" fill={color}/>
@@ -467,7 +467,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
-    "no-clip": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "no-clip": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1985)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M18.7741 20.1883L15.8699 23.1378C13.456 25.6008 9.31037 25.6409 6.85662 23.1379C4.38123 20.6127 4.38123 16.562 6.85832 14.0352L9.71799 11.1322L4.29297 5.70718L5.70718 4.29297L25.7072 24.293L24.293 25.7072L18.7741 20.1883ZM13.6821 15.0963L11.45 17.3627C11.133 17.6863 11.133 18.2071 11.45 18.5307C11.7509 18.8378 12.2534 18.8364 12.5511 18.529L14.815 16.2292L13.6821 15.0963ZM16.2292 17.6434L13.9821 19.9261C12.9075 21.0361 11.1096 21.0411 10.0214 19.9304C8.94253 18.8292 8.94252 17.0643 10.0232 15.9612L12.2678 13.682L11.1322 12.5465L8.28483 15.437C6.57182 17.1844 6.57182 19.9904 8.28483 21.7378C9.94824 23.4346 12.8057 23.407 14.4432 21.7362L17.3598 18.774L16.2292 17.6434ZM16.4747 12.2605L15.0605 10.8462L16.3432 9.54367L17.7682 10.947L16.4747 12.2605ZM17.6071 13.3929L19.5025 11.4674C20.5173 10.4318 20.5173 8.76856 19.5025 7.73293C18.5342 6.74484 16.8211 6.76682 15.8721 7.73482L13.9253 9.7111L12.5111 8.29685L14.4456 6.33301C16.169 4.57494 19.1704 4.53643 20.931 6.33315C22.7078 8.14641 22.7078 11.0539 20.9294 12.8688L19.0213 14.8071L17.6071 13.3929ZM20.1522 15.938L23.2922 12.749L24.7173 14.1522L21.5665 17.3522L20.1522 15.938Z" fill={color}/>
             </g>
@@ -477,7 +477,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "no-document": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "no-document": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1979)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M15 15.5858L17.2929 13.2929L18.7071 14.7071L16.4142 17L18.7071 19.2929L17.2929 20.7071L15 18.4142L12.7071 20.7071L11.2929 19.2929L13.5858 17L11.2929 14.7071L12.7071 13.2929L15 15.5858ZM18 6.41421V10H21.5858L18 6.41421ZM22 12H18C16.8954 12 16 11.1046 16 10V6H8V24H22V12ZM8 4H18.4142L24 9.58579V24C24 25.1046 23.1046 26 22 26H8C6.89543 26 6 25.1046 6 24V6C6 4.89543 6.89543 4 8 4Z" fill={color}/>
             </g>
@@ -487,7 +487,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "no-target": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "no-target": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_4829)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M6.32752 14.5C6.32752 13.5378 6.4874 12.6129 6.78204 11.7505L9.39298 13.6489C9.34988 13.9263 9.32752 14.2105 9.32752 14.5C9.32752 17.5376 11.79 20 14.8275 20C15.722 20 16.5667 19.7865 17.3132 19.4076L19.9223 21.3046C18.5026 22.3692 16.7387 23 14.8275 23C10.1331 23 6.32752 19.1944 6.32752 14.5ZM4.32752 14.5C4.32752 13.0953 4.60337 11.755 5.10384 10.5303L1.74181 8.08587C1.31798 7.77771 1.22895 7.18463 1.54295 6.76118C1.85695 6.33773 2.45507 6.24427 2.8789 6.55243L4.6537 7.84285C4.7047 7.9005 4.76296 7.95363 4.82831 8.00104L22.955 21.1483C22.9549 21.1485 22.9547 21.1488 22.9545 21.149L26.7764 23.9278C27.2002 24.236 27.2892 24.8291 26.9752 25.2525C26.6612 25.676 26.0631 25.7694 25.6393 25.4613L21.5999 22.5243C19.7716 24.0689 17.4083 25 14.8275 25C9.02853 25 4.32752 20.299 4.32752 14.5ZM24.2074 19.2239C24.924 17.8039 25.3275 16.1991 25.3275 14.5C25.3275 8.70101 20.6265 4 14.8275 4C11.9398 4 9.32428 5.16576 7.42601 7.05234L9.0713 8.24567C10.5854 6.85145 12.607 6 14.8275 6C19.5219 6 23.3275 9.80558 23.3275 14.5C23.3275 15.7596 23.0536 16.9552 22.562 18.0304L24.2074 19.2239ZM20.0557 16.2126C20.2321 15.6736 20.3275 15.0979 20.3275 14.5C20.3275 11.4624 17.8651 9 14.8275 9C13.6114 9 12.4875 9.39469 11.5769 10.063L13.331 11.3352C13.7847 11.1202 14.2921 11 14.8275 11C16.7605 11 18.3275 12.567 18.3275 14.5C18.3275 14.6488 18.3182 14.7954 18.3002 14.9394L20.0557 16.2126ZM14.8275 18C13.0962 18 11.6585 16.7429 11.3773 15.0917L15.3284 17.9644C15.1648 17.9879 14.9976 18 14.8275 18Z" fill={color}/>
             </g>
@@ -502,12 +502,12 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M11.3167 4C11.8138 4 12.2167 4.40294 12.2167 4.9V10.4167H17.7334C18.2305 10.4167 18.6334 10.8196 18.6334 11.3167C18.6334 11.8137 18.2305 12.2167 17.7334 12.2167H12.2167V17.7333C12.2167 18.2304 11.8138 18.6333 11.3167 18.6333C10.8197 18.6333 10.4167 18.2304 10.4167 17.7333V12.2167H4.90006C4.403 12.2167 4.00006 11.8137 4.00006 11.3167C4.00006 10.8196 4.403 10.4167 4.90006 10.4167H10.4167V4.9C10.4167 4.40294 10.8197 4 11.3167 4Z" />
             </g>
         </svg>,
-    "presort": <svg width="30" height="30" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "presort": <svg className={className} width="30" height="30" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g id="presort">
                 <path id="Union" fillRule="evenodd" clipRule="evenodd" d="M7.49634 4.83963C7.89745 4.38838 8.60251 4.38839 9.00359 4.83962L10.3755 6.38304C10.3802 6.38845 10.385 6.39382 10.3898 6.39913L13.8841 10.3302C14.2236 10.7121 14.2236 11.2879 13.884 11.6699L10.3888 15.602C10.3847 15.6065 10.3805 15.6112 10.3765 15.6158L9.00357 17.1604C8.60249 17.6116 7.89744 17.6116 7.49634 17.1603L2.6159 11.6698C2.27634 11.2879 2.27637 10.7121 2.61592 10.3301L7.49634 4.83963ZM11 17.398L10.2369 18.2565C9.1794 19.4462 7.32054 19.4462 6.26309 18.2565L1.38272 12.7661C0.487433 11.759 0.487409 10.2411 1.3827 9.23392L6.26311 3.74343C7.32057 2.55379 9.17938 2.55378 10.2368 3.74343L11 4.60197L11.7631 3.74343C12.8206 2.55379 14.6793 2.55379 15.7368 3.74342L15.7368 3.74343L20.6172 9.23388C21.5126 10.241 21.5126 11.759 20.6172 12.7661L15.7368 18.2565L15.7368 18.2565C14.6793 19.4462 12.8206 19.4462 11.7631 18.2565L11.7631 18.2565L11 17.398ZM12.1038 16.1562L12.9963 17.1603L12.9964 17.1604C13.3975 17.6116 14.1025 17.6116 14.5036 17.1604L14.5036 17.1603L19.384 11.6699L19.3841 11.6698C19.7236 11.2879 19.7236 10.7121 19.3841 10.3302L19.384 10.3301L14.5036 4.83964L14.5036 4.83963C14.1025 4.38838 13.3975 4.38839 12.9964 4.83963L12.1038 5.84376L15.1172 9.23388C16.0126 10.241 16.0126 11.759 15.1172 12.7661L12.1038 16.1562Z" fill={color}/>
             </g>
         </svg>,
-    "qa": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "qa": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_212_1566)">
                 <path d="M15 26C21.0751 26 26 21.0751 26 15C26 8.92487 21.0751 4 15 4C8.92487 4 4 8.92487 4 15C4 21.0751 8.92487 26 15 26Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                 <path d="M11.0332 19.1406C11.5664 19.1406 12.0586 19.0645 12.5098 18.9121L13.0254 19.6562C13.2012 19.9258 13.3887 20.0312 13.6758 20.0312C14.0977 20.0312 14.3965 19.7559 14.3965 19.3691C14.3965 19.1875 14.3496 19.0527 14.2324 18.8711L13.7578 18.1797C14.6309 17.459 15.1055 16.2637 15.1055 14.7754C15.1055 12.0859 13.5352 10.3984 11.0332 10.3984C8.52539 10.3984 6.95508 12.0859 6.95508 14.7754C6.95508 17.4883 8.52539 19.1406 11.0332 19.1406ZM11.0332 17.6816C9.64453 17.6816 8.75977 16.5449 8.75977 14.7754C8.75977 13 9.64453 11.8574 11.0332 11.8574C12.416 11.8574 13.3008 13 13.3008 14.7754C13.3008 15.5898 13.0781 16.2578 12.6855 16.7148L12.293 16.1816C12.1465 15.9766 11.9766 15.8887 11.7305 15.8887C11.3496 15.8887 11.0684 16.1582 11.0684 16.5391C11.0684 16.6855 11.1152 16.8379 11.2324 17.0137L11.6367 17.5996C11.4492 17.6523 11.25 17.6816 11.0332 17.6816ZM16.4648 19.1113C16.9336 19.1113 17.1973 18.877 17.3613 18.3145L17.8066 16.9961H20.8594L21.3047 18.332C21.4629 18.8828 21.7266 19.1113 22.2246 19.1113C22.7402 19.1113 23.1094 18.7656 23.1094 18.2793C23.1094 18.1035 23.0801 17.9453 22.998 17.7168L20.6777 11.4238C20.4258 10.7324 20.0156 10.4277 19.3242 10.4277C18.6562 10.4277 18.2402 10.7441 17.9941 11.4297L15.6855 17.7168C15.6094 17.9336 15.5684 18.1328 15.5684 18.2793C15.5684 18.7891 15.9141 19.1113 16.4648 19.1113ZM18.1934 15.625L19.2891 12.1621H19.3301L20.4492 15.625H18.1934Z" fill={color}/>
@@ -544,7 +544,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
-    "second": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "second": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="3" y="3" width="24" height="24" rx="12" stroke={color} strokeWidth="2"/>
             <path d="M18.9389 20.6945L11.1495 20.7098V19.2349L14.8214 16.1315C15.2004 15.814 15.5179 15.5221 15.774 15.2558C16.0403 14.9894 16.2502 14.7385 16.4039 14.5029C16.5575 14.2674 16.6702 14.0318 16.7419 13.7962C16.8136 13.5606 16.8494 13.3046 16.8494 13.028C16.8494 12.393 16.6855 11.9014 16.3578 11.5531C16.03 11.2049 15.5691 11.0308 14.975 11.0308C14.3605 11.0308 13.874 11.2356 13.5155 11.6453C13.157 12.055 12.9727 12.6183 12.9624 13.3353H11.0112C11.0215 12.5159 11.1905 11.8041 11.5182 11.1998C11.846 10.5852 12.3069 10.1141 12.901 9.7863C13.495 9.4483 14.1864 9.2793 14.975 9.2793C15.774 9.2793 16.4602 9.42781 17.0338 9.72484C17.6176 10.0116 18.0683 10.4264 18.3858 10.9693C18.7033 11.5121 18.862 12.1625 18.862 12.9205C18.862 13.3097 18.8057 13.6835 18.693 14.042C18.5906 14.3903 18.4319 14.7334 18.2168 15.0714C18.0017 15.3991 17.7354 15.732 17.4179 16.07C17.1004 16.408 16.7265 16.7614 16.2963 17.1301L13.5616 19.4654L12.8549 18.8662H18.9389V20.6945Z" fill={color}/>
         </svg>,  
@@ -562,7 +562,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M9.10789 3.09263C9.79177 1.63579 11.8639 1.63579 12.5477 3.09263L14.197 6.60605C14.2112 6.63621 14.2394 6.65734 14.2724 6.6624L18.0423 7.24182C19.5703 7.47667 20.1931 9.34094 19.1131 10.4471L16.3245 13.3031C16.3023 13.3259 16.2923 13.3578 16.2974 13.3891L16.9465 17.369C17.2019 18.9345 15.5399 20.1051 14.1518 19.3376L10.8762 17.5262C10.8461 17.5095 10.8095 17.5095 10.7794 17.5262L7.5038 19.3376C6.11573 20.1051 4.45379 18.9345 4.70913 17.369L5.35828 13.3891C5.36339 13.3578 5.35331 13.3259 5.33113 13.3031L2.54256 10.4471C1.4625 9.34094 2.08531 7.47667 3.61339 7.24182L7.38328 6.6624C7.41621 6.65734 7.44445 6.63621 7.45861 6.60605L9.10789 3.09263ZM10.7725 3.81389C10.7638 3.81911 10.7507 3.82897 10.7373 3.85751L9.08802 7.37093C8.81904 7.94393 8.28237 8.34535 7.65672 8.44151L3.88683 9.02092C3.85803 9.02535 3.84468 9.03447 3.83657 9.04159C3.82586 9.051 3.81435 9.0666 3.80717 9.08808C3.8 9.10955 3.79982 9.12894 3.80273 9.1429C3.80493 9.15347 3.81011 9.16878 3.83047 9.18962L6.61904 12.0456C7.0405 12.4773 7.23192 13.0834 7.1348 13.6789L6.48565 17.6588C6.48072 17.689 6.48571 17.7045 6.48993 17.714C6.49571 17.727 6.5075 17.743 6.52676 17.7566C6.54602 17.7702 6.5651 17.7759 6.57928 17.7769C6.58962 17.7777 6.60593 17.7772 6.63274 17.7624L9.90837 15.951C10.4805 15.6346 11.1751 15.6346 11.7473 15.951L15.0229 17.7624C15.0497 17.7772 15.066 17.7777 15.0764 17.7769C15.0905 17.7759 15.1096 17.7702 15.1289 17.7566C15.1481 17.743 15.1599 17.727 15.1657 17.714C15.1699 17.7045 15.1749 17.689 15.17 17.6588L14.5208 13.6789C14.4237 13.0834 14.6151 12.4773 15.0366 12.0456L17.8252 9.18962C17.8455 9.16878 17.8507 9.15347 17.8529 9.1429C17.8558 9.12894 17.8556 9.10955 17.8485 9.08808C17.8413 9.0666 17.8298 9.051 17.8191 9.04159C17.811 9.03447 17.7976 9.02535 17.7688 9.02092L13.9989 8.44151C13.3733 8.34535 12.8366 7.94393 12.5676 7.37093L10.9183 3.85751C10.9049 3.82897 10.8918 3.81911 10.8832 3.81389C10.8711 3.80655 10.8519 3.8 10.8278 3.8C10.8037 3.8 10.7846 3.80655 10.7725 3.81389Z" />
             </g>
         </svg>,
-    "stop-x": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "stop-x": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_2016)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M26 10.4437V19.5563L19.5563 26H10.4437L4 19.5563V10.4437L10.4437 4H19.5563L26 10.4437ZM18.7279 6H11.2721L6 11.2721V18.7279L11.2721 24H18.7279L24 18.7279V11.2721L18.7279 6ZM15 16.4142L11.7071 19.7071L10.2929 18.2929L13.5858 15L10.2929 11.7071L11.7071 10.2929L15 13.5858L18.2929 10.2929L19.7071 11.7071L16.4142 15L19.7071 18.2929L18.2929 19.7071L15 16.4142Z" fill={color}/>
             </g>
@@ -602,11 +602,11 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </g>
             </g>
         </svg>,
-    "third": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "third": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect x="3" y="3" width="24" height="24" rx="12" stroke={color} strokeWidth="2"/>
             <path d="M18.6623 10.8464L14.6063 14.5798L13.3158 13.6733L17.2489 10.0628L16.9109 11.0154H11.5336V9.2793H18.6623V10.8464ZM14.6831 14.9485H13.3158V13.6733C13.5104 13.5197 13.7664 13.4172 14.084 13.366C14.4015 13.3046 14.6985 13.2738 14.975 13.2738C15.5077 13.2738 16.0147 13.3558 16.496 13.5197C16.9774 13.6835 17.4025 13.9242 17.7712 14.2418C18.1502 14.549 18.4472 14.9331 18.6623 15.394C18.8774 15.8447 18.985 16.3619 18.985 16.9458C18.985 17.7139 18.8057 18.3797 18.4472 18.943C18.0887 19.5064 17.5971 19.9417 16.9723 20.2489C16.3578 20.5562 15.6715 20.7098 14.9136 20.7098C14.1761 20.7098 13.5104 20.5664 12.9163 20.2797C12.3325 19.9826 11.8665 19.5524 11.5182 18.9891C11.1802 18.4258 11.0112 17.7395 11.0112 16.9304H12.947C12.947 17.5757 13.1263 18.0775 13.4848 18.436C13.8535 18.7843 14.34 18.9584 14.9443 18.9584C15.5589 18.9584 16.0505 18.774 16.4192 18.4053C16.7982 18.0263 16.9877 17.5296 16.9877 16.915C16.9877 16.3517 16.7982 15.8857 16.4192 15.5169C16.0403 15.138 15.4616 14.9485 14.6831 14.9485Z" fill={color}/>
         </svg>,
-    "thumbs-down": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "thumbs-down": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1193)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M11.0155 6.63479C10.6855 6.15096 10.1298 5.83333 9.49992 5.83333H7.66659C6.65406 5.83333 5.83325 6.65414 5.83325 7.66666V15.9167C5.83325 16.9292 6.65406 17.75 7.66659 17.75H9.49992C9.68158 17.75 9.85706 17.7236 10.0227 17.6744C11.0074 19.1084 14.3174 22.7234 15.2018 23.8248L15.477 24.1675H15.9166C16.4801 24.1676 16.9637 24.1253 17.5192 23.9635C18.7508 23.6049 19.5833 22.7668 19.5833 21.4175C19.5833 20.9407 19.4988 20.4324 19.3433 19.8682C19.2404 19.4949 19.1132 19.118 18.9389 18.6502C18.8858 18.5076 18.6732 17.9501 18.6251 17.8202C18.6163 17.7964 18.6079 17.7733 18.5996 17.7508H21.4166C23.1304 17.7508 24.1666 16.5431 24.1666 15.0008C24.1666 9.55254 23.0255 5.83415 20.4999 5.83415L14.1148 5.83469C13.479 5.82306 12.7132 5.90789 11.9411 6.18415C11.6039 6.30481 11.2936 6.45493 11.0155 6.63479ZM11.3333 9.50081C11.3333 8.67377 11.7476 8.20055 12.5587 7.91032C13.0847 7.72215 13.6482 7.65973 14.0494 7.66692C14.0561 7.66707 14.0561 7.66707 14.0833 7.66748H20.4999C21.4305 7.66748 22.3333 10.6093 22.3333 15.0008C22.3333 15.5876 22.0502 15.9175 21.4166 15.9175H17.7499C16.6549 15.9175 16.4258 16.7642 16.6542 17.6809C16.7079 17.8965 16.7864 18.1338 16.9056 18.4561C16.9577 18.597 17.1714 19.1573 17.2209 19.2902C17.3781 19.7121 17.4897 20.0429 17.5759 20.3554C17.6912 20.7737 17.7499 21.1273 17.7499 21.4175C17.7499 21.8309 17.5319 22.0503 17.0066 22.2033C16.7859 22.2676 16.5687 22.303 16.3382 22.3203C14.9213 20.6265 11.706 17.1078 11.4632 16.5408C11.374 16.3326 11.3333 16.1377 11.3333 15.9175V9.50081ZM7.66659 15.9167V7.66666H9.49992V15.9167H7.66659Z" fill={color}/>
             </g>
@@ -616,7 +616,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "thumbs-up": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "thumbs-up": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1181)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M11.0155 23.3652C10.6855 23.849 10.1298 24.1667 9.49992 24.1667H7.66659C6.65406 24.1667 5.83325 23.3459 5.83325 22.3333V14.0833C5.83325 13.0708 6.65406 12.25 7.66659 12.25H9.49992C9.68158 12.25 9.85706 12.2764 10.0227 12.3256C11.0074 10.8916 14.3174 7.27662 15.2018 6.17525L15.477 5.83252H15.9166C16.4801 5.83244 16.9637 5.87471 17.5192 6.03647C18.7508 6.39509 19.5833 7.23318 19.5833 8.58252C19.5833 9.05929 19.4988 9.5676 19.3433 10.1318C19.2404 10.5051 19.1132 10.882 18.9389 11.3498C18.8858 11.4924 18.6732 12.0499 18.6251 12.1798C18.6163 12.2036 18.6079 12.2267 18.5996 12.2492H21.4166C23.1304 12.2492 24.1666 13.4569 24.1666 14.9992C24.1666 20.4475 23.0255 24.1659 20.4999 24.1659L14.1148 24.1653C13.479 24.1769 12.7132 24.0921 11.9411 23.8159C11.6039 23.6952 11.2936 23.5451 11.0155 23.3652ZM11.3333 20.4992C11.3333 21.3262 11.7476 21.7995 12.5587 22.0897C13.0847 22.2779 13.6482 22.3403 14.0494 22.3331C14.0561 22.3329 14.0561 22.3329 14.0833 22.3325H20.4999C21.4305 22.3325 22.3333 19.3907 22.3333 14.9992C22.3333 14.4124 22.0502 14.0825 21.4166 14.0825H17.7499C16.6549 14.0825 16.4258 13.2358 16.6542 12.3191C16.7079 12.1035 16.7864 11.8662 16.9056 11.5439C16.9577 11.403 17.1714 10.8427 17.2209 10.7098C17.3781 10.2879 17.4897 9.95713 17.5759 9.64458C17.6912 9.22631 17.7499 8.87272 17.7499 8.58252C17.7499 8.16913 17.5319 7.94965 17.0066 7.79669C16.7859 7.73243 16.5687 7.69701 16.3382 7.67972C14.9213 9.37347 11.706 12.8922 11.4632 13.4592C11.374 13.6674 11.3333 13.8623 11.3333 14.0825V20.4992ZM7.66659 14.0833V22.3333H9.49992V14.0833H7.66659Z" fill={color}/>
             </g>
@@ -631,7 +631,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 <path fill={color} fillRule="evenodd" clipRule="evenodd" d="M14.0759 4.80283C13.8048 4.79227 13.5319 4.81126 13.2621 4.86042C12.516 4.99635 11.8292 5.3564 11.293 5.8926C10.7568 6.4288 10.3967 7.11568 10.2608 7.8617C10.1249 8.60772 10.2195 9.37745 10.5321 10.0683C10.6866 10.4096 10.6135 10.8109 10.3486 11.0757L5.01595 16.4084C4.87772 16.5466 4.80006 16.7341 4.80006 16.9296C4.80006 17.1251 4.87772 17.3125 5.01595 17.4508C5.15418 17.589 5.34166 17.6667 5.53714 17.6667C5.73263 17.6667 5.92011 17.589 6.05834 17.4508L11.391 12.1181C11.6559 11.8533 12.0571 11.7801 12.3984 11.9346C13.0893 12.2472 13.859 12.3419 14.605 12.2059C15.351 12.07 16.0379 11.71 16.5741 11.1738C17.1103 10.6376 17.4704 9.95068 17.6063 9.20466C17.6555 8.93486 17.6745 8.66196 17.6639 8.39081L15.8755 10.1792C15.563 10.4855 15.1429 10.657 14.7053 10.657C14.2677 10.657 13.8476 10.4855 13.5351 10.1792L13.5286 10.1729L12.2875 8.93169C11.9812 8.6192 11.8097 8.19903 11.8097 7.76145C11.8097 7.32387 11.9813 6.90374 12.2876 6.59124L12.2939 6.58481L14.0759 4.80283ZM12.9394 3.08958C14.0454 2.88806 15.1865 3.0284 16.2108 3.49187C16.4799 3.61368 16.6722 3.85984 16.7251 4.1505C16.7781 4.44116 16.685 4.73931 16.4761 4.94822L13.6629 7.76145L14.7053 8.80385L17.5185 5.99062C17.7274 5.7817 18.0256 5.68863 18.3162 5.74159C18.6069 5.79455 18.853 5.98679 18.9749 6.25597C19.4383 7.28018 19.5787 8.42132 19.3771 9.52731C19.1756 10.6333 18.6418 11.6516 17.8469 12.4465C17.052 13.2415 16.0337 13.7753 14.9277 13.9768C14.0317 14.14 13.1126 14.0789 12.2513 13.8034L7.33113 18.7236C6.85534 19.1994 6.21002 19.4667 5.53714 19.4667C4.86427 19.4667 4.21895 19.1994 3.74316 18.7236C3.26736 18.2478 3.00006 17.6025 3.00006 16.9296C3.00006 16.2567 3.26736 15.6114 3.74316 15.1356L8.66333 10.2154C8.3878 9.35414 8.32669 8.43506 8.48994 7.53905C8.69146 6.43306 9.22525 5.41474 10.0202 4.61981C10.8151 3.82488 11.8334 3.29109 12.9394 3.08958Z" />
             </g>
         </svg>,
-    "trash": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "trash": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1216)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M15 16.5858L17.2929 14.2929L18.7071 15.7071L16.4142 18L18.7071 20.2929L17.2929 21.7071L15 19.4142L12.7071 21.7071L11.2929 20.2929L13.5858 18L11.2929 15.7071L12.7071 14.2929L15 16.5858ZM10 7V6C10 4.89543 10.8954 4 12 4H18C19.1046 4 20 4.89543 20 6V7H23C24.1046 7 25 7.89543 25 9V11C25 12.1046 24.1046 13 23 13H22.9199L22 24C22 25.1046 21.1046 26 20 26H10C8.89543 26 8 25.1046 8.00345 24.083L7.07987 13H7C5.89543 13 5 12.1046 5 11V9C5 7.89543 5.89543 7 7 7H10ZM10 9H7V11H23V9H20H10ZM9.08649 13L10 24H20L20.0035 23.917L20.9132 13H9.08649ZM18 7V6H12V7H18Z" fill={color}/>
             </g>
@@ -641,7 +641,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
                 </clipPath>
             </defs>
         </svg>,
-    "trophy": <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "trophy": <svg className={className} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clipPath="url(#clip0_187_1222)">
                 <path fillRule="evenodd" clipRule="evenodd" d="M8.26756 7C8.61337 6.4022 9.25972 6 10 6H20C20.7403 6 21.3866 6.4022 21.7324 7H23C24.1046 7 25 7.89543 25 9V12C25 15.2228 23.4954 17.5739 20.7813 17.9478C19.6988 19.5302 17.9835 20.6454 16 20.9291V22H17C18.1046 22 19 22.8954 19 24H11C11 22.8954 11.8954 22 13 22H14V20.9291C12.0165 20.6454 10.3012 19.5302 9.21866 17.9478C6.50459 17.5739 5 15.2228 5 12V9C5 7.89543 5.89543 7 7 7H8.26756ZM8 9H7V12C7 13.5313 7.39028 14.6746 8.12783 15.3385C8.04394 14.9052 8 14.4578 8 14V9ZM22 9V14C22 14.4578 21.9561 14.9052 21.8722 15.3385C22.6097 14.6746 23 13.5313 23 12V9H22ZM10 8V14C10 16.7614 12.2386 19 15 19C17.7614 19 20 16.7614 20 14V8H10Z" fill={color}/>
             </g>
@@ -654,7 +654,7 @@ export const icons = (size: string, color: string, className?: string): Record<s
     "twitter": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path fill={color} d="M19.5 4.00785C18.76 4.53487 17.9407 4.93795 17.0736 5.20158C16.6083 4.66129 15.9898 4.27834 15.3018 4.10454C14.6138 3.93073 13.8896 3.97445 13.2271 4.22978C12.5645 4.48511 11.9956 4.93974 11.5973 5.53217C11.199 6.1246 10.9905 6.82626 11 7.54224V8.32246C9.64204 8.35801 8.29644 8.05392 7.08305 7.43726C5.86967 6.8206 4.82615 5.91052 4.04545 4.78806C4.04545 4.78806 0.954545 11.81 7.90909 14.9309C6.31768 16.0216 4.42189 16.5685 2.5 16.4913C9.45455 20.3924 17.9545 16.4913 17.9545 7.51883C17.9538 7.3015 17.9331 7.08471 17.8927 6.87125C18.6814 6.08595 19.2379 5.09447 19.5 4.00785Z" />
         </svg>,
-    "undo": <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    "undo": <svg className={className} width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path fillRule="evenodd" clipRule="evenodd" d="M5.03568 2.32976C5.38026 1.98518 5.38026 1.4265 5.03568 1.08192C4.6911 0.737341 4.13243 0.737341 3.78785 1.08192L0.258435 4.61133C-0.0861451 4.95591 -0.0861451 5.51459 0.258435 5.85917L3.78785 9.38858C4.13243 9.73316 4.6911 9.73316 5.03568 9.38858C5.38026 9.044 5.38026 8.48533 5.03568 8.14075L3.01249 6.11755H10.5882C12.0502 6.11755 13.2353 7.30268 13.2353 8.76461C13.2353 10.2265 12.0502 11.4117 10.5882 11.4117H7.77114C7.28383 11.4117 6.88879 11.8067 6.88879 12.294C6.88879 12.7813 7.28383 13.1764 7.77114 13.1764H10.5882C13.0248 13.1764 15 11.2012 15 8.76461C15 6.32806 13.0248 4.35284 10.5882 4.35284H3.0126L5.03568 2.32976Z" fill={color}/>
         </svg>,
     "user": <svg className={className} width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">