@logora/debate 0.1.0

package/src/components/icons/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_icons/Question.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Question = (props) => (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="10" cy="10" r="9.25" />
+        <path fill="#FFF" d="M8.821 11.841C8.821 11.3903 8.92067 11.0177 9.12 10.723C9.328 10.4283 9.627 10.1033 10.017 9.748C10.303 9.488 10.511 9.27133 10.641 9.098C10.7797 8.916 10.849 8.71233 10.849 8.487C10.849 8.16633 10.719 7.915 10.459 7.733C10.2077 7.54233 9.86967 7.447 9.445 7.447C9.03767 7.447 8.67367 7.53367 8.353 7.707C8.041 7.87167 7.77667 8.10567 7.56 8.409L5.987 7.486C6.351 6.93133 6.84067 6.50233 7.456 6.199C8.08 5.89567 8.81667 5.744 9.666 5.744C10.6627 5.744 11.46 5.95633 12.058 6.381C12.6647 6.80567 12.968 7.395 12.968 8.149C12.968 8.50433 12.9073 8.81633 12.786 9.085C12.6733 9.35367 12.5303 9.58333 12.357 9.774C12.1923 9.956 11.9757 10.1683 11.707 10.411C11.3863 10.697 11.1523 10.9397 11.005 11.139C10.8577 11.3297 10.784 11.5637 10.784 11.841H8.821ZM9.809 15.104C9.45367 15.104 9.15467 14.9913 8.912 14.766C8.678 14.532 8.561 14.2503 8.561 13.921C8.561 13.5917 8.678 13.3187 8.912 13.102C9.146 12.8767 9.445 12.764 9.809 12.764C10.173 12.764 10.472 12.8767 10.706 13.102C10.94 13.3187 11.057 13.5917 11.057 13.921C11.057 14.2503 10.9357 14.532 10.693 14.766C10.459 14.9913 10.1643 15.104 9.809 15.104Z"/>
+    </svg>
+)

package/src/components/icons/regular_icons/Refresh.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Refresh = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M12,2a10.032,10.032,0,0,1,7.122,3H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.981,11.981,0,0,0,.05,10.9a1.007,1.007,0,0,0,1,1.1h0a.982.982,0,0,0,.989-.878A10.014,10.014,0,0,1,12,2Z"/><path d="M22.951,12a.982.982,0,0,0-.989.878A9.986,9.986,0,0,1,4.878,19H8a1,1,0,0,0,1-1H9a1,1,0,0,0-1-1H3.857A1.856,1.856,0,0,0,2,18.857V23a1,1,0,0,0,1,1H3a1,1,0,0,0,1-1V20.922A11.981,11.981,0,0,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1Z"/>
+    </svg>
+)

package/src/components/icons/regular_icons/RegularIcons.docs.mdx

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

@@ -0,0 +1,123 @@
+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/Regular Icons',
+    component: () => null,
+    args: {},
+    argTypes: {},
+    render: () => <RegularIconsLibrary />
+};
+
+export default meta;
+
+
+export const RegularIconsLibrary = () => {
+    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" }} />
+            <Checkbox width={50} height={50} data-testid={"checkbox-icon"} style={{ margin: "15px" }} />
+            <Check 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" }} />
+            <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" }} />
+            <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" }} />
+            <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/regular_icons/RegularIcons.test.jsx

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

package/src/components/icons/regular_icons/Reply.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Reply = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 26" {...props}>
+        <path d="M18.656.93,6.464,13.122A4.966,4.966,0,0,0,5,16.657V18a1,1,0,0,0,1,1H7.343a4.966,4.966,0,0,0,3.535-1.464L23.07,5.344a3.125,3.125,0,0,0,0-4.414A3.194,3.194,0,0,0,18.656.93Zm3,3L9.464,16.122A3.02,3.02,0,0,1,7.343,17H7v-.343a3.02,3.02,0,0,1,.878-2.121L20.07,2.344a1.148,1.148,0,0,1,1.586,0A1.123,1.123,0,0,1,21.656,3.93Z"/><path d="M23,8.979a1,1,0,0,0-1,1V15H18a3,3,0,0,0-3,3v4H5a3,3,0,0,1-3-3V5A3,3,0,0,1,5,2h9.042a1,1,0,0,0,0-2H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H16.343a4.968,4.968,0,0,0,3.536-1.464l2.656-2.658A4.968,4.968,0,0,0,24,16.343V9.979A1,1,0,0,0,23,8.979ZM18.465,21.122a2.975,2.975,0,0,1-1.465.8V18a1,1,0,0,1,1-1h3.925a3.016,3.016,0,0,1-.8,1.464Z"/>
+    </svg>
+)

package/src/components/icons/regular_icons/Search.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Search = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/>
+    </svg>
+)

