droplinked-editor-configs 1.8.0

package/src/assets/icon/System/Technology/TechnologySm.tsx

@@ -0,0 +1,16 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TechnologySm = ({ 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_10436_1177)">
+            <path d="M9.44264 8.9955C9.04515 9.44673 8.56116 9.81592 8.01642 10.0836V11.6219C8.01642 11.7579 7.96218 11.8883 7.86562 11.9845C7.76906 12.0806 7.6381 12.1347 7.50154 12.1347H4.41227C4.27572 12.1347 4.14475 12.0806 4.0482 11.9845C3.95164 11.8883 3.89739 11.7579 3.89739 11.6219V10.0836C2.81238 9.54423 1.98291 8.60278 1.58697 7.46128C1.19103 6.31978 1.26018 5.06919 1.77957 3.97789C2.29897 2.88658 3.22723 2.04153 4.36514 1.62408C5.50305 1.20662 6.75994 1.25003 7.86608 1.74499M3.89739 14.6667H8.01642M8.40155 4.85645C8.04011 4.79389 8.04011 4.27702 8.40155 4.21447C9.04131 4.10302 9.63335 3.80464 10.1024 3.35724C10.5714 2.90985 10.8963 2.33365 11.0357 1.70191L11.0573 1.60141C11.1356 1.24555 11.6443 1.2435 11.7256 1.59833L11.7524 1.71422C11.8962 2.34351 12.2237 2.91638 12.6937 3.36072C13.1637 3.80507 13.7552 4.10104 14.3937 4.21139C14.7572 4.27497 14.7572 4.79389 14.3937 4.85748C13.7554 4.96801 13.1641 5.26406 12.6943 5.7084C12.2246 6.15273 11.8972 6.72549 11.7534 7.35465L11.7266 7.47053C11.6453 7.82537 11.1366 7.82332 11.0583 7.46746L11.0377 7.36798C10.8982 6.73596 10.573 6.15957 10.1036 5.71214C9.63417 5.26472 9.04169 4.96752 8.40155 4.85645Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10436_1177">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Ticket/TicketLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TicketLg = ({ 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="M16.5 6V6.75M16.5 9.75V10.5M16.5 13.5V14.25M16.5 17.25V18M7.5 12.75H12.75M7.5 15H10.5M3.375 5.25C2.75368 5.25 2.25 5.75368 2.25 6.375V9.40135C3.1467 9.92006 3.75 10.8896 3.75 12C3.75 13.1104 3.1467 14.0799 2.25 14.5987V17.625C2.25 18.2463 2.75368 18.75 3.375 18.75H20.625C21.2463 18.75 21.75 18.2463 21.75 17.625V14.5987C20.8533 14.0799 20.25 13.1104 20.25 12C20.25 10.8896 20.8533 9.92006 21.75 9.40135V6.375C21.75 5.75368 21.2463 5.25 20.625 5.25H3.375Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ticket/TicketMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TicketMd = ({ 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="M13.75 5V5.625M13.75 8.125V8.75M13.75 11.25V11.875M13.75 14.375V15M6.25 10.625H10.625M6.25 12.5H8.75M2.8125 4.375C2.29473 4.375 1.875 4.79473 1.875 5.3125V7.83446C2.62225 8.26672 3.125 9.07467 3.125 10C3.125 10.9253 2.62225 11.7332 1.875 12.1656V14.6875C1.875 15.2052 2.29473 15.625 2.8125 15.625H17.1875C17.7052 15.625 18.125 15.2052 18.125 14.6875V12.1656C17.3777 11.7332 16.875 10.9253 16.875 10C16.875 9.07467 17.3777 8.26672 18.125 7.83446V5.3125C18.125 4.79473 17.7052 4.375 17.1875 4.375H2.8125Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Ticket/TicketSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TicketSm = ({ 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 4V4.5M11 6.5V7M11 9V9.5M11 11.5V12M5 8.5H8.5M5 10H7M2.25 3.5C1.83579 3.5 1.5 3.83579 1.5 4.25V6.26757C2.0978 6.61337 2.5 7.25973 2.5 8C2.5 8.74027 2.0978 9.3866 1.5 9.73247V11.75C1.5 12.1642 1.83579 12.5 2.25 12.5H13.75C14.1642 12.5 14.5 12.1642 14.5 11.75V9.73247C13.9022 9.3866 13.5 8.74027 13.5 8C13.5 7.25973 13.9022 6.61337 14.5 6.26757V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H2.25Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Tokenpay/TokenpayLg.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TokenpayLg = ({ 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.1128 21.9809C12.0371 22.0067 11.963 22.0064 11.8875 21.9799C10.9176 21.6391 4 18.9393 4 11.2524V4.30385C4 4.12 4.12492 3.95974 4.30299 3.91515L11.903 2.01196C11.9667 1.99601 12.0333 1.99601 12.097 2.01196L19.697 3.91515C19.8751 3.95974 20 4.12 20 4.30385V11.2524C20 19.0169 13.084 21.6495 12.1128 21.9809Z" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" strokeLinejoin="round" />
+        <g clip-path="url(#clip0_10660_1670)">
+            <path d="M12 14.25C14.071 14.25 15.75 12.571 15.75 10.5C15.75 8.42893 14.071 6.75 12 6.75C9.92893 6.75 8.25 8.42893 8.25 10.5C8.25 12.571 9.92893 14.25 12 14.25Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.125 9.1875C12.8681 8.93063 12.4158 8.75196 12 8.74077M12 8.74077C11.5053 8.72746 11.0625 8.95124 11.0625 9.5625C11.0625 10.6875 13.125 10.125 13.125 11.25C13.125 11.8916 12.5761 12.1673 12 12.1466M12 8.74077V8.0625M10.875 11.625C11.1167 11.9472 11.5661 12.131 12 12.1466M12 12.1466V12.9375" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10660_1670">
+                <rect width="9" height="9" fill="white" transform="translate(7.5 6)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Tokenpay/TokenpayMd.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TokenpayMd = ({ 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.0942 18.3174C10.0311 18.3389 9.96933 18.3387 9.90641 18.3166C9.09816 18.0326 3.3335 15.7828 3.3335 9.377V3.58654C3.3335 3.43333 3.4376 3.29978 3.58599 3.26262L9.91933 1.67663C9.97241 1.66334 10.0279 1.66334 10.081 1.67663L16.4143 3.26262C16.5627 3.29978 16.6668 3.43333 16.6668 3.58654V9.377C16.6668 15.8474 10.9035 18.0412 10.0942 18.3174Z" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" strokeLinejoin="round" />
+        <g clip-path="url(#clip0_10660_1665)">
+            <path d="M10 11.875C11.7259 11.875 13.125 10.4759 13.125 8.75C13.125 7.02411 11.7259 5.625 10 5.625C8.27411 5.625 6.875 7.02411 6.875 8.75C6.875 10.4759 8.27411 11.875 10 11.875Z" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.9375 7.65625C10.7234 7.44219 10.3465 7.2933 10 7.28398M10 7.28398C9.58778 7.27288 9.21875 7.45937 9.21875 7.96875C9.21875 8.90625 10.9375 8.4375 10.9375 9.375C10.9375 9.90969 10.4801 10.1394 10 10.1222M10 7.28398V6.71875M9.0625 9.6875C9.2639 9.95603 9.63838 10.1092 10 10.1222M10 10.1222V10.7812" stroke={color} strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10660_1665">
+                <rect width="7.5" height="7.5" fill="white" transform="translate(6.25 5)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Tokenpay/TokenpaySm.tsx

@@ -0,0 +1,18 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const TokenpaySm = ({ 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.07504 14.6539C8.02457 14.6711 7.97517 14.6709 7.92484 14.6533C7.27824 14.4261 2.6665 12.6262 2.6665 7.5016V2.86923C2.6665 2.74667 2.74978 2.63983 2.8685 2.6101L7.93517 1.34131C7.97764 1.33067 8.02204 1.33067 8.0645 1.34131L13.1312 2.6101C13.2499 2.63983 13.3332 2.74667 13.3332 2.86923V7.5016C13.3332 12.6779 8.7225 14.433 8.07504 14.6539Z" stroke={color} stroke-miterlimit="10" strokeLinejoin="round" />
+        <g clip-path="url(#clip0_10660_1648)">
+            <path d="M8 9.5C9.3807 9.5 10.5 8.3807 10.5 7C10.5 5.61929 9.3807 4.5 8 4.5C6.61929 4.5 5.5 5.61929 5.5 7C5.5 8.3807 6.61929 9.5 8 9.5Z" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8.75 6.125C8.57875 5.95375 8.27718 5.83464 8 5.82718M8 5.82718C7.67022 5.81831 7.375 5.96749 7.375 6.375C7.375 7.125 8.75 6.75 8.75 7.5C8.75 7.92775 8.38405 8.11155 8 8.09775M8 5.82718V5.375M7.25 7.75C7.41112 7.96483 7.7107 8.08735 8 8.09775M8 8.09775V8.625" stroke={color} strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_10660_1648">
+                <rect width="6" height="6" fill="white" transform="translate(5 4)" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Unlock/UnlockLg.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UnlockLg = ({ 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 10V7C8 4.79 9.79 3 12 3C13.8647 3 15.4303 4.2743 15.8741 6M6.6 10H17.4C18.28 10 19 10.72 19 11.6V18.6C19 19.92 17.92 21 16.6 21H7.4C6.08 21 5 19.92 5 18.6V11.6C5 10.72 5.72 10 6.6 10Z" stroke={color} strokeWidth="2" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12 15C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14C11 14.5523 11.4477 15 12 15ZM12 15V18" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Unlock/UnlockMd.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UnlockMd = ({ 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="M6.66699 8.33333V5.83333C6.66699 3.99167 8.15866 2.5 10.0003 2.5C11.5542 2.5 12.8589 3.56192 13.2287 5M5.50033 8.33333H14.5003C15.2337 8.33333 15.8337 8.93333 15.8337 9.66667V15.5C15.8337 16.6 14.9337 17.5 13.8337 17.5H6.16699C5.06699 17.5 4.16699 16.6 4.16699 15.5V9.66667C4.16699 8.93333 4.76699 8.33333 5.50033 8.33333Z" stroke={color} strokeWidth="1.5" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10.0003 12.5C10.4606 12.5 10.8337 12.1269 10.8337 11.6666C10.8337 11.2064 10.4606 10.8333 10.0003 10.8333C9.54008 10.8333 9.16699 11.2064 9.16699 11.6666C9.16699 12.1269 9.54008 12.5 10.0003 12.5ZM10.0003 12.5V15" stroke={color} stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Unlock/UnlockSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UnlockSm = ({ 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.33301 6.66667V4.66667C5.33301 3.19333 6.52634 2 7.99967 2C9.24281 2 10.2865 2.84953 10.5824 4M7.99967 10C8.36787 10 8.66634 9.70153 8.66634 9.33333C8.66634 8.96513 8.36787 8.66667 7.99967 8.66667C7.63147 8.66667 7.33301 8.96513 7.33301 9.33333C7.33301 9.70153 7.63147 10 7.99967 10ZM7.99967 10V12M4.39967 6.66667H11.5997C12.1863 6.66667 12.6663 7.14667 12.6663 7.73333V12.4C12.6663 13.28 11.9463 14 11.0663 14H4.93301C4.05301 14 3.33301 13.28 3.33301 12.4V7.73333C3.33301 7.14667 3.81301 6.66667 4.39967 6.66667Z" stroke={color} stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Update/UpdateLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UpdateLg = ({ 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="M20.4532 12.8928C20.1754 15.5027 18.6967 17.9484 16.2497 19.3612C12.1842 21.7084 6.98566 20.3155 4.63845 16.25L4.38845 15.817M3.54617 11.1071C3.82397 8.49723 5.30276 6.05151 7.74974 4.63874C11.8152 2.29153 17.0138 3.68447 19.361 7.74995L19.611 8.18297M3.49316 18.0659L4.22522 15.3339L6.95727 16.0659M17.0422 7.93398L19.7743 8.66603L20.5063 5.93398M11.9997 7.49995V12L14.4997 13.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Update/UpdateMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UpdateMd = ({ 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="M17.0445 10.744C16.813 12.9189 15.5807 14.957 13.5416 16.1343C10.1537 18.0903 5.82155 16.9296 3.86554 13.5417L3.65721 13.1808M2.95531 9.25592C3.18681 7.08103 4.41913 5.04293 6.45828 3.86562C9.84617 1.90961 14.1783 3.0704 16.1343 6.4583L16.3427 6.81915M2.91113 15.0549L3.52118 12.7783L5.79789 13.3883M14.202 6.61165L16.4787 7.2217L17.0887 4.94499M9.99992 6.24996V10L12.0832 11.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Update/UpdateSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UpdateSm = ({ 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="M13.6358 8.59519C13.4506 10.3351 12.4648 11.9656 10.8335 12.9075C8.12313 14.4723 4.65744 13.5437 3.09263 10.8333L2.92596 10.5447M2.36444 7.40473C2.54964 5.66481 3.5355 4.03433 5.16682 3.09249C7.87713 1.52768 11.3429 2.45631 12.9077 5.16663L13.0743 5.45531M2.3291 12.0439L2.81714 10.2226L4.63851 10.7106M11.3618 5.28931L13.1832 5.77735L13.6712 3.95598M8.00013 4.99996V7.99999L9.66679 8.99999" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/User/UserLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserLg = ({ 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="M5 21C5 17.134 8.13401 14 12 14C15.866 14 19 17.134 19 21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/User/UserMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserMd = ({ 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="M4.1665 17.5C4.1665 14.2783 6.77818 11.6667 9.99984 11.6667C13.2215 11.6667 15.8332 14.2783 15.8332 17.5M13.3332 5.83333C13.3332 7.67428 11.8408 9.16667 9.99984 9.16667C8.15889 9.16667 6.6665 7.67428 6.6665 5.83333C6.6665 3.99238 8.15889 2.5 9.99984 2.5C11.8408 2.5 13.3332 3.99238 13.3332 5.83333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/User/UserSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserSm = ({ 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="M3.3335 14C3.3335 11.4227 5.42284 9.33333 8.00016 9.33333C10.5775 9.33333 12.6668 11.4227 12.6668 14M10.6668 4.66667C10.6668 6.13943 9.4729 7.33333 8.00016 7.33333C6.5274 7.33333 5.3335 6.13943 5.3335 4.66667C5.3335 3.19391 6.5274 2 8.00016 2C9.4729 2 10.6668 3.19391 10.6668 4.66667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserAdd/UseraddLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UseraddLg = ({ 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="M20 18H14M17 15V21M4 21C4 17.134 7.13401 14 11 14C11.695 14 12.3663 14.1013 13 14.2899M15 7C15 9.20914 13.2091 11 11 11C8.79086 11 7 9.20914 7 7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserAdd/UseraddMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UseraddMd = ({ 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="M16.6668 15H11.6668M14.1668 12.5V17.5M3.3335 17.5C3.3335 14.2783 5.94517 11.6667 9.16683 11.6667C9.746 11.6667 10.3054 11.7511 10.8335 11.9082M12.5002 5.83333C12.5002 7.67428 11.0077 9.16667 9.16683 9.16667C7.32588 9.16667 5.8335 7.67428 5.8335 5.83333C5.8335 3.99238 7.32588 2.5 9.16683 2.5C11.0077 2.5 12.5002 3.99238 12.5002 5.83333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserAdd/UseraddSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UseraddSm = ({ 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="M13.3332 12H9.33317M11.3332 10V14M2.6665 14C2.6665 11.4227 4.75584 9.33333 7.33317 9.33333C7.7965 9.33333 8.24404 9.40087 8.6665 9.5266M9.99984 4.66667C9.99984 6.13943 8.8059 7.33333 7.33317 7.33333C5.86041 7.33333 4.6665 6.13943 4.6665 4.66667C4.6665 3.19391 5.86041 2 7.33317 2C8.8059 2 9.99984 3.19391 9.99984 4.66667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserRemove/UserremoveLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserremoveLg = ({ 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="M15 16L20 21M20 16L15 21M4 21C4 17.134 7.13401 14 11 14M15 7C15 9.20914 13.2091 11 11 11C8.79086 11 7 9.20914 7 7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserRemove/UserremoveMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserremoveMd = ({ 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="M12.5002 13.3333L16.6668 17.5M16.6668 13.3333L12.5002 17.5M3.3335 17.5C3.3335 14.2783 5.94517 11.6667 9.16683 11.6667M12.5002 5.83333C12.5002 7.67428 11.0077 9.16667 9.16683 9.16667C7.32588 9.16667 5.8335 7.67428 5.8335 5.83333C5.8335 3.99238 7.32588 2.5 9.16683 2.5C11.0077 2.5 12.5002 3.99238 12.5002 5.83333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserRemove/UserremoveSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UserremoveSm = ({ 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="M9.99984 10.6667L13.3332 14M13.3332 10.6667L9.99984 14M2.6665 14C2.6665 11.4227 4.75584 9.33333 7.33317 9.33333M9.99984 4.66667C9.99984 6.13943 8.8059 7.33333 7.33317 7.33333C5.86041 7.33333 4.6665 6.13943 4.6665 4.66667C4.6665 3.19391 5.86041 2 7.33317 2C8.8059 2 9.99984 3.19391 9.99984 4.66667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserShield/UsershieldLg.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UsershieldLg = ({ 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="M4 21C4 17.4735 6.60771 14.5561 10 14.0709M19.8726 15.2038C19.8044 15.2079 19.7357 15.21 19.6667 15.21C18.6422 15.21 17.7077 14.7524 17 14C16.2923 14.7524 15.3578 15.2099 14.3333 15.2099C14.2643 15.2099 14.1956 15.2078 14.1274 15.2037C14.0442 15.5853 14 15.9855 14 16.3979C14 18.6121 15.2748 20.4725 17 21C18.7252 20.4725 20 18.6121 20 16.3979C20 15.9855 19.9558 15.5853 19.8726 15.2038ZM15 7C15 9.20914 13.2091 11 11 11C8.79086 11 7 9.20914 7 7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserShield/UsershieldMd.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UsershieldMd = ({ 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="M3.33301 17.5C3.33301 14.5612 5.5061 12.1301 8.33301 11.7257M16.5602 12.6698C16.5033 12.6732 16.4461 12.675 16.3886 12.675C15.5348 12.675 14.7561 12.2937 14.1663 11.6667C13.5766 12.2937 12.7978 12.6749 11.9441 12.6749C11.8866 12.6749 11.8293 12.6732 11.7725 12.6698C11.7032 12.9878 11.6663 13.3212 11.6663 13.6649C11.6663 15.5101 12.7287 17.0604 14.1663 17.5C15.604 17.0604 16.6663 15.5101 16.6663 13.6649C16.6663 13.3212 16.6295 12.9877 16.5602 12.6698ZM12.4997 5.83333C12.4997 7.67428 11.0073 9.16667 9.16634 9.16667C7.32539 9.16667 5.83301 7.67428 5.83301 5.83333C5.83301 3.99238 7.32539 2.5 9.16634 2.5C11.0073 2.5 12.4997 3.99238 12.4997 5.83333Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/UserShield/UsershieldSm.tsx

@@ -0,0 +1,9 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const UsershieldSm = ({ 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.66699 14C2.66699 11.649 4.40547 9.70407 6.66699 9.3806M13.2487 10.1359C13.2033 10.1386 13.1575 10.14 13.1115 10.14C12.4285 10.14 11.8055 9.83493 11.3337 9.33333C10.8619 9.83493 10.2389 10.1399 9.55586 10.1399C9.50986 10.1399 9.46406 10.1385 9.41859 10.1358C9.36313 10.3902 9.33366 10.657 9.33366 10.9319C9.33366 12.4081 10.1835 13.6483 11.3337 14C12.4838 13.6483 13.3337 12.4081 13.3337 10.9319C13.3337 10.657 13.3042 10.3902 13.2487 10.1359ZM10.0003 4.66667C10.0003 6.13943 8.80639 7.33333 7.33366 7.33333C5.8609 7.33333 4.66699 6.13943 4.66699 4.66667C4.66699 3.19391 5.8609 2 7.33366 2C8.80639 2 10.0003 3.19391 10.0003 4.66667Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Video/VideoLg.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const VideoLg = ({ 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.75 8.75C3.75 7.64543 4.5791 6.75 5.60185 6.75H14.3981C15.4209 6.75 16.25 7.64543 16.25 8.75V15.25C16.25 16.3546 15.4209 17.25 14.3981 17.25H5.60185C4.5791 17.25 3.75 16.3546 3.75 15.25V8.75Z" stroke={color} strokeWidth="2" />
+        <path d="M16.25 10.5L20.25 8V16L16.25 13.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13.25 14.25H6.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M6.76 9.75H6.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Video/VideoMd.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const VideoMd = ({ 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="M3.125 7.29167C3.125 6.37119 3.81592 5.625 4.66821 5.625H11.9984C12.8507 5.625 13.5417 6.37119 13.5417 7.29167V12.7083C13.5417 13.6288 12.8507 14.375 11.9984 14.375H4.66821C3.81592 14.375 3.125 13.6288 3.125 12.7083V7.29167Z" stroke={color} strokeWidth="1.5" />
+        <path d="M13.542 8.74999L16.8753 6.66666V13.3333L13.542 11.4583" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.0417 11.875H5.625" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M5.63333 8.125H5.625" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Video/VideoSm.tsx

@@ -0,0 +1,12 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const VideoSm = ({ 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.5 5.83333C2.5 5.09695 3.05273 4.5 3.73457 4.5H9.59873C10.2806 4.5 10.8333 5.09695 10.8333 5.83333V10.1667C10.8333 10.9031 10.2806 11.5 9.59873 11.5H3.73457C3.05273 11.5 2.5 10.9031 2.5 10.1667V5.83333Z" stroke={color} />
+        <path d="M10.833 7.00001L13.4997 5.33334V10.6667L10.833 9.16668" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8.83333 9.5H4.5" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.50667 6.5H4.5" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/System/Weight/WeightLg.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SystemLg = ({ 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_12072_172)">
+            <path d="M9 6C9 6.79565 9.31607 7.55871 9.87868 8.12132C10.4413 8.68393 11.2044 9 12 9C12.7956 9 13.5587 8.68393 14.1213 8.12132C14.6839 7.55871 15 6.79565 15 6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.31607 4.44129 9 5.20435 9 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.8349 9H17.1649C17.3991 8.99996 17.6259 9.08213 17.8057 9.23216C17.9855 9.3822 18.107 9.59059 18.1489 9.821L19.7859 18.821C19.8121 18.9651 19.8064 19.1133 19.769 19.2549C19.7317 19.3966 19.6637 19.5283 19.5698 19.6408C19.4759 19.7532 19.3585 19.8437 19.2258 19.9058C19.0931 19.9679 18.9484 20 18.8019 20H5.1979C5.05141 20 4.9067 19.9679 4.77401 19.9058C4.64131 19.8437 4.52388 19.7532 4.43001 19.6408C4.33615 19.5283 4.26813 19.3966 4.23079 19.2549C4.19345 19.1133 4.18768 18.9651 4.2139 18.821L5.8509 9.821C5.89283 9.59059 6.01429 9.3822 6.19411 9.23216C6.37393 9.08213 6.60071 8.99996 6.8349 9Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_12072_172">
+                <rect width="24" height="24" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Weight/WeightMd.tsx

@@ -0,0 +1,17 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SystemMd = ({ 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_12072_168)">
+            <path d="M7.5 5C7.5 5.66304 7.76339 6.29893 8.23223 6.76777C8.70107 7.23661 9.33696 7.5 10 7.5C10.663 7.5 11.2989 7.23661 11.7678 6.76777C12.2366 6.29893 12.5 5.66304 12.5 5C12.5 4.33696 12.2366 3.70107 11.7678 3.23223C11.2989 2.76339 10.663 2.5 10 2.5C9.33696 2.5 8.70107 2.76339 8.23223 3.23223C7.76339 3.70107 7.5 4.33696 7.5 5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M5.69567 7.5H14.304C14.4992 7.49997 14.6882 7.56844 14.838 7.69347C14.9879 7.8185 15.0891 7.99216 15.124 8.18417L16.4882 15.6842C16.51 15.8043 16.5052 15.9277 16.4741 16.0458C16.443 16.1638 16.3863 16.2736 16.3081 16.3673C16.2299 16.461 16.132 16.5364 16.0214 16.5882C15.9108 16.6399 15.7903 16.6667 15.6682 16.6667H4.33151C4.20943 16.6667 4.08883 16.6399 3.97826 16.5882C3.86768 16.5364 3.76982 16.461 3.6916 16.3673C3.61337 16.2736 3.5567 16.1638 3.52558 16.0458C3.49446 15.9277 3.48965 15.8043 3.51151 15.6842L4.87567 8.18417C4.91061 7.99216 5.01182 7.8185 5.16168 7.69347C5.31153 7.56844 5.50051 7.49997 5.69567 7.5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <defs>
+            <clipPath id="clip0_12072_168">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+
+);

package/src/assets/icon/System/Weight/WeightSm.tsx

@@ -0,0 +1,10 @@
+// Generated from SVG to React Component
+import React, { SVGProps } from "react";
+
+export const SystemSm = ({ 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 4C6 4.53043 6.21071 5.03914 6.58579 5.41421C6.96086 5.78929 7.46957 6 8 6C8.53043 6 9.03914 5.78929 9.41421 5.41421C9.78929 5.03914 10 4.53043 10 4C10 3.46957 9.78929 2.96086 9.41421 2.58579C9.03914 2.21071 8.53043 2 8 2C7.46957 2 6.96086 2.21071 6.58579 2.58579C6.21071 2.96086 6 3.46957 6 4Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4.55644 6H11.4431C11.5992 5.99998 11.7504 6.05475 11.8703 6.15477C11.9902 6.2548 12.0712 6.39373 12.0991 6.54733L13.1904 12.5473C13.2079 12.6434 13.2041 12.7422 13.1792 12.8366C13.1543 12.931 13.1089 13.0189 13.0464 13.0938C12.9838 13.1688 12.9055 13.2291 12.817 13.2705C12.7286 13.3119 12.6321 13.3333 12.5344 13.3333H3.46511C3.36744 13.3333 3.27097 13.3119 3.18251 13.2705C3.09405 13.2291 3.01576 13.1688 2.95318 13.0938C2.8906 13.0189 2.84526 12.931 2.82036 12.8366C2.79547 12.7422 2.79163 12.6434 2.80911 12.5473L3.90044 6.54733C3.92839 6.39373 4.00936 6.2548 4.12924 6.15477C4.24913 6.05475 4.40031 5.99998 4.55644 6Z" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+);

package/src/assets/icon/icons-help.md

@@ -0,0 +1,71 @@
+# 🎨 Icon System Documentation
+
+## Overview
+Our icon system uses React components generated from SVGs, providing consistent and scalable icons throughout the application.
+
+## 📏 Size Variations
+Icons are available in three standard sizes:
+- Small (Sm): 16x16px
+- Medium (Md): 20x20px
+- Large (Lg): 24x24px - viewBox="0 0 24 24"
+
+## 🗂️ Icon Categories
+Icons are organized in the following categories:
+- System
+  - Blog
+  - Affiliate
+  - ...
+- StyleDesigner
+- SocialMedia
+ - Colorless
+ - Colored
+- Sign
+- Navigation 
+- Items 
+- Finance 
+- Coding 
+- Action
+
+## 💻 Usage
+
+### Basic Implementation
+```tsx
+import { BlogLg } from '@/assets/icons/System/Blog';
+
+// Large icon (24x24)
+<BlogLg />
+
+// With custom props
+<BlogLg className="custom-class" />
+```
+
+### 🎨 SVG Structure
+Our icons follow a consistent structure:
+```tsx
+<svg 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path ... stroke={color} />
+</svg>
+```
+
+### Customization with Chakra UI
+Icons can be customized using Chakra UI's Box component:
+
+```tsx
+import { Box } from '@chakra-ui/react';
+import { BlogLg } from '@/assets/icons/System/Blog';
+
+<BlogLg color="white" />
+```
+
+## 🛠️ Technical Details
+
+- Icons use `currentColor` for stroke color, allowing for easy theme integration
+- Default stroke widths are 1.5-2px
+- All icons support standard SVG props through React's SVGProps
+- Icons maintain consistent styling with `strokeLinecap="round"` and `strokeLinejoin="round"`

package/src/assets/icons/Colon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7.5H12.01M12 16.5H12.01M13 16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5C11 15.9477 11.4477 15.5 12 15.5C12.5523 15.5 13 15.9477 13 16.5ZM13 7.5C13 8.05228 12.5523 8.5 12 8.5C11.4477 8.5 11 8.05228 11 7.5C11 6.94772 11.4477 6.5 12 6.5C12.5523 6.5 13 6.94772 13 7.5Z" stroke="#BCBCBC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/AED.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.66634 12.6667H3.33301" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.73259 10.9861C5.6196 10.8645 5.47811 10.7729 5.32089 10.7196C5.16367 10.6664 4.99566 10.6531 4.83201 10.681C4.66837 10.7088 4.51424 10.777 4.38354 10.8794C4.25283 10.9817 4.14966 11.115 4.08332 11.2671C4.01698 11.4193 3.98957 11.5856 4.00356 11.751C4.01754 11.9164 4.07249 12.0757 4.16343 12.2146C4.25438 12.3535 4.37847 12.4675 4.5245 12.5465C4.67054 12.6254 4.83393 12.6667 4.99993 12.6667" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66699 2.66675V8.66675" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 8.66675H11.2587C11.4346 8.6668 11.6075 8.62043 11.7598 8.53231C11.9121 8.44419 12.0384 8.31744 12.1261 8.16487C12.2137 8.0123 12.2596 7.83931 12.259 7.66335C12.2584 7.4874 12.2113 7.31472 12.1227 7.16275L10.6667 4.66675" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.33301 8.67341V8.66675" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/CAD.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 12H6.28571C5.14907 12 4.05898 11.5786 3.25526 10.8284C2.45153 10.0783 2 9.06087 2 8C2 6.93913 2.45153 5.92172 3.25526 5.17157C4.05898 4.42143 5.14907 4 6.28571 4H7" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10C8 11.1046 8.89543 12 10 12H12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8H10C8.89543 8 8 7.10457 8 6C8 4.89543 8.89543 4 10 4H12C13.1046 4 14 4.89543 14 6M11 3V13" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/CNY.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11486_208)">
+<path d="M4 4H12" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7.5H13" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 7.5V11C9.5 11.3978 9.65804 11.7794 9.93934 12.0607C10.2206 12.342 10.6022 12.5 11 12.5H13.5V11" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 7.5V8.5C6.5 9.56087 6.07857 10.5783 5.32843 11.3284C4.57828 12.0786 3.56087 12.5 2.5 12.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_11486_208">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/PLP/EUR.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 3.67927C11.6784 2.83974 10.3983 2.33325 9 2.33325C5.87039 2.33325 3.33333 4.8703 3.33333 7.99992C3.33333 11.1295 5.87039 13.6666 9 13.6666C10.3983 13.6666 11.6784 13.1601 12.6667 12.3206M2 9.33325H8.66667M2 6.66659H8.66667" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/GBP.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6663 13.6666H4.33301C4.33301 13.6666 6.66634 11.8275 6.66634 8.99992C6.66634 7.11492 5.27551 6.44074 5.25547 4.8699C5.25678 1.76044 9.00001 1.92577 10.3011 3.16164M4.33301 8.99992H9.99967" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/JPY.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.5H11" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8.5H11" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8.5V13.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 3L8 8.5L3.5 3" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/PLPIcons.ts

@@ -0,0 +1,48 @@
+/// <reference types="vite-plugin-svgr/client" />
+import AED from "./AED.svg?react";
+import BlackChevronDown from "./black-chevron-down.svg?react";
+import CAD from "./CAD.svg?react";
+import CNY from "./CNY.svg?react";
+import Cross from "./cross.svg?react";
+import Discount from "./discount.svg?react";
+import DollarSign from "./dollar-sign.svg?react";
+import EUR from "./EUR.svg?react";
+import Filter from "./filter.svg?react";
+import Fire from "./fire.svg?react";
+import Gated from "./gated.svg?react";
+import GBP from "./GBP.svg?react";
+import GrayChevronDown from "./gray-chevron-down.svg?react";
+import GridView from "./grid-view.svg?react";
+import JPY from "./JPY.svg?react";
+import ListView from "./list-view.svg?react";
+import ResetFilters from "./reset-filters.svg?react";
+import Search from "./search.svg?react";
+import Separator from "./separator.svg?react";
+import Sort from "./sort.svg?react";
+import SearchInputIcon from "./square-with-slash.svg?react";
+
+const PLPIcons = {
+    SearchInputIcon,
+    Search,
+    Discount,
+    Gated,
+    Fire,
+    ResetFilters,
+    BlackChevronDown,
+    Separator,
+    DollarSign,
+    GrayChevronDown,
+    Filter,
+    Cross,
+    Sort,
+    ListView,
+    GridView,
+    AED,
+    CNY,
+    GBP,
+    EUR,
+    CAD,
+    JPY
+}
+
+export default PLPIcons

package/src/assets/icons/PLP/black-chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/PLP/cross.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 5L5 15M5 5L15 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>