@logora/debate 0.1.0

package/src/components/icons/krone_icons/Check.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Check = (props) => (
+    <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M36.8236 13.5557C37.8227 14.3327 38.0026 15.7725 37.2256 16.7715L20.8002 37.8899L12.75 27.1562C11.9906 26.1437 12.1958 24.7073 13.2083 23.9479C14.2209 23.1885 15.6573 23.3937 16.4167 24.4062L20.8664 30.3393L33.6077 13.9576C34.3848 12.9586 35.8246 12.7786 36.8236 13.5557Z" />
+    </svg>
+);

package/src/components/icons/krone_icons/CheckBox.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const CheckBox = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM17.99 9L16.58 7.58L9.99 14.17L7.41 11.6L5.99 13.01L9.99 17L17.99 9Z" fill="black"/>
+  </svg>
+);

package/src/components/icons/krone_icons/CheckCircle.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const CheckCircle = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9 12l2 2 4-4" />
+    </svg>
+);

package/src/components/icons/krone_icons/Clap.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const Clap = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_167_6296"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_167_6296)">
+      <path
+        d="M18 21H7V8L14 1L15.25 2.25C15.3667 2.36667 15.4625 2.525 15.5375 2.725C15.6125 2.925 15.65 3.11667 15.65 3.3V3.65L14.55 8H21C21.5333 8 22 8.2 22.4 8.6C22.8 9 23 9.46667 23 10V12C23 12.1167 22.9833 12.2417 22.95 12.375C22.9167 12.5083 22.8833 12.6333 22.85 12.75L19.85 19.8C19.7 20.1333 19.45 20.4167 19.1 20.65C18.75 20.8833 18.3833 21 18 21ZM9 19H18L21 12V10H12L13.35 4.5L9 8.85V19ZM7 8V10H4V19H7V21H2V8H7Z"
+      />
+    </g>
+  </svg>
+)

package/src/components/icons/krone_icons/Clock.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Clock = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" {...props}>
+        <path d="M 64 11 C 34.8 11 11 34.8 11 64 C 11 93.2 34.8 117 64 117 C 93.2 117 117 93.2 117 64 C 117 34.8 93.2 11 64 11 z M 64 17 C 89.9 17 111 38.1 111 64 C 111 89.9 89.9 111 64 111 C 38.1 111 17 89.9 17 64 C 17 38.1 38.1 17 64 17 z M 64 26 C 62.3 26 61 27.3 61 29 L 61 54.5 C 56.9 55.8 54 59.6 54 64 C 54 69.5 58.5 74 64 74 C 68.5 74 72.3 71.1 73.5 67 L 89 67 C 90.7 67 92 65.7 92 64 C 92 62.3 90.7 61 89 61 L 73.5 61 C 72.5 57.9 70.1 55.4 67 54.5 L 67 29 C 67 27.3 65.7 26 64 26 z M 64 60 C 66.2 60 68 61.8 68 64 C 68 66.2 66.2 68 64 68 C 61.8 68 60 66.2 60 64 C 60 61.8 61.8 60 64 60 z"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Close.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Close = (props) => (
+    <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M13.0001 1C12.8125 0.81253 12.5582 0.707214 12.2931 0.707214C12.0279 0.707214 11.7736 0.81253 11.5861 1L7.00006 5.586L2.41406 1C2.22653 0.81253 1.97223 0.707214 1.70706 0.707214C1.4419 0.707214 1.18759 0.81253 1.00006 1C0.812591 1.18753 0.707275 1.44184 0.707275 1.707C0.707275 1.97216 0.812591 2.22647 1.00006 2.414L5.58606 7L1.00006 11.586C0.812591 11.7735 0.707275 12.0278 0.707275 12.293C0.707275 12.5582 0.812591 12.8125 1.00006 13C1.18759 13.1875 1.4419 13.2928 1.70706 13.2928C1.97223 13.2928 2.22653 13.1875 2.41406 13L7.00006 8.414L11.5861 13C11.7736 13.1875 12.0279 13.2928 12.2931 13.2928C12.5582 13.2928 12.8125 13.1875 13.0001 13C13.1875 12.8125 13.2928 12.5582 13.2928 12.293C13.2928 12.0278 13.1875 11.7735 13.0001 11.586L8.41406 7L13.0001 2.414C13.1875 2.22647 13.2928 1.97216 13.2928 1.707C13.2928 1.44184 13.1875 1.18753 13.0001 1Z" />
+    </svg>
+)

