From 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 28 Sep 2023 18:03:43 +0200
Subject: feat(components): replace icons with a generic Icon component

Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.
---
 src/assets/images/cc-by-sa.svg                     |  56 +++---
 src/assets/images/icon-arrow-right.svg             |  33 ++--
 src/assets/images/icon-feed.svg                    |  92 ++++++++--
 src/components/atoms/icons/arrow.module.scss       |  16 --
 src/components/atoms/icons/arrow.stories.tsx       |  61 -------
 src/components/atoms/icons/arrow.test.tsx          |  10 -
 src/components/atoms/icons/arrow.tsx               | 103 -----------
 src/components/atoms/icons/career.module.scss      |  53 ------
 src/components/atoms/icons/career.stories.tsx      |  47 -----
 src/components/atoms/icons/career.test.tsx         |  10 -
 src/components/atoms/icons/career.tsx              |  65 -------
 src/components/atoms/icons/cc-by-sa.module.scss    |   7 -
 src/components/atoms/icons/cc-by-sa.stories.tsx    |  34 ----
 src/components/atoms/icons/cc-by-sa.test.tsx       |  10 -
 src/components/atoms/icons/cc-by-sa.tsx            |  39 ----
 src/components/atoms/icons/close.module.scss       |  12 --
 src/components/atoms/icons/close.stories.tsx       |  47 -----
 src/components/atoms/icons/close.test.tsx          |  10 -
 src/components/atoms/icons/close.tsx               |  29 ---
 src/components/atoms/icons/cog.module.scss         |   8 -
 src/components/atoms/icons/cog.stories.tsx         |  47 -----
 src/components/atoms/icons/cog.test.tsx            |  10 -
 src/components/atoms/icons/cog.tsx                 |  23 ---
 .../atoms/icons/computer-screen.module.scss        |  39 ----
 .../atoms/icons/computer-screen.stories.tsx        |  47 -----
 .../atoms/icons/computer-screen.test.tsx           |  10 -
 src/components/atoms/icons/computer-screen.tsx     |  76 --------
 src/components/atoms/icons/envelop.module.scss     |  28 ---
 src/components/atoms/icons/envelop.stories.tsx     |  47 -----
 src/components/atoms/icons/envelop.test.tsx        |  10 -
 src/components/atoms/icons/envelop.tsx             |  61 -------
 src/components/atoms/icons/feed.module.scss        |   6 -
 src/components/atoms/icons/feed.stories.tsx        |  47 -----
 src/components/atoms/icons/feed.test.tsx           |  10 -
 src/components/atoms/icons/feed.tsx                |  68 -------
 src/components/atoms/icons/hamburger.module.scss   |  42 -----
 src/components/atoms/icons/hamburger.stories.tsx   |  47 -----
 src/components/atoms/icons/hamburger.test.tsx      |  10 -
 src/components/atoms/icons/hamburger.tsx           |  29 ---
 src/components/atoms/icons/home.module.scss        |  41 -----
 src/components/atoms/icons/home.stories.tsx        |  47 -----
 src/components/atoms/icons/home.test.tsx           |  10 -
 src/components/atoms/icons/home.tsx                |  49 -----
 src/components/atoms/icons/index.ts                |  15 --
 .../atoms/icons/magnifying-glass.module.scss       |  29 ---
 .../atoms/icons/magnifying-glass.stories.tsx       |  47 -----
 .../atoms/icons/magnifying-glass.test.tsx          |  10 -
 src/components/atoms/icons/magnifying-glass.tsx    |  40 ----
 src/components/atoms/icons/moon.module.scss        |   8 -
 src/components/atoms/icons/moon.stories.tsx        |  60 ------
 src/components/atoms/icons/moon.test.tsx           |  10 -
 src/components/atoms/icons/moon.tsx                |  23 ---
 src/components/atoms/icons/plus-minus.module.scss  |  39 ----
 src/components/atoms/icons/plus-minus.stories.tsx  |  49 -----
 src/components/atoms/icons/plus-minus.test.tsx     |  10 -
 src/components/atoms/icons/plus-minus.tsx          |  29 ---
 src/components/atoms/icons/posts-stack.module.scss |  22 ---
 src/components/atoms/icons/posts-stack.stories.tsx |  47 -----
 src/components/atoms/icons/posts-stack.test.tsx    |  10 -
 src/components/atoms/icons/posts-stack.tsx         |  72 --------
 src/components/atoms/icons/sun.module.scss         |   8 -
 src/components/atoms/icons/sun.stories.tsx         |  60 ------
 src/components/atoms/icons/sun.test.tsx            |  10 -
 src/components/atoms/icons/sun.tsx                 |  28 ---
 .../hamburger-icon/hamburger-icon.module.scss      |  45 +++++
 .../images/icons/hamburger-icon/hamburger-icon.tsx |  25 +++
 .../atoms/images/icons/hamburger-icon/index.ts     |   1 +
 src/components/atoms/images/icons/icon.module.scss |  53 ++++++
 src/components/atoms/images/icons/icon.stories.tsx | 201 +++++++++++++++++++++
 src/components/atoms/images/icons/icon.test.tsx    | 182 +++++++++++++++++++
 src/components/atoms/images/icons/icon.tsx         | 126 +++++++++++++
 src/components/atoms/images/icons/index.ts         |   1 +
 .../atoms/images/icons/plus-minus-icon/index.ts    |   1 +
 .../plus-minus-icon/plus-minus-icon.module.scss    |  38 ++++
 .../icons/plus-minus-icon/plus-minus-icon.tsx      |  30 +++
 .../svg-paths/icons-paths/arrow-icon-paths.tsx     |  51 ++++++
 .../icons-paths/career-icon-paths.module.scss      |  43 +++++
 .../svg-paths/icons-paths/career-icon-paths.tsx    |  57 ++++++
 .../svg-paths/icons-paths/cc-by-sa-icon-paths.tsx  |  20 ++
 .../icons/svg-paths/icons-paths/cog-icon-paths.tsx |  14 ++
 .../icons-paths/computer-icon-paths.module.scss    |  37 ++++
 .../svg-paths/icons-paths/computer-icon-paths.tsx  |  65 +++++++
 .../icons-paths/cross-icon-paths.module.scss       |   5 +
 .../svg-paths/icons-paths/cross-icon-paths.tsx     |  21 +++
 .../icons-paths/envelop-icon-paths.module.scss     |  22 +++
 .../svg-paths/icons-paths/envelop-icon-paths.tsx   |  53 ++++++
 .../svg-paths/icons-paths/feed-icon-paths.tsx      |  59 ++++++
 .../icons-paths/home-icon-paths.module.scss        |  25 +++
 .../svg-paths/icons-paths/home-icon-paths.tsx      |  41 +++++
 .../images/icons/svg-paths/icons-paths/index.ts    |  13 ++
 .../magnifying-glass-icon-paths.module.scss        |  20 ++
 .../icons-paths/magnifying-glass-icon-paths.tsx    |  29 +++
 .../svg-paths/icons-paths/moon-icon-paths.tsx      |  11 ++
 .../icons-paths/posts-stack-icon-paths.module.scss |  21 +++
 .../icons-paths/posts-stack-icon-paths.tsx         |  49 +++++
 .../icons/svg-paths/icons-paths/sun-icon-paths.tsx |  11 ++
 .../atoms/images/icons/svg-paths/index.ts          |   1 +
 .../atoms/images/icons/svg-paths/svg-paths.tsx     |  82 +++++++++
 src/components/atoms/images/index.ts               |   1 +
 src/components/atoms/index.ts                      |   1 -
 src/components/atoms/layout/copyright.module.scss  |   2 -
 src/components/atoms/layout/copyright.stories.tsx  |   6 +-
 src/components/atoms/layout/copyright.test.tsx     |  15 +-
 src/components/atoms/links/nav-link.module.scss    |   1 -
 .../molecules/buttons/back-to-top.module.scss      |   6 +-
 src/components/molecules/buttons/back-to-top.tsx   |   6 +-
 .../molecules/buttons/heading-button.tsx           |   4 +-
 .../flipping-label/flipping-label.module.scss      |   2 -
 .../flipping-label/flipping-label.stories.tsx      |  17 +-
 .../forms/flipping-label/flipping-label.tsx        |   6 +-
 src/components/molecules/nav/nav-list.stories.tsx  |  11 +-
 src/components/molecules/nav/nav-list.test.tsx     |  11 +-
 .../prism-theme-toggle/prism-theme-toggle.tsx      |  23 ++-
 .../organisms/forms/search-form/search-form.tsx    |  28 +--
 .../organisms/forms/theme-toggle/theme-toggle.tsx  |  23 ++-
 .../organisms/layout/summary.module.scss           |   5 +-
 src/components/organisms/layout/summary.tsx        |   8 +-
 .../organisms/modals/settings-modal.module.scss    |   2 -
 src/components/organisms/modals/settings-modal.tsx |  14 +-
 src/components/organisms/toolbar/main-nav.tsx      |   9 +-
 src/components/organisms/toolbar/search.tsx        |  10 +-
 src/components/organisms/toolbar/settings.tsx      |   6 +-
 src/components/templates/layout/layout.tsx         |  29 ++-
 src/i18n/en.json                                   |   8 +-
 src/i18n/fr.json                                   |   8 +-
 src/pages/index.tsx                                |   8 +-
 src/styles/abstracts/_variables.scss               |  37 ++++
 src/styles/base/_icons.scss                        |  10 +
 src/styles/globals.scss                            |   1 +
 src/styles/pages/home.module.scss                  |   2 -
 130 files changed, 1766 insertions(+), 2179 deletions(-)
 delete mode 100644 src/components/atoms/icons/arrow.module.scss
 delete mode 100644 src/components/atoms/icons/arrow.stories.tsx
 delete mode 100644 src/components/atoms/icons/arrow.test.tsx
 delete mode 100644 src/components/atoms/icons/arrow.tsx
 delete mode 100644 src/components/atoms/icons/career.module.scss
 delete mode 100644 src/components/atoms/icons/career.stories.tsx
 delete mode 100644 src/components/atoms/icons/career.test.tsx
 delete mode 100644 src/components/atoms/icons/career.tsx
 delete mode 100644 src/components/atoms/icons/cc-by-sa.module.scss
 delete mode 100644 src/components/atoms/icons/cc-by-sa.stories.tsx
 delete mode 100644 src/components/atoms/icons/cc-by-sa.test.tsx
 delete mode 100644 src/components/atoms/icons/cc-by-sa.tsx
 delete mode 100644 src/components/atoms/icons/close.module.scss
 delete mode 100644 src/components/atoms/icons/close.stories.tsx
 delete mode 100644 src/components/atoms/icons/close.test.tsx
 delete mode 100644 src/components/atoms/icons/close.tsx
 delete mode 100644 src/components/atoms/icons/cog.module.scss
 delete mode 100644 src/components/atoms/icons/cog.stories.tsx
 delete mode 100644 src/components/atoms/icons/cog.test.tsx
 delete mode 100644 src/components/atoms/icons/cog.tsx
 delete mode 100644 src/components/atoms/icons/computer-screen.module.scss
 delete mode 100644 src/components/atoms/icons/computer-screen.stories.tsx
 delete mode 100644 src/components/atoms/icons/computer-screen.test.tsx
 delete mode 100644 src/components/atoms/icons/computer-screen.tsx
 delete mode 100644 src/components/atoms/icons/envelop.module.scss
 delete mode 100644 src/components/atoms/icons/envelop.stories.tsx
 delete mode 100644 src/components/atoms/icons/envelop.test.tsx
 delete mode 100644 src/components/atoms/icons/envelop.tsx
 delete mode 100644 src/components/atoms/icons/feed.module.scss
 delete mode 100644 src/components/atoms/icons/feed.stories.tsx
 delete mode 100644 src/components/atoms/icons/feed.test.tsx
 delete mode 100644 src/components/atoms/icons/feed.tsx
 delete mode 100644 src/components/atoms/icons/hamburger.module.scss
 delete mode 100644 src/components/atoms/icons/hamburger.stories.tsx
 delete mode 100644 src/components/atoms/icons/hamburger.test.tsx
 delete mode 100644 src/components/atoms/icons/hamburger.tsx
 delete mode 100644 src/components/atoms/icons/home.module.scss
 delete mode 100644 src/components/atoms/icons/home.stories.tsx
 delete mode 100644 src/components/atoms/icons/home.test.tsx
 delete mode 100644 src/components/atoms/icons/home.tsx
 delete mode 100644 src/components/atoms/icons/index.ts
 delete mode 100644 src/components/atoms/icons/magnifying-glass.module.scss
 delete mode 100644 src/components/atoms/icons/magnifying-glass.stories.tsx
 delete mode 100644 src/components/atoms/icons/magnifying-glass.test.tsx
 delete mode 100644 src/components/atoms/icons/magnifying-glass.tsx
 delete mode 100644 src/components/atoms/icons/moon.module.scss
 delete mode 100644 src/components/atoms/icons/moon.stories.tsx
 delete mode 100644 src/components/atoms/icons/moon.test.tsx
 delete mode 100644 src/components/atoms/icons/moon.tsx
 delete mode 100644 src/components/atoms/icons/plus-minus.module.scss
 delete mode 100644 src/components/atoms/icons/plus-minus.stories.tsx
 delete mode 100644 src/components/atoms/icons/plus-minus.test.tsx
 delete mode 100644 src/components/atoms/icons/plus-minus.tsx
 delete mode 100644 src/components/atoms/icons/posts-stack.module.scss
 delete mode 100644 src/components/atoms/icons/posts-stack.stories.tsx
 delete mode 100644 src/components/atoms/icons/posts-stack.test.tsx
 delete mode 100644 src/components/atoms/icons/posts-stack.tsx
 delete mode 100644 src/components/atoms/icons/sun.module.scss
 delete mode 100644 src/components/atoms/icons/sun.stories.tsx
 delete mode 100644 src/components/atoms/icons/sun.test.tsx
 delete mode 100644 src/components/atoms/icons/sun.tsx
 create mode 100644 src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
 create mode 100644 src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx
 create mode 100644 src/components/atoms/images/icons/hamburger-icon/index.ts
 create mode 100644 src/components/atoms/images/icons/icon.module.scss
 create mode 100644 src/components/atoms/images/icons/icon.stories.tsx
 create mode 100644 src/components/atoms/images/icons/icon.test.tsx
 create mode 100644 src/components/atoms/images/icons/icon.tsx
 create mode 100644 src/components/atoms/images/icons/index.ts
 create mode 100644 src/components/atoms/images/icons/plus-minus-icon/index.ts
 create mode 100644 src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
 create mode 100644 src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx
 create mode 100644 src/components/atoms/images/icons/svg-paths/index.ts
 create mode 100644 src/components/atoms/images/icons/svg-paths/svg-paths.tsx
 create mode 100644 src/styles/base/_icons.scss

(limited to 'src')

diff --git a/src/assets/images/cc-by-sa.svg b/src/assets/images/cc-by-sa.svg
index b1fc892..949002c 100644
--- a/src/assets/images/cc-by-sa.svg
+++ b/src/assets/images/cc-by-sa.svg
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="211.99811"
-   height="63.999996"
-   viewBox="0 0 211.99811 63.999996"
+   width="100"
+   height="40"
+   viewBox="0 0 100 40"
    version="1.1"
    id="svg8"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
    sodipodi:docname="cc-by-sa.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,9 +23,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="62.142857"
-     inkscape:cy="78.571429"
+     inkscape:zoom="2.4082226"
+     inkscape:cx="36.956717"
+     inkscape:cy="27.198482"
      inkscape:document-units="px"
      inkscape:current-layer="svg8"
      inkscape:document-rotation="0"
@@ -35,12 +35,14 @@
      fit-margin-right="0"
      fit-margin-bottom="0"
      inkscape:window-width="1920"
-     inkscape:window-height="1019"
+     inkscape:window-height="1015"
      inkscape:window-x="0"
-     inkscape:window-y="33"
+     inkscape:window-y="37"
      inkscape:window-maximized="1"
      inkscape:pagecheckerboard="0"
-     units="px" />
+     units="px"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -53,27 +55,35 @@
     </rdf:RDF>
   </metadata>
   <path
-     d="m 175.53911,15.829498 c 0,-3.008 1.485,-4.514 4.458,-4.514 2.973,0 4.457,1.504 4.457,4.514 0,2.971 -1.486,4.457 -4.457,4.457 -2.971,0 -4.458,-1.486 -4.458,-4.457 z"
-     id="path839" />
+     d="m 82.802205,12.372338 c 0,-1.418881 0.700478,-2.129264 2.102849,-2.129264 1.402371,0 2.102377,0.70944 2.102377,2.129264 0,1.401427 -0.700949,2.102377 -2.102377,2.102377 -1.401427,0 -2.102849,-0.70095 -2.102849,-2.102377 z"
+     id="path839"
+     style="stroke-width:0.471702" />
   <path
-     d="m 188.62611,24.057498 v 13.085 h -3.656 v 15.542 h -9.944 v -15.541 h -3.656 v -13.086 c 0,-0.572 0.2,-1.057 0.599,-1.457 0.401,-0.399 0.887,-0.6 1.457,-0.6 h 13.144 c 0.533,0 1.01,0.2 1.428,0.6 0.417,0.4 0.628,0.886 0.628,1.457 z"
-     id="path837" />
+     d="m 88.975373,16.253505 v 6.172224 H 87.25083 v 7.331198 h -4.690608 v -7.330726 h -1.724544 v -6.172696 c 0,-0.269814 0.09434,-0.49859 0.28255,-0.687271 0.189153,-0.188209 0.4184,-0.283021 0.68727,-0.283021 h 6.200055 c 0.251418,0 0.47642,0.09434 0.673591,0.283021 0.1967,0.188681 0.296229,0.417929 0.296229,0.687271 z"
+     id="path837"
+     style="stroke-width:0.471702" />
   <path
      id="path4-3"
