@logora/debate 0.1.0

package/src/components/icons/bild_icons/Share.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Share = (props) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="black"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M0 15.333v-4.666a6.089 6.089 0 0 1 1.714-4.241 5.775 5.775 0 0 1 4.13-1.76h3.137V3.61c0-.263.076-.521.218-.74.143-.22.346-.39.583-.491a1.267 1.267 0 0 1 1.415.289l3.819 3.919c.365.375.57.884.57 1.414 0 .53-.205 1.039-.57 1.414l-3.819 3.92a1.267 1.267 0 0 1-1.415.289c-.237-.102-.44-.273-.583-.492a1.359 1.359 0 0 1-.218-.74v-1.058H5.195a3.85 3.85 0 0 0-2.754 1.173 4.06 4.06 0 0 0-1.142 2.827.676.676 0 0 1-.19.472.641.641 0 0 1-.919 0 .676.676 0 0 1-.19-.472Zm10.28-10a.676.676 0 0 1-.191.472.64.64 0 0 1-.46.195H5.845a4.492 4.492 0 0 0-3.212 1.368 4.736 4.736 0 0 0-1.333 3.299v1.142a5.196 5.196 0 0 1 1.758-1.336A5.07 5.07 0 0 1 5.195 10H9.63a.64.64 0 0 1 .459.195c.122.125.19.295.19.472v1.724l3.818-3.92a.676.676 0 0 0 0-.942l-3.818-3.92v1.724Z"
+    />
+  </svg>
+)

package/src/components/icons/bild_icons/SmallArrow.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const SmallArrow = (props) => (
+    <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 0 24 24"
+        {...props}
+    >
+        <path d="M6.414,9H17.586a1,1,0,0,1,.707,1.707l-5.586,5.586a1,1,0,0,1-1.414,0L5.707,10.707A1,1,0,0,1,6.414,9Z" />
+    </svg>
+)

package/src/components/icons/bild_icons/Source.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Source = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M22.2,2.163a4.992,4.992,0,0,0-4.1-1.081l-3.822.694A4,4,0,0,0,12,3.065,4,4,0,0,0,9.716,1.776L5.9,1.082A5,5,0,0,0,0,6V16.793a5,5,0,0,0,4.105,4.919l6.286,1.143a9,9,0,0,0,3.218,0L19.9,21.712A5,5,0,0,0,24,16.793V6A4.983,4.983,0,0,0,22.2,2.163ZM11,20.928c-.084-.012-.168-.026-.252-.041L4.463,19.745A3,3,0,0,1,2,16.793V6A3,3,0,0,1,5,3a3.081,3.081,0,0,1,.54.049l3.82.7A2,2,0,0,1,11,5.712Zm11-4.135a3,3,0,0,1-2.463,2.952l-6.285,1.142c-.084.015-.168.029-.252.041V5.712a2,2,0,0,1,1.642-1.968l3.821-.7A3,3,0,0,1,22,6Z"/>
+    </svg>
+)

package/src/components/icons/bild_icons/Suggestion.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Suggestion = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path fill="none" strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+    </svg>
+)

package/src/components/icons/bild_icons/Twitter.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export const Twitter = (props) => (
+  <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+    <path d="M29.1169 21.1716L47.3303 0H43.0143L27.1997 18.383L14.5685 0H0L19.1008 27.7983L0 50H4.31623L21.0169 30.5869L34.3563 50H48.9249L29.1169 21.1716ZM5.87143 3.2492H12.5009L43.0164 46.8986H36.3869L5.87143 3.2492Z" fill="black"/>
+  </svg>
+)

package/src/components/icons/bild_icons/Underline.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Underline = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
+    </svg>
+);