package/src/components/icons/regular_icons/Send.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Send = (props) => (
+    <svg viewBox="0 0 97 84" {...props} xmlns="http://www.w3.org/2000/svg">
+        <path d="M93.3,47.5 L9.3,82.6 C4.2,84.7 -0.8,79.4 1.6,74.4 L15,47.1 L62.6,43.2 C64,43 64,41 62.6,40.8 L15,36.9 L1.6,9.6 C-0.8,4.6 4.2,-0.7 9.3,1.4 L93.4,36.5 C98.3,38.5 98.3,45.5 93.3,47.5 Z"></path>
+    </svg>
+)

package/src/components/icons/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_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/regular_icons/Versus.jsx

@@ -0,0 +1,9 @@
+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" 
+        />
+    </svg>
+)

package/src/components/icons/regular_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/regular_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 { Flag } from './Flag';
+export { CheckCircle } from './CheckCircle';
+export { MinusCircle} from './MinusCircle'
+export { PauseCircle} from './PauseCircle'

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Alarm = (props) => (
+    <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {...props} >
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1824 7.02718C30.1824 4.75938 27.9853 2.7027 25.3076 2.7027C22.6297 2.7027 20.4324 4.75947 20.4324 7.02718V7.98188L19.5326 8.30087C14.0527 10.2434 11.4527 15.5412 11.4527 22.1621V33.2881H10.1013C6.31513 33.2881 4.7027 35.2386 4.7027 36.6665V39.1892C4.7027 39.5726 4.85077 39.8397 5.06454 40.0283C5.29777 40.234 5.63116 40.3605 5.97297 40.3605H44.6419C44.9837 40.3605 45.3171 40.234 45.5503 40.0283C45.7641 39.8397 45.9122 39.5726 45.9122 39.1892V36.6665C45.9122 35.2394 44.3007 33.2881 40.5067 33.2881H39.1554V22.1621C39.1554 15.54 36.5612 10.2431 31.0823 8.30087L30.1824 7.98188V7.02718ZM25.3076 0C28.8726 0 32.2895 2.5279 32.8153 6.07549C39.1898 8.76985 41.8581 15.205 41.8581 22.1621V30.6622C45.6917 31.1043 48.6148 33.4207 48.6148 36.6665V39.1892C48.6148 41.6664 46.5347 43.0632 44.6419 43.0632H33.9924C33.0746 46.9546 29.5204 50 25.3038 50C21.086 50 17.5384 46.9535 16.6218 43.0632H5.97297C4.08013 43.0632 2 41.6664 2 39.1892V36.6665C2 33.4218 4.92152 31.1051 8.75 30.6624V22.1621C8.75 15.2038 11.4252 8.76952 17.7995 6.07548C18.3254 2.52784 21.7427 0 25.3076 0ZM25.3038 47.2973C27.992 47.2973 30.3318 45.4777 31.1804 43.0632H19.4335C20.2808 45.4785 22.6167 47.2973 25.3038 47.2973Z" />
+    </svg>
+)

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Announcement = (props) => (
+    <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle 
+            cx="12.5" 
+            cy="12.5" r="11.5" 
+            fill="none" 
+            stroke="#000" 
+        />
+        <path 
+            d="M10.884 7.1H14.046L13.519 14.869H11.411L10.884 7.1ZM12.465 19.136C12.0003 19.136 11.6093 18.9887 11.292 18.694C10.986 18.388 10.833 18.0197 10.833 17.589C10.833 17.1583 10.986 16.8013 11.292 16.518C11.598 16.2233 11.989 16.076 12.465 16.076C12.941 16.076 13.332 16.2233 13.638 16.518C13.944 16.8013 14.097 17.1583 14.097 17.589C14.097 18.0197 13.9383 18.388 13.621 18.694C13.315 18.9887 12.9297 19.136 12.465 19.136Z" 
+            fill="#000" 
+        />
+    </svg>
+)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Arrow = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M19,11H9l3.29-3.29a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0l-4.29,4.3A2,2,0,0,0,6,12H6a2,2,0,0,0,.59,1.4l4.29,4.3a1,1,0,1,0,1.41-1.42L9,13H19a1,1,0,0,0,0-2Z"/>
+    </svg>
+)

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const Blockquote = (props) => (
+    <svg viewBox="0 0 50 50" fill="black" 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"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_2638_46091">
+                <rect width="50" height="50" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+);

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Camera = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+        <path d="M19,4h-.508L16.308,1.168A3.023,3.023,0,0,0,13.932,0H10.068A3.023,3.023,0,0,0,7.692,1.168L5.508,4H5A5.006,5.006,0,0,0,0,9V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V9A5.006,5.006,0,0,0,19,4ZM9.276,2.39A1.006,1.006,0,0,1,10.068,2h3.864a1.008,1.008,0,0,1,.792.39L15.966,4H8.034ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V9A3,3,0,0,1,5,6H19a3,3,0,0,1,3,3Z"/>
+        <path d="M12,8a6,6,0,1,0,6,6A6.006,6.006,0,0,0,12,8Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,12,18Z"/>
+    </svg>
+)