-     d="m 179.94147,-1.9073486e-6 c -8.839,0 -16.34167,3.0848125073486 -22.51367,9.2578125073486 -6.285,6.4000004 -9.42969,13.9811874 -9.42969,22.7421874 0,8.762 3.14469,16.284312 9.42969,22.570312 6.361,6.286 13.86467,9.429688 22.51367,9.429688 8.799,0 16.43611,-3.181922 22.91211,-9.544922 6.096,-5.98 9.14453,-13.464078 9.14453,-22.455078 0,-8.952 -3.10646,-16.532188 -9.31446,-22.7421874 -6.172,-6.172 -13.75418,-9.2578125073486 -22.74218,-9.2578125073486 z M 180.05475,5.7714825 c 7.238,0 13.40967,2.55225 18.51367,7.6562495 5.103,5.106 7.65625,11.294313 7.65625,18.570313 0,7.391 -2.51397,13.50575 -7.54297,18.34375 -5.295,5.221 -11.50591,7.828125 -18.6289,7.828125 -7.162,0 -13.33268,-2.589484 -18.51368,-7.771484 -5.18,-5.178001 -7.76953,-11.310485 -7.76953,-18.396485 0,-7.047 2.60813,-13.238266 7.82813,-18.572265 5.029,-5.1040004 11.18103,-7.6582035 18.45703,-7.6582035 z" />
+     d="m 84.878809,4.905526 c -4.169377,0 -7.708404,1.455113 -10.619751,4.366932 C 71.294409,12.291353 69.811052,15.867416 69.811052,20 c 0,4.133056 1.483357,7.681348 4.448006,10.646469 3.000499,2.965121 6.539997,4.448005 10.619751,4.448005 4.150508,0 7.752951,-1.50092 10.807695,-4.502361 C 98.562001,27.771333 100,24.241076 100,20 100,15.777321 98.534676,12.201729 95.606348,9.272458 92.695001,6.361111 89.118469,4.905526 84.878809,4.905526 Z m 0.05343,2.722423 c 3.414181,0 6.325372,1.203902 8.732941,3.61147 2.407097,2.408512 3.611471,5.327554 3.611471,8.75966 0,3.486352 -1.185846,6.370694 -3.558036,8.652789 -2.497664,2.462758 -5.427365,3.692545 -8.787296,3.692545 -3.378332,0 -6.289056,-1.221465 -8.732946,-3.665827 -2.443418,-2.442475 -3.664905,-5.335182 -3.664905,-8.677665 0,-3.324086 1.230261,-6.24452 3.692547,-8.76058 2.372191,-2.407569 5.274118,-3.612392 8.706224,-3.612392 z"
+     style="stroke-width:0.471702" />
   <path
-     d="m 91.998554,27.114498 c 0.609,-3.924 2.189,-6.962 4.742,-9.114 2.552,-2.152 5.655996,-3.228 9.313996,-3.228 5.027,0 9.029,1.62 12,4.856 2.971,3.238 4.457,7.391 4.457,12.457 0,4.915 -1.543,9 -4.627,12.256 -3.088,3.256 -7.086,4.886 -12.002,4.886 -3.619,0 -6.742996,-1.085 -9.370996,-3.257 -2.629,-2.172 -4.209,-5.257 -4.743,-9.257 h 8.059 c 0.189996,3.886 2.532996,5.829 7.028996,5.829 2.246,0 4.057,-0.972 5.428,-2.914 1.373,-1.942 2.059,-4.534 2.059,-7.771 0,-3.391 -0.629,-5.971 -1.885,-7.743 -1.258,-1.771 -3.066,-2.657 -5.43,-2.657 -4.268,0 -6.667,1.885 -7.199996,5.656 h 2.342996 l -6.341996,6.343 -6.343,-6.343 z"
-     id="path837-7" />
+     d="m 43.395931,17.695499 c 0.287267,-1.85096 1.032557,-3.283992 2.236813,-4.299095 1.203784,-1.015104 2.667946,-1.522656 4.393433,-1.522656 2.371248,0 4.259,0.764158 5.660428,2.290587 1.401428,1.527372 2.102377,3.486352 2.102377,5.875996 0,2.318417 -0.727837,4.245321 -2.182566,5.781183 -1.456617,1.535863 -3.342483,2.304738 -5.661372,2.304738 -1.70709,0 -3.180687,-0.511797 -4.42032,-1.536335 -1.240106,-1.024537 -1.985395,-2.479739 -2.237284,-4.366548 h 3.801449 c 0.08962,1.833035 1.19482,2.749553 3.315593,2.749553 1.059444,0 1.913697,-0.458495 2.560401,-1.374541 0.647647,-0.916046 0.971235,-2.138698 0.971235,-3.665598 0,-1.599543 -0.296701,-2.816535 -0.889159,-3.652391 -0.593402,-0.835385 -1.44624,-1.253313 -2.561344,-1.253313 -2.013225,0 -3.144839,0.889158 -3.396255,2.667948 h 1.105197 l -2.991534,2.992008 -2.992008,-2.992008 z"
+     id="path837-7"
+     style="stroke-width:0.471702" />
   <path
      id="path4-5"
-     d="m 105.94241,-1.8610229e-6 c -8.799996,0 -16.304676,3.1054062610229 -22.513666,9.3164061610229 -6.285,6.3999997 -9.42969,13.9625467 -9.42969,22.6855467 0,8.763 3.14469,16.28336 9.42969,22.568359 6.361,6.286001 13.86467,9.429688 22.513666,9.429688 8.836,0 16.47511,-3.162328 22.91211,-9.486328 6.096,-6.057 9.14453,-13.559672 9.14453,-22.513672 0,-8.952 -3.10646,-16.513547 -9.31446,-22.6855468 -6.211,-6.21 -13.79118,-9.3144530610229 -22.74218,-9.3144530610229 z M 106.05569,5.7714825 c 7.275,0 13.44667,2.5698437 18.51367,7.7148435 5.103,5.028 7.65625,11.200672 7.65625,18.513672 0,7.353 -2.51397,13.46775 -7.54297,18.34375 -5.295,5.219 -11.50591,7.828125 -18.6289,7.828125 -7.161996,0 -13.332676,-2.589484 -18.513676,-7.771484 -5.18,-5.143 -7.76953,-11.275391 -7.76953,-18.400391 0,-7.046 2.60813,-13.217672 7.82813,-18.513672 5.029,-5.1429998 11.18103,-7.7148435 18.457026,-7.7148435 z" />
+     d="m 49.97328,4.905526 c -4.150978,0 -7.690953,1.464827 -10.619748,4.39457 -2.964649,3.018895 -4.448007,6.586166 -4.448007,10.700825 0,4.133528 1.483358,7.680899 4.448007,10.645548 3.000498,2.965121 6.539997,4.448005 10.619748,4.448005 4.167962,0 7.771348,-1.491677 10.807696,-4.474722 C 63.656473,27.762651 65.094472,24.223623 65.094472,20 c 0,-4.222679 -1.465325,-7.789478 -4.393653,-10.700825 C 57.771076,6.369904 54.195488,4.905526 49.97328,4.905526 Z m 0.05344,2.722423 c 3.431634,0 6.342825,1.212201 8.732941,3.639109 2.407097,2.371719 3.611471,5.283383 3.611471,8.732942 0,3.468427 -1.185846,6.352769 -3.558037,8.65279 -2.497663,2.461814 -5.427364,3.692544 -8.787295,3.692544 -3.37833,0 -6.289054,-1.221465 -8.732944,-3.665827 C 38.849433,26.253542 37.627946,23.360879 37.627946,20 c 0,-3.323614 1.230261,-6.234806 3.692547,-8.732942 2.372191,-2.425965 5.274118,-3.639109 8.706222,-3.639109 z"
+     style="stroke-width:0.471702" />
   <path
      id="path4"
-     d="M 31.942383,5.9265138e-7 C 23.066111,5.9265138e-7 15.579851,3.1065496 9.484666,9.3147376 6.399571,12.400832 4.046856,15.896269 2.427808,19.801386 0.80876,23.706506 0,27.771846 0,32.000976 c 0,4.26713 0.800415,8.32413 2.400463,12.17225 1.600051,3.84811 3.933123,7.30532 7.000216,10.37141 3.067093,3.06609 6.534587,5.40951 10.400708,7.02756 3.867116,1.62105 7.914819,2.4278 12.142946,2.4278 4.22813,0 8.32441,-0.8171 12.28553,-2.45515 3.96313,-1.63805 7.50614,-4.00301 10.62923,-7.0881 3.0081,-2.93309 5.28529,-6.31477 6.82834,-10.14289 1.54104,-3.82712 2.31257,-7.93174 2.31257,-12.31288 0,-4.34313 -0.78277,-8.44771 -2.34382,-12.31483 C 60.094133,15.82003 57.808593,12.380471 54.800503,9.3713796 48.515313,3.1241896 40.893653,5.9265136e-7 31.942383,5.9265138e-7 Z M 32.057623,5.7716626 c 7.23822,0 13.42863,2.571923 18.57478,7.7150794 2.47408,2.478074 4.35948,5.297144 5.65252,8.459244 1.29504,3.16209 1.94342,6.51384 1.94342,10.05694 0,7.35423 -2.49445,13.46816 -7.4846,18.34432 -2.59208,2.51407 -5.49406,4.43661 -8.71316,5.77166 -3.2231,1.33404 -6.54486,1.9981 -9.97296,1.9981 -3.467107,0 -6.782568,-0.65672 -9.943661,-1.97076 -3.164098,-1.31604 -5.999858,-3.21894 -8.513933,-5.71502 -2.515077,-2.49507 -4.447918,-5.33279 -5.800959,-8.51588 -1.354042,-3.1791 -2.029358,-6.48331 -2.029358,-9.91242 0,-3.4671 0.675316,-6.79186 2.029358,-9.97295 1.352043,-3.1811 3.285882,-6.046798 5.800959,-8.599875 4.991151,-5.1041594 11.14337,-7.6584384 18.457594,-7.6584384 z" />
+     d="m 15.067296,4.905527 c -4.186958,0 -7.7182442,1.465367 -10.5933571,4.393783 C 3.0186925,10.755028 1.9089114,12.403834 1.1452027,14.245887 0.38149397,16.087941 0,18.005571 0,20.000462 c 0,2.012815 0.37755761,3.926511 1.132304,5.741678 0.7547477,1.815163 1.8552632,3.445936 3.3020181,4.892218 1.4467549,1.446282 3.0823798,2.551679 4.9060381,3.314917 1.8241278,0.764653 3.7334388,1.145198 5.7278558,1.145198 1.994419,0 3.926643,-0.385427 5.795113,-1.158099 1.869418,-0.772672 3.540664,-1.88823 5.013832,-3.343474 1.418928,-1.383545 2.493084,-2.978691 3.220944,-4.784424 0.726912,-1.805262 1.090845,-3.741421 1.090845,-5.808014 0,-2.048665 -0.369235,-3.984805 -1.105586,-5.808934 -0.736822,-1.823656 -1.814917,-3.446104 -3.23384,-4.8655 C 22.884786,6.379214 19.289631,4.905527 15.067296,4.905527 Z m 0.05436,2.722507 c 3.414285,0 6.334316,1.213182 8.761767,3.63922 1.167029,1.168914 2.056377,2.498676 2.666307,3.990245 0.610873,1.491566 0.916715,3.072594 0.916715,4.743882 0,3.469008 -1.176637,6.352963 -3.530503,8.653059 -1.22269,1.185892 -2.591561,2.092759 -4.110018,2.722505 -1.520343,0.62927 -3.087225,0.942508 -4.704268,0.942508 -1.635442,0 -3.199353,-0.309776 -4.690448,-0.929612 C 8.9386948,30.769062 7.6010602,29.87146 6.4151652,28.694053 5.2287976,27.517123 4.317072,26.178564 3.6788394,24.677093 3.0401347,23.177504 2.7215865,21.618901 2.7215865,20.001381 c 0,-1.635439 0.3185482,-3.203736 0.9572529,-4.704263 C 4.3166012,13.796585 5.2287976,12.444829 6.4151652,11.240537 8.7695027,8.832893 11.671519,7.628034 15.121655,7.628034 Z"
+     style="stroke-width:0.471702" />
   <path
-     d="m 50.114533,26.687816 -4.22913,2.22907 c -0.45702,-0.95103 -1.02003,-1.61905 -1.68605,-2.00006 -0.66802,-0.38001 -1.30704,-0.57102 -1.91406,-0.57102 -2.85709,0 -4.28713,1.88506 -4.28713,5.65717 0,1.71406 0.363,3.0841 1.08603,4.11313 0.72302,1.02903 1.78906,1.54405 3.2011,1.54405 1.86506,0 3.1801,-0.91503 3.94112,-2.74309 l 4.00012,2.00007 c -0.87502,1.56304 -2.05706,2.79108 -3.54111,3.68611 -1.48604,0.89602 -3.10509,1.34304 -4.85715,1.34304 -2.89608,0 -5.20915,-0.87503 -6.94121,-2.62908 -1.73605,-1.75205 -2.60207,-4.19013 -2.60207,-7.31323 0,-3.04809 0.88502,-5.46616 2.65808,-7.25722 1.77005,-1.79005 4.00812,-2.68608 6.7132,-2.68608 3.96212,-0.002 6.78321,1.54105 8.45826,4.62714 z"
-     id="path846" />
+     d="m 23.639141,17.494232 -1.99489,1.051457 C 21.428674,18.097086 21.1631,17.78198 20.848937,17.602256 c -0.315106,-0.179251 -0.616534,-0.269351 -0.902866,-0.269351 -1.347696,0 -2.022249,0.889187 -2.022249,2.6685 0,0.808526 0.171228,1.454777 0.512282,1.940173 0.341051,0.485396 0.843904,0.728332 1.509967,0.728332 0.879753,0 1.50006,-0.431622 1.859035,-1.293922 l 1.886866,0.943438 c -0.412749,0.737289 -0.97032,1.316559 -1.67035,1.738746 -0.700968,0.422655 -1.464678,0.633515 -2.291129,0.633515 -1.366087,0 -2.457168,-0.412753 -3.274184,-1.240143 -0.818899,-0.826446 -1.227403,-1.976494 -1.227403,-3.449667 0,-1.437791 0.417466,-2.578401 1.253823,-3.423248 0.834936,-0.844371 1.890639,-1.26703 3.166632,-1.26703 1.868941,-9.43e-4 3.199655,0.726917 3.98978,2.182633 z"
+     id="path846"
+     style="stroke-width:0.471702" />
   <path
-     d="m 31.656963,26.687816 -4.287128,2.22907 c -0.458013,-0.95103 -1.019029,-1.61905 -1.685048,-2.00006 -0.667024,-0.38001 -1.286042,-0.57102 -1.858057,-0.57102 -2.856087,0 -4.28613,1.88506 -4.28613,5.65717 0,1.71406 0.362014,3.0841 1.085029,4.11313 0.724025,1.02903 1.791056,1.54405 3.201101,1.54405 1.867057,0 3.181095,-0.91503 3.944118,-2.74309 l 3.942125,2.00007 c -0.83803,1.56304 -2.000065,2.79108 -3.486111,3.68611 -1.484043,0.89602 -3.123093,1.34304 -4.914149,1.34304 -2.857088,0 -5.163158,-0.87503 -6.915212,-2.62908 -1.752053,-1.75205 -2.62808,-4.19013 -2.62808,-7.31323 0,-3.04809 0.886028,-5.46616 2.657081,-7.25722 1.771054,-1.79005 4.009125,-2.68608 6.715205,-2.68608 3.963122,-0.002 6.800209,1.54105 8.515256,4.62714 z"
-     id="path844" />
+     d="m 14.932663,17.494232 -2.022248,1.051457 c -0.216046,-0.448603 -0.480679,-0.763709 -0.794841,-0.943433 -0.314637,-0.179251 -0.606629,-0.269351 -0.87645,-0.269351 -1.3472231,0 -2.0217777,0.889187 -2.0217777,2.6685 0,0.808526 0.1707629,1.454777 0.5118107,1.940173 0.341524,0.485396 0.844845,0.728332 1.509967,0.728332 0.880695,0 1.50053,-0.431622 1.860449,-1.293922 l 1.85951,0.943438 c -0.395301,0.737289 -0.943435,1.316559 -1.644407,1.738746 -0.700026,0.422655 -1.47317,0.633515 -2.318015,0.633515 -1.3476953,0 -2.4354738,-0.412753 -3.2619218,-1.240143 -0.8264474,-0.826446 -1.2396714,-1.976494 -1.2396714,-3.449667 0,-1.437791 0.4179415,-2.578401 1.2533513,-3.423248 0.8354103,-0.844371 1.8911135,-1.26703 3.1675779,-1.26703 1.869414,-9.43e-4 3.207674,0.726917 4.016666,2.182633 z"
+     id="path844"
+     style="stroke-width:0.471702" />
 </svg>
diff --git a/src/assets/images/icon-arrow-right.svg b/src/assets/images/icon-arrow-right.svg
index 5ddb0b4..268203f 100644
--- a/src/assets/images/icon-arrow-right.svg
+++ b/src/assets/images/icon-arrow-right.svg
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="64.644997"
-   height="23.476"
-   viewBox="0 0 64.644997 23.476001"
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
    version="1.1"
    id="svg4"
    sodipodi:docname="icon-arrow-right.svg"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -22,25 +22,28 @@
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
      showgrid="false"
-     inkscape:zoom="7.3600763"
-     inkscape:cx="11.141189"
-     inkscape:cy="23.912796"
+     inkscape:zoom="5.0717203"
+     inkscape:cx="40.025867"
+     inkscape:cy="35.589502"
      inkscape:window-width="1920"
-     inkscape:window-height="1019"
+     inkscape:window-height="1015"
      inkscape:window-x="0"
-     inkscape:window-y="33"
+     inkscape:window-y="37"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg4"
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
-     fit-margin-bottom="0" />
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
   <path
-     d="M -1.6784668e-6,15.441 40.007998,15.423 V 8.0349999 l -40.0079996784668,0.142 z"
-     id="path2-6"
-     sodipodi:nodetypes="ccccc" />
+     id="rect1"
+     style="stroke-width:1.02839"
+     d="m 0,44.25 h 61.764896 v 11.5 H 0 Z" />
   <path