package/src/components/icons/bild_icons/Upvote.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Upvote = (props) => (
+    <svg viewBox="0 0 27 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M24.7554 8.0429C24.2457 7.47999 23.6157 7.02861 22.9081 6.71931C22.2004 6.41002 21.4317 6.25003 20.654 6.25019H16.3177L16.683 4.12415C16.8122 3.37546 16.6563 2.60721 16.2437 1.9595C15.831 1.3118 15.1892 0.827807 14.4352 0.595806C13.6812 0.363805 12.8652 0.399253 12.1362 0.695685C11.4072 0.992116 10.8137 1.52978 10.464 2.21061L8.38333 6.25019H5.43525C3.99426 6.25184 2.61279 6.80111 1.59386 7.7775C0.574922 8.7539 0.00172608 10.0777 0 11.4585L0 16.6669C0.00172608 18.0477 0.574922 19.3715 1.59386 20.3479C2.61279 21.3243 3.99426 21.8735 5.43525 21.8752H19.893C21.2013 21.8701 22.4641 21.4151 23.4518 20.5931C24.4395 19.771 25.0865 18.6366 25.275 17.396L26.0414 12.1877C26.1493 11.4489 26.0903 10.6965 25.8685 9.98137C25.6466 9.26628 25.267 8.60521 24.7554 8.0429ZM2.1741 16.6669V11.4585C2.1741 10.6297 2.51769 9.83487 3.12927 9.24882C3.74086 8.66276 4.57034 8.33352 5.43525 8.33352H7.60935V19.7919H5.43525C4.57034 19.7919 3.74086 19.4626 3.12927 18.8766C2.51769 18.2905 2.1741 17.4957 2.1741 16.6669ZM23.8836 11.895L23.1161 17.1033C23.0039 17.8471 22.6169 18.5275 22.0254 19.0209C21.4339 19.5143 20.6772 19.7879 19.893 19.7919H9.78346V8.05644C9.8859 7.97092 9.97071 7.86774 10.0335 7.75227L12.413 3.13248C12.5023 2.97824 12.6284 2.84649 12.7811 2.74807C12.9338 2.64964 13.1088 2.58734 13.2915 2.56629C13.4742 2.54524 13.6595 2.56605 13.8322 2.62699C14.0049 2.68793 14.1601 2.78728 14.2849 2.91686C14.3917 3.03586 14.4698 3.17599 14.5136 3.32724C14.5574 3.47849 14.5658 3.63713 14.5382 3.79186L13.9643 7.12519C13.9391 7.27413 13.9479 7.42653 13.9903 7.57186C14.0326 7.71719 14.1073 7.85197 14.2094 7.96689C14.3114 8.0818 14.4383 8.1741 14.5812 8.23741C14.7241 8.30071 14.8797 8.33351 15.0372 8.33352H20.654C21.1207 8.33346 21.5821 8.42943 22.0069 8.61493C22.4316 8.80043 22.8098 9.07114 23.116 9.40877C23.4222 9.7464 23.6492 10.1431 23.7816 10.572C23.914 11.0009 23.9488 11.4521 23.8836 11.895Z" />
+    </svg>
+)

package/src/components/icons/bild_icons/User.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const User = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M7.5,13A4.5,4.5,0,1,1,12,8.5,4.505,4.505,0,0,1,7.5,13Zm0-7A2.5,2.5,0,1,0,10,8.5,2.5,2.5,0,0,0,7.5,6ZM15,23v-.5a7.5,7.5,0,0,0-15,0V23a1,1,0,0,0,2,0v-.5a5.5,5.5,0,0,1,11,0V23a1,1,0,0,0,2,0Zm9-5a7,7,0,0,0-11.667-5.217,1,1,0,1,0,1.334,1.49A5,5,0,0,1,22,18a1,1,0,0,0,2,0ZM17.5,9A4.5,4.5,0,1,1,22,4.5,4.505,4.505,0,0,1,17.5,9Zm0-7A2.5,2.5,0,1,0,20,4.5,2.5,2.5,0,0,0,17.5,2Z"/>
+    </svg>
+)

