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.

98 files changed, 1381 insertions, 1921 deletions

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.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.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.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/icons/hamburger.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
index c92b3ab..8b8ad7e 100644
--- a/src/components/atoms/icons/hamburger.module.scss
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
@@ -1,21 +1,20 @@
-@use "../../../styles/abstracts/functions" as fun;
+@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)});
+  aspect-ratio: 1/1;
   position: relative;
 }
 
 .icon {
+  width: 100%;
+
   &,
   &::before,
   &::after {
     display: block;
-    height: fun.convert-px(7);
-    width: 100%;
-    position: absolute;
+    height: 20%;
     background: var(--color-primary-lighter);
     background-image: linear-gradient(
       to right,
@@ -23,20 +22,24 @@
       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;
+    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: fun.convert-px(-15);
+    top: 3%;
   }
 
   &::after {
-    bottom: fun.convert-px(-15);
+    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/icons/plus-minus.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
index b46b5ba..07550c9 100644
--- a/src/components/atoms/icons/plus-minus.module.scss
+++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
@@ -1,11 +1,10 @@
-@use "../../../styles/abstracts/functions" as fun;
+@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)});
+  aspect-ratio: 1/1;
   position: relative;
   background: var(--color-bg);
   border: fun.convert-px(1) solid var(--color-primary);
@@ -26,7 +25,7 @@
   }
 
   &::before {
-    height: 60%;
+    height: 55%;
     width: fun.convert-px(3);
     transform: scaleY(1);
   }
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/icons/computer-screen.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
index fcc4002..479b8b7 100644
--- a/src/components/atoms/icons/computer-screen.module.scss
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
@@ -1,22 +1,32 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
+.cursor,
+.lines,
 .root,
 .separator,
-.cursor,
-.line,
 .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);
-  stroke: var(--color-primary-dark);
+}
 
+.screen {
+  fill: var(--color-bg);
+}
+
+.stand {
   &--top {
     stroke-width: 3;
   }
@@ -25,15 +35,3 @@
     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/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;