-     d="M 40.007998,23.476 64.644998,11.715 39.844998,-8.3923343e-8 Z"
-     id="path2-3"
+     id="rect1-6"
+     style="stroke-width:1.50903"
+     d="m 61.764896,30 38.2351,20 -38.2351,20 z"
      sodipodi:nodetypes="cccc" />
 </svg>
diff --git a/src/assets/images/icon-feed.svg b/src/assets/images/icon-feed.svg
index fcdac1f..6bf17fb 100644
--- a/src/assets/images/icon-feed.svg
+++ b/src/assets/images/icon-feed.svg
@@ -1,18 +1,76 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
-<defs>
-<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
-<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
-<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
-<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
-<stop offset="1.0" stop-color="#D95B29"/>
-</linearGradient>
-</defs>
-<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
-<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
-<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
-<circle cx="68" cy="189" r="24" fill="#FFF"/>
-<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
-<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
-<script xmlns=""/></svg>
+<svg
+   version="1.1"
+   width="100"
+   height="100"
+   id="RSSicon"
+   viewBox="0 0 100 100"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs7">
+    <linearGradient
+       x1="30.059999"
+       y1="30.059999"
+       x2="225.94"
+       y2="225.94"
+       id="RSSg"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.390625)">
+      <stop
+         offset="0.0"
+         stop-color="#E3702D"
+         id="stop1" />
+      <stop
+         offset="0.1071"
+         stop-color="#EA7D31"
+         id="stop2" />
+      <stop
+         offset="0.3503"
+         stop-color="#F69537"
+         id="stop3" />
+      <stop
+         offset="0.5"
+         stop-color="#FB9E3A"
+         id="stop4" />
+      <stop
+         offset="0.7016"
+         stop-color="#EA7C31"
+         id="stop5" />
+      <stop
+         offset="0.8866"
+         stop-color="#DE642B"
+         id="stop6" />
+      <stop
+         offset="1.0"
+         stop-color="#D95B29"
+         id="stop7" />
+    </linearGradient>
+  </defs>
+  <path
+     id="rect7"
+     style="fill:#cc5d15;stroke-width:0.390625"
+     d="m 21.484375,0 h 57.03125 C 90.41797,0 100,9.582031 100,21.484375 v 57.03125 C 100,90.41797 90.41797,100 78.515625,100 H 21.484375 C 9.582031,100 0,90.41797 0,78.515625 V 21.484375 C 0,9.582031 9.582031,0 21.484375,0 Z" />
+  <path
+     id="rect8"
+     style="fill:#f49c52;stroke-width:0.390625"
+     d="m 21.484375,1.953125 h 57.03125 c 10.82031,0 19.53125,8.710938 19.53125,19.53125 v 57.03125 c 0,10.82031 -8.71094,19.53125 -19.53125,19.53125 h -57.03125 c -10.820312,0 -19.53125,-8.71094 -19.53125,-19.53125 v -57.03125 c 0,-10.820312 8.710938,-19.53125 19.53125,-19.53125 z" />
+  <path
+     id="rect9"
+     style="fill:url(#RSSg);stroke-width:0.390625"
+     d="m 22.265625,3.90625 h 55.46875 c 10.171095,0 18.359375,8.188281 18.359375,18.359375 v 55.46875 c 0,10.171095 -8.18828,18.359375 -18.359375,18.359375 H 22.265625 C 12.094531,96.09375 3.90625,87.90547 3.90625,77.734375 v -55.46875 c 0,-10.171094 8.188281,-18.359375 18.359375,-18.359375 z" />
+  <path
+     id="circle9"
+     style="fill:#ffffff;stroke-width:0.390625"
+     d="m 35.9375,73.828125 a 9.375,9.375 0 0 1 -9.375,9.375 9.375,9.375 0 0 1 -9.375,-9.375 9.375,9.375 0 0 1 9.375,-9.375 9.375,9.375 0 0 1 9.375,9.375 z" />
+  <path
+     d="M 62.5,83.203125 H 49.21875 A 32.03125,32.03125 0 0 0 17.1875,51.171875 V 37.890625 A 45.3125,45.3125 0 0 1 62.5,83.203125 Z"
+     fill="#ffffff"
+     id="path9"
+     style="stroke-width:0.390625" />
+  <path
+     d="M 71.875,83.203125 A 54.6875,54.6875 0 0 0 17.1875,28.515625 V 14.84375 a 68.359375,68.359375 0 0 1 68.359375,68.359375 z"
+     fill="#ffffff"
+     id="path10"
+     style="stroke-width:0.390625" />
+  <script />
+</svg>
diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss
deleted file mode 100644
index 6ee3364..0000000
--- a/src/components/atoms/icons/arrow.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  fill: var(--color-primary);
-  transition: all 0.25s ease-in-out 0s;
-
-  &--left,
-  &--right {
-    width: var(--icon-size, #{fun.convert-px(30)});
-  }
-
-  &--bottom,
-  &--top {
-    height: var(--icon-size, #{fun.convert-px(30)});
-  }
-}
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
deleted file mode 100644
index a49be55..0000000
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Arrow as ArrowIcon } from './arrow';
-
-/**
- * Arrow icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: ArrowIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    direction: {
-      control: {
-        type: 'select',
-      },
-      description: 'An arrow icon.',
-      options: ['bottom', 'left', 'right', 'top'],
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof ArrowIcon>;
-
-const Template: ComponentStory<typeof ArrowIcon> = (args) => (
-  <ArrowIcon {...args} />
-);
-
-/**
- * Icons Stories - Arrow
- */
-export const Arrow = Template.bind({});
-Arrow.args = {
-  direction: 'right',
-};
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
deleted file mode 100644
index 3fedf9b..0000000
--- a/src/components/atoms/icons/arrow.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Arrow } from './arrow';
-
-describe('Arrow', () => {
-  it('renders an arrow icon oriented to the right', () => {
-    const { container } = render(<Arrow direction="right" />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
deleted file mode 100644
index 2ef0185..0000000
--- a/src/components/atoms/icons/arrow.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './arrow.module.scss';
-
-export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
-
-export type ArrowProps = SVGAttributes<SVGElement> & {
-  /**
-   * The arrow direction. Default: right.
-   */
-  direction: ArrowDirection;
-};
-
-/**
- * Arrow component
- *
- * Render a svg arrow icon.
- */
-export const Arrow: FC<ArrowProps> = ({
-  className = '',
-  direction,
-  ...props
-}) => {
-  const directionClass = styles[`icon--${direction}`];
-  const classes = `${styles.icon} ${directionClass} ${className}`;
-
-  if (direction === 'top') {
-    return (
-      <svg
-        {...props}
-        className={classes}
-        viewBox="0 0 23.476 64.644995"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="M 23.476001,24.637 11.715001,0 0,24.800001 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 15.441001,64.644997 -0.018,-40.007999 H 8.035 l 0.142,40.007999 z"
-        />
-      </svg>
-    );
-  }
-
-  if (direction === 'bottom') {
-    return (
-      <svg
-        {...props}
-        className={classes}
-        viewBox="0 0 23.476 64.644995"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="m 23.476001,40.007997 -11.761,24.637 L 0,39.844996 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 15.441001,0 -0.018,40.007999 H 8.035 L 8.177,0 Z"
-        />
-      </svg>
-    );
-  }
-
-  if (direction === 'left') {
-    return (
-      <svg
-        {...props}
-        className={classes}
-        viewBox="0 0 64.644997 23.476001"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="M 24.637,23.476 0,11.715 24.8,-8.3923343e-8 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 64.644997,15.441 -40.008,-0.018 V 8.0349999 l 40.008,0.142 z"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      {...props}
-      className={classes}
-      viewBox="0 0 64.644997 23.476001"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className="arrow-head"
-        d="M 40.007997,23.476 64.644997,11.715 39.844997,-8.3923343e-8 Z"
-      />
-      <path
-        className="arrow-bar"
-        d="M 0,15.441 40.008,15.423 V 8.0349999 L 0,8.1769999 Z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss
deleted file mode 100644
index 0731526..0000000
--- a/src/components/atoms/icons/career.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.lock {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.lines {
-  fill: var(--color-fg);
-  stroke-width: 4;
-}
-
-.seal-top {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.seal-bottom {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.diploma {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.top {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.handle {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.bottom {
-  fill: var(--color-primary);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
deleted file mode 100644
index 5c3ae12..0000000
--- a/src/components/atoms/icons/career.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Career as CareerIcon } from './career';
-
-/**
- * Career icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: CareerIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof CareerIcon>;
-
-const Template: ComponentStory<typeof CareerIcon> = (args) => (
-  <CareerIcon {...args} />
-);
-
-/**
- * Icons Stories - Career
- */
-export const Career = Template.bind({});
diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx
deleted file mode 100644
index 27754a8..0000000
--- a/src/components/atoms/icons/career.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Career } from './career';
-
-describe('Career', () => {
-  it('renders a Career icon', () => {
-    const { container } = render(<Career />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
deleted file mode 100644
index 6456d40..0000000
--- a/src/components/atoms/icons/career.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './career.module.scss';
-
-export type CareerProps = SVGAttributes<SVGElement>;
-
-/**
- * Career Component
- *
- * Render a career svg icon.
- */
-export const Career: FC<CareerProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.bottom}
-        d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z"
-      />
-      <path
-        className={styles.handle}
-        d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
-      />
-      <path
-        className={styles.top}
-        d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z"
-      />
-      <path
-        className={styles.diploma}
-        d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z"
-      />
-      <path
-        className={styles['seal-bottom']}
-        d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z"
-      />
-      <path
-        className={styles['seal-top']}
-        d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z"
-      />
-      <path
-        className={styles.lock}
-        d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/cc-by-sa.module.scss b/src/components/atoms/icons/cc-by-sa.module.scss
deleted file mode 100644
index 14935b6..0000000
--- a/src/components/atoms/icons/cc-by-sa.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(60)});
-  fill: var(--color-fg);
-}
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
deleted file mode 100644
index 2a29ee3..0000000
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CCBySA as CCBySAIcon } from './cc-by-sa';
-
-/**
- * CC BY SA icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: CCBySAIcon,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof CCBySAIcon>;
-
-const Template: ComponentStory<typeof CCBySAIcon> = (args) => (
-  <CCBySAIcon {...args} />
-);
-
-/**
- * Icons Stories - CC BY SA
- */
-export const CCBySA = Template.bind({});
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
deleted file mode 100644
index 7e81835..0000000
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { CCBySA } from './cc-by-sa';
-
-describe('CCBySA', () => {
-  it('renders a CC BY SA icon', () => {
-    render(<CCBySA />);
-    expect(screen.getByTitle('CC BY SA')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx
deleted file mode 100644
index ba6d278..0000000
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './cc-by-sa.module.scss';
-
-export type CCBySAProps = SVGAttributes<SVGElement>;
-
-/**
- * CCBySA component
- *
- * Render a CC BY SA svg icon.
- */
-export const CCBySA: FC<CCBySAProps> = ({ className = '', ...props }) => {
-  const intl = useIntl();
-
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 211.99811 63.999996"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        {intl.formatMessage({
-          defaultMessage: 'CC BY SA',
-          description: 'CCBySA: icon title',
-          id: 'cl7YNU',
-        })}
-      </title>
-      <path d="m 175.53911,15.829498 c 0,-3.008 1.485,-4.514 4.458,-4.514 2.973,0 4.457,1.504 4.457,4.514 0,2.971 -1.486,4.457 -4.457,4.457 -2.971,0 -4.458,-1.486 -4.458,-4.457 z" />
-      <path d="m 188.62611,24.057498 v 13.085 h -3.656 v 15.542 h -9.944 v -15.541 h -3.656 v -13.086 c 0,-0.572 0.2,-1.057 0.599,-1.457 0.401,-0.399 0.887,-0.6 1.457,-0.6 h 13.144 c 0.533,0 1.01,0.2 1.428,0.6 0.417,0.4 0.628,0.886 0.628,1.457 z" />
-      <path d="m 179.94147,-1.9073486e-6 c -8.839,0 -16.34167,3.0848125073486 -22.51367,9.2578125073486 -6.285,6.4000004 -9.42969,13.9811874 -9.42969,22.7421874 0,8.762 3.14469,16.284312 9.42969,22.570312 6.361,6.286 13.86467,9.429688 22.51367,9.429688 8.799,0 16.43611,-3.181922 22.91211,-9.544922 6.096,-5.98 9.14453,-13.464078 9.14453,-22.455078 0,-8.952 -3.10646,-16.532188 -9.31446,-22.7421874 -6.172,-6.172 -13.75418,-9.2578125073486 -22.74218,-9.2578125073486 z M 180.05475,5.7714825 c 7.238,0 13.40967,2.55225 18.51367,7.6562495 5.103,5.106 7.65625,11.294313 7.65625,18.570313 0,7.391 -2.51397,13.50575 -7.54297,18.34375 -5.295,5.221 -11.50591,7.828125 -18.6289,7.828125 -7.162,0 -13.33268,-2.589484 -18.51368,-7.771484 -5.18,-5.178001 -7.76953,-11.310485 -7.76953,-18.396485 0,-7.047 2.60813,-13.238266 7.82813,-18.572265 5.029,-5.1040004 11.18103,-7.6582035 18.45703,-7.6582035 z" />
-      <path d="m 91.998554,27.114498 c 0.609,-3.924 2.189,-6.962 4.742,-9.114 2.552,-2.152 5.655996,-3.228 9.313996,-3.228 5.027,0 9.029,1.62 12,4.856 2.971,3.238 4.457,7.391 4.457,12.457 0,4.915 -1.543,9 -4.627,12.256 -3.088,3.256 -7.086,4.886 -12.002,4.886 -3.619,0 -6.742996,-1.085 -9.370996,-3.257 -2.629,-2.172 -4.209,-5.257 -4.743,-9.257 h 8.059 c 0.189996,3.886 2.532996,5.829 7.028996,5.829 2.246,0 4.057,-0.972 5.428,-2.914 1.373,-1.942 2.059,-4.534 2.059,-7.771 0,-3.391 -0.629,-5.971 -1.885,-7.743 -1.258,-1.771 -3.066,-2.657 -5.43,-2.657 -4.268,0 -6.667,1.885 -7.199996,5.656 h 2.342996 l -6.341996,6.343 -6.343,-6.343 z" />
-      <path d="m 105.94241,-1.8610229e-6 c -8.799996,0 -16.304676,3.1054062610229 -22.513666,9.3164061610229 -6.285,6.3999997 -9.42969,13.9625467 -9.42969,22.6855467 0,8.763 3.14469,16.28336 9.42969,22.568359 6.361,6.286001 13.86467,9.429688 22.513666,9.429688 8.836,0 16.47511,-3.162328 22.91211,-9.486328 6.096,-6.057 9.14453,-13.559672 9.14453,-22.513672 0,-8.952 -3.10646,-16.513547 -9.31446,-22.6855468 -6.211,-6.21 -13.79118,-9.3144530610229 -22.74218,-9.3144530610229 z M 106.05569,5.7714825 c 7.275,0 13.44667,2.5698437 18.51367,7.7148435 5.103,5.028 7.65625,11.200672 7.65625,18.513672 0,7.353 -2.51397,13.46775 -7.54297,18.34375 -5.295,5.219 -11.50591,7.828125 -18.6289,7.828125 -7.161996,0 -13.332676,-2.589484 -18.513676,-7.771484 -5.18,-5.143 -7.76953,-11.275391 -7.76953,-18.400391 0,-7.046 2.60813,-13.217672 7.82813,-18.513672 5.029,-5.1429998 11.18103,-7.7148435 18.457026,-7.7148435 z" />
-      <path d="M 31.942383,5.9265138e-7 C 23.066111,5.9265138e-7 15.579851,3.1065496 9.484666,9.3147376 6.399571,12.400832 4.046856,15.896269 2.427808,19.801386 0.80876,23.706506 0,27.771846 0,32.000976 c 0,4.26713 0.800415,8.32413 2.400463,12.17225 1.600051,3.84811 3.933123,7.30532 7.000216,10.37141 3.067093,3.06609 6.534587,5.40951 10.400708,7.02756 3.867116,1.62105 7.914819,2.4278 12.142946,2.4278 4.22813,0 8.32441,-0.8171 12.28553,-2.45515 3.96313,-1.63805 7.50614,-4.00301 10.62923,-7.0881 3.0081,-2.93309 5.28529,-6.31477 6.82834,-10.14289 1.54104,-3.82712 2.31257,-7.93174 2.31257,-12.31288 0,-4.34313 -0.78277,-8.44771 -2.34382,-12.31483 C 60.094133,15.82003 57.808593,12.380471 54.800503,9.3713796 48.515313,3.1241896 40.893653,5.9265136e-7 31.942383,5.9265138e-7 Z M 32.057623,5.7716626 c 7.23822,0 13.42863,2.571923 18.57478,7.7150794 2.47408,2.478074 4.35948,5.297144 5.65252,8.459244 1.29504,3.16209 1.94342,6.51384 1.94342,10.05694 0,7.35423 -2.49445,13.46816 -7.4846,18.34432 -2.59208,2.51407 -5.49406,4.43661 -8.71316,5.77166 -3.2231,1.33404 -6.54486,1.9981 -9.97296,1.9981 -3.467107,0 -6.782568,-0.65672 -9.943661,-1.97076 -3.164098,-1.31604 -5.999858,-3.21894 -8.513933,-5.71502 -2.515077,-2.49507 -4.447918,-5.33279 -5.800959,-8.51588 -1.354042,-3.1791 -2.029358,-6.48331 -2.029358,-9.91242 0,-3.4671 0.675316,-6.79186 2.029358,-9.97295 1.352043,-3.1811 3.285882,-6.046798 5.800959,-8.599875 4.991151,-5.1041594 11.14337,-7.6584384 18.457594,-7.6584384 z" />
-      <path d="m 50.114533,26.687816 -4.22913,2.22907 c -0.45702,-0.95103 -1.02003,-1.61905 -1.68605,-2.00006 -0.66802,-0.38001 -1.30704,-0.57102 -1.91406,-0.57102 -2.85709,0 -4.28713,1.88506 -4.28713,5.65717 0,1.71406 0.363,3.0841 1.08603,4.11313 0.72302,1.02903 1.78906,1.54405 3.2011,1.54405 1.86506,0 3.1801,-0.91503 3.94112,-2.74309 l 4.00012,2.00007 c -0.87502,1.56304 -2.05706,2.79108 -3.54111,3.68611 -1.48604,0.89602 -3.10509,1.34304 -4.85715,1.34304 -2.89608,0 -5.20915,-0.87503 -6.94121,-2.62908 -1.73605,-1.75205 -2.60207,-4.19013 -2.60207,-7.31323 0,-3.04809 0.88502,-5.46616 2.65808,-7.25722 1.77005,-1.79005 4.00812,-2.68608 6.7132,-2.68608 3.96212,-0.002 6.78321,1.54105 8.45826,4.62714 z" />
-      <path d="m 31.656963,26.687816 -4.287128,2.22907 c -0.458013,-0.95103 -1.019029,-1.61905 -1.685048,-2.00006 -0.667024,-0.38001 -1.286042,-0.57102 -1.858057,-0.57102 -2.856087,0 -4.28613,1.88506 -4.28613,5.65717 0,1.71406 0.362014,3.0841 1.085029,4.11313 0.724025,1.02903 1.791056,1.54405 3.201101,1.54405 1.867057,0 3.181095,-0.91503 3.944118,-2.74309 l 3.942125,2.00007 c -0.83803,1.56304 -2.000065,2.79108 -3.486111,3.68611 -1.484043,0.89602 -3.123093,1.34304 -4.914149,1.34304 -2.857088,0 -5.163158,-0.87503 -6.915212,-2.62908 -1.752053,-1.75205 -2.62808,-4.19013 -2.62808,-7.31323 0,-3.04809 0.886028,-5.46616 2.657081,-7.25722 1.771054,-1.79005 4.009125,-2.68608 6.715205,-2.68608 3.963122,-0.002 6.800209,1.54105 8.515256,4.62714 z" />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss
deleted file mode 100644
index a90391a..0000000
--- a/src/components/atoms/icons/close.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.line {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
deleted file mode 100644
index d075141..0000000
--- a/src/components/atoms/icons/close.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Close as CloseIcon } from './close';
-
-/**
- * Close icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: CloseIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof CloseIcon>;
-
-const Template: ComponentStory<typeof CloseIcon> = (args) => (
-  <CloseIcon {...args} />
-);
-
-/**
- * Icons Stories - Close
- */
-export const Close = Template.bind({});
diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx
deleted file mode 100644
index b2f325c..0000000
--- a/src/components/atoms/icons/close.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Close } from './close';
-
-describe('Close', () => {
-  it('renders a Close icon', () => {
-    const { container } = render(<Close />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
deleted file mode 100644
index 5db8620..0000000
--- a/src/components/atoms/icons/close.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './close.module.scss';
-
-export type CloseProps = SVGAttributes<SVGElement>;
-
-/**
- * Close component
- *
- * Render a close svg icon.
- */
-export const Close: FC<CloseProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.line}
-        d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
-      />
-      <path
-        className={styles.line}
-        d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss
deleted file mode 100644
index feda6ce..0000000
--- a/src/components/atoms/icons/cog.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  width: var(--icon-size, #{fun.convert-px(40)});
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
deleted file mode 100644
index 1b6d440..0000000
--- a/src/components/atoms/icons/cog.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Cog as CogIcon } from './cog';
-
-/**
- * Cogs icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: CogIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof CogIcon>;
-
-const Template: ComponentStory<typeof CogIcon> = (args) => (
-  <CogIcon {...args} />
-);
-
-/**
- * Icons Stories - Cogs
- */
-export const Cog = Template.bind({});
diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx
deleted file mode 100644
index f4ea71b..0000000
--- a/src/components/atoms/icons/cog.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Cog } from './cog';
-
-describe('Cog', () => {
-  it('renders a Cog icon', () => {
-    const { container } = render(<Cog />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
deleted file mode 100644
index 6e44708..0000000
--- a/src/components/atoms/icons/cog.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './cog.module.scss';
-
-export type CogProps = SVGAttributes<SVGElement>;
-
-/**
- * Cog component
- *
- * Render a cog svg icon.
- */
-export const Cog: FC<CogProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
-      <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss
deleted file mode 100644
index fcc4002..0000000
--- a/src/components/atoms/icons/computer-screen.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.root,
-.separator,
-.cursor,
-.line,
-.text {
-  fill: var(--color-fg);
-}
-
-.stand {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-dark);
-
-  &--top {
-    stroke-width: 3;
-  }
-
-  &--bottom {
-    stroke-width: 2;
-  }
-}
-
-.screen {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-dark);
-  stroke-width: 3;
-}
-
-.contour {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-dark);
-  stroke-width: 3;
-}
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
deleted file mode 100644
index d4b257b..0000000
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ComputerScreen as ComputerScreenIcon } from './computer-screen';
-
-/**
- * Computer Screen icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: ComputerScreenIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof ComputerScreenIcon>;
-
-const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => (
-  <ComputerScreenIcon {...args} />
-);
-
-/**
- * Icons Stories - Computer Screen
- */
-export const ComputerScreen = Template.bind({});
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
deleted file mode 100644
index 5a61c9b..0000000
--- a/src/components/atoms/icons/computer-screen.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { ComputerScreen } from './computer-screen';
-
-describe('ComputerScreen', () => {
-  it('renders a computer screen icon', () => {
-    const { container } = render(<ComputerScreen />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
deleted file mode 100644
index 32f41a0..0000000
--- a/src/components/atoms/icons/computer-screen.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './computer-screen.module.scss';
-
-export type ComputerScreenProps = SVGAttributes<SVGElement>;
-
-/**
- * ComputerScreen component
- *
- * Render a computer screen svg icon.
- */
-export const ComputerScreen: FC<ComputerScreenProps> = ({
-  className = '',
-  ...props
-}) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
-        className={styles.contour}
-      />
-      <path
-        d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
-        className={styles.screen}
-      />
-      <path
-        d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
-        className={`${styles.stand} ${styles['stand--top']}`}
-      />
-      <path
-        d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
-        className={`${styles.stand} ${styles['stand--bottom']}`}
-      />
-      <path
-        d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
-        className={styles.cursor}
-      />
-      <path
-        d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
-        className={styles.text}
-      />
-      <path
-        d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
-        className={styles.text}
-      />
-      <path
-        d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
-        className={styles.text}
-      />
-      <path
-        d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
-        className={styles.separator}
-      />
-      <path
-        d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
-        className={styles.root}
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss
deleted file mode 100644
index 584fe97..0000000
--- a/src/components/atoms/icons/envelop.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.envelop {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.lines {
-  fill: var(--color-fg);
-}
-
-.background {
-  fill: var(--color-shadow-dark);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.paper {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
deleted file mode 100644
index 666cd86..0000000
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Envelop as EnvelopIcon } from './envelop';
-
-/**
- * Envelop icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: EnvelopIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof EnvelopIcon>;
-
-const Template: ComponentStory<typeof EnvelopIcon> = (args) => (
-  <EnvelopIcon {...args} />
-);
-
-/**
- * Icons Stories - Envelop
- */
-export const Envelop = Template.bind({});
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
deleted file mode 100644
index 82ed575..0000000
--- a/src/components/atoms/icons/envelop.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Envelop } from './envelop';
-
-describe('Envelop', () => {
-  it('renders an envelop icon', () => {
-    const { container } = render(<Envelop />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
deleted file mode 100644
index 968c51f..0000000
--- a/src/components/atoms/icons/envelop.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './envelop.module.scss';
-
-export type EnvelopProps = SVGAttributes<SVGElement>;
-
-/**
- * Envelop Component
- *
- * Render an envelop svg icon.
- */
-export const Envelop: FC<EnvelopProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.background}
-        d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
-      />
-      <path
-        className={styles.paper}
-        d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
-      />
-      <path
-        className={styles.lines}
-        d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss
deleted file mode 100644
index bf15c23..0000000
--- a/src/components/atoms/icons/feed.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx
deleted file mode 100644
index 1a297e9..0000000
--- a/src/components/atoms/icons/feed.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Feed as FeedIcon } from './feed';
-
-/**
- * Feed icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: FeedIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof FeedIcon>;
-
-const Template: ComponentStory<typeof FeedIcon> = (args) => (
-  <FeedIcon {...args} />
-);
-
-/**
- * Icons Stories - Feed
- */
-export const Feed = Template.bind({});
diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx
deleted file mode 100644
index 5a91483..0000000
--- a/src/components/atoms/icons/feed.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Feed } from './feed';
-
-describe('Feed', () => {
-  it('renders a feed icon', () => {
-    const { container } = render(<Feed />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx
deleted file mode 100644
index 40b3156..0000000
--- a/src/components/atoms/icons/feed.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './feed.module.scss';
-
-export type FeedProps = SVGAttributes<SVGElement>;
-
-/**
- * Feed Component
- *
- * Render a feed svg icon.
- */
-export const Feed: FC<FeedProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 256 256"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
-          <stop offset="0.0" stopColor="#E3702D" />
-          <stop offset="0.1071" stopColor="#EA7D31" />
-          <stop offset="0.3503" stopColor="#F69537" />
-          <stop offset="0.5" stopColor="#FB9E3A" />
-          <stop offset="0.7016" stopColor="#EA7C31" />
-          <stop offset="0.8866" stopColor="#DE642B" />
-          <stop offset="1.0" stopColor="#D95B29" />
-        </linearGradient>
-      </defs>
-      <rect
-        width="256"
-        height="256"
-        rx="55"
-        ry="55"
-        x="0"
-        y="0"
-        fill="#CC5D15"
-      />
-      <rect
-        width="246"
-        height="246"
-        rx="50"
-        ry="50"
-        x="5"
-        y="5"
-        fill="#F49C52"
-      />
-      <rect
-        width="236"
-        height="236"
-        rx="47"
-        ry="47"
-        x="10"
-        y="10"
-        fill="url(#RSSg)"
-      />
-      <circle cx="68" cy="189" r="24" fill="#FFF" />
-      <path
-        d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z"
-        fill="#FFF"
-      />
-      <path
-        d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z"
-        fill="#FFF"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss
deleted file mode 100644
index c92b3ab..0000000
--- a/src/components/atoms/icons/hamburger.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  width: var(--icon-size, #{fun.convert-px(50)});
-  height: var(--icon-size, #{fun.convert-px(50)});
-  position: relative;
-}
-
-.icon {
-  &,
-  &::before,
-  &::after {
-    display: block;
-    height: fun.convert-px(7);
-    width: 100%;
-    position: absolute;
-    background: var(--color-primary-lighter);
-    background-image: linear-gradient(
-      to right,
-      var(--color-primary-light) 0%,
-      var(--color-primary-lighter) 100%
-    );
-    border: fun.convert-px(1) solid var(--color-primary-darker);
-    border-radius: fun.convert-px(3);
-    transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s;
-  }
-
-  &::before,
-  &::after {
-    content: "";
-  }
-
-  &::before {
-    top: fun.convert-px(-15);
-  }
-
-  &::after {
-    bottom: fun.convert-px(-15);
-  }
-}
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
deleted file mode 100644
index b2416c6..0000000
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Hamburger as HamburgerIcon } from './hamburger';
-
-/**
- * Hamburger icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: HamburgerIcon,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the icon wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    iconClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the icon.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof HamburgerIcon>;
-
-const Template: ComponentStory<typeof HamburgerIcon> = (args) => (
-  <HamburgerIcon {...args} />
-);
-
-/**
- * Icons Stories - Hamburger
- */
-export const Hamburger = Template.bind({});
diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx
deleted file mode 100644
index d7a17b6..0000000
--- a/src/components/atoms/icons/hamburger.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Hamburger } from './hamburger';
-
-describe('Hamburger', () => {
-  it('renders a Hamburger icon', () => {
-    const { container } = render(<Hamburger />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
deleted file mode 100644
index cc4e7b9..0000000
--- a/src/components/atoms/icons/hamburger.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import styles from './hamburger.module.scss';
-
-export type HamburgerProps = {
-  /**
-   * Set additional classnames to the icon wrapper.
-   */
-  className?: string;
-  /**
-   * Set additional classnames to the icon.
-   */
-  iconClassName?: string;
-};
-
-/**
- * Hamburger component
- *
- * Render a Hamburger icon.
- */
-export const Hamburger: FC<HamburgerProps> = ({
-  className = '',
-  iconClassName = '',
-}) => {
-  return (
-    <span className={`${styles.wrapper} ${className}`}>
-      <span className={`${styles.icon} ${iconClassName}`}></span>
-    </span>
-  );
-};
diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss
deleted file mode 100644
index 8ed05a0..0000000
--- a/src/components/atoms/icons/home.module.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.wall {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.indoor {
-  fill: var(--color-shadow-dark);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.door {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.roof {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.chimney {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.lines {
-  fill: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
deleted file mode 100644
index 7492af7..0000000
--- a/src/components/atoms/icons/home.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Home as HomeIcon } from './home';
-
-/**
- * Home icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: HomeIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof HomeIcon>;
-
-const Template: ComponentStory<typeof HomeIcon> = (args) => (
-  <HomeIcon {...args} />
-);
-
-/**
- * Icons Stories - Home
- */
-export const Home = Template.bind({});
diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx
deleted file mode 100644
index e7d03d9..0000000
--- a/src/components/atoms/icons/home.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Home } from './home';
-
-describe('Home', () => {
-  it('renders a home icon', () => {
-    const { container } = render(<Home />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
deleted file mode 100644
index 0081f37..0000000
--- a/src/components/atoms/icons/home.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './home.module.scss';
-
-export type HomeProps = SVGAttributes<SVGElement>;
-
-/**
- * Home component.
- *
- * Render a home svg icon.
- */
-export const Home: FC<HomeProps> = ({ className = '', ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.wall}
-        d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
-      />
-      <path
-        className={styles.indoor}
-        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
-      />
-      <path
-        className={styles.door}
-        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
-      />
-      <path
-        className={styles.roof}
-        d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
-      />
-      <path
-        className={styles.chimney}
-        d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
-      />
-      <path
-        className={styles.lines}
-        d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts
deleted file mode 100644
index 1b413ba..0000000
--- a/src/components/atoms/icons/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './arrow';
-export * from './career';
-export * from './cc-by-sa';
-export * from './close';
-export * from './cog';
-export * from './computer-screen';
-export * from './envelop';
-export * from './feed';
-export * from './hamburger';
-export * from './home';
-export * from './magnifying-glass';
-export * from './moon';
-export * from './plus-minus';
-export * from './posts-stack';
-export * from './sun';
diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss
deleted file mode 100644
index 33a82d6..0000000
--- a/src/components/atoms/icons/magnifying-glass.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.big-handle {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.glass {
-  fill: var(--color-bg-opacity);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.upright {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.small-handle {
-  fill: var(--color-primary);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
deleted file mode 100644
index 7dec505..0000000
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass';
-
-/**
- * Magnifying Glass icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: MagnifyingGlassIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof MagnifyingGlassIcon>;
-
-const Template: ComponentStory<typeof MagnifyingGlassIcon> = (args) => (
-  <MagnifyingGlassIcon {...args} />
-);
-
-/**
- * Icons Stories - Magnifying Glass
- */
-export const MagnifyingGlass = Template.bind({});
diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx
deleted file mode 100644
index 5cff75b..0000000
--- a/src/components/atoms/icons/magnifying-glass.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { MagnifyingGlass } from './magnifying-glass';
-
-describe('MagnifyingGlass', () => {
-  it('renders a magnifying glass icon', () => {
-    const { container } = render(<MagnifyingGlass />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
deleted file mode 100644
index 619adef..0000000
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './magnifying-glass.module.scss';
-
-export type MagnifyingGlassProps = SVGAttributes<SVGElement>;
-
-/**
- * MagnifyingGlass component
- *
- * Render a magnifying glass svg icon.
- */
-export const MagnifyingGlass: FC<MagnifyingGlassProps> = ({
-  className = '',
-  ...props
-}) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles['small-handle']}
-        d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z"
-      />
-      <path
-        className={styles.upright}
-        d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z"
-      />
-      <path
-        className={styles.glass}
-        d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z"
-      />
-      <path
-        className={styles['big-handle']}
-        d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/moon.module.scss b/src/components/atoms/icons/moon.module.scss
deleted file mode 100644
index f2564a9..0000000
--- a/src/components/atoms/icons/moon.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-  width: var(--icon-size, #{fun.convert-px(25)});
-}
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
deleted file mode 100644
index a8faf03..0000000
--- a/src/components/atoms/icons/moon.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Moon as MoonIcon } from './moon';
-
-/**
- * Moon icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: MoonIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The SVG title.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof MoonIcon>;
-
-const Template: ComponentStory<typeof MoonIcon> = (args) => (
-  <MoonIcon {...args} />
-);
-
-/**
- * Icons Stories - Moon
- */
-export const Moon = Template.bind({});
diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx
deleted file mode 100644
index b164ecd..0000000
--- a/src/components/atoms/icons/moon.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Moon } from './moon';
-
-describe('Moon', () => {
-  it('renders a moon icon', () => {
-    const { container } = render(<Moon />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
deleted file mode 100644
index 2139ce1..0000000
--- a/src/components/atoms/icons/moon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './moon.module.scss';
-
-export type MoonProps = SVGAttributes<SVGElement> & {
-  /**
-   * The SVG title.
-   */
-  title?: string;
-};
-
-export const Moon: FC<MoonProps> = ({ className = '', title, ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {title ? <title>{title}</title> : null}
-      <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/plus-minus.module.scss b/src/components/atoms/icons/plus-minus.module.scss
deleted file mode 100644
index b46b5ba..0000000
--- a/src/components/atoms/icons/plus-minus.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: flex;
-  place-content: center;
-  place-items: center;
-  width: var(--icon-size, #{fun.convert-px(30)});
-  height: var(--icon-size, #{fun.convert-px(30)});
-  position: relative;
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary);
-  border-radius: fun.convert-px(3);
-  color: var(--color-primary);
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    background: var(--color-primary);
-    transition: transform 0.4s ease-out 0s;
-  }
-
-  &::after {
-    height: fun.convert-px(3);
-    width: 60%;
-  }
-
-  &::before {
-    height: 60%;
-    width: fun.convert-px(3);
-    transform: scaleY(1);
-  }
-
-  &--minus {
-    &::before {
-      transform: scaleY(0);
-    }
-  }
-}
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
deleted file mode 100644
index c556076..0000000
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PlusMinus as PlusMinusIcon } from './plus-minus';
-
-/**
- * Plus/Minus icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: PlusMinusIcon,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    state: {
-      control: {
-        type: 'radio',
-      },
-      description: 'Which state should be displayed.',
-      options: ['plus', 'minus'],
-      type: {
-        name: 'enum',
-        required: true,
-        value: ['plus', 'minus'],
-      },
-    },
-  },
-} as ComponentMeta<typeof PlusMinusIcon>;
-
-const Template: ComponentStory<typeof PlusMinusIcon> = (args) => (
-  <PlusMinusIcon {...args} />
-);
-
-/**
- * Icons Stories - Plus/Minus
- */
-export const PlusMinus = Template.bind({});
-PlusMinus.args = {
-  state: 'plus',
-};
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
deleted file mode 100644
index 6307401..0000000
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { PlusMinus } from './plus-minus';
-
-describe('PlusMinus', () => {
-  it('renders a plus/minus icon', () => {
-    const { container } = render(<PlusMinus state="plus" />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx
deleted file mode 100644
index e2eb55e..0000000
--- a/src/components/atoms/icons/plus-minus.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import styles from './plus-minus.module.scss';
-
-export type PlusMinusProps = {
-  /**
-   * Set additional classnames to the icon.
-   */
-  className?: string;
-  /**
-   * Which state should be displayed.
-   */
-  state: 'plus' | 'minus';
-};
-
-/**
- * PlusMinus component
- *
- * Render a plus or a minus icon.
- */
-export const PlusMinus: FC<PlusMinusProps> = ({ className = '', state }) => {
-  const stateClass = `icon--${state}`;
-
-  return (
-    <div
-      aria-hidden={true}
-      className={`${styles.icon} ${styles[stateClass]} ${className}`}
-    />
-  );
-};
diff --git a/src/components/atoms/icons/posts-stack.module.scss b/src/components/atoms/icons/posts-stack.module.scss
deleted file mode 100644
index aa1f4f0..0000000
--- a/src/components/atoms/icons/posts-stack.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.lines {
-  fill: var(--color-fg);
-  stroke-width: 4;
-}
-
-.picture {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-}
-
-.background {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
deleted file mode 100644
index 7daeecf..0000000
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PostsStack as PostsStackIcon } from './posts-stack';
-
-/**
- * Posts Stack icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: PostsStackIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof PostsStackIcon>;
-
-const Template: ComponentStory<typeof PostsStackIcon> = (args) => (
-  <PostsStackIcon {...args} />
-);
-
-/**
- * Icons Stories - Posts Stack
- */
-export const PostsStack = Template.bind({});
diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx
deleted file mode 100644
index 068fbea..0000000
--- a/src/components/atoms/icons/posts-stack.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { PostsStack } from './posts-stack';
-
-describe('PostsStack', () => {
-  it('renders a posts stack icon', () => {
-    const { container } = render(<PostsStack />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
deleted file mode 100644
index c783892..0000000
--- a/src/components/atoms/icons/posts-stack.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './posts-stack.module.scss';
-
-export type PostsStackProps = SVGAttributes<SVGElement>;
-
-/**
- * Posts stack component.
- *
- * Render a posts stack svg icon.
- */
-export const PostsStack: FC<PostsStackProps> = ({
-  className = '',
-  ...props
-}) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.icon} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className={styles.background}
-        d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z"
-      />
-      <path
-        className={styles.background}
-        d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z"
-      />
-      <path
-        className={styles.background}
-        d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z"
-      />
-      <path
-        className={styles.picture}
-        d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z"
-      />
-      <path
-        className={styles.picture}
-        d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,41.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,49.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,57.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,65.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/icons/sun.module.scss b/src/components/atoms/icons/sun.module.scss
deleted file mode 100644
index 8d9683f..0000000
--- a/src/components/atoms/icons/sun.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.sun {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-  width: var(--icon-size, #{fun.convert-px(25)});
-}
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
deleted file mode 100644
index a332bcd..0000000
--- a/src/components/atoms/icons/sun.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Sun as SunIcon } from './sun';
-
-/**
- * Sun icon - Storybook Meta
- */
-export default {
-  title: 'Atoms/Illustrations/Icons',
-  component: SunIcon,
-  argTypes: {
-    'aria-hidden': {
-      control: {
-        type: null,
-      },
-      description: 'Should the svg be hidden from assistive technologies?',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The SVG title.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof SunIcon>;
-
-const Template: ComponentStory<typeof SunIcon> = (args) => (
-  <SunIcon {...args} />
-);
-
-/**
- * Icons Stories - Sun
- */
-export const Sun = Template.bind({});
diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx
deleted file mode 100644
index 2aa916b..0000000
--- a/src/components/atoms/icons/sun.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render } from '../../../../tests/utils';
-import { Sun } from './sun';
-
-describe('Sun', () => {
-  it('renders a sun icon', () => {
-    const { container } = render(<Sun />);
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
deleted file mode 100644
index 69a3044..0000000
--- a/src/components/atoms/icons/sun.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { FC, SVGAttributes } from 'react';
-import styles from './sun.module.scss';
-
-export type SunProps = SVGAttributes<SVGElement> & {
-  /**
-   * The SVG title.
-   */
-  title?: string;
-};
-
-/**
- * Sun component.
- *
- * Render a svg sun icon.
- */
-export const Sun: FC<SunProps> = ({ className = '', title, ...props }) => {
-  return (
-    <svg
-      {...props}
-      className={`${styles.sun} ${className}`}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {title !== 'undefined' && <title>{title}</title>}
-      <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
-    </svg>
-  );
-};
diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
new file mode 100644
index 0000000..8b8ad7e
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
@@ -0,0 +1,45 @@
+@use "../../../../../styles/abstracts/functions" as fun;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  aspect-ratio: 1/1;
+  position: relative;
+}
+
+.icon {
+  width: 100%;
+
+  &,
+  &::before,
+  &::after {
+    display: block;
+    height: 20%;
+    background: var(--color-primary-lighter);
+    background-image: linear-gradient(
+      to right,
+      var(--color-primary-light) 0%,
+      var(--color-primary-lighter) 100%
+    );
+    border: fun.convert-px(1) solid var(--color-primary-darker);
+    border-radius: fun.convert-px(4);
+    transition:
+      all 0.25s ease-in-out 0s,
+      transform 0.4s ease-in 0s;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+  }
+
+  &::before {
+    top: 3%;
+  }
+
+  &::after {
+    bottom: 3%;
+  }
+}
diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx
new file mode 100644
index 0000000..edd25ba
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx
@@ -0,0 +1,25 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './hamburger-icon.module.scss';
+
+export type HamburgerIconProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+>;
+
+/**
+ * HamburgerIcon component
+ *
+ * Render a Hamburger icon.
+ */
+export const HamburgerIcon: FC<HamburgerIconProps> = ({
+  className = '',
+  ...props
+}) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+
+  return (
+    <span {...props} className={wrapperClass}>
+      <span className={styles.icon} />
+    </span>
+  );
+};
diff --git a/src/components/atoms/images/icons/hamburger-icon/index.ts b/src/components/atoms/images/icons/hamburger-icon/index.ts
new file mode 100644
index 0000000..a601d0c
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/index.ts
@@ -0,0 +1 @@
+export * from './hamburger-icon';
diff --git a/src/components/atoms/images/icons/icon.module.scss b/src/components/atoms/images/icons/icon.module.scss
new file mode 100644
index 0000000..72eb611
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.module.scss
@@ -0,0 +1,53 @@
+@use "../../../../styles/abstracts/functions" as fun;
+
+.icon {
+  width: var(--icon-size);
+  transition: all 0.25s ease-in-out 0s;
+
+  &--arrow {
+    fill: var(--color-primary);
+  }
+
+  &--cc-by-sa {
+    width: calc(var(--icon-size) * 2);
+    fill: var(--color-fg);
+  }
+
+  &--cog,
+  &--home,
+  &--moon,
+  &--sun {
+    stroke-width: 4;
+  }
+
+  &--cog,
+  &--moon,
+  &--sun {
+    fill: var(--color-primary-lighter);
+    stroke: var(--color-primary-darker);
+  }
+
+  &--stroke {
+    stroke: var(--color-primary);
+  }
+
+  &--xs {
+    --icon-size: var(--icon-size-xs);
+  }
+
+  &--sm {
+    --icon-size: var(--icon-size-sm);
+  }
+
+  &--md {
+    --icon-size: var(--icon-size-md);
+  }
+
+  &--lg {
+    --icon-size: var(--icon-size-lg);
+  }
+
+  &--xl {
+    --icon-size: var(--icon-size-xl);
+  }
+}
diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx
new file mode 100644
index 0000000..fa8d2b5
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.stories.tsx
@@ -0,0 +1,201 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon, type IconProps, type IconShape } from './icon';
+
+/**
+ * Home icon - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Images/Icons',
+  component: Icon,
+  argTypes: {
+    shape: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'arrow',
+        'career',
+        'cc-by-sa',
+        'cog',
+        'computer',
+        'cross',
+        'envelop',
+        'feed',
+        'hamburger',
+        'home',
+        'magnifying-glass',
+        'minus',
+        'moon',
+        'posts-stack',
+        'plus',
+        'sun',
+      ],
+      description: 'Define the icon shape.',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = ({
+  shape,
+  ...args
+}: IconProps<IconShape>) => <Icon {...args} shape={shape} />;
+
+/**
+ * Icon Stories - ArrowRight
+ */
+export const ArrowRight = Template.bind({});
+ArrowRight.args = {
+  orientation: 'right',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowLeft
+ */
+export const ArrowLeft = Template.bind({});
+ArrowLeft.args = {
+  orientation: 'left',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowBottom
+ */
+export const ArrowBottom = Template.bind({});
+ArrowBottom.args = {
+  orientation: 'bottom',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowTop
+ */
+export const ArrowTop = Template.bind({});
+ArrowTop.args = {
+  orientation: 'top',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - Career
+ */
+export const Career = Template.bind({});
+Career.args = {
+  shape: 'career',
+};
+
+/**
+ * Icon Stories - CCBySA
+ */
+export const CCBySA = Template.bind({});
+CCBySA.args = {
+  shape: 'cc-by-sa',
+};
+
+/**
+ * Icon Stories - Cog
+ */
+export const Cog = Template.bind({});
+Cog.args = {
+  shape: 'cog',
+};
+
+/**
+ * Icon Stories - Computer
+ */
+export const Computer = Template.bind({});
+Computer.args = {
+  shape: 'computer',
+};
+
+/**
+ * Icon Stories - Cross
+ */
+export const Cross = Template.bind({});
+Cross.args = {
+  shape: 'cross',
+};
+
+/**
+ * Icon Stories - Envelop
+ */
+export const Envelop = Template.bind({});
+Envelop.args = {
+  shape: 'envelop',
+};
+
+/**
+ * Icon Stories - Feed
+ */
+export const Feed = Template.bind({});
+Feed.args = {
+  shape: 'feed',
+};
+
+/**
+ * Icon Stories - Hamburger
+ */
+export const Hamburger = Template.bind({});
+Hamburger.args = {
+  shape: 'hamburger',
+};
+
+/**
+ * Icon Stories - Home
+ */
+export const Home = Template.bind({});
+Home.args = {
+  shape: 'home',
+};
+
+/**
+ * Icon Stories - MagnifyingGlass
+ */
+export const MagnifyingGlass = Template.bind({});
+MagnifyingGlass.args = {
+  shape: 'magnifying-glass',
+};
+
+/**
+ * Icon Stories - Minus
+ */
+export const Minus = Template.bind({});
+Minus.args = {
+  shape: 'minus',
+};
+
+/**
+ * Icon Stories - Moon
+ */
+export const Moon = Template.bind({});
+Moon.args = {
+  shape: 'moon',
+};
+
+/**
+ * Icon Stories - Plus
+ */
+export const Plus = Template.bind({});
+Plus.args = {
+  shape: 'plus',
+};
+
+/**
+ * Icon Stories - PostsStack
+ */
+export const PostsStack = Template.bind({});
+PostsStack.args = {
+  shape: 'posts-stack',
+};
+
+/**
+ * Icon Stories - Sun
+ */
+export const Sun = Template.bind({});
+Sun.args = {
+  shape: 'sun',
+};
diff --git a/src/components/atoms/images/icons/icon.test.tsx b/src/components/atoms/images/icons/icon.test.tsx
new file mode 100644
index 0000000..d80edd7
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.test.tsx
@@ -0,0 +1,182 @@
+/* eslint-disable max-statements */
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Icon } from './icon';
+
+/* eslint-disable jsx-a11y/prefer-tag-over-role -- Valid on SVG */
+describe('Icon', () => {
+  it('can render an icon with a heading', () => {
+    const heading = 'architecto';
+
+    render(<Icon heading={heading} shape="arrow" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('can render an icon with a description', () => {
+    const description = 'fuga voluptates eligendi';
+
+    render(<Icon description={description} shape="arrow" role="img" />);
+
+    expect(rtlScreen.getByRole('img')).toHaveTextContent(description);
+  });
+
+  it('render an icon with bottom arrow shape', () => {
+    const heading = 'quae';
+
+    render(
+      <Icon heading={heading} orientation="bottom" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with left arrow shape', () => {
+    const heading = 'nemo';
+
+    render(
+      <Icon heading={heading} orientation="left" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with right arrow shape', () => {
+    const heading = 'odit';
+
+    render(
+      <Icon heading={heading} orientation="right" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with top arrow shape', () => {
+    const heading = 'ut';
+
+    render(
+      <Icon heading={heading} orientation="top" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with career shape', () => {
+    const heading = 'autem';
+
+    render(<Icon heading={heading} shape="career" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cc-by-sa shape', () => {
+    const heading = 'blanditiis';
+
+    render(<Icon heading={heading} shape="cc-by-sa" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cog shape', () => {
+    const heading = 'consequatur';
+
+    render(<Icon heading={heading} shape="cog" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with computer shape', () => {
+    const heading = 'amet';
+
+    render(<Icon heading={heading} shape="computer" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cross shape', () => {
+    const heading = 'molestias';
+
+    render(<Icon heading={heading} shape="cross" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with envelop shape', () => {
+    const heading = 'laudantium';
+
+    render(<Icon heading={heading} shape="envelop" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+  it('render an icon with feed shape', () => {
+    const heading = 'beatae';
+
+    render(<Icon heading={heading} shape="feed" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with home shape', () => {
+    const heading = 'aut';
+
+    render(<Icon heading={heading} shape="home" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with magnifying glass shape', () => {
+    const heading = 'rerum';
+
+    render(<Icon heading={heading} shape="magnifying-glass" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with moon shape', () => {
+    const heading = 'saepe';
+
+    render(<Icon heading={heading} shape="moon" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with posts stack shape', () => {
+    const heading = 'sunt';
+
+    render(<Icon heading={heading} shape="posts-stack" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with sun shape', () => {
+    const heading = 'aut';
+
+    render(<Icon heading={heading} shape="sun" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with hamburger shape', () => {
+    const heading = 'sed';
+
+    render(<Icon aria-label={heading} shape="hamburger" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with minus shape', () => {
+    const heading = 'sunt';
+
+    render(<Icon aria-label={heading} shape="minus" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with plus shape', () => {
+    const heading = 'maxime';
+
+    render(<Icon aria-label={heading} shape="plus" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/images/icons/icon.tsx b/src/components/atoms/images/icons/icon.tsx
new file mode 100644
index 0000000..23170d9
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.tsx
@@ -0,0 +1,126 @@
+import type { SVGAttributes } from 'react';
+import { HamburgerIcon, type HamburgerIconProps } from './hamburger-icon';
+import styles from './icon.module.scss';
+import {
+  PlusMinusIcon,
+  type PlusMinusIconProps,
+  type PlusMinusIconShape,
+} from './plus-minus-icon';
+import { type SVGIconShape, SVGPaths, type SVGPathsProps } from './svg-paths';
+
+export type IconShape = SVGIconShape | PlusMinusIconShape | 'hamburger';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type SVGIconProps = Omit<
+  SVGAttributes<SVGElement>,
+  'children' | 'viewBox' | 'xmlns'
+> & {
+  /**
+   * Describe the icon.
+   */
+  description?: string;
+  /**
+   * Define an accessible title for the icon.
+   */
+  heading?: string;
+};
+
+type IconBaseProps<T extends IconShape> = T extends 'hamburger'
+  ? HamburgerIconProps
+  : T extends 'minus' | 'plus'
+  ? PlusMinusIconProps
+  : SVGIconProps;
+
+type AdditionalProps<T extends IconShape> = Pick<
+  SVGPathsProps,
+  'orientation'
+> & {
+  /**
+   * The icon shape.
+   */
+  shape: T;
+  /**
+   * The icon size.
+   *
+   * @default 'md'
+   */
+  size?: IconSize;
+};
+
+export type IconProps<T extends IconShape> = IconBaseProps<T> &
+  Pick<SVGPathsProps, 'orientation'> &
+  AdditionalProps<T>;
+
+type BuildClassNameConfig<T extends IconShape> = Pick<
+  IconProps<T>,
+  'className'
+> &
+  Pick<AdditionalProps<T>, 'shape' | 'size'>;
+
+const buildClassName = <T extends IconShape>({
+  className,
+  shape,
+  size,
+}: BuildClassNameConfig<T>) => {
+  const classNames = ['icon', `icon--${shape}`, `icon--${size}`].map(
+    (key) => styles[key]
+  );
+
+  if (className) classNames.push(className);
+
+  return classNames.join(' ');
+};
+
+type ExtractedProps = 'className' | 'orientation' | 'shape' | 'size';
+
+export const Icon = <T extends IconShape>({
+  className = '',
+  orientation,
+  shape,
+  size = 'md',
+  ...props
+}: IconProps<T>) => {
+  const iconClass = buildClassName({ className, shape, size });
+
+  if (shape === 'hamburger')
+    return (
+      <HamburgerIcon
+        // Without casting Typescript complains because of props generic type
+        {...(props as Omit<IconProps<'hamburger'>, ExtractedProps>)}
+        className={iconClass}
+      />
+    );
+
+  if (shape === 'minus' || shape === 'plus')
+    return (
+      <PlusMinusIcon
+        // Without casting Typescript complains because of props generic type
+        {...(props as Omit<IconProps<'minus' | 'plus'>, ExtractedProps>)}
+        className={iconClass}
+        shape={shape}
+      />
+    );
+
+  const viewBox = shape === 'cc-by-sa' ? '0 0 100 40' : '0 0 100 100';
+
+  // Without casting Typescript complains because of props generic type
+  const { heading, description, ...remainingProps } = props as Omit<
+    IconProps<SVGIconShape>,
+    ExtractedProps
+  >;
+
+  return (
+    <svg
+      {...remainingProps}
+      className={iconClass}
+      viewBox={viewBox}
+      // eslint-disable-next-line react/jsx-no-literals
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {heading ? <title>{heading}</title> : null}
+      {description ? <desc>{description}</desc> : null}
+      <SVGPaths orientation={orientation} shape={shape} />
+    </svg>
+  );
+};
diff --git a/src/components/atoms/images/icons/index.ts b/src/components/atoms/images/icons/index.ts
new file mode 100644
index 0000000..af77d84
--- /dev/null
+++ b/src/components/atoms/images/icons/index.ts
@@ -0,0 +1 @@
+export * from './icon';
diff --git a/src/components/atoms/images/icons/plus-minus-icon/index.ts b/src/components/atoms/images/icons/plus-minus-icon/index.ts
new file mode 100644
index 0000000..acca727
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/index.ts
@@ -0,0 +1 @@
+export * from './plus-minus-icon';
diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
new file mode 100644
index 0000000..07550c9
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
@@ -0,0 +1,38 @@
+@use "../../../../../styles/abstracts/functions" as fun;
+
+.icon {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  aspect-ratio: 1/1;
+  position: relative;
+  background: var(--color-bg);
+  border: fun.convert-px(1) solid var(--color-primary);
+  border-radius: fun.convert-px(3);
+  color: var(--color-primary);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    background: var(--color-primary);
+    transition: transform 0.4s ease-out 0s;
+  }
+
+  &::after {
+    height: fun.convert-px(3);
+    width: 60%;
+  }
+
+  &::before {
+    height: 55%;
+    width: fun.convert-px(3);
+    transform: scaleY(1);
+  }
+
+  &--minus {
+    &::before {
+      transform: scaleY(0);
+    }
+  }
+}
diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx
new file mode 100644
index 0000000..ed6bcf2
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx
@@ -0,0 +1,30 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './plus-minus-icon.module.scss';
+
+export type PlusMinusIconShape = 'minus' | 'plus';
+
+export type PlusMinusIconProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  /**
+   * Which shape should be displayed.
+   */
+  shape: PlusMinusIconShape;
+};
+
+/**
+ * PlusMinusIcon component
+ *
+ * Render a plus or a minus icon.
+ */
+export const PlusMinusIcon: FC<PlusMinusIconProps> = ({
+  className = '',
+  shape,
+  ...props
+}) => {
+  const shapeClass = styles[`icon--${shape}`];
+  const iconClass = `${styles.icon} ${shapeClass} ${className}`;
+
+  return <div {...props} className={iconClass} />;
+};
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx
new file mode 100644
index 0000000..ee29d5d
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+export type ArrowOrientation = 'top' | 'right' | 'bottom' | 'left';
+
+const getArrowBarPathFrom = (orientation: ArrowOrientation) => {
+  switch (orientation) {
+    case 'bottom':
+      return 'm 55.749998,2e-6 v 61.764896 h -11.5 V 2e-6 Z';
+    case 'left':
+      return 'M 99.999996,44.25 H 38.2351 v 11.5 h 61.764896 z';
+    case 'right':
+      return 'm 0,44.25 h 61.764896 v 11.5 H 0 Z';
+    case 'top':
+    default:
+      return 'M 55.749998,99.999998 V 38.235102 h -11.5 v 61.764896 z';
+  }
+};
+
+const getArrowHeadPathFrom = (orientation: ArrowOrientation) => {
+  switch (orientation) {
+    case 'bottom':
+      return 'm 69.999998,61.764898 -20,38.2351 -20,-38.2351 z';
+    case 'left':
+      return 'M 38.2351,30 0,50 38.2351,70 Z';
+    case 'right':
+      return 'm 61.764896,30 38.2351,20 -38.2351,20 z';
+    case 'top':
+    default:
+      return 'm 69.999998,38.235102 -20,-38.2351 -20,38.2351 z';
+  }
+};
+
+export type ArrowProps = {
+  /**
+   * The arrow orientation.
+   */
+  orientation: ArrowOrientation;
+};
+
+/**
+ * ArrowIconPaths
+ *
+ * Render the svg paths to make an arrow icon.
+ */
+export const ArrowIconPaths: FC<ArrowProps> = ({ orientation }) => (
+  <>
+    <path className="arrow-head" d={getArrowHeadPathFrom(orientation)} />
+    <path className="arrow-bar" d={getArrowBarPathFrom(orientation)} />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss
new file mode 100644
index 0000000..f93e73a
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss
@@ -0,0 +1,43 @@
+.bottom,
+.diploma,
+.lines,
+.top {
+  stroke-width: 4;
+}
+
+.bottom,
+.diploma,
+.handle,
+.lock,
+.seal,
+.top {
+  stroke: var(--color-primary-darker);
+}
+
+.bottom {
+  fill: var(--color-primary);
+}
+
+.diploma,
+.lock {
+  fill: var(--color-bg);
+}
+
+.handle,
+.seal,
+.top {
+  fill: var(--color-primary-lighter);
+}
+
+.handle,
+.lock {
+  stroke-width: 3;
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.seal {
+  stroke-width: 2;
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx
new file mode 100644
index 0000000..8fbaa12
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './career-icon-paths.module.scss';
+
+/**
+ * CareerIconPaths
+ *
+ * Render the svg paths to make a career icon.
+ */
+export const CareerIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bottom}
+      d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z"
+    />
+    <path
+      className={styles.handle}
+      d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
+    />
+    <path
+      className={styles.top}
+      d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z"
+    />
+    <path
+      className={styles.diploma}
+      d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z"
+    />
+    <path
+      className={styles.seal}
+      d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z"
+    />
+    <path
+      className={styles.seal}
+      d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z"
+    />
+    <path
+      className={styles.lock}
+      d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx
new file mode 100644
index 0000000..5961d92
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * CCBySAIconPaths
+ *
+ * Render the svg paths to make a CC-BY-SA icon.
+ */
+export const CCBySAIconPaths: FC = () => (
+  <>
+    <path d="m 82.802205,12.372338 c 0,-1.418881 0.700478,-2.129264 2.102849,-2.129264 1.402371,0 2.102377,0.70944 2.102377,2.129264 0,1.401427 -0.700949,2.102377 -2.102377,2.102377 -1.401427,0 -2.102849,-0.70095 -2.102849,-2.102377 z" />
+    <path d="m 88.975373,16.253505 v 6.172224 H 87.25083 v 7.331198 h -4.690608 v -7.330726 h -1.724544 v -6.172696 c 0,-0.269814 0.09434,-0.49859 0.28255,-0.687271 0.189153,-0.188209 0.4184,-0.283021 0.68727,-0.283021 h 6.200055 c 0.251418,0 0.47642,0.09434 0.673591,0.283021 0.1967,0.188681 0.296229,0.417929 0.296229,0.687271 z" />
+    <path d="m 84.878809,4.905526 c -4.169377,0 -7.708404,1.455113 -10.619751,4.366932 C 71.294409,12.291353 69.811052,15.867416 69.811052,20 c 0,4.133056 1.483357,7.681348 4.448006,10.646469 3.000499,2.965121 6.539997,4.448005 10.619751,4.448005 4.150508,0 7.752951,-1.50092 10.807695,-4.502361 C 98.562001,27.771333 100,24.241076 100,20 100,15.777321 98.534676,12.201729 95.606348,9.272458 92.695001,6.361111 89.118469,4.905526 84.878809,4.905526 Z m 0.05343,2.722423 c 3.414181,0 6.325372,1.203902 8.732941,3.61147 2.407097,2.408512 3.611471,5.327554 3.611471,8.75966 0,3.486352 -1.185846,6.370694 -3.558036,8.652789 -2.497664,2.462758 -5.427365,3.692545 -8.787296,3.692545 -3.378332,0 -6.289056,-1.221465 -8.732946,-3.665827 -2.443418,-2.442475 -3.664905,-5.335182 -3.664905,-8.677665 0,-3.324086 1.230261,-6.24452 3.692547,-8.76058 2.372191,-2.407569 5.274118,-3.612392 8.706224,-3.612392 z" />
+    <path d="m 43.395931,17.695499 c 0.287267,-1.85096 1.032557,-3.283992 2.236813,-4.299095 1.203784,-1.015104 2.667946,-1.522656 4.393433,-1.522656 2.371248,0 4.259,0.764158 5.660428,2.290587 1.401428,1.527372 2.102377,3.486352 2.102377,5.875996 0,2.318417 -0.727837,4.245321 -2.182566,5.781183 -1.456617,1.535863 -3.342483,2.304738 -5.661372,2.304738 -1.70709,0 -3.180687,-0.511797 -4.42032,-1.536335 -1.240106,-1.024537 -1.985395,-2.479739 -2.237284,-4.366548 h 3.801449 c 0.08962,1.833035 1.19482,2.749553 3.315593,2.749553 1.059444,0 1.913697,-0.458495 2.560401,-1.374541 0.647647,-0.916046 0.971235,-2.138698 0.971235,-3.665598 0,-1.599543 -0.296701,-2.816535 -0.889159,-3.652391 -0.593402,-0.835385 -1.44624,-1.253313 -2.561344,-1.253313 -2.013225,0 -3.144839,0.889158 -3.396255,2.667948 h 1.105197 l -2.991534,2.992008 -2.992008,-2.992008 z" />
+    <path d="m 49.97328,4.905526 c -4.150978,0 -7.690953,1.464827 -10.619748,4.39457 -2.964649,3.018895 -4.448007,6.586166 -4.448007,10.700825 0,4.133528 1.483358,7.680899 4.448007,10.645548 3.000498,2.965121 6.539997,4.448005 10.619748,4.448005 4.167962,0 7.771348,-1.491677 10.807696,-4.474722 C 63.656473,27.762651 65.094472,24.223623 65.094472,20 c 0,-4.222679 -1.465325,-7.789478 -4.393653,-10.700825 C 57.771076,6.369904 54.195488,4.905526 49.97328,4.905526 Z m 0.05344,2.722423 c 3.431634,0 6.342825,1.212201 8.732941,3.639109 2.407097,2.371719 3.611471,5.283383 3.611471,8.732942 0,3.468427 -1.185846,6.352769 -3.558037,8.65279 -2.497663,2.461814 -5.427364,3.692544 -8.787295,3.692544 -3.37833,0 -6.289054,-1.221465 -8.732944,-3.665827 C 38.849433,26.253542 37.627946,23.360879 37.627946,20 c 0,-3.323614 1.230261,-6.234806 3.692547,-8.732942 2.372191,-2.425965 5.274118,-3.639109 8.706222,-3.639109 z" />
+    <path d="m 15.067296,4.905527 c -4.186958,0 -7.7182442,1.465367 -10.5933571,4.393783 C 3.0186925,10.755028 1.9089114,12.403834 1.1452027,14.245887 0.38149397,16.087941 0,18.005571 0,20.000462 c 0,2.012815 0.37755761,3.926511 1.132304,5.741678 0.7547477,1.815163 1.8552632,3.445936 3.3020181,4.892218 1.4467549,1.446282 3.0823798,2.551679 4.9060381,3.314917 1.8241278,0.764653 3.7334388,1.145198 5.7278558,1.145198 1.994419,0 3.926643,-0.385427 5.795113,-1.158099 1.869418,-0.772672 3.540664,-1.88823 5.013832,-3.343474 1.418928,-1.383545 2.493084,-2.978691 3.220944,-4.784424 0.726912,-1.805262 1.090845,-3.741421 1.090845,-5.808014 0,-2.048665 -0.369235,-3.984805 -1.105586,-5.808934 -0.736822,-1.823656 -1.814917,-3.446104 -3.23384,-4.8655 C 22.884786,6.379214 19.289631,4.905527 15.067296,4.905527 Z m 0.05436,2.722507 c 3.414285,0 6.334316,1.213182 8.761767,3.63922 1.167029,1.168914 2.056377,2.498676 2.666307,3.990245 0.610873,1.491566 0.916715,3.072594 0.916715,4.743882 0,3.469008 -1.176637,6.352963 -3.530503,8.653059 -1.22269,1.185892 -2.591561,2.092759 -4.110018,2.722505 -1.520343,0.62927 -3.087225,0.942508 -4.704268,0.942508 -1.635442,0 -3.199353,-0.309776 -4.690448,-0.929612 C 8.9386948,30.769062 7.6010602,29.87146 6.4151652,28.694053 5.2287976,27.517123 4.317072,26.178564 3.6788394,24.677093 3.0401347,23.177504 2.7215865,21.618901 2.7215865,20.001381 c 0,-1.635439 0.3185482,-3.203736 0.9572529,-4.704263 C 4.3166012,13.796585 5.2287976,12.444829 6.4151652,11.240537 8.7695027,8.832893 11.671519,7.628034 15.121655,7.628034 Z" />
+    <path d="m 23.639141,17.494232 -1.99489,1.051457 C 21.428674,18.097086 21.1631,17.78198 20.848937,17.602256 c -0.315106,-0.179251 -0.616534,-0.269351 -0.902866,-0.269351 -1.347696,0 -2.022249,0.889187 -2.022249,2.6685 0,0.808526 0.171228,1.454777 0.512282,1.940173 0.341051,0.485396 0.843904,0.728332 1.509967,0.728332 0.879753,0 1.50006,-0.431622 1.859035,-1.293922 l 1.886866,0.943438 c -0.412749,0.737289 -0.97032,1.316559 -1.67035,1.738746 -0.700968,0.422655 -1.464678,0.633515 -2.291129,0.633515 -1.366087,0 -2.457168,-0.412753 -3.274184,-1.240143 -0.818899,-0.826446 -1.227403,-1.976494 -1.227403,-3.449667 0,-1.437791 0.417466,-2.578401 1.253823,-3.423248 0.834936,-0.844371 1.890639,-1.26703 3.166632,-1.26703 1.868941,-9.43e-4 3.199655,0.726917 3.98978,2.182633 z" />
+    <path d="m 14.932663,17.494232 -2.022248,1.051457 c -0.216046,-0.448603 -0.480679,-0.763709 -0.794841,-0.943433 -0.314637,-0.179251 -0.606629,-0.269351 -0.87645,-0.269351 -1.3472231,0 -2.0217777,0.889187 -2.0217777,2.6685 0,0.808526 0.1707629,1.454777 0.5118107,1.940173 0.341524,0.485396 0.844845,0.728332 1.509967,0.728332 0.880695,0 1.50053,-0.431622 1.860449,-1.293922 l 1.85951,0.943438 c -0.395301,0.737289 -0.943435,1.316559 -1.644407,1.738746 -0.700026,0.422655 -1.47317,0.633515 -2.318015,0.633515 -1.3476953,0 -2.4354738,-0.412753 -3.2619218,-1.240143 -0.8264474,-0.826446 -1.2396714,-1.976494 -1.2396714,-3.449667 0,-1.437791 0.4179415,-2.578401 1.2533513,-3.423248 0.8354103,-0.844371 1.8911135,-1.26703 3.1675779,-1.26703 1.869414,-9.43e-4 3.207674,0.726917 4.016666,2.182633 z" />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx
new file mode 100644
index 0000000..1ff9e3c
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * CogIconPaths component
+ *
+ * Render the svg paths to make a cog icon.
+ */
+export const CogIconPaths: FC = () => (
+  <>
+    <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
+    <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
new file mode 100644
index 0000000..479b8b7
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
@@ -0,0 +1,37 @@
+.cursor,
+.lines,
+.root,
+.separator,
+.text {
+  fill: var(--color-fg);
+}
+
+.contour,
+.stand,
+.screen {
+  stroke: var(--color-primary-dark);
+}
+
+.contour,
+.screen {
+  stroke-width: 3;
+}
+
+.contour,
+.stand {
+  fill: var(--color-primary-lighter);
+}
+
+.screen {
+  fill: var(--color-bg);
+}
+
+.stand {
+  &--top {
+    stroke-width: 3;
+  }
+
+  &--bottom {
+    stroke-width: 2;
+  }
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx
new file mode 100644
index 0000000..f581332
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './computer-icon-paths.module.scss';
+
+/**
+ * ComputerIconPaths
+ *
+ * Render the svg paths to make a computer icon.
+ */
+export const ComputerIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.contour}
+      d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
+    />
+    <path
+      className={styles.screen}
+      d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
+    />
+    <path
+      className={`${styles.stand} ${styles['stand--top']}`}
+      d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
+    />
+    <path
+      className={`${styles.stand} ${styles['stand--bottom']}`}
+      d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
+    />
+    <path
+      className={styles.lines}
+      d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
+    />
+    <path
+      className={styles.cursor}
+      d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
+    />
+    <path
+      className={styles.text}
+      d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
+    />
+    <path
+      className={styles.text}
+      d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
+    />
+    <path
+      className={styles.text}
+      d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
+    />
+    <path
+      className={styles.separator}
+      d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
+    />
+    <path
+      className={styles.root}
+      d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss
new file mode 100644
index 0000000..b30fea9
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss
@@ -0,0 +1,5 @@
+.lines {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx
new file mode 100644
index 0000000..12740af
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './cross-icon-paths.module.scss';
+
+/**
+ * CrossIconPaths
+ *
+ * Render the svg paths to make a cross icon.
+ */
+export const CrossIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.lines}
+      d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss
new file mode 100644
index 0000000..0819bba
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss
@@ -0,0 +1,22 @@
+.bg,
+.envelop,
+.paper {
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.bg {
+  fill: var(--color-shadow-dark);
+}
+
+.envelop {
+  fill: var(--color-primary-lighter);
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.paper {
+  fill: var(--color-bg);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx
new file mode 100644
index 0000000..9e23991
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './envelop-icon-paths.module.scss';
+
+/**
+ * EnvelopIconPaths
+ *
+ * Render the svg paths to make an envelop icon.
+ */
+export const EnvelopIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bg}
+      d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
+    />
+    <path
+      className={styles.paper}
+      d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx
new file mode 100644
index 0000000..922bf8a
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * FeedIconPaths
+ *
+ * Render the svg paths to make a feed icon.
+ */
+export const FeedIconPaths: FC = () => (
+  <>
+    <defs>
+      <linearGradient
+        x1="30.059999"
+        y1="30.059999"
+        x2="225.94"
+        y2="225.94"
+        id="RSSg"
+      >
+        <stop offset="0.0" stopColor="#E3702D" />
+        <stop offset="0.1071" stopColor="#EA7D31" />
+        <stop offset="0.3503" stopColor="#F69537" />
+        <stop offset="0.5" stopColor="#FB9E3A" />
+        <stop offset="0.7016" stopColor="#EA7C31" />
+        <stop offset="0.8866" stopColor="#DE642B" />
+        <stop offset="1.0" stopColor="#D95B29" />
+      </linearGradient>
+    </defs>
+    <path
+      d="m 21.484375,0 h 57.03125 C 90.41797,0 100,9.582031 100,21.484375 v 57.03125 C 100,90.41797 90.41797,100 78.515625,100 H 21.484375 C 9.582031,100 0,90.41797 0,78.515625 V 21.484375 C 0,9.582031 9.582031,0 21.484375,0 Z"
+      fill="#cc5d15"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 21.484375,1.953125 h 57.03125 c 10.82031,0 19.53125,8.710938 19.53125,19.53125 v 57.03125 c 0,10.82031 -8.71094,19.53125 -19.53125,19.53125 h -57.03125 c -10.820312,0 -19.53125,-8.71094 -19.53125,-19.53125 v -57.03125 c 0,-10.820312 8.710938,-19.53125 19.53125,-19.53125 z"
+      fill="#f49c52"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 22.265625,3.90625 h 55.46875 c 10.171095,0 18.359375,8.188281 18.359375,18.359375 v 55.46875 c 0,10.171095 -8.18828,18.359375 -18.359375,18.359375 H 22.265625 C 12.094531,96.09375 3.90625,87.90547 3.90625,77.734375 v -55.46875 c 0,-10.171094 8.188281,-18.359375 18.359375,-18.359375 z"
+      fill="url(#RSSg)"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 35.9375,73.828125 a 9.375,9.375 0 0 1 -9.375,9.375 9.375,9.375 0 0 1 -9.375,-9.375 9.375,9.375 0 0 1 9.375,-9.375 9.375,9.375 0 0 1 9.375,9.375 z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="M 62.5,83.203125 H 49.21875 A 32.03125,32.03125 0 0 0 17.1875,51.171875 V 37.890625 A 45.3125,45.3125 0 0 1 62.5,83.203125 Z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="M 71.875,83.203125 A 54.6875,54.6875 0 0 0 17.1875,28.515625 V 14.84375 a 68.359375,68.359375 0 0 1 68.359375,68.359375 z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss
new file mode 100644
index 0000000..a8d775c
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss
@@ -0,0 +1,25 @@
+.chimney,
+.door,
+.indoor,
+.roof,
+.wall {
+  stroke: var(--color-primary-darker);
+}
+
+.door,
+.roof {
+  fill: var(--color-primary-lighter);
+}
+
+.indoor {
+  fill: var(--color-shadow-dark);
+}
+
+.chimney,
+.wall {
+  fill: var(--color-bg);
+}
+
+.lines {
+  fill: var(--color-primary-darker);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx
new file mode 100644
index 0000000..d472445
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './home-icon-paths.module.scss';
+
+/**
+ * HomeIconPaths
+ *
+ * Render the svg paths to make a home icon.
+ */
+export const HomeIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.wall}
+      d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
+    />
+    <path
+      className={styles.indoor}
+      d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+    />
+    <path
+      className={styles.door}
+      d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+    />
+    <path
+      className={styles.roof}
+      d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
+    />
+    <path
+      className={styles.chimney}
+      d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
new file mode 100644
index 0000000..43927ae
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
@@ -0,0 +1,13 @@
+export * from './arrow-icon-paths';
+export * from './career-icon-paths';
+export * from './cc-by-sa-icon-paths';
+export * from './cog-icon-paths';
+export * from './computer-icon-paths';
+export * from './cross-icon-paths';
+export * from './envelop-icon-paths';
+export * from './feed-icon-paths';
+export * from './home-icon-paths';
+export * from './magnifying-glass-icon-paths';
+export * from './moon-icon-paths';
+export * from './posts-stack-icon-paths';
+export * from './sun-icon-paths';
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss
new file mode 100644
index 0000000..4b7db05
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss
@@ -0,0 +1,20 @@
+.big-handle,
+.upright {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.glass,
+.small-handle {
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
+
+.glass {
+  fill: var(--color-bg-opacity);
+}
+
+.small-handle {
+  fill: var(--color-primary);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx
new file mode 100644
index 0000000..b800305
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './magnifying-glass-icon-paths.module.scss';
+
+/**
+ * MagnifyingGlassIconPaths
+ *
+ * Render the svg paths to make a magnifying glass icon.
+ */
+export const MagnifyingGlassIconPaths: FC = () => (
+  <>
+    <path
+      className={styles['small-handle']}
+      d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z"
+    />
+    <path
+      className={styles.upright}
+      d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z"
+    />
+    <path
+      className={styles.glass}
+      d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z"
+    />
+    <path
+      className={styles['big-handle']}
+      d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx
new file mode 100644
index 0000000..35025ef
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * MoonIconPaths
+ *
+ * Render the svg paths to make a moon icon.
+ */
+export const MoonIconPaths: FC = () => (
+  <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss
new file mode 100644
index 0000000..f368493
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss
@@ -0,0 +1,21 @@
+.bg,
+.lines {
+  stroke-width: 4;
+}
+
+.bg,
+.picture {
+  stroke: var(--color-primary-darker);
+}
+
+.bg {
+  fill: var(--color-bg);
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.picture {
+  fill: var(--color-primary-lighter);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx
new file mode 100644
index 0000000..daf14d4
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './posts-stack-icon-paths.module.scss';
+
+/**
+ * PostsStackIconPaths
+ *
+ * Render the svg paths to make a posts stack icon.
+ */
+export const PostsStackIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bg}
+      d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z"
+    />
+    <path
+      className={styles.bg}
+      d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z"
+    />
+    <path
+      className={styles.bg}
+      d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z"
+    />
+    <path
+      className={styles.picture}
+      d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z"
+    />
+    <path
+      className={styles.picture}
+      d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z"
+    />
+    <path className={styles.lines} d="m 17.618576,41.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,49.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,57.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,65.908926 h 45 v 2 h -45 z" />
+    <path
+      className={styles.lines}
+      d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx
new file mode 100644
index 0000000..0cdffb3
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * SunIconPaths
+ *
+ * Render the svg paths to make a sun icon.
+ */
+export const SunIconPaths: FC = () => (
+  <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
+);
diff --git a/src/components/atoms/images/icons/svg-paths/index.ts b/src/components/atoms/images/icons/svg-paths/index.ts
new file mode 100644
index 0000000..01623ef
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/index.ts
@@ -0,0 +1 @@
+export * from './svg-paths';
diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
new file mode 100644
index 0000000..0f5be6e
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
@@ -0,0 +1,82 @@
+import type { FC } from 'react';
+import {
+  ArrowIconPaths,
+  type ArrowOrientation,
+  CCBySAIconPaths,
+  CareerIconPaths,
+  CogIconPaths,
+  ComputerIconPaths,
+  EnvelopIconPaths,
+  FeedIconPaths,
+  HomeIconPaths,
+  MagnifyingGlassIconPaths,
+  MoonIconPaths,
+  PostsStackIconPaths,
+  SunIconPaths,
+  CrossIconPaths,
+} from './icons-paths';
+
+export type SVGIconOrientation = ArrowOrientation;
+
+export type SVGIconShape =
+  | 'arrow'
+  | 'career'
+  | 'cc-by-sa'
+  | 'cog'
+  | 'computer'
+  | 'cross'
+  | 'envelop'
+  | 'feed'
+  | 'home'
+  | 'magnifying-glass'
+  | 'moon'
+  | 'posts-stack'
+  | 'sun';
+
+export type SVGPathsProps = {
+  /**
+   * The icon orientation. Only used with arrow icon.
+   *
+   * @default 'right'
+   */
+  orientation?: SVGIconOrientation;
+  /**
+   * The icon shape.
+   */
+  shape: SVGIconShape;
+};
+
+export const SVGPaths: FC<SVGPathsProps> = ({
+  orientation = 'right',
+  shape,
+}) => {
+  switch (shape) {
+    case 'arrow':
+      return <ArrowIconPaths orientation={orientation} />;
+    case 'career':
+      return <CareerIconPaths />;
+    case 'cc-by-sa':
+      return <CCBySAIconPaths />;
+    case 'cog':
+      return <CogIconPaths />;
+    case 'computer':
+      return <ComputerIconPaths />;
+    case 'cross':
+      return <CrossIconPaths />;
+    case 'envelop':
+      return <EnvelopIconPaths />;
+    case 'feed':
+      return <FeedIconPaths />;
+    case 'home':
+      return <HomeIconPaths />;
+    case 'magnifying-glass':
+      return <MagnifyingGlassIconPaths />;
+    case 'moon':
+      return <MoonIconPaths />;
+    case 'posts-stack':
+      return <PostsStackIconPaths />;
+    case 'sun':
+    default:
+      return <SunIconPaths />;
+  }
+};
diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts
index cb6151d..197d909 100644
--- a/src/components/atoms/images/index.ts
+++ b/src/components/atoms/images/index.ts
@@ -1 +1,2 @@
+export * from './icons';
 export * from './logo';
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index e0041cc..abcc198 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,7 +1,6 @@
 export * from './buttons';
 export * from './forms';
 export * from './heading';
-export * from './icons';
 export * from './images';
 export * from './layout';
 export * from './links';
diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss
index 5d5435c..ffde516 100644
--- a/src/components/atoms/layout/copyright.module.scss
+++ b/src/components/atoms/layout/copyright.module.scss
@@ -2,8 +2,6 @@
 @use "../../../styles/abstracts/mixins" as mix;
 
 .wrapper {
-  --icon-size: #{fun.convert-px(70)};
-
   display: flex;
   flex-flow: row wrap;
   align-items: center;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index fa79d32..a21fdfb 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CCBySA } from '../icons';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon } from '../images';
 import { Copyright as CopyrightComponent } from './copyright';
 
 /**
@@ -53,6 +53,6 @@ Copyright.args = {
     start: '2012',
     end: '2022',
   },
-  icon: <CCBySA />,
+  icon: <Icon shape="cc-by-sa" />,
   owner: 'Your name',
 };
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index 1e2230c..3aa04d0 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,33 +1,34 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { CCBySA } from '../icons';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { Icon } from '../images';
 import { Copyright } from './copyright';
 
 const dates = {
   start: '2012',
   end: '2022',
 };
-const icon = <CCBySA />;
+const iconHeading = 'CC BY SA';
+const icon = <Icon heading={iconHeading} shape="cc-by-sa" />;
 const owner = 'Your name';
 
 describe('Copyright', () => {
   it('renders the copyright owner', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(owner)).toBeInTheDocument();
+    expect(rtlScreen.getByText(owner)).toBeInTheDocument();
   });
 
   it('renders the copyright start date', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(dates.start)).toBeInTheDocument();
+    expect(rtlScreen.getByText(dates.start)).toBeInTheDocument();
   });
 
   it('renders the copyright end date', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByText(dates.end)).toBeInTheDocument();
+    expect(rtlScreen.getByText(dates.end)).toBeInTheDocument();
   });
 
   it('renders the copyright icon', () => {
     render(<Copyright dates={dates} icon={icon} owner={owner} />);
-    expect(screen.getByTitle('CC BY SA')).toBeInTheDocument();
+    expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss
index acabcab..e72885a 100644
--- a/src/components/atoms/links/nav-link.module.scss
+++ b/src/components/atoms/links/nav-link.module.scss
@@ -6,7 +6,6 @@
   --draw-border-thickness: #{fun.convert-px(4)};
   --draw-border-color1: var(--color-primary-light);
   --draw-border-color2: var(--color-primary-lighter);
-  --icon-size: #{fun.convert-px(30)};
 
   display: inline-flex;
   flex-flow: column nowrap;
diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 7eae03b..ba746df 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -6,13 +6,9 @@
     height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
     padding: 0;
 
-    svg {
-      width: 100%;
-    }
-
     :global {
       .arrow-head {
-        transform: translateY(30%) scale(1.2);
+        transform: translateX(-9%) translateY(30%) scale(1.2);
         transition: all 0.45s ease-in-out 0s;
       }
 
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index 6ca6f10..f2e2073 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,6 +1,6 @@
 import type { FC, HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { Arrow, ButtonLink } from '../../atoms';
+import { ButtonLink, Icon } from '../../atoms';
 import styles from './back-to-top.module.scss';
 
 export type BackToTopProps = HTMLAttributes<HTMLDivElement> & {
@@ -38,8 +38,8 @@ export const BackToTop: FC<BackToTopProps> = ({
         shape="square"
         to={anchor}
       >
-        {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */}
-        <Arrow aria-hidden direction="top" />
+        {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */}
+        <Icon aria-hidden={true} orientation="top" shape="arrow" />
       </ButtonLink>
     </div>
   );
diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx
index 97e2c84..3c3eef5 100644
--- a/src/components/molecules/buttons/heading-button.tsx
+++ b/src/components/molecules/buttons/heading-button.tsx
@@ -1,6 +1,6 @@
 import { useCallback, type FC, type SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
-import { Heading, type HeadingProps, PlusMinus } from '../../atoms';
+import { Heading, type HeadingProps, Icon } from '../../atoms';
 import styles from './heading-button.module.scss';
 
 export type HeadingButtonProps = Pick<HeadingProps, 'level'> & {
@@ -61,7 +61,7 @@ export const HeadingButton: FC<HeadingButtonProps> = ({
         <span className="screen-reader-text">{titlePrefix} </span>
         {title}
       </Heading>
-      <PlusMinus state={iconState} className={styles.icon} />
+      <Icon className={styles.icon} shape={iconState} />
     </button>
   );
 };
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
index 88ef3ec..4e7947f 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss
+++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss
@@ -28,8 +28,6 @@
 }
 
 .wrapper {
-  --icon-size: 60%;
-
   display: flex;
   place-content: center;
   place-items: center;
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
index 3ad3529..bf5724e 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx
@@ -1,6 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { MagnifyingGlass } from '../../../atoms';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useCallback, useState } from 'react';
+import { Icon } from '../../../atoms';
 import { FlippingLabel } from './flipping-label';
 
 export default {
@@ -75,22 +75,23 @@ const Template: ComponentStory<typeof FlippingLabel> = ({
   ...args
 }) => {
   const [active, setActive] = useState<boolean>(isActive);
+  const updateState = useCallback(() => setActive((prev) => !prev), []);
 
   return (
-    <div onClick={() => setActive(!active)}>
-      <FlippingLabel isActive={active} {...args} />
-    </div>
+    <button onClick={updateState} type="button">
+      <FlippingLabel {...args} isActive={active} />
+    </button>
   );
 };
 
 export const Active = Template.bind({});
 Active.args = {
-  children: <MagnifyingGlass />,
+  children: <Icon shape="magnifying-glass" />,
   isActive: true,
 };
 
 export const Inactive = Template.bind({});
 Inactive.args = {
-  children: <MagnifyingGlass />,
+  children: <Icon shape="magnifying-glass" />,
   isActive: false,
 };
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx
index 3e23915..e9d6a10 100644
--- a/src/components/molecules/forms/flipping-label/flipping-label.tsx
+++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Close, Label, type LabelProps } from '../../../atoms';
+import type { FC } from 'react';
+import { Icon, Label, type LabelProps } from '../../../atoms';
 import styles from './flipping-label.module.scss';
 
 export type FlippingLabelProps = Pick<
@@ -29,7 +29,7 @@ export const FlippingLabel: FC<FlippingLabelProps> = ({
       <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
         <span className={styles.front}>{children}</span>
         <span className={styles.back}>
-          <Close aria-hidden={true} />
+          <Icon aria-hidden={true} shape="cross" />
         </span>
       </span>
     </Label>
diff --git a/src/components/molecules/nav/nav-list.stories.tsx b/src/components/molecules/nav/nav-list.stories.tsx
index 110a6ca..baaa8df 100644
--- a/src/components/molecules/nav/nav-list.stories.tsx
+++ b/src/components/molecules/nav/nav-list.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Envelop, Home } from '../../atoms';
+import { Icon } from '../../atoms';
 import { NavList, type NavItem } from './nav-list';
 
 /**
@@ -78,8 +78,13 @@ const Template: ComponentStory<typeof NavList> = (args) => (
 );
 
 const MainNavItems: NavItem[] = [
-  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
-  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
+  { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> },
+  {
+    id: 'contactLink',
+    href: '/contact',
+    label: 'Contact',
+    logo: <Icon shape="envelop" />,
+  },
 ];
 
 const FooterNavItems: NavItem[] = [
diff --git a/src/components/molecules/nav/nav-list.test.tsx b/src/components/molecules/nav/nav-list.test.tsx
index 58437cb..8524e22 100644
--- a/src/components/molecules/nav/nav-list.test.tsx
+++ b/src/components/molecules/nav/nav-list.test.tsx
@@ -1,11 +1,16 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { Envelop, Home } from '../../atoms';
+import { Icon } from '../../atoms';
 import { NavList, type NavItem } from './nav-list';
 
 const navItems: NavItem[] = [
-  { id: 'homeLink', href: '/', label: 'Home', logo: <Home /> },
-  { id: 'contactLink', href: '/contact', label: 'Contact', logo: <Envelop /> },
+  { id: 'homeLink', href: '/', label: 'Home', logo: <Icon shape="home" /> },
+  {
+    id: 'contactLink',
+    href: '/contact',
+    label: 'Contact',
+    logo: <Icon shape="envelop" />,
+  },
 ];
 
 describe('Nav', () => {
diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
index 0e1649b..2b0a179 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.tsx
@@ -1,8 +1,12 @@
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type ChangeEvent, type FC } from 'react';
 import { useIntl } from 'react-intl';
 import { type PrismTheme, usePrismTheme } from '../../../../utils/providers';
-import { Legend, Moon, Sun } from '../../../atoms';
-import { Switch, SwitchOption, SwitchProps } from '../../../molecules';
+import { Icon, Legend } from '../../../atoms';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../molecules';
 
 export type PrismThemeToggleProps = Omit<
   SwitchProps,
@@ -28,9 +32,12 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
     return prismTheme === 'dark';
   };
 
-  const updateTheme = (e: ChangeEvent<HTMLInputElement>) => {
-    setTheme(e.target.value === 'light' ? 'light' : 'dark');
-  };
+  const updateTheme = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setTheme(e.target.value === 'light' ? 'light' : 'dark');
+    },
+    [setTheme]
+  );
 
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Code blocks:',
@@ -54,7 +61,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
+          <Icon shape="sun" />
         </>
       ),
       value: 'light',
@@ -64,7 +71,7 @@ export const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
+          <Icon shape="moon" />
         </>
       ),
       value: 'dark',
diff --git a/src/components/organisms/forms/search-form/search-form.tsx b/src/components/organisms/forms/search-form/search-form.tsx
index 826e6c8..1dcbb8c 100644
--- a/src/components/organisms/forms/search-form/search-form.tsx
+++ b/src/components/organisms/forms/search-form/search-form.tsx
@@ -1,14 +1,15 @@
 import { useRouter } from 'next/router';
 import {
-  ChangeEvent,
-  FormEvent,
+  type ChangeEvent,
+  type FormEvent,
   forwardRef,
-  ForwardRefRenderFunction,
+  type ForwardRefRenderFunction,
   useId,
   useState,
+  useCallback,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Form, Input, Label, MagnifyingGlass } from '../../../atoms';
+import { Button, Form, Icon, Input, Label } from '../../../atoms';
 import { LabelledField } from '../../../molecules';
 import styles from './search-form.module.scss';
 
@@ -44,15 +45,18 @@ const SearchFormWithRef: ForwardRefRenderFunction<
   const router = useRouter();
   const [value, setValue] = useState<string>('');
 
-  const submitHandler = (e: FormEvent) => {
-    e.preventDefault();
-    router.push({ pathname: searchPage, query: { s: value } });
-    setValue('');
-  };
+  const submitHandler = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      router.push({ pathname: searchPage, query: { s: value } });
+      setValue('');
+    },
+    [router, searchPage, value]
+  );
 
-  const updateForm = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateForm = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
-  };
+  }, []);
 
   const id = useId();
 
@@ -84,7 +88,7 @@ const SearchFormWithRef: ForwardRefRenderFunction<
         shape="initial"
         type="submit"
       >
-        <MagnifyingGlass className={styles.btn__icon} />
+        <Icon className={styles.btn__icon} shape="magnifying-glass" />
       </Button>
     </Form>
   );
diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
index da303d3..6026e1c 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
@@ -1,8 +1,12 @@
 import { useTheme } from 'next-themes';
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type ChangeEvent, type FC } from 'react';
 import { useIntl } from 'react-intl';
-import { Legend, Moon, Sun } from '../../../atoms';
-import { Switch, SwitchOption, SwitchProps } from '../../../molecules';
+import { Icon, Legend } from '../../../atoms';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../molecules';
 
 export type ThemeToggleProps = Omit<
   SwitchProps,
@@ -19,9 +23,12 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const { resolvedTheme, setTheme } = useTheme();
   const isDarkTheme = resolvedTheme === 'dark';
 
-  const updateTheme = (e: ChangeEvent<HTMLInputElement>) => {
-    setTheme(e.target.value === 'light' ? 'light' : 'dark');
-  };
+  const updateTheme = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setTheme(e.target.value === 'light' ? 'light' : 'dark');
+    },
+    [setTheme]
+  );
 
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Theme:',
@@ -45,7 +52,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{lightThemeLabel}</span>
-          <Sun />
+          <Icon shape="sun" />
         </>
       ),
       value: 'light',
@@ -55,7 +62,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
       label: (
         <>
           <span className="screen-reader-text">{darkThemeLabel}</span>
-          <Moon />
+          <Icon shape="moon" />
         </>
       ),
       value: 'dark',
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 9530312..5052f73 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -13,7 +13,8 @@
       padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
       border: fun.convert-px(1) solid var(--color-primary-dark);
       border-radius: fun.convert-px(3);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      box-shadow:
+        fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
           var(--color-shadow),
         fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
           var(--color-shadow-light),
@@ -29,8 +30,6 @@
 
   &:hover {
     .icon {
-      --icon-size: #{fun.convert-px(35)};
-
       :global {
         animation: pulse 1.5s ease-in-out 0.2s infinite;
       }
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index e7a5d48..99f6c85 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -3,10 +3,10 @@ import { useIntl } from 'react-intl';
 import type { Article, Meta as MetaType } from '../../../types';
 import { useReadingTime } from '../../../utils/hooks';
 import {
-  Arrow,
   ButtonLink,
   Heading,
   type HeadingLevel,
+  Icon,
   Link,
 } from '../../atoms';
 import {
@@ -123,11 +123,13 @@ export const Summary: FC<SummaryProps> = ({
         <ButtonLink className={styles['read-more']} to={url}>
           <>
             {readMore}
-            <Arrow
+            <Icon
               aria-hidden={true}
               className={styles.icon}
               // eslint-disable-next-line react/jsx-no-literals -- Direction allowed
-              direction="right"
+              orientation="right"
+              // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
+              shape="arrow"
             />
           </>
         </ButtonLink>
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index 95626ab..6576cf5 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -30,7 +30,5 @@
 }
 
 .icon {
-  --icon-size: #{fun.convert-px(30)};
-
   margin-right: var(--spacing-2xs);
 }
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index bb3d886..5a53bbd 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { useCallback, type FC, type FormEvent } from 'react';
 import { useIntl } from 'react-intl';
-import { Cog, Form, Heading, Modal, type ModalProps } from '../../atoms';
+import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms';
 import {
   AckeeToggle,
   type AckeeToggleProps,
@@ -8,7 +8,7 @@ import {
   type MotionToggleProps,
   PrismThemeToggle,
   ThemeToggle,
-} from '../../organisms';
+} from '../forms';
 import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> & {
@@ -44,12 +44,16 @@ export const SettingsModal: FC<SettingsModalProps> = ({
     description: 'SettingsModal: an accessible form name',
   });
 
+  const submitHandler = useCallback((e: FormEvent) => {
+    e.preventDefault();
+  }, []);
+
   return (
     <Modal
       className={`${styles.wrapper} ${className}`}
       heading={
         <Heading isFake level={3}>
-          <Cog className={styles.icon} />
+          <Icon className={styles.icon} shape="cog" />
           {title}
         </Heading>
       }
@@ -57,7 +61,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({
       <Form
         aria-label={ariaLabel}
         className={styles.form}
-        onSubmit={() => null}
+        onSubmit={submitHandler}
       >
         <ThemeToggle className={styles.item} />
         <PrismThemeToggle className={styles.item} />
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 6933c44..7f03577 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,11 +1,6 @@
 import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import {
-  BooleanField,
-  type BooleanFieldProps,
-  Hamburger,
-  Label,
-} from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon, Label } from '../../atoms';
 import { NavList, type NavListProps, type NavItem } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
@@ -62,7 +57,7 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
         className={`${sharedStyles.label} ${mainNavStyles.label}`}
         htmlFor="main-nav-button"
       >
-        <Hamburger iconClassName={mainNavStyles.icon} />
+        <Icon shape="hamburger" />
       </Label>
       <NavList
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index b20f0d5..a09bdae 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,11 +1,7 @@
-import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
+import { forwardRef, type ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { useInputAutofocus } from '../../../utils/hooks';
-import {
-  BooleanField,
-  type BooleanFieldProps,
-  MagnifyingGlass,
-} from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SearchModal, type SearchModalProps } from '../modals';
 import searchStyles from './search.module.scss';
@@ -71,7 +67,7 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         htmlFor="search-button"
         isActive={isActive}
       >
-        <MagnifyingGlass aria-hidden={true} />
+        <Icon aria-hidden={true} shape="magnifying-glass" size="lg" />
       </FlippingLabel>
       <SearchModal
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 3f328a5..53634d8 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms';
+import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SettingsModal, type SettingsModalProps } from '../modals';
 import styles from './toolbar-items.module.scss';
@@ -59,7 +59,7 @@ const SettingsWithRef: ForwardRefRenderFunction<
         htmlFor="settings-button"
         isActive={isActive}
       >
-        <Cog aria-hidden={true} />
+        <Icon aria-hidden={true} shape="cog" size="lg" />
       </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 810a019..c994469 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -16,17 +16,7 @@ import {
   useScrollPosition,
   useSettings,
 } from '../../../utils/hooks';
-import {
-  ButtonLink,
-  Career,
-  CCBySA,
-  ComputerScreen,
-  Envelop,
-  Home,
-  Main,
-  NoScript,
-  PostsStack,
-} from '../../atoms';
+import { ButtonLink, Icon, Main, NoScript } from '../../atoms';
 import {
   SiteFooter,
   type SiteFooterProps,
@@ -82,6 +72,11 @@ export const Layout: FC<LayoutProps> = ({
     description: 'Layout: noscript message',
     id: '7jVUT6',
   });
+  const copyrightTitle = intl.formatMessage({
+    defaultMessage: 'CC BY SA',
+    description: 'Layout: copyright title',
+    id: 'yB1SPF',
+  });
 
   const copyrightData = {
     dates: {
@@ -89,7 +84,7 @@ export const Layout: FC<LayoutProps> = ({
       end: copyright.end,
     },
     owner: name,
-    icon: <CCBySA />,
+    icon: <Icon heading={copyrightTitle} shape="cc-by-sa" size="lg" />,
   };
 
   const homeLabel = intl.formatMessage({
@@ -123,31 +118,31 @@ export const Layout: FC<LayoutProps> = ({
       id: 'home',
       label: homeLabel,
       href: '/',
-      logo: <Home aria-hidden={true} />,
+      logo: <Icon aria-hidden={true} shape="home" />,
     },
     {
       id: 'blog',
       label: blogLabel,
       href: ROUTES.BLOG,
-      logo: <PostsStack aria-hidden={true} />,
+      logo: <Icon aria-hidden={true} shape="posts-stack" />,
     },
     {
       id: 'projects',
       label: projectsLabel,
       href: ROUTES.PROJECTS,
-      logo: <ComputerScreen aria-hidden={true} />,
+      logo: <Icon aria-hidden={true} shape="computer" />,
     },
     {
       id: 'cv',
       label: cvLabel,
       href: ROUTES.CV,
-      logo: <Career aria-hidden={true} />,
+      logo: <Icon aria-hidden={true} shape="career" />,
     },
     {
       id: 'contact',
       label: contactLabel,
       href: ROUTES.CONTACT,
-      logo: <Envelop aria-hidden={true} />,
+      logo: <Icon aria-hidden={true} shape="envelop" />,
     },
   ];
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index fd46201..d8a982d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -411,10 +411,6 @@
     "defaultMessage": "Sidebar",
     "description": "PageLayout: accessible name for the sidebar"
   },
-  "cl7YNU": {
-    "defaultMessage": "CC BY SA",
-    "description": "CCBySA: icon title"
-  },
   "dDK5oc": {
     "defaultMessage": "{website} picture",
     "description": "Branding: photo alternative text"
@@ -627,6 +623,10 @@
     "defaultMessage": "Sending mail...",
     "description": "ContactForm: spinner message on submit"
   },
+  "yB1SPF": {
+    "defaultMessage": "CC BY SA",
+    "description": "Layout: copyright title"
+  },
   "yE/Jdz": {
     "defaultMessage": "You are here:",
     "description": "Pagination: current page indication"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index f951413..d64c930 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -411,10 +411,6 @@
     "defaultMessage": "Barre latérale",
     "description": "PageLayout: accessible name for the sidebar"
   },
-  "cl7YNU": {
-    "defaultMessage": "CC BY SA",
-    "description": "CCBySA: icon title"
-  },
   "dDK5oc": {
     "defaultMessage": "Photo d’{website}",
     "description": "Branding: photo alternative text"
@@ -627,6 +623,10 @@
     "defaultMessage": "Mail en cours d’envoi…",
     "description": "ContactForm: spinner message on submit"
   },
+  "yB1SPF": {
+    "defaultMessage": "CC BY SA",
+    "description": "Layout: copyright title"
+  },
   "yE/Jdz": {
     "defaultMessage": "Vous êtes ici :",
     "description": "Pagination: current page indication"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d99462f..662ae81 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,7 +4,6 @@ import Head from 'next/head';
 import Script from 'next/script';
 import type { FC, HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import FeedIcon from '../assets/images/icon-feed.svg';
 import {
   ButtonLink,
   CardsList,
@@ -12,8 +11,8 @@ import {
   Column,
   Columns,
   type ColumnsProps,
-  Envelop,
   getLayout,
+  Icon,
   List,
   type ListItem,
   ResponsiveImage,
@@ -236,13 +235,12 @@ const ShaarliLink: FC = () => {
  */
 const MoreLinks: FC = () => {
   const intl = useIntl();
-  const feedIconClass = `${styles.icon} ${styles['icon--feed']}`;
   const links: ListItem[] = [
     {
       id: 'contact-me',
       value: (
         <ButtonLink to={ROUTES.CONTACT}>
-          <Envelop aria-hidden={true} className={styles.icon} />
+          <Icon aria-hidden={true} shape="envelop" />
           {intl.formatMessage({
             defaultMessage: 'Contact me',
             description: 'HomePage: contact button text',
@@ -255,7 +253,7 @@ const MoreLinks: FC = () => {
       id: 'rss-feed',
       value: (
         <ButtonLink to={ROUTES.RSS}>
-          <FeedIcon aria-hidden={true} className={feedIconClass} />
+          <Icon aria-hidden={true} shape="feed" />
           {intl.formatMessage({
             defaultMessage: 'Subscribe',
             description: 'HomePage: RSS feed subscription text',
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index d56ba18..49e8e26 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -120,6 +120,43 @@ $font-sizes: ();
   @return map.get($font-sizes, $key);
 }
 
+//============================================================================
+// Icons
+//============================================================================
+
+$icon_ratio: get-ratio("perfect-fourth");
+$icon-size_base: fun.convert-px(32);
+
+$icon-size_levels: "xs", "sm", "md", "lg", "xl";
+
+// We start with xs icon, so it needs to be less than the base.
+$icon-size_current: math.div($icon-size_base, $icon_ratio * 2);
+
+/// Icons map ('sm', 'md', 'lg'...)
+/// @prop {String} keys - Size as key is mapped to a given icon
+/// @prop {Map} value - Value is actual icon
+$icon-sizes: ();
+
+/// We fill our icon-sizes map.
+@each $level in $icon-size_levels {
+  $icon-size_current: $icon-size_current * $icon_ratio;
+  $icon-sizes: map.merge(
+    $icon-sizes,
+    (
+      $level: $icon-size_current,
+    )
+  );
+}
+
+// We cannot declare this function with others functions due to module loop.
+
+/// Get icon-size.
+/// @param {String} $name - Icon size ('sm', 'md', 'lg'...).
+/// @return {Integer} The icon value.
+@function icon-size($key) {
+  @return map.get($icon-sizes, $key);
+}
+
 //============================================================================
 // Spacings
 //============================================================================
diff --git a/src/styles/base/_icons.scss b/src/styles/base/_icons.scss
new file mode 100644
index 0000000..16fdd4a
--- /dev/null
+++ b/src/styles/base/_icons.scss
@@ -0,0 +1,10 @@
+@use "sass:math";
+@use "../abstracts/variables" as var;
+
+:root {
+  --icon-size-xs: #{var.icon-size("xs")};
+  --icon-size-sm: #{var.icon-size("sm")};
+  --icon-size-md: #{var.icon-size("md")};
+  --icon-size-lg: #{var.icon-size("lg")};
+  --icon-size-xl: #{var.icon-size("xl")};
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 8ece909..8cf7296 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -17,6 +17,7 @@
 @use "base/colors";
 @use "base/fonts";
 @use "base/helpers";
+@use "base/icons";
 @use "base/spacings";
 @use "base/typography";
 
diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss
index 59c8c6f..a926ec3 100644
--- a/src/styles/pages/home.module.scss
+++ b/src/styles/pages/home.module.scss
@@ -26,8 +26,6 @@
 }
 
 .icon {
-  --icon-size: #{fun.convert-px(20)};
-
   margin-right: var(--spacing-2xs);
 
   &--feed {
-- 
cgit v1.2.3