package/src/components/icons/bild_icons/Versus.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Versus = (props) => (
+    <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path 
+            d="M14.8686 11L11.8386 18H10.2386L7.21859 11H8.96859L11.0986 16L13.2586 11H14.8686ZM17.753 18.12C17.1997 18.12 16.663 18.0467 16.143 17.9C15.6297 17.7467 15.2164 17.55 14.903 17.31L15.453 16.09C15.753 16.31 16.1097 16.4867 16.523 16.62C16.9364 16.7533 17.3497 16.82 17.763 16.82C18.223 16.82 18.563 16.7533 18.783 16.62C19.003 16.48 19.113 16.2967 19.113 16.07C19.113 15.9033 19.0464 15.7667 18.913 15.66C18.7864 15.5467 18.6197 15.4567 18.413 15.39C18.213 15.3233 17.9397 15.25 17.593 15.17C17.0597 15.0433 16.623 14.9167 16.283 14.79C15.943 14.6633 15.6497 14.46 15.403 14.18C15.163 13.9 15.043 13.5267 15.043 13.06C15.043 12.6533 15.153 12.2867 15.373 11.96C15.593 11.6267 15.923 11.3633 16.363 11.17C16.8097 10.9767 17.353 10.88 17.993 10.88C18.4397 10.88 18.8764 10.9333 19.303 11.04C19.7297 11.1467 20.103 11.3 20.423 11.5L19.923 12.73C19.2764 12.3633 18.6297 12.18 17.983 12.18C17.5297 12.18 17.193 12.2533 16.973 12.4C16.7597 12.5467 16.653 12.74 16.653 12.98C16.653 13.22 16.7764 13.4 17.023 13.52C17.2764 13.6333 17.6597 13.7467 18.173 13.86C18.7064 13.9867 19.143 14.1133 19.483 14.24C19.823 14.3667 20.113 14.5667 20.353 14.84C20.5997 15.1133 20.723 15.4833 20.723 15.95C20.723 16.35 20.6097 16.7167 20.383 17.05C20.163 17.3767 19.8297 17.6367 19.383 17.83C18.9364 18.0233 18.393 18.12 17.753 18.12Z" 
+            fill="#FFF"
+        />
+    </svg>
+
+)

package/src/components/icons/bild_icons/Votebox.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Votebox = (props) => (
+    <svg viewBox="0 0 20 24" fill="black" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12.353.956c-.221.062-.443.2-.615.38A836.4 836.4 0 0 0 7.03 6.93c-.424.527-.498 1.273-.187 1.908.047.096.267.39.489.653.222.262.403.487.403.497 0 .011-1.122.025-2.494.03l-2.493.01-.175.093c-.328.174-.585.492-.73.901-.062.173-.072.309-.084 1.193-.019 1.355.044 1.641.466 2.097l.188.203.01 4.196c.009 4.192.01 4.197.084 4.392.114.296.18.41.34.583.183.2.348.305.589.375.17.049.891.054 6.978.046l6.789-.009.202-.1c.249-.122.519-.391.639-.636.198-.404.19-.215.191-4.702v-4.143l.185-.185c.203-.203.346-.462.427-.774.065-.25.076-2.068.014-2.365-.095-.455-.371-.847-.737-1.046l-.221-.119-2.438-.018-2.438-.017 1.488-1.768a99.013 99.013 0 0 0 1.575-1.898c.324-.482.365-1.205.098-1.75-.094-.192-2.518-3.118-2.774-3.348-.282-.254-.726-.368-1.061-.273m1.555 3.046 1.141 1.36-.078.098c-.043.054-.921 1.1-1.951 2.324l-1.872 2.226H9.636l-.815-.969c-.449-.534-.818-.987-.82-1.008-.002-.022 1.036-1.277 2.307-2.791l2.31-2.751.074.076c.042.041.589.687 1.216 1.435m3.662 8.353v.77H3.08v-1.54h14.49v.77m-.665 6.265v3.92H3.745V14.7h13.16v3.92m-8.823-1.809a.683.683 0 0 0-.259.251c-.095.153-.105.199-.105.453 0 .196.018.315.058.388.06.109 1.713 2.09 1.966 2.357.08.084.196.175.258.201.175.076.46.061.615-.03.16-.095 2.07-2.357 2.165-2.563.21-.461-.071-1.067-.522-1.127-.29-.039-.375.033-1.214 1.033-.594.708-.778.906-.808.872-.022-.024-.368-.436-.77-.915-.762-.909-.862-.998-1.122-1a.705.705 0 0 0-.262.08"/>
+    </svg>
+)