package/src/components/icons/krone_icons/Code.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const Code = (props) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M6.147 10.473 3.238 8.187l2.91-2.078M9.784 10.473l2.909-2.286-2.91-2.078"
+      stroke="#000"
+      fill="none"
+    />
+    <path
+      transform="matrix(.27976 -.96007 .92211 .38692 7.22 11.54)"
+      strokeWidth={0.7}
+      stroke="#000"
+      d="M0-.35h6.565"
+    />
+    <rect x={0.5} y={0.5} width={15} height={15} rx={2.5} fill="none" stroke="#000" />
+  </svg>
+)

package/src/components/icons/krone_icons/Community.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Community = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Zm6,13A6,6,0,0,0,6,23a1,1,0,0,0,2,0,4,4,0,0,1,8,0,1,1,0,0,0,2,0ZM18,8a4,4,0,1,1,4-4A4,4,0,0,1,18,8Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,18,2Zm6,13a6.006,6.006,0,0,0-6-6,1,1,0,0,0,0,2,4,4,0,0,1,4,4,1,1,0,0,0,2,0ZM6,8a4,4,0,1,1,4-4A4,4,0,0,1,6,8ZM6,2A2,2,0,1,0,8,4,2,2,0,0,0,6,2ZM2,15a4,4,0,0,1,4-4A1,1,0,0,0,6,9a6.006,6.006,0,0,0-6,6,1,1,0,0,0,2,0Z"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Crown.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Crown = (props) => (
+    <svg viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M14.229 1.34473C14.0006 1.2496 13.7491 1.22459 13.5064 1.2729C13.2638 1.3212 13.041 1.44064 12.8665 1.61598L11.2502 3.23223L8.38399 0.365983C8.14958 0.131644 7.8317 0 7.50024 0C7.16879 0 6.8509 0.131644 6.61649 0.365983L3.75024 3.23223L2.13399 1.61598C1.95918 1.44122 1.73647 1.32221 1.49403 1.274C1.25159 1.22579 1.0003 1.25055 0.771926 1.34514C0.543551 1.43972 0.348347 1.5999 0.210992 1.80541C0.0736367 2.01092 0.000296921 2.25255 0.000244141 2.49973L0.000244141 9.11598C0.00123655 9.94448 0.330795 10.7388 0.916632 11.3246C1.50247 11.9104 2.29675 12.24 3.12524 12.241H11.8752C12.7037 12.24 13.498 11.9104 14.0839 11.3246C14.6697 10.7388 14.9993 9.94448 15.0002 9.11598V2.49973C15.0003 2.25253 14.9271 2.01085 14.7898 1.80526C14.6525 1.59968 14.4574 1.43941 14.229 1.34473Z" />
+    </svg>
+)

package/src/components/icons/krone_icons/Document.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Document = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+        <path d="M 13 4 C 10.250484 4 8 6.2504839 8 9 L 8 40 C 8 42.749516 10.250484 45 13 45 L 35 45 C 37.749516 45 40 42.749516 40 40 L 40 20 A 1.0001 1.0001 0 1 0 38 20 L 38 40 C 38 41.668484 36.668484 43 35 43 L 13 43 C 11.331516 43 10 41.668484 10 40 L 10 9 C 10 7.3315161 11.331516 6 13 6 L 26.757812 6 C 26.848824 6 26.910938 6.0874954 27 6.0996094 L 27 13 C 27 15.197334 28.802666 17 31 17 L 39 17 A 1.0001 1.0001 0 0 0 39.707031 15.292969 L 29.585938 5.171875 C 28.836398 4.4210018 27.818469 4 26.757812 4 L 13 4 z M 29 7.4140625 L 36.585938 15 L 31 15 C 29.883334 15 29 14.116666 29 13 L 29 7.4140625 z M 16 24 A 1.0001 1.0001 0 1 0 16 26 L 32 26 A 1.0001 1.0001 0 1 0 32 24 L 16 24 z M 16 29 A 1.0001 1.0001 0 1 0 16 31 L 32 31 A 1.0001 1.0001 0 1 0 32 29 L 16 29 z M 16 34 A 1.0001 1.0001 0 1 0 16 36 L 26 36 A 1.0001 1.0001 0 1 0 26 34 L 16 34 z"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Downvote.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Downvote = (props) => (
+    <svg viewBox="0 0 27 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M26.0359 12.8125L25.2696 7.60417C25.0812 6.36451 24.435 5.23074 23.4484 4.40882C22.4618 3.5869 21.2003 3.13138 19.893 3.125H5.43525C3.99426 3.12665 2.61279 3.67592 1.59385 4.65231C0.574921 5.62871 0.00172608 6.95251 0 8.33333L0 13.5417C0.00172608 14.9225 0.574921 16.2463 1.59385 17.2227C2.61279 18.1991 3.99426 18.7483 5.43525 18.75H8.38333L10.4639 22.7896C10.8137 23.4704 11.4072 24.0081 12.1362 24.3045C12.8652 24.6009 13.6811 24.6364 14.4352 24.4044C15.1892 24.1724 15.831 23.6884 16.2436 23.0407C16.6563 22.393 16.8122 21.6247 16.683 20.876L16.3177 18.75H20.654C21.432 18.75 22.2011 18.59 22.909 18.2807C23.617 17.9714 24.2474 17.52 24.7577 16.9571C25.2679 16.3942 25.6461 15.7329 25.8666 15.0178C26.0871 14.3028 26.1449 13.5508 26.0359 12.8125ZM5.43525 5.20833H7.60935V16.6667H5.43525C4.57034 16.6667 3.74085 16.3374 3.12927 15.7514C2.51769 15.1653 2.1741 14.3705 2.1741 13.5417V8.33333C2.1741 7.50453 2.51769 6.70968 3.12927 6.12362C3.74085 5.53757 4.57034 5.20833 5.43525 5.20833V5.20833ZM23.115 15.5917C22.8089 15.9291 22.4308 16.1997 22.0063 16.3852C21.5817 16.5706 21.1206 16.6666 20.654 16.6667H15.0372C14.8795 16.6666 14.7237 16.6995 14.5806 16.7629C14.4375 16.8263 14.3105 16.9188 14.2084 17.034C14.1064 17.1491 14.0316 17.2842 13.9895 17.4298C13.9473 17.5754 13.9387 17.728 13.9642 17.8771L14.5382 21.2104C14.5658 21.3651 14.5574 21.5238 14.5136 21.675C14.4698 21.8263 14.3917 21.9664 14.2849 22.0854C14.1597 22.2148 14.0042 22.3138 13.8313 22.3743C13.6583 22.4349 13.4728 22.4552 13.2901 22.4336C13.1073 22.4121 12.9325 22.3493 12.78 22.2503C12.6275 22.1514 12.5018 22.0192 12.413 21.8646L10.0335 17.2479C9.9707 17.1324 9.8859 17.0293 9.78345 16.9438V5.20833H19.893C20.6782 5.21108 21.4361 5.48409 22.0287 5.9776C22.6214 6.47111 23.0092 7.15225 23.1216 7.89688L23.889 13.1052C23.9534 13.5486 23.9176 14.0001 23.7841 14.4291C23.6505 14.858 23.4224 15.2545 23.115 15.5917V15.5917Z" />
+    </svg>
+)

package/src/components/icons/krone_icons/Ellipsis.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const Ellipsis = (props) => (
+    <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM10 12C10 10.9 10.9 10 12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12Z"
+    />
+  </svg>
+)

package/src/components/icons/krone_icons/ExpertBadge.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const ExpertBadge = (props) => (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="#007ACC"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <mask
+            id="mask0_167_6302"
+            style={{ maskType: 'alpha' }}
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="24"
+            height="24"
+        >
+            <rect width="24" height="24" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_167_6302)">
+            <path
+                d="M6 23V14.775L2.75 9.5L7.375 2H16.625L21.25 9.5L18 14.775V23L12 21L6 23ZM8 20.225L12 18.9L16 20.225V17H8V20.225ZM8.5 4L5.1 9.5L8.5 15H15.5L18.9 9.5L15.5 4H8.5ZM10.95 13.575L7.4 10.05L8.825 8.625L10.95 10.75L15.175 6.5L16.6 7.9L10.95 13.575Z"
+            />
+        </g>
+  </svg>
+)

package/src/components/icons/krone_icons/Facebook.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Facebook = (props) => (
+  <svg viewBox="0 0 300 522" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M180 512H98.008c-13.695 0-24.836-11.14-24.836-24.836V302.227H25.336C11.64 302.227.5 291.082.5 277.39v-79.246c0-13.696 11.14-24.836 24.836-24.836h47.836v-39.684c0-39.348 12.355-72.824 35.726-96.805C132.375 12.73 165.184 0 203.778 0l62.53.102c13.672.023 24.794 11.164 24.794 24.835v73.579c0 13.695-11.137 24.836-24.829 24.836l-42.101.015c-12.84 0-16.11 2.574-16.809 3.363-1.152 1.31-2.523 5.008-2.523 15.223v31.352h58.27c4.386 0 8.636 1.082 12.288 3.12 7.88 4.403 12.778 12.727 12.778 21.723l-.031 79.247c0 13.687-11.141 24.828-24.836 24.828h-58.47v184.941C204.84 500.86 193.696 512 180 512zm-76.813-30.016h71.633V288.79c0-9.144 7.442-16.582 16.582-16.582h66.727l.027-68.883h-66.758c-9.14 0-16.578-7.437-16.578-16.582v-44.789c0-11.726 1.192-25.062 10.043-35.086 10.696-12.117 27.551-13.515 39.301-13.515l36.922-.016V30.109l-57.332-.093c-62.024 0-100.566 39.703-100.566 103.609v53.117c0 9.14-7.438 16.582-16.579 16.582H30.516v68.883h56.093c9.141 0 16.579 7.438 16.579 16.582zM266.25 30.117h.004zm0 0" />
+  </svg>
+)

package/src/components/icons/krone_icons/Flag.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Flag = (props) => (
+    <svg viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M3.2 1C3.2 0.447 2.753 0 2.2 0S1.2 0.447 1.2 1V2.4 9.6 12.8 19.2c0 0.707 0.573 1.28 1.28 1.28s1.28-0.573 1.28-1.28v-5.12l2.57-0.644c1.644-0.412 3.384-0.22 4.902 0.536 1.768 0.884 3.82 0.992 5.668 0.296l1.388-0.52c0.5-0.188 0.832-0.664 0.832-1.196V4.332c0-0.92-0.968-1.52-1.792-1.108l-0.384 0.192c-1.852 0.928-4.032 0.928-5.884 0-1.404-0.704-3.016-0.88-4.54-0.5L3.2 1.92V1z"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Home.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const Home = (props) => (
+    <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_167_6304"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_167_6304)">
+      <path
+        d="M22 22L18 18H8C7.45 18 6.97917 17.8042 6.5875 17.4125C6.19583 17.0208 6 16.55 6 16V15H17C17.55 15 18.0208 14.8042 18.4125 14.4125C18.8042 14.0208 19 13.55 19 13V6H20C20.55 6 21.0208 6.19583 21.4125 6.5875C21.8042 6.97917 22 7.45 22 8V22ZM4 12.175L5.175 11H15V4H4V12.175ZM2 17V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H15C15.55 2 16.0208 2.19583 16.4125 2.5875C16.8042 2.97917 17 3.45 17 4V11C17 11.55 16.8042 12.0208 16.4125 12.4125C16.0208 12.8042 15.55 13 15 13H6L2 17Z"
+      />
+    </g>
+  </svg>
+)

package/src/components/icons/krone_icons/Italic.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Italic = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
+    </svg>
+);

package/src/components/icons/krone_icons/KroneIcons.docs.mdx

@@ -0,0 +1,21 @@
+---
+description: An SVG library for icon components.
+labels: ['icons']
+---
+
+### Component usage
+
+```js
+import { ArrowDropdown } from '@logora/debate.icons.krone_icons';
+```
+
+```js
+<ArrowDropdown width={30} height={30} />
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>height</font> | <font color="#397300">integer</font> | &cross; | - | <font color="grey">*icon height in pixels*</font> |
+| <font color='#4646c6'>width</font> | <font color="#397300">integer</font> | &cross; | - | <font color="grey">*icon width in pixels*</font> |
+| <font color='#4646c6'>className</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*icon extra classname*</font> |

package/src/components/icons/krone_icons/KroneIcons.stories.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Alarm } from "./Alarm"
+import { Announcement } from "./Announcement"
+import { Arrow } from "./Arrow"
+import { Blockquote } from "./Blockquote"
+import { Bold } from "./Bold"
+import { Camera } from "./Camera"
+import { Chat } from "./Chat"
+import { CheckBox } from "./CheckBox"
+import { Check } from "./Check"
+import { Clap } from "./Clap"
+import { Clock } from "./Clock"
+import { Close } from "./Close"
+import { Code } from "./Code"
+import { Community } from "./Community"
+import { Crown } from "./Crown"
+import { Document } from './Document'
+import { Downvote } from "./Downvote"
+import { Ellipsis } from "./Ellipsis"
+import { ExpertBadge } from "./ExpertBadge"
+import { Facebook } from "./Facebook"
+import { Home } from "./Home"
+import { Italic } from "./Italic"
+import { LightArrow } from './LightArrow'
+import { Link } from "./Link"
+import { Login } from "./Login"
+import { Logora } from "./Logora"
+import { Mail } from "./Mail"
+import { MobileClose } from "./MobileClose"
+import { MobileMenu } from "./MobileMenu"
+import { Next } from "./Next"
+import { OpenBlank } from "./OpenBlank"
+import { OrderedList } from "./OrderedList"
+import { Point } from "./Point"
+import { Question } from "./Question"
+import { Refresh } from "./Refresh"
+import { Reply } from "./Reply"
+import { Search } from "./Search"
+import { Send } from "./Send"
+import { Share } from "./Share"
+import { SmallArrow } from "./SmallArrow"
+import { Source } from "./Source"
+import { Suggestion } from './Suggestion';
+import { Twitter } from "./Twitter"
+import { Underline } from "./Underline"
+import { Upvote } from "./Upvote";
+import { User } from "./User"
+import { Votebox } from './Votebox';
+import { Versus } from './Versus';
+import { Flag } from './Flag';
+import { CheckCircle } from './CheckCircle';
+import { MinusCircle } from './MinusCircle';
+import { PauseCircle } from './PauseCircle';
+
+const meta = {
+    title: 'Icons/Krone Icons',
+    component: () => null,
+    args: {},
+    argTypes: {},
+    render: () => <KroneIconsLibrary />
+};
+
+export default meta;
+
+export const KroneIconsLibrary = () => {
+    return (
+        <>
+        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap" }}>
+            <Alarm width={50} height={50} data-testid={"alarm-icon"} style={{ margin: "15px", fill: "#000000" }} />
+            <Announcement width={50} height={50} data-testid={"announcement-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Arrow width={50} height={50} data-testid={"arrow-icon"} style={{ margin: "15px" }} />
+            <Blockquote width={50} height={50} data-testid={"blockquote-icon"} style={{ margin: "15px" }} />
+            <Bold width={50} height={50} data-testid={"bold-icon"} style={{ margin: "15px" }} />
+            <Camera width={50} height={50} data-testid={"camera-icon"} style={{ margin: "15px" }} />
+            <Chat width={50} height={50} data-testid={"chat-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <CheckBox width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Check width={50} height={50} data-testid={"check-icon"} style={{ margin: "15px" }} />
+            <Clap width={50} height={50} data-testid={"clap-icon"} style={{ margin: "15px", fill: "#000"  }} />
+            <Clock width={50} height={50} data-testid={"clock-icon"} style={{ margin: "15px" }} />
+            <Close width={50} height={50} data-testid={"close-icon"} style={{ margin: "15px" }} />
+            <Code width={50} height={50} data-testid={"code-icon"} style={{ margin: "15px" }} />
+            <Community width={50} height={50} data-testid={"community-icon"} style={{ margin: "15px" }} />
+            <Crown width={50} height={50} data-testid={"crown-icon"} style={{ margin: "15px" }} />
+            <Document width={50} height={50} data-testid={"document-icon"} style={{ margin: "15px" }} />
+            <Downvote width={50} height={50} data-testid={"downvote-icon"} style={{ margin: "15px" }} />
+            <Ellipsis width={50} height={50} data-testid={"ellipsis-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <ExpertBadge width={50} height={50} data-testid={"expert-badge-icon"} style={{ margin: "15px" }} />
+            <Facebook width={50} height={50} data-testid={"facebook-icon"} style={{ margin: "15px" }} />
+            <Home width={50} height={50} data-testid={"home-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Italic width={50} height={50} data-testid={"italic-icon"} style={{ margin: "15px" }} />
+            <LightArrow width={50} height={50} data-testid={"light-arrow-icon"} style={{ margin: "15px" }} />
+            <Link width={50} height={50} data-testid={"link-icon"} style={{ margin: "15px" }} />
+            <Login width={50} height={50} data-testid={"login-icon"} style={{ margin: "15px" }} />
+            <Logora width={50} height={50} data-testid={"logora-icon"} style={{ margin: "15px" }} />
+            <Mail width={50} height={50} data-testid={"mail-icon"} style={{ margin: "15px" }} />
+            <MobileClose width={50} height={50} data-testid={"mobile-close-icon"} style={{ margin: "15px" }} />
+            <MobileMenu width={50} height={50} data-testid={"mobile-menu-icon"} style={{ margin: "15px" }} />
+            <Next width={50} height={50} data-testid={"next-icon"} style={{ margin: "15px" }} />
+            <OpenBlank width={50} height={50} data-testid={"open-blank-icon"} style={{ margin: "15px" }} />
+            <OrderedList width={50} height={50} data-testid={"ordered-list-icon"} style={{ margin: "15px" }} />
+            <Point width={50} height={50} data-testid={"point-icon"} style={{ margin: "15px" }} />
+            <Question width={50} height={50} data-testid={"question-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Refresh width={50} height={50} data-testid={"refresh-icon"} style={{ margin: "15px" }} />
+            <Reply width={50} height={50} data-testid={"reply-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Search width={50} height={50} data-testid={"search-icon"} style={{ margin: "15px" }} />
+            <Send width={50} height={50} data-testid={"send-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Share width={50} height={50} data-testid={"share-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <SmallArrow width={50} height={50} data-testid={"small-arrow-icon"} style={{ margin: "15px" }} />
+            <Source width={50} height={50} data-testid={"source-icon"} style={{ margin: "15px" }} />
+            <Suggestion width={50} height={50} data-testid={"suggestion-icon"} style={{ margin: "15px", fill: "#000"}} />
+            <Twitter width={50} height={50} data-testid={"twitter-icon"} style={{ margin: "15px" }} />
+            <Underline width={50} height={50} data-testid={"underline-icon"} style={{ margin: "15px" }} />
+            <Upvote width={50} height={50} data-testid={"upvote-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <User width={50} height={50} data-testid={"user-icon"} style={{ margin: "15px" }} />
+            <Votebox width={50} height={50} data-testid={"vote-box-icon"} style={{ margin: "15px", fill: "#000" }} />
+            <Versus width={50} height={50} data-testid={"versus-icon"} style={{ margin: "15px" }} />
+            <Flag width={50} height={50} data-testid={"flag-icon"} style={{ margin: "15px" }} />
+            <CheckCircle width={50} height={50} data-testid={"circlecheck-icon"} style={{ margin: "15px" }} />
+            <MinusCircle width={50} height={50} data-testid={"MinusCircle-icon"} style={{ margin: "15px" }} />
+            <PauseCircle width={50} height={50} data-testid={"PauseCircle-icon"} style={{ margin: "15px" }} />
+        </div>
+        </>
+    )
+};

package/src/components/icons/krone_icons/KroneIcons.test.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { KroneIconsLibrary } from "./KroneIcons.stories";
+import { render, screen } from '@testing-library/react';
+
+describe('Krone icons', () => {
+    it ('renders KroneIconsLibrary component', () => {  
+        render(<KroneIconsLibrary />);
+
+        const arrow = screen.getByTestId("arrow-icon");
+        expect(arrow).toBeTruthy();
+        
+        const checkbox = screen.getByTestId("checkbox-icon");
+        expect(checkbox).toBeTruthy();
+    })
+});

package/src/components/icons/krone_icons/LightArrow.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const LightArrow = (props) => (
+    <svg viewBox="0 0 50 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M2.449.112C1.543.343.729 1.028.303 1.917c-.235.488-.26.619-.261 1.333 0 .722.024.843.274 1.375.264.56.756 1.064 12.479 12.792L25 29.625l12.205-12.208C48.928 5.689 49.42 5.185 49.684 4.625c.25-.532.274-.653.274-1.375-.001-.714-.026-.845-.26-1.333C48.914.28 47.047-.418 45.386.305c-.477.208-1.173.884-10.448 10.145L25 20.373l-9.937-9.923C5.683 1.085 5.095.515 4.599.299 3.972.025 3.09-.051 2.449.112"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Link.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Link = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path d="m13.845 17.267-3.262 3.262a5.028 5.028 0 0 1-7.111-7.109l3.262-3.265a1 1 0 0 0-1.415-1.414l-3.261 3.265A7.027 7.027 0 0 0 12 21.943l3.262-3.262a1 1 0 0 0-1.414-1.414ZM21.944 2.061A6.979 6.979 0 0 0 16.975 0a6.983 6.983 0 0 0-4.968 2.057L8.74 5.32a1 1 0 0 0 1.414 1.415l3.265-3.262A4.993 4.993 0 0 1 16.973 2a5.028 5.028 0 0 1 3.554 8.583l-3.262 3.262a1 1 0 1 0 1.415 1.415L21.942 12a7.037 7.037 0 0 0 .002-9.939Z" />
+    <path d="m14.293 8.293-6 6a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0-1.414-1.414Z" />
+  </svg>
+)

package/src/components/icons/krone_icons/Login.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Login = (props) => (
+    // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    //     <path d="M7,22H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2H7A1,1,0,0,0,7,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H7a1,1,0,0,0,0-2Z"/>
+    //     <path d="M18.538,18.707l4.587-4.586a3.007,3.007,0,0,0,0-4.242L18.538,5.293a1,1,0,0,0-1.414,1.414L21.416,11H6a1,1,0,0,0,0,2H21.417l-4.293,4.293a1,1,0,1,0,1.414,1.414Z"/>
+    // </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" fill="none" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+    </svg>
+)

package/src/components/icons/krone_icons/Logora.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Logora = (props) => (
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" preserveAspectRatio="xMidYMid meet" {...props}>
+        <g transform="translate(0.000000,144.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+            <path d="M574 1415 c-458 -105 -694 -594 -488 -1011 89 -180 256 -317 454
+            -371 89 -24 271 -24 360 0 247 68 439 260 507 507 24 89 24 271 0 360 -67 245
+            -260 439 -502 506 -82 22 -254 27 -331 9z m318 -24 c309 -79 518 -350 518
+            -671 0 -388 -302 -690 -690 -690 -388 0 -690 302 -690 690 0 319 208 590 514
+            670 98 26 249 26 348 1z"/>
+            <path d="M1135 1054 c-99 -34 -98 -34 -92 -40 6 -6 197 54 197 62 0 9 -39 1 -105 -22z"/>
+            <path d="M739 1015 c-85 -39 -154 -55 -236 -55 -66 0 -85 -9 -113 -55 -18 -29
+            -22 -47 -18 -91 5 -60 35 -102 89 -124 34 -15 35 -16 9 -122 -11 -46 -20 -104
+            -20 -130 l0 -48 65 0 65 0 0 103 c0 56 5 119 11 140 10 38 11 39 47 33 20 -4
+            71 -18 114 -33 l76 -26 30 21 c46 33 66 85 70 183 5 101 -9 159 -46 199 -40
+            43 -59 43 -143 5z m138 -47 c21 -41 29 -178 14 -235 -15 -53 -41 -86 -63 -78
+            -41 16 -69 163 -49 255 20 91 66 118 98 58z"/>
+            <path d="M357 944 c-32 -18 -89 -125 -69 -132 7 -2 12 -10 12 -17 0 -21 59
+            -85 78 -85 12 0 11 5 -7 24 -25 26 -38 96 -27 140 3 13 20 38 37 55 33 33 22 40 -24 15z"/>
+            <path d="M1088 873 c28 -2 76 -2 105 0 28 2 5 3 -53 3 -58 0 -81 -1 -52 -3z"/>
+            <path d="M1046 731 c8 -8 173 -61 190 -61 25 0 -22 21 -97 44 -94 28 -108 31 -93 17z"/>
+        </g>
+    </svg>
+)

package/src/components/icons/krone_icons/Mail.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Mail = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path d="M19 1H5a5.006 5.006 0 0 0-5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6a5.006 5.006 0 0 0-5-5ZM5 3h14a3 3 0 0 1 2.78 1.887l-7.658 7.659a3.007 3.007 0 0 1-4.244 0L2.22 4.887A3 3 0 0 1 5 3Zm14 18H5a3 3 0 0 1-3-3V7.5l6.464 6.46a5.007 5.007 0 0 0 7.072 0L22 7.5V18a3 3 0 0 1-3 3Z" />
+  </svg>
+)

package/src/components/icons/krone_icons/MinusCircle.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const MinusCircle = (props) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="8" y1="12" x2="16" y2="12" />
+  </svg>
+);

package/src/components/icons/krone_icons/MobileClose.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const MobileClose = (props) => (
+    <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="20" cy="20" r="20" />
+        <path fill="#FFF" d="M26.0001 14C25.8125 13.8125 25.5582 13.7072 25.2931 13.7072C25.0279 13.7072 24.7736 13.8125 24.5861 14L20.0001 18.586L15.4141 14C15.2265 13.8125 14.9722 13.7072 14.7071 13.7072C14.4419 13.7072 14.1876 13.8125 14.0001 14C13.8126 14.1875 13.7073 14.4418 13.7073 14.707C13.7073 14.9722 13.8126 15.2265 14.0001 15.414L18.5861 20L14.0001 24.586C13.8126 24.7735 13.7073 25.0278 13.7073 25.293C13.7073 25.5582 13.8126 25.8125 14.0001 26C14.1876 26.1875 14.4419 26.2928 14.7071 26.2928C14.9722 26.2928 15.2265 26.1875 15.4141 26L20.0001 21.414L24.5861 26C24.7736 26.1875 25.0279 26.2928 25.2931 26.2928C25.5582 26.2928 25.8125 26.1875 26.0001 26C26.1875 25.8125 26.2928 25.5582 26.2928 25.293C26.2928 25.0278 26.1875 24.7735 26.0001 24.586L21.4141 20L26.0001 15.414C26.1875 15.2265 26.2928 14.9722 26.2928 14.707C26.2928 14.4418 26.1875 14.1875 26.0001 14V14Z" />
+    </svg>
+)

package/src/components/icons/krone_icons/MobileMenu.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const MobileMenu = (props) => (
+    <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="20" cy="20" r="20"/>
+        <path fill="#FFF" d="M29.1667 19.1667H10.8333C10.3731 19.1667 10 19.5398 10 20C10 20.4602 10.3731 20.8333 10.8333 20.8333H29.1667C29.6269 20.8333 30 20.4602 30 20C30 19.5398 29.6269 19.1667 29.1667 19.1667Z"/>
+        <path fill="#FFF" d="M29.1667 13.3333H10.8333C10.3731 13.3333 10 13.7064 10 14.1667C10 14.6269 10.3731 15 10.8333 15H29.1667C29.6269 15 30 14.6269 30 14.1667C30 13.7064 29.6269 13.3333 29.1667 13.3333Z"/>
+        <path fill="#FFF" d="M29.1667 25H10.8333C10.3731 25 10 25.3731 10 25.8333C10 26.2936 10.3731 26.6667 10.8333 26.6667H29.1667C29.6269 26.6667 30 26.2936 30 25.8333C30 25.3731 29.6269 25 29.1667 25Z"/>
+    </svg>
+)

package/src/components/icons/krone_icons/Next.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Next = (props) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props} >
+        <path d="m12 0c-6.617 0-12 5.383-12 12s5.383 12 12 12 12-5.383 12-12-5.383-12-12-12z" />
+        <path d="m12 0c-6.617 0-12 5.383-12 12s5.383 12 12 12z" />
+        <path d="m12 18.25v-3.25h-5.75c-.689 0-1.25-.561-1.25-1.25v-3.5c0-.689.561-1.25 1.25-1.25h5.75v-3.25c0-.66.795-.999 1.27-.541l6.5 6.25c.147.142.23.337.23.541s-.083.399-.23.541l-6.5 6.25c-.475.456-1.27.12-1.27-.541z" fill="#fff"/>
+        <path d="m5 12h15c0 .204-.083.399-.23.541l-6.5 6.25c-.15.144-.334.209-.514.209-.385 0-.756-.298-.756-.75v-3.25h-5.75c-.689 0-1.25-.561-1.25-1.25z" fill="#dedede"/>
+    </svg>
+)

package/src/components/icons/krone_icons/OpenBlank.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const OpenBlank = (props) => (
+    <svg 
+        viewBox="0 0 15 15" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path 
+            d="M5.44832 1.14343H1.99902C1.44674 1.14343 0.999023 1.59115 0.999023 2.14343V12.8634C0.999023 13.4157 1.44674 13.8634 1.99902 13.8634H12.719C13.2713 13.8634 13.719 13.4157 13.719 12.8634V9.14453M13.719 1.14343V6.67248M13.719 1.14343L7.36636 7.49609M13.719 1.14343H8.17291" 
+            stroke="black"
+        />
+    </svg>
+)

package/src/components/icons/krone_icons/OrderedList.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const OrderedList = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
+    </svg>
+);

package/src/components/icons/krone_icons/PauseCircle.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const PauseCircle = (props) => (
+    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}
+    >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="10" x2="10" y1="15" y2="9" />
+        <line x1="14" x2="14" y1="15" y2="9" />
+    </svg>
+);

package/src/components/icons/krone_icons/Point.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Point = (props) => (
+    <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="8.5" cy="8.5" r="8.1" stroke="black" strokeWidth=".8px" fill="transparent"/>
+        <path d="M9.39386 5.14357C9.35492 5.48312 9.34657 5.8252 9.36599 6.16612C9.22118 5.91698 9.11124 5.64788 9.04014 5.36621C7.33187 6.49721 6.08851 8.21955 5.54279 10.2112C4.91626 11.0717 4.3983 12.0085 4 13C5.78647 10.0043 8.18819 7.4322 11.0424 5.45904C9.32015 7.07048 7.68966 8.77876 6.15951 10.5802C8.1645 10.1999 9.9731 9.11694 11.2679 7.52261C10.7667 7.47603 10.2627 7.49314 9.76429 7.57172C10.3295 7.3098 10.9407 7.16331 11.5618 7.13818C11.7428 6.8902 11.9084 6.63092 12.0616 6.36625C11.6648 6.40301 11.2722 6.47472 10.8865 6.58329C11.3028 6.32961 11.7581 6.1507 12.2343 6.05216C12.5727 5.40412 12.8302 4.71394 13 4C11.7275 4.0998 10.4939 4.49015 9.39386 5.14357Z" fill="black" />
+    </svg>
+)

package/src/components/icons/krone_icons/Question.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const Question = (props) => (
+    <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_182_6044"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="black" />
+    </mask>
+    <g mask="url(#mask0_182_6044)">
+      <path
+        d="M11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18ZM11.05 14.15H12.9C12.9 13.6 12.9625 13.1667 13.0875 12.85C13.2125 12.5333 13.5667 12.1 14.15 11.55C14.5833 11.1167 14.925 10.7042 15.175 10.3125C15.425 9.92083 15.55 9.45 15.55 8.9C15.55 7.96667 15.2083 7.25 14.525 6.75C13.8417 6.25 13.0333 6 12.1 6C11.15 6 10.3792 6.25 9.7875 6.75C9.19583 7.25 8.78333 7.85 8.55 8.55L10.2 9.2C10.2833 8.9 10.4708 8.575 10.7625 8.225C11.0542 7.875 11.5 7.7 12.1 7.7C12.6333 7.7 13.0333 7.84583 13.3 8.1375C13.5667 8.42917 13.7 8.75 13.7 9.1C13.7 9.43333 13.6 9.74583 13.4 10.0375C13.2 10.3292 12.95 10.6 12.65 10.85C11.9167 11.5 11.4667 11.9917 11.3 12.325C11.1333 12.6583 11.05 13.2667 11.05 14.15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+      />
+    </g>
+  </svg>
+)