@livechat/design-system-icons 1.0.0-alpha.1 → 1.0.0-alpha.13

package/lib/react/material/Edge.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEdge = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21.666 17.86a8.79 8.79 0 0 1-.994.44 9.554 9.554 0 0 1-3.366.6c-4.434 0-8.297-3.047-8.297-6.966a2.953 2.953 0 0 1 1.538-2.559c-4.013.169-5.044 4.35-5.044 6.797 0 6.937 6.384 7.631 7.763 7.631.74 0 1.856-.216 2.53-.431l.123-.038a12.028 12.028 0 0 0 6.244-4.95.375.375 0 0 0-.497-.525Z"
+      fill="url(#edge_svg__a)"
+    />
+    <path
+      opacity={0.35}
+      d="M21.666 17.86a8.79 8.79 0 0 1-.994.44 9.554 9.554 0 0 1-3.366.6c-4.434 0-8.297-3.047-8.297-6.966a2.953 2.953 0 0 1 1.538-2.559c-4.013.169-5.044 4.35-5.044 6.797 0 6.937 6.384 7.631 7.763 7.631.74 0 1.856-.216 2.53-.431l.123-.038a12.028 12.028 0 0 0 6.244-4.95.375.375 0 0 0-.497-.525Z"
+      fill="url(#edge_svg__b)"
+    />
+    <path
+      d="M9.91 22.622a7.424 7.424 0 0 1-2.129-1.997 7.566 7.566 0 0 1 2.766-11.25c.3-.14.797-.384 1.462-.375a3.038 3.038 0 0 1 2.41 1.219 2.99 2.99 0 0 1 .59 1.753c0-.019 2.297-7.463-7.5-7.463-4.115 0-7.5 3.9-7.5 7.332a12.206 12.206 0 0 0 1.135 5.25 12 12 0 0 0 14.662 6.28 7.079 7.079 0 0 1-5.887-.75h-.01Z"
+      fill="url(#edge_svg__c)"
+    />
+    <path
+      opacity={0.41}
+      d="M9.91 22.622a7.424 7.424 0 0 1-2.129-1.997 7.566 7.566 0 0 1 2.766-11.25c.3-.14.797-.384 1.462-.375a3.038 3.038 0 0 1 2.41 1.219 2.99 2.99 0 0 1 .59 1.753c0-.019 2.297-7.463-7.5-7.463-4.115 0-7.5 3.9-7.5 7.332a12.206 12.206 0 0 0 1.135 5.25 12 12 0 0 0 14.662 6.28 7.079 7.079 0 0 1-5.887-.75h-.01Z"
+      fill="url(#edge_svg__d)"
+    />
+    <path
+      d="M14.287 13.95c-.084.094-.318.234-.318.525 0 .244.16.488.45.684 1.34.938 3.881.807 3.89.807 1-.001 1.98-.27 2.841-.778a5.756 5.756 0 0 0 2.85-4.96c.028-2.1-.75-3.497-1.06-4.115C20.945 2.23 16.66 0 12 0A12 12 0 0 0 0 11.831C.047 8.41 3.45 5.644 7.5 5.644c.328 0 2.203.028 3.938.937a6.806 6.806 0 0 1 2.896 2.747c.572.994.675 2.26.675 2.766 0 .506-.253 1.247-.73 1.865l.008-.009Z"
+      fill="url(#edge_svg__e)"
+    />
+    <path
+      d="M14.287 13.95c-.084.094-.318.234-.318.525 0 .244.16.488.45.684 1.34.938 3.881.807 3.89.807 1-.001 1.98-.27 2.841-.778a5.756 5.756 0 0 0 2.85-4.96c.028-2.1-.75-3.497-1.06-4.115C20.945 2.23 16.66 0 12 0A12 12 0 0 0 0 11.831C.047 8.41 3.45 5.644 7.5 5.644c.328 0 2.203.028 3.938.937a6.806 6.806 0 0 1 2.896 2.747c.572.994.675 2.26.675 2.766 0 .506-.253 1.247-.73 1.865l.008-.009Z"
+      fill="url(#edge_svg__f)"
+    />
+    <defs>
+      <radialGradient
+        id="edge_svg__b"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(8.94375 0 0 8.49656 14.738 16.72)"
+      >
+        <stop offset={0.7} stopOpacity={0} />
+        <stop offset={0.9} stopOpacity={0.5} />
+        <stop offset={1} />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__d"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.01373 -13.29071 10.73755 1.6269 6.615 18.65)"
+      >
+        <stop offset={0.8} stopOpacity={0} />
+        <stop offset={0.9} stopOpacity={0.5} />
+        <stop offset={1} />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__e"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(-.759 18.97503 -40.41278 -1.6165 2.427 4.436)"
+      >
+        <stop stopColor="#35C1F1" />
+        <stop offset={0.1} stopColor="#34C1ED" />
+        <stop offset={0.2} stopColor="#2FC2DF" />
+        <stop offset={0.3} stopColor="#2BC3D2" />
+        <stop offset={0.7} stopColor="#36C752" />
+      </radialGradient>
+      <radialGradient
+        id="edge_svg__f"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.55412 8.757 -7.1212 2.07701 22.506 7.247)"
+      >
+        <stop stopColor="#66EB6E" />
+        <stop offset={1} stopColor="#66EB6E" stopOpacity={0} />
+      </radialGradient>
+      <linearGradient
+        id="edge_svg__a"
+        x1={5.503}
+        y1={16.594}
+        x2={22.228}
+        y2={16.594}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0C59A4" />
+        <stop offset={1} stopColor="#114A8B" />
+      </linearGradient>
+      <linearGradient
+        id="edge_svg__c"
+        x1={14.316}
+        y1={9.337}
+        x2={3.881}
+        y2={20.709}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#1B9DE2" />
+        <stop offset={0.2} stopColor="#1595DF" />
+        <stop offset={0.7} stopColor="#0680D7" />
+        <stop offset={1} stopColor="#0078D4" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgEdge;

package/lib/react/material/Edit.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEdit = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36ZM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgEdit;

package/lib/react/material/Email.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEmail = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm-.4 4.25-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgEmail;

package/lib/react/material/EmailAddress.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEmailAddress = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.72 2.03A9.991 9.991 0 0 0 2.03 12.72C2.39 18.01 7.01 22 12.31 22H16c.55 0 1-.45 1-1s-.45-1-1-1h-3.67c-3.73 0-7.15-2.42-8.08-6.03-1.49-5.8 3.91-11.21 9.71-9.71C17.58 5.18 20 8.6 20 12.33v1.1c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57v-1.25c0-2.51-1.78-4.77-4.26-5.12a5.008 5.008 0 0 0-5.66 5.87 4.996 4.996 0 0 0 3.72 3.94c1.84.43 3.59-.16 4.74-1.33.89 1.22 2.67 1.86 4.3 1.21 1.34-.53 2.16-1.9 2.16-3.34v-1.09c0-5.31-3.99-9.93-9.28-10.29ZM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgEmailAddress;

package/lib/react/material/Emoji.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgEmoji = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1.8c5.965 0 10.8-4.835 10.8-10.8 0-5.965-4.835-10.8-10.8-10.8C6.035 1.2 1.2 6.035 1.2 12c0 5.965 4.835 10.8 10.8 10.8Z"
+      fill="currentcolor"
+    />
+    <path
+      d="M8.7 11.4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM16.8 9.9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
+      fill="currentcolor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.116 13.546a.9.9 0 0 1 1.138.57C9.681 15.397 11 15.9 12 15.9s2.32-.503 2.746-1.784a.9.9 0 0 1 1.708.569C15.681 17.003 13.4 17.7 12 17.7s-3.68-.697-4.454-3.015a.9.9 0 0 1 .57-1.139Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgEmoji;

package/lib/react/material/Error.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgError = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1Zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm1-3h-2v-2h2v2Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgError;

package/lib/react/material/Extension.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgExtension = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7 0 1.49-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgExtension;

package/lib/react/material/FileCopy.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFileCopy = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1Zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6ZM8 21V7h6v5h5v9H8Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFileCopy;

package/lib/react/material/FileDownload.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFileDownload = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71ZM5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFileDownload;

package/lib/react/material/FileUpload.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFileUpload = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10 16h4c.55 0 1-.45 1-1v-5h1.59c.89 0 1.34-1.08.71-1.71L12.71 3.7a.996.996 0 0 0-1.41 0L6.71 8.29c-.63.63-.19 1.71.7 1.71H9v5c0 .55.45 1 1 1Zm-4 2h12c.55 0 1 .45 1 1s-.45 1-1 1H6c-.55 0-1-.45-1-1s.45-1 1-1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFileUpload;

package/lib/react/material/Filter.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFilter = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4.25 5.61C6.57 8.59 10 13 10 13v5c0 1.1.9 2 2 2s2-.9 2-2v-5s3.43-4.41 5.75-7.39c.51-.66.04-1.61-.8-1.61H5.04c-.83 0-1.3.95-.79 1.61Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFilter;

package/lib/react/material/Firefox.tsx

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFirefox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#firefox_svg__a)">
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.823 11.823 0 0 1 1.216 3.53l.003.019c-1.359-3.277-3.661-4.6-5.543-7.479-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.08 2.08 0 0 1-.18-.461.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.023 0l-.005.003-.01.005.005-.008c-3.017 1.71-4.042 4.877-4.135 6.461A6.127 6.127 0 0 0 8.3 7.697a3.586 3.586 0 0 0-.31-.227 5.227 5.227 0 0 1-.033-2.843A8.867 8.867 0 0 0 5.065 6.79h-.006c-.476-.585-.443-2.512-.415-2.914-.141.055-.276.124-.401.206-.42.29-.814.617-1.175.974-.411.404-.787.84-1.123 1.305v.001-.002A9.67 9.67 0 0 0 .333 9.885l-.016.076c-.023.103-.104.615-.118.727l-.003.025c-.105.53-.17 1.065-.195 1.604v.06c.006 2.91 1.138 5.713 3.173 7.855 2.036 2.142 4.827 3.468 7.823 3.715a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45a11.61 11.61 0 0 0-.78-5.844l.002.002ZM9.284 17.158c.057.026.11.054.167.079l.008.005a6.338 6.338 0 0 1-.175-.084ZM21.941 8.66v-.01l.002.011h-.002Z"
+        fill="url(#firefox_svg__b)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.82 11.82 0 0 1 1.216 3.53v.01l.003.013a10.225 10.225 0 0 1-.374 7.85c-1.377 2.861-4.71 5.793-9.927 5.649C6.005 22.005 1.04 17.955.112 12.652c-.17-.836 0-1.26.085-1.94a8.404 8.404 0 0 0-.193 1.605v.06c.005 2.91 1.137 5.714 3.173 7.856 2.035 2.142 4.827 3.467 7.822 3.714a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45.248-1.98-.02-3.99-.779-5.843l-.001.001Z"
+        fill="url(#firefox_svg__c)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.82 11.82 0 0 1 1.216 3.53v.01l.003.013a10.225 10.225 0 0 1-.374 7.85c-1.377 2.861-4.71 5.793-9.927 5.649C6.005 22.005 1.04 17.955.112 12.652c-.17-.836 0-1.26.085-1.94a8.404 8.404 0 0 0-.193 1.605v.06c.005 2.91 1.137 5.714 3.173 7.856 2.035 2.142 4.827 3.467 7.822 3.714a12.296 12.296 0 0 0 8.359-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.036-.299.054-.45.248-1.98-.02-3.99-.779-5.843l-.001.001Z"
+        fill="url(#firefox_svg__d)"
+      />
+      <path
+        d="M17.292 9.418c.026.017.05.035.074.053a6.36 6.36 0 0 0-1.116-1.41c-3.735-3.616-.978-7.838-.514-8.054L15.741 0c-3.018 1.71-4.042 4.877-4.135 6.461.14-.009.279-.02.422-.02a6.217 6.217 0 0 1 3.046.8 5.967 5.967 0 0 1 2.218 2.176Z"
+        fill="url(#firefox_svg__e)"
+      />
+      <path
+        d="M12.034 10.14c-.02.29-1.076 1.288-1.445 1.288-3.416 0-3.97 2-3.97 2 .15 1.685 1.363 3.074 2.83 3.806.066.034.134.064.202.094.117.05.235.097.353.14.503.172 1.03.27 1.563.292 5.99.271 7.148-6.933 2.827-9.025a4.254 4.254 0 0 1 2.897.681 5.968 5.968 0 0 0-2.218-2.175 6.217 6.217 0 0 0-3.046-.801c-.143 0-.282.011-.422.02a6.127 6.127 0 0 0-3.308 1.234c.183.15.39.35.826.767.815.777 2.906 1.583 2.91 1.677l.001.003Z"
+        fill="url(#firefox_svg__f)"
+      />
+      <path
+        d="M12.034 10.14c-.02.29-1.076 1.288-1.445 1.288-3.416 0-3.97 2-3.97 2 .15 1.685 1.363 3.074 2.83 3.806.066.034.134.064.202.094.117.05.235.097.353.14.503.172 1.03.27 1.563.292 5.99.271 7.148-6.933 2.827-9.025a4.254 4.254 0 0 1 2.897.681 5.968 5.968 0 0 0-2.218-2.175 6.217 6.217 0 0 0-3.046-.801c-.143 0-.282.011-.422.02a6.127 6.127 0 0 0-3.308 1.234c.183.15.39.35.826.767.815.777 2.906 1.583 2.91 1.677l.001.003Z"
+        fill="url(#firefox_svg__g)"
+      />
+      <path
+        d="M7.738 7.31c.097.06.177.113.248.16a5.227 5.227 0 0 1-.034-2.843A8.867 8.867 0 0 0 5.06 6.791c.058-.002 1.801-.032 2.678.52Z"
+        fill="url(#firefox_svg__h)"
+      />
+      <path
+        d="M.11 12.653c.927 5.303 5.893 9.354 11.529 9.507 5.217.143 8.55-2.789 9.926-5.648a10.225 10.225 0 0 0 .374-7.85V8.65c0-.009-.002-.014 0-.011l.002.02c.426 2.694-.99 5.302-3.203 7.07l-.006.015c-4.312 3.4-8.438 2.051-9.272 1.5a6.643 6.643 0 0 1-.175-.084c-2.514-1.163-3.553-3.379-3.33-5.282a3.161 3.161 0 0 1-1.688-.458 3.02 3.02 0 0 1-1.158-1.275 4.657 4.657 0 0 1 4.417-.172 6.165 6.165 0 0 0 4.511.172c-.004-.094-2.095-.9-2.91-1.677-.436-.416-.643-.616-.826-.767a3.586 3.586 0 0 0-.31-.227 16.918 16.918 0 0 0-.248-.16c-.877-.551-2.62-.52-2.677-.52H5.06c-.476-.583-.442-2.51-.415-2.913-.14.055-.275.124-.401.207-.42.29-.813.616-1.174.973-.413.403-.79.838-1.128 1.302v.002-.002A9.67 9.67 0 0 0 .33 9.886c-.006.024-.433 1.83-.222 2.767H.11Z"
+        fill="url(#firefox_svg__i)"
+      />
+      <path
+        d="M16.25 8.061c.439.417.814.892 1.116 1.41.066.049.128.097.18.143 2.724 2.431 1.297 5.868 1.19 6.11 2.213-1.764 3.628-4.375 3.203-7.07-1.36-3.28-3.664-4.604-5.543-7.482-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.076 2.076 0 0 1-.18-.46.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.022 0l-.006.002-.009.005c-.465.213-3.22 4.439.515 8.052l-.002.005Z"
+        fill="url(#firefox_svg__j)"
+      />
+      <path
+        d="M17.546 9.616a2.502 2.502 0 0 0-.18-.143c-.025-.018-.049-.036-.075-.053a4.254 4.254 0 0 0-2.897-.681c4.321 2.091 3.162 9.294-2.827 9.024a5.498 5.498 0 0 1-1.563-.292 6.45 6.45 0 0 1-.556-.233l.009.005c.835.552 4.96 1.9 9.272-1.5l.007-.016c.107-.243 1.534-3.68-1.19-6.11v-.001Z"
+        fill="url(#firefox_svg__k)"
+      />
+      <path
+        d="M6.618 13.427s.555-2.001 3.971-2.001c.37 0 1.426-.998 1.445-1.287a6.165 6.165 0 0 1-4.51-.172 4.657 4.657 0 0 0-4.418.172c.25.524.653.967 1.158 1.275a3.161 3.161 0 0 0 1.689.458c-.223 1.902.815 4.118 3.329 5.282.056.026.109.054.166.08-1.467-.735-2.678-2.122-2.83-3.806v-.001Z"
+        fill="url(#firefox_svg__l)"
+      />
+      <path
+        d="M23.132 8.052c-.522-1.216-1.581-2.529-2.41-2.944a11.823 11.823 0 0 1 1.216 3.53l.003.019c-1.359-3.277-3.661-4.6-5.543-7.479-.095-.145-.19-.291-.283-.445a3.646 3.646 0 0 1-.132-.24 2.076 2.076 0 0 1-.18-.461.03.03 0 0 0-.007-.02.031.031 0 0 0-.02-.01.044.044 0 0 0-.023 0l-.005.003-.01.005.005-.008c-3.017 1.71-4.042 4.877-4.135 6.461.14-.009.28-.02.422-.02a6.217 6.217 0 0 1 3.047.8 5.966 5.966 0 0 1 2.217 2.176 4.254 4.254 0 0 0-2.897-.681c4.321 2.092 3.162 9.294-2.827 9.024a5.498 5.498 0 0 1-1.563-.292 6.452 6.452 0 0 1-.353-.14c-.068-.03-.136-.06-.203-.093l.009.005a6.338 6.338 0 0 1-.175-.084c.056.026.109.054.166.079-1.467-.734-2.678-2.122-2.83-3.806 0 0 .555-2 3.972-2 .369 0 1.426-.998 1.444-1.288-.004-.094-2.095-.9-2.91-1.677C8.69 8.05 8.484 7.85 8.3 7.7a3.586 3.586 0 0 0-.31-.228 5.227 5.227 0 0 1-.034-2.843 8.867 8.867 0 0 0-2.892 2.164H5.06c-.476-.584-.443-2.511-.416-2.914-.14.055-.275.124-.4.207-.421.29-.814.616-1.175.973-.411.404-.787.84-1.123 1.305v.002-.002A9.67 9.67 0 0 0 .334 9.887l-.016.077c-.023.102-.124.622-.139.734a13.114 13.114 0 0 0-.177 1.621v.06c.005 2.91 1.137 5.714 3.173 7.856 2.036 2.142 4.827 3.467 7.823 3.714a12.296 12.296 0 0 0 8.358-2.38c2.38-1.778 3.986-4.355 4.5-7.223.02-.15.037-.299.055-.45.247-1.98-.02-3.989-.78-5.843h.001Zm-1.192.598.002.012-.002-.012Z"
+        fill="url(#firefox_svg__m)"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="firefox_svg__c"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0478 0 0 24.2491 20.77 2.701)"
+      >
+        <stop offset={0.129} stopColor="#FFBD4F" />
+        <stop offset={0.186} stopColor="#FFAC31" />
+        <stop offset={0.247} stopColor="#FF9D17" />
+        <stop offset={0.283} stopColor="#FF980E" />
+        <stop offset={0.403} stopColor="#FF563B" />
+        <stop offset={0.467} stopColor="#FF3750" />
+        <stop offset={0.71} stopColor="#F5156C" />
+        <stop offset={0.782} stopColor="#EB0878" />
+        <stop offset={0.86} stopColor="#E50080" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__d"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0478 0 0 24.2491 11.47 12.605)"
+      >
+        <stop offset={0.3} stopColor="#960E18" />
+        <stop offset={0.351} stopColor="#B11927" stopOpacity={0.74} />
+        <stop offset={0.435} stopColor="#DB293D" stopOpacity={0.343} />
+        <stop offset={0.497} stopColor="#F5334B" stopOpacity={0.094} />
+        <stop offset={0.53} stopColor="#FF3750" stopOpacity={0} />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__e"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(18.1441 0 0 17.5656 14.57 -2.701)"
+      >
+        <stop offset={0.132} stopColor="#FFF44F" />
+        <stop offset={0.252} stopColor="#FFDC3E" />
+        <stop offset={0.506} stopColor="#FF9D12" />
+        <stop offset={0.526} stopColor="#FF980E" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__f"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(11.9256 0 0 11.5453 8.68 18.907)"
+      >
+        <stop offset={0.353} stopColor="#3A8EE6" />
+        <stop offset={0.472} stopColor="#5C79F0" />
+        <stop offset={0.669} stopColor="#9059FF" />
+        <stop offset={1} stopColor="#C139E6" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__g"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(6.14688 -1.43874 1.63636 6.99122 12.681 10.523)"
+      >
+        <stop offset={0.206} stopColor="#9059FF" stopOpacity={0} />
+        <stop offset={0.278} stopColor="#8C4FF3" stopOpacity={0.064} />
+        <stop offset={0.747} stopColor="#7716A8" stopOpacity={0.45} />
+        <stop offset={0.975} stopColor="#6E008B" stopOpacity={0.6} />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__h"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(8.58073 0 0 8.30712 11.16 1.8)"
+      >
+        <stop stopColor="#FFE226" />
+        <stop offset={0.121} stopColor="#FFDB27" />
+        <stop offset={0.295} stopColor="#FFC82A" />
+        <stop offset={0.502} stopColor="#FFA930" />
+        <stop offset={0.732} stopColor="#FF7E37" />
+        <stop offset={0.792} stopColor="#FF7139" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__i"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(36.6107 0 0 35.4433 17.98 -3.601)"
+      >
+        <stop offset={0.113} stopColor="#FFF44F" />
+        <stop offset={0.456} stopColor="#FF980E" />
+        <stop offset={0.622} stopColor="#FF5634" />
+        <stop offset={0.716} stopColor="#FF3647" />
+        <stop offset={0.904} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__j"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(2.81556 25.8299 -17.49736 1.90728 14.937 -1.636)"
+      >
+        <stop stopColor="#FFF44F" />
+        <stop offset={0.06} stopColor="#FFE847" />
+        <stop offset={0.168} stopColor="#FFC830" />
+        <stop offset={0.304} stopColor="#FF980E" />
+        <stop offset={0.356} stopColor="#FF8B16" />
+        <stop offset={0.455} stopColor="#FF672A" />
+        <stop offset={0.57} stopColor="#FF3647" />
+        <stop offset={0.737} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__k"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(22.853 0 0 22.1243 11.16 4.802)"
+      >
+        <stop offset={0.137} stopColor="#FFF44F" />
+        <stop offset={0.48} stopColor="#FF980E" />
+        <stop offset={0.592} stopColor="#FF5634" />
+        <stop offset={0.655} stopColor="#FF3647" />
+        <stop offset={0.904} stopColor="#E31587" />
+      </radialGradient>
+      <radialGradient
+        id="firefox_svg__l"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="matrix(25.0137 0 0 24.2161 17.05 6.002)"
+      >
+        <stop offset={0.094} stopColor="#FFF44F" />
+        <stop offset={0.231} stopColor="#FFE141" />
+        <stop offset={0.509} stopColor="#FFAF1E" />
+        <stop offset={0.626} stopColor="#FF980E" />
+      </radialGradient>
+      <linearGradient
+        id="firefox_svg__b"
+        x1={21.542}
+        y1={3.717}
+        x2={2.219}
+        y2={22.974}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.048} stopColor="#FFF44F" />
+        <stop offset={0.111} stopColor="#FFE847" />
+        <stop offset={0.225} stopColor="#FFC830" />
+        <stop offset={0.368} stopColor="#FF980E" />
+        <stop offset={0.401} stopColor="#FF8B16" />
+        <stop offset={0.462} stopColor="#FF672A" />
+        <stop offset={0.534} stopColor="#FF3647" />
+        <stop offset={0.705} stopColor="#E31587" />
+      </linearGradient>
+      <linearGradient
+        id="firefox_svg__m"
+        x1={21.3}
+        y1={3.618}
+        x2={4.88}
+        y2={20.582}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.167} stopColor="#FFF44F" stopOpacity={0.8} />
+        <stop offset={0.266} stopColor="#FFF44F" stopOpacity={0.634} />
+        <stop offset={0.489} stopColor="#FFF44F" stopOpacity={0.217} />
+        <stop offset={0.6} stopColor="#FFF44F" stopOpacity={0} />
+      </linearGradient>
+      <clipPath id="firefox_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SvgFirefox;

package/lib/react/material/Flags.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFlags = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M18.998 9H14l-.72-1.45c-.17-.34-.52-.55-.9-.55H7V5.72c.6-.34 1-.98 1-1.72 0-1.1-.9-2-2-2s-2 .9-2 2c0 .74.4 1.38 1 1.72V20c0 .55.45 1 1 1s1-.45 1-1v-3h5l.72 1.45c.17.34.52.55.89.55H19c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1ZM18 17h-4l-1-2H7V9h5l1 2h5v6Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFlags;

package/lib/react/material/Folder.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFolder = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 6h-8l-1.41-1.41C10.21 4.21 9.7 4 9.17 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2Zm-1 12H5c-.55 0-1-.45-1-1V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFolder;

package/lib/react/material/Foods.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFoods = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 3h11.002C21.1 3 22 3.9 22 5v3c0 1.1-.9 2-2 2h-2v3a4 4 0 0 1-4 4H8A4 4 0 0 1 4 13V5c0-1.1.9-2 2-2h2v2.4L6.191 6.85c-.12.09-.19.24-.19.39v4.26c0 .28.22.5.5.5h4c.28 0 .5-.22.5-.5V7.24c0-.15-.07-.3-.19-.39L9.002 5.4V3H9Zm9 5h2.002V5H18v3ZM3 19.5h16c.552 0 1.002.45 1.002 1s-.45 1-1.001 1H3c-.55 0-1-.45-1-1s.45-1 1-1Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFoods;

package/lib/react/material/FrequentlyUsed.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgFrequentlyUsed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24.21-.34.1-.79-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72Z"
+      fill="currentcolor"
+    />
+  </svg>
+);
+
+export default SvgFrequentlyUsed;