package/src/components/icons/bild_icons/index.js

@@ -0,0 +1,52 @@
+export { Alarm } from "./Alarm"
+export { Announcement } from "./Announcement"
+export { Arrow } from "./Arrow"
+export { Blockquote } from "./Blockquote"
+export { Bold } from "./Bold"
+export { Camera } from "./Camera"
+export { Chat } from "./Chat"
+export { Checkbox } from "./Checkbox"
+export { Check } from "./Check"
+export { Clap } from "./Clap"
+export { Clock } from "./Clock"
+export { Close } from "./Close"
+export { Code } from "./Code"
+export { Community } from "./Community"
+export { Crown } from "./Crown"
+export { Document } from "./Document"
+export { Downvote } from "./Downvote"
+export { Ellipsis } from "./Ellipsis"
+export { ExpertBadge } from "./ExpertBadge"
+export { Facebook } from "./Facebook"
+export { Home } from "./Home"
+export { Italic } from "./Italic"
+export { LightArrow } from "./LightArrow"
+export { Link } from "./Link"
+export { Login } from "./Login"
+export { Logora } from "./Logora"
+export { Mail } from "./Mail"
+export { MobileClose } from "./MobileClose"
+export { MobileMenu } from "./MobileMenu"
+export { Next } from "./Next"
+export { OpenBlank } from "./OpenBlank"
+export { OrderedList } from "./OrderedList"
+export { Point } from "./Point"
+export { Question } from "./Question"
+export { Refresh } from "./Refresh"
+export { Reply } from "./Reply"
+export { Search } from "./Search"
+export { Send } from "./Send"
+export { Share } from "./Share"
+export { SmallArrow } from "./SmallArrow"
+export { Source } from "./Source"
+export { Suggestion } from './Suggestion';
+export { Twitter } from "./Twitter"
+export { Underline } from "./Underline"
+export { Upvote } from "./Upvote";
+export { User } from "./User"
+export { Votebox } from './Votebox';
+export { Versus } from'./Versus';
+export { CheckCircle } from './CheckCircle';
+export { MinusCircle} from './MinusCircle';
+export { Flag } from './Flag';
+export { PauseCircle} from './PauseCircle'

package/src/components/icons/hero_icons/Alarm.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Alarm = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+    </svg>
+)

package/src/components/icons/hero_icons/Announcement.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Announcement = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+    </svg>
+)

package/src/components/icons/hero_icons/Arrow.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Arrow = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+    </svg>
+)

package/src/components/icons/hero_icons/Blockquote.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Blockquote = (props) => (
+    <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_2638_46091)">
+            <path fillRule="evenodd" clipRule="evenodd" d="M12.3453 5L0.448582 25.3442C0.154563 25.847 -0.000268377 26.419 3.49207e-07 27.0015L0.00708538 42.353C0.00792118 44.1639 1.47622 45.6315 3.28717 45.6315H18.1241C19.9356 45.6315 21.4041 44.163 21.4041 42.3515V28.196C21.4041 26.3845 19.9356 24.916 18.1241 24.916H14.8619L24.2174 7.38399L12.3453 5ZM3.28009 27L13.995 8.67679L19.2469 9.7314L11.968 23.3718C10.8021 25.5567 12.3854 28.196 14.8619 28.196H18.1241V42.3515H3.28717L3.28009 27ZM38.128 5L26.2312 25.3442C25.9372 25.847 25.7824 26.419 25.7826 27.0015L25.7897 42.353C25.7906 44.1639 27.2589 45.6315 29.0698 45.6315H43.9067C45.7182 45.6315 47.1868 44.163 47.1868 42.3515V28.196C47.1868 26.3845 45.7182 24.916 43.9067 24.916H40.6445L50 7.38399L38.128 5ZM29.0627 27L39.7776 8.67679L45.0295 9.7314L37.7507 23.3718C36.5848 25.5567 38.168 28.196 40.6445 28.196H43.9067V42.3515H29.0698L29.0627 27Z" fill="black"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_2638_46091">
+                <rect width="50" height="50" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+);

package/src/components/icons/hero_icons/Bold.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Bold = (props) => (
+    <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M6 50V0H25.7223C30.4779 0 34.6633 1.20067 37.6975 3.8741C40.7891 6.59806 42.2681 10.4828 42.2681 14.9509C42.2681 18.4918 41.2416 21.7084 39.2331 24.1261C42.0547 26.6221 43.5983 30.2851 43.5983 34.5395C43.5983 39.2112 41.986 43.2345 38.683 46.0325C35.4551 48.7669 31.0032 50 25.9143 50H6ZM36.909 26.2531C35.9942 25.5003 34.9178 24.9049 33.6967 24.4871C34.8427 23.9746 35.8286 23.253 36.6342 22.3505C38.2523 20.5377 39.1431 17.9951 39.1431 14.9509C39.1431 7.43316 34.2526 3.125 25.7223 3.125H9.125V46.875H25.9143C35.1659 46.875 40.4733 42.3815 40.4733 34.5395C40.4733 31.0033 39.1967 28.1358 36.909 26.2531ZM23.123 34.9087H24.5113C25.4259 34.9087 25.7592 34.7534 25.8364 34.7074C25.8828 34.6283 26.0253 34.3089 26.0253 33.4542C26.0253 32.5995 25.8621 32.2765 25.8211 32.2174C25.7665 32.1788 25.4546 31.9997 24.5113 31.9997H23.123V34.9087ZM24.5113 38.0337C27.7209 38.0337 29.1503 36.6241 29.1503 33.4542C29.1503 30.3306 27.6746 28.8747 24.5113 28.8747H19.998V38.0337H24.5113ZM24.8535 15.2755C24.7387 15.2307 24.4423 15.1509 23.8164 15.1509H23.123V17.9341H23.7502C24.4299 17.9341 24.7389 17.8431 24.8505 17.7964C24.9011 17.6813 25.0128 17.3354 25.0128 16.5392C25.0128 15.7478 24.9045 15.3966 24.8535 15.2755ZM23.7502 21.0591C26.8209 21.0591 28.1378 19.7091 28.1378 16.5392C28.1378 13.3759 26.8474 12.0259 23.8164 12.0259H19.998V21.0591H23.7502Z" fill="black"/>
+    </svg> 
+);

package/src/components/icons/hero_icons/Camera.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Camera = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" />
+    </svg>
+)

package/src/components/icons/hero_icons/Chat.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Chat = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+    </svg>
+)

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Check = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    </svg>
+
+);

package/src/components/icons/hero_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/hero_icons/Checkbox.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Checkbox = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Clap = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Clock = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+)

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Close = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+
+)

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Code = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
+  </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Community = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Crown = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+    </svg>
+)

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Downvote = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384" />
+    </svg>
+
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Ellipsis = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const ExpertBadge = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+    </svg>
+)

package/src/components/icons/hero_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/hero_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/hero_icons/HeroIcons.docs.mdx

@@ -0,0 +1,19 @@
+---
+description: An SVG library for icon components.
+labels: ['icons']
+---
+
+### Component usage
+```js
+import { Votebox } from '@logora/debate.hero_icons';
+```
+```js
+<Votebox 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/hero_icons/HeroIcons.stories.jsx

@@ -0,0 +1,121 @@
+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 { 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 { CheckCircle } from './CheckCircle';
+import { MinusCircle } from './MinusCircle';
+import { Flag } from './Flag'
+import { PauseCircle } from './PauseCircle';
+
+const meta = {
+    title: 'Icons/Hero Icons',
+    component: () => null,
+    args: {},
+    argTypes: {},
+    render: () => <HeroIconsLibrary />
+};
+
+export default meta;
+
+export const HeroIconsLibrary = () => {
+    return (
+        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap" }}>
+            <Alarm width={50} height={50} data-testid={"alarm-icon"} style={{ margin: "15px" }} />
+            <Announcement width={50} height={50} data-testid={"announcement-icon"} style={{ margin: "15px" }} />
+            <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" }} />
+            <Check width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Checkbox width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Clap width={50} height={50} data-testid={"clap-icon"} style={{ margin: "15px" }} />
+            <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" }} />
+            <Downvote width={50} height={50} data-testid={"downvote-icon"} style={{ margin: "15px" }} />
+            <Ellipsis width={50} height={50} data-testid={"ellipsis-icon"} style={{ margin: "15px" }} />
+            <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" }} />
+            <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" }} />
+            <Refresh width={50} height={50} data-testid={"refresh-icon"} style={{ margin: "15px" }} />
+            <Reply width={50} height={50} data-testid={"reply-icon"} style={{ margin: "15px" }} />
+            <Search width={50} height={50} data-testid={"search-icon"} style={{ margin: "15px" }} />
+            <Send width={50} height={50} data-testid={"send-icon"} style={{ margin: "15px" }} />
+            <Share width={50} height={50} data-testid={"share-icon"} style={{ margin: "15px" }} />
+            <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" }} />
+            <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" }} />
+            <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" }} />
+            <Versus width={50} height={50} data-testid={"versus-icon"} style={{ margin: "15px" }} />
+            <CheckCircle width={50} height={50} data-testid={"CheckCircle-icon"} style={{ margin: "15px" }} />
+            <MinusCircle width={50} height={50} data-testid={"MinusCircle-icon"} style={{ margin: "15px" }} />
+            <Flag width={50} height={50} data-testid={"flag-icon"} style={{ margin: "15px" }} />
+            <PauseCircle width={50} height={50} data-testid={"PauseCircle-icon"} style={{ margin: "15px" }} />
+
+        </div>
+    )
+};

package/src/components/icons/hero_icons/HeroIcons.test.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { HeroIconsLibrary } from "./HeroIcons.stories";
+import { render, screen } from '@testing-library/react';
+
+describe('Hero icons', () => {
+    it ('renders HeroIconsLibrary component', () => {  
+        render(<HeroIconsLibrary />);
+
+        const versusIcon = screen.getByTestId("versus-icon");
+        expect(versusIcon).toBeTruthy();
+        
+        const alarmIcon = screen.getByTestId("alarm-icon");
+        expect(alarmIcon).toBeTruthy();
+    })
+});

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Home = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Italic = (props) => (
+    <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M17.8547 0H44.8742V11.4395H36.8078L27.2811 38.58H33.0719V50H6V38.58H14.0758L23.6088 11.3955H17.8547V0ZM21.0942 3.23952V8.15601H28.1778L16.3727 41.8195H9.23952V46.7605H29.8324V41.8195H22.7107L34.5116 8.20002H41.6347V3.23952H21.0942Z" fill="black"/>
+    </svg>
+);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const LightArrow = (props) => (
+    <svg viewBox="0 0 50 25" fill="black" 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/hero_icons/Link.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const Link = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+  </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Login = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="black" 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>
+)