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.

35 files changed, 1454 insertions, 0 deletions

diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
new file mode 100644
index 0000000..8b8ad7e
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss
@@ -0,0 +1,45 @@
+@use "../../../../../styles/abstracts/functions" as fun;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  aspect-ratio: 1/1;
+  position: relative;
+}
+
+.icon {
+  width: 100%;
+
+  &,
+  &::before,
+  &::after {
+    display: block;
+    height: 20%;
+    background: var(--color-primary-lighter);
+    background-image: linear-gradient(
+      to right,
+      var(--color-primary-light) 0%,
+      var(--color-primary-lighter) 100%
+    );
+    border: fun.convert-px(1) solid var(--color-primary-darker);
+    border-radius: fun.convert-px(4);
+    transition:
+      all 0.25s ease-in-out 0s,
+      transform 0.4s ease-in 0s;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+  }
+
+  &::before {
+    top: 3%;
+  }
+
+  &::after {
+    bottom: 3%;
+  }
+}
diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx
new file mode 100644
index 0000000..edd25ba
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx
@@ -0,0 +1,25 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './hamburger-icon.module.scss';
+
+export type HamburgerIconProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'children'
+>;
+
+/**
+ * HamburgerIcon component
+ *
+ * Render a Hamburger icon.
+ */
+export const HamburgerIcon: FC<HamburgerIconProps> = ({
+  className = '',
+  ...props
+}) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+
+  return (
+    <span {...props} className={wrapperClass}>
+      <span className={styles.icon} />
+    </span>
+  );
+};
diff --git a/src/components/atoms/images/icons/hamburger-icon/index.ts b/src/components/atoms/images/icons/hamburger-icon/index.ts
new file mode 100644
index 0000000..a601d0c
--- /dev/null
+++ b/src/components/atoms/images/icons/hamburger-icon/index.ts
@@ -0,0 +1 @@
+export * from './hamburger-icon';
diff --git a/src/components/atoms/images/icons/icon.module.scss b/src/components/atoms/images/icons/icon.module.scss
new file mode 100644
index 0000000..72eb611
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.module.scss
@@ -0,0 +1,53 @@
+@use "../../../../styles/abstracts/functions" as fun;
+
+.icon {
+  width: var(--icon-size);
+  transition: all 0.25s ease-in-out 0s;
+
+  &--arrow {
+    fill: var(--color-primary);
+  }
+
+  &--cc-by-sa {
+    width: calc(var(--icon-size) * 2);
+    fill: var(--color-fg);
+  }
+
+  &--cog,
+  &--home,
+  &--moon,
+  &--sun {
+    stroke-width: 4;
+  }
+
+  &--cog,
+  &--moon,
+  &--sun {
+    fill: var(--color-primary-lighter);
+    stroke: var(--color-primary-darker);
+  }
+
+  &--stroke {
+    stroke: var(--color-primary);
+  }
+
+  &--xs {
+    --icon-size: var(--icon-size-xs);
+  }
+
+  &--sm {
+    --icon-size: var(--icon-size-sm);
+  }
+
+  &--md {
+    --icon-size: var(--icon-size-md);
+  }
+
+  &--lg {
+    --icon-size: var(--icon-size-lg);
+  }
+
+  &--xl {
+    --icon-size: var(--icon-size-xl);
+  }
+}
diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx
new file mode 100644
index 0000000..fa8d2b5
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.stories.tsx
@@ -0,0 +1,201 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon, type IconProps, type IconShape } from './icon';
+
+/**
+ * Home icon - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Images/Icons',
+  component: Icon,
+  argTypes: {
+    shape: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'arrow',
+        'career',
+        'cc-by-sa',
+        'cog',
+        'computer',
+        'cross',
+        'envelop',
+        'feed',
+        'hamburger',
+        'home',
+        'magnifying-glass',
+        'minus',
+        'moon',
+        'posts-stack',
+        'plus',
+        'sun',
+      ],
+      description: 'Define the icon shape.',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = ({
+  shape,
+  ...args
+}: IconProps<IconShape>) => <Icon {...args} shape={shape} />;
+
+/**
+ * Icon Stories - ArrowRight
+ */
+export const ArrowRight = Template.bind({});
+ArrowRight.args = {
+  orientation: 'right',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowLeft
+ */
+export const ArrowLeft = Template.bind({});
+ArrowLeft.args = {
+  orientation: 'left',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowBottom
+ */
+export const ArrowBottom = Template.bind({});
+ArrowBottom.args = {
+  orientation: 'bottom',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - ArrowTop
+ */
+export const ArrowTop = Template.bind({});
+ArrowTop.args = {
+  orientation: 'top',
+  shape: 'arrow',
+};
+
+/**
+ * Icon Stories - Career
+ */
+export const Career = Template.bind({});
+Career.args = {
+  shape: 'career',
+};
+
+/**
+ * Icon Stories - CCBySA
+ */
+export const CCBySA = Template.bind({});
+CCBySA.args = {
+  shape: 'cc-by-sa',
+};
+
+/**
+ * Icon Stories - Cog
+ */
+export const Cog = Template.bind({});
+Cog.args = {
+  shape: 'cog',
+};
+
+/**
+ * Icon Stories - Computer
+ */
+export const Computer = Template.bind({});
+Computer.args = {
+  shape: 'computer',
+};
+
+/**
+ * Icon Stories - Cross
+ */
+export const Cross = Template.bind({});
+Cross.args = {
+  shape: 'cross',
+};
+
+/**
+ * Icon Stories - Envelop
+ */
+export const Envelop = Template.bind({});
+Envelop.args = {
+  shape: 'envelop',
+};
+
+/**
+ * Icon Stories - Feed
+ */
+export const Feed = Template.bind({});
+Feed.args = {
+  shape: 'feed',
+};
+
+/**
+ * Icon Stories - Hamburger
+ */
+export const Hamburger = Template.bind({});
+Hamburger.args = {
+  shape: 'hamburger',
+};
+
+/**
+ * Icon Stories - Home
+ */
+export const Home = Template.bind({});
+Home.args = {
+  shape: 'home',
+};
+
+/**
+ * Icon Stories - MagnifyingGlass
+ */
+export const MagnifyingGlass = Template.bind({});
+MagnifyingGlass.args = {
+  shape: 'magnifying-glass',
+};
+
+/**
+ * Icon Stories - Minus
+ */
+export const Minus = Template.bind({});
+Minus.args = {
+  shape: 'minus',
+};
+
+/**
+ * Icon Stories - Moon
+ */
+export const Moon = Template.bind({});
+Moon.args = {
+  shape: 'moon',
+};
+
+/**
+ * Icon Stories - Plus
+ */
+export const Plus = Template.bind({});
+Plus.args = {
+  shape: 'plus',
+};
+
+/**
+ * Icon Stories - PostsStack
+ */
+export const PostsStack = Template.bind({});
+PostsStack.args = {
+  shape: 'posts-stack',
+};
+
+/**
+ * Icon Stories - Sun
+ */
+export const Sun = Template.bind({});
+Sun.args = {
+  shape: 'sun',
+};
diff --git a/src/components/atoms/images/icons/icon.test.tsx b/src/components/atoms/images/icons/icon.test.tsx
new file mode 100644
index 0000000..d80edd7
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.test.tsx
@@ -0,0 +1,182 @@
+/* eslint-disable max-statements */
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Icon } from './icon';
+
+/* eslint-disable jsx-a11y/prefer-tag-over-role -- Valid on SVG */
+describe('Icon', () => {
+  it('can render an icon with a heading', () => {
+    const heading = 'architecto';
+
+    render(<Icon heading={heading} shape="arrow" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('can render an icon with a description', () => {
+    const description = 'fuga voluptates eligendi';
+
+    render(<Icon description={description} shape="arrow" role="img" />);
+
+    expect(rtlScreen.getByRole('img')).toHaveTextContent(description);
+  });
+
+  it('render an icon with bottom arrow shape', () => {
+    const heading = 'quae';
+
+    render(
+      <Icon heading={heading} orientation="bottom" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with left arrow shape', () => {
+    const heading = 'nemo';
+
+    render(
+      <Icon heading={heading} orientation="left" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with right arrow shape', () => {
+    const heading = 'odit';
+
+    render(
+      <Icon heading={heading} orientation="right" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with top arrow shape', () => {
+    const heading = 'ut';
+
+    render(
+      <Icon heading={heading} orientation="top" shape="arrow" role="img" />
+    );
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with career shape', () => {
+    const heading = 'autem';
+
+    render(<Icon heading={heading} shape="career" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cc-by-sa shape', () => {
+    const heading = 'blanditiis';
+
+    render(<Icon heading={heading} shape="cc-by-sa" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cog shape', () => {
+    const heading = 'consequatur';
+
+    render(<Icon heading={heading} shape="cog" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with computer shape', () => {
+    const heading = 'amet';
+
+    render(<Icon heading={heading} shape="computer" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with cross shape', () => {
+    const heading = 'molestias';
+
+    render(<Icon heading={heading} shape="cross" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with envelop shape', () => {
+    const heading = 'laudantium';
+
+    render(<Icon heading={heading} shape="envelop" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+  it('render an icon with feed shape', () => {
+    const heading = 'beatae';
+
+    render(<Icon heading={heading} shape="feed" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with home shape', () => {
+    const heading = 'aut';
+
+    render(<Icon heading={heading} shape="home" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with magnifying glass shape', () => {
+    const heading = 'rerum';
+
+    render(<Icon heading={heading} shape="magnifying-glass" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with moon shape', () => {
+    const heading = 'saepe';
+
+    render(<Icon heading={heading} shape="moon" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with posts stack shape', () => {
+    const heading = 'sunt';
+
+    render(<Icon heading={heading} shape="posts-stack" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with sun shape', () => {
+    const heading = 'aut';
+
+    render(<Icon heading={heading} shape="sun" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with hamburger shape', () => {
+    const heading = 'sed';
+
+    render(<Icon aria-label={heading} shape="hamburger" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with minus shape', () => {
+    const heading = 'sunt';
+
+    render(<Icon aria-label={heading} shape="minus" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
+  it('render an icon with plus shape', () => {
+    const heading = 'maxime';
+
+    render(<Icon aria-label={heading} shape="plus" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/images/icons/icon.tsx b/src/components/atoms/images/icons/icon.tsx
new file mode 100644
index 0000000..23170d9
--- /dev/null
+++ b/src/components/atoms/images/icons/icon.tsx
@@ -0,0 +1,126 @@
+import type { SVGAttributes } from 'react';
+import { HamburgerIcon, type HamburgerIconProps } from './hamburger-icon';
+import styles from './icon.module.scss';
+import {
+  PlusMinusIcon,
+  type PlusMinusIconProps,
+  type PlusMinusIconShape,
+} from './plus-minus-icon';
+import { type SVGIconShape, SVGPaths, type SVGPathsProps } from './svg-paths';
+
+export type IconShape = SVGIconShape | PlusMinusIconShape | 'hamburger';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type SVGIconProps = Omit<
+  SVGAttributes<SVGElement>,
+  'children' | 'viewBox' | 'xmlns'
+> & {
+  /**
+   * Describe the icon.
+   */
+  description?: string;
+  /**
+   * Define an accessible title for the icon.
+   */
+  heading?: string;
+};
+
+type IconBaseProps<T extends IconShape> = T extends 'hamburger'
+  ? HamburgerIconProps
+  : T extends 'minus' | 'plus'
+  ? PlusMinusIconProps
+  : SVGIconProps;
+
+type AdditionalProps<T extends IconShape> = Pick<
+  SVGPathsProps,
+  'orientation'
+> & {
+  /**
+   * The icon shape.
+   */
+  shape: T;
+  /**
+   * The icon size.
+   *
+   * @default 'md'
+   */
+  size?: IconSize;
+};
+
+export type IconProps<T extends IconShape> = IconBaseProps<T> &
+  Pick<SVGPathsProps, 'orientation'> &
+  AdditionalProps<T>;
+
+type BuildClassNameConfig<T extends IconShape> = Pick<
+  IconProps<T>,
+  'className'
+> &
+  Pick<AdditionalProps<T>, 'shape' | 'size'>;
+
+const buildClassName = <T extends IconShape>({
+  className,
+  shape,
+  size,
+}: BuildClassNameConfig<T>) => {
+  const classNames = ['icon', `icon--${shape}`, `icon--${size}`].map(
+    (key) => styles[key]
+  );
+
+  if (className) classNames.push(className);
+
+  return classNames.join(' ');
+};
+
+type ExtractedProps = 'className' | 'orientation' | 'shape' | 'size';
+
+export const Icon = <T extends IconShape>({
+  className = '',
+  orientation,
+  shape,
+  size = 'md',
+  ...props
+}: IconProps<T>) => {
+  const iconClass = buildClassName({ className, shape, size });
+
+  if (shape === 'hamburger')
+    return (
+      <HamburgerIcon
+        // Without casting Typescript complains because of props generic type
+        {...(props as Omit<IconProps<'hamburger'>, ExtractedProps>)}
+        className={iconClass}
+      />
+    );
+
+  if (shape === 'minus' || shape === 'plus')
+    return (
+      <PlusMinusIcon
+        // Without casting Typescript complains because of props generic type
+        {...(props as Omit<IconProps<'minus' | 'plus'>, ExtractedProps>)}
+        className={iconClass}
+        shape={shape}
+      />
+    );
+
+  const viewBox = shape === 'cc-by-sa' ? '0 0 100 40' : '0 0 100 100';
+
+  // Without casting Typescript complains because of props generic type
+  const { heading, description, ...remainingProps } = props as Omit<
+    IconProps<SVGIconShape>,
+    ExtractedProps
+  >;
+
+  return (
+    <svg
+      {...remainingProps}
+      className={iconClass}
+      viewBox={viewBox}
+      // eslint-disable-next-line react/jsx-no-literals
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {heading ? <title>{heading}</title> : null}
+      {description ? <desc>{description}</desc> : null}
+      <SVGPaths orientation={orientation} shape={shape} />
+    </svg>
+  );
+};
diff --git a/src/components/atoms/images/icons/index.ts b/src/components/atoms/images/icons/index.ts
new file mode 100644
index 0000000..af77d84
--- /dev/null
+++ b/src/components/atoms/images/icons/index.ts
@@ -0,0 +1 @@
+export * from './icon';
diff --git a/src/components/atoms/images/icons/plus-minus-icon/index.ts b/src/components/atoms/images/icons/plus-minus-icon/index.ts
new file mode 100644
index 0000000..acca727
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/index.ts
@@ -0,0 +1 @@
+export * from './plus-minus-icon';
diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
new file mode 100644
index 0000000..07550c9
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss
@@ -0,0 +1,38 @@
+@use "../../../../../styles/abstracts/functions" as fun;
+
+.icon {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  aspect-ratio: 1/1;
+  position: relative;
+  background: var(--color-bg);
+  border: fun.convert-px(1) solid var(--color-primary);
+  border-radius: fun.convert-px(3);
+  color: var(--color-primary);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    background: var(--color-primary);
+    transition: transform 0.4s ease-out 0s;
+  }
+
+  &::after {
+    height: fun.convert-px(3);
+    width: 60%;
+  }
+
+  &::before {
+    height: 55%;
+    width: fun.convert-px(3);
+    transform: scaleY(1);
+  }
+
+  &--minus {
+    &::before {
+      transform: scaleY(0);
+    }
+  }
+}
diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx
new file mode 100644
index 0000000..ed6bcf2
--- /dev/null
+++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx
@@ -0,0 +1,30 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './plus-minus-icon.module.scss';
+
+export type PlusMinusIconShape = 'minus' | 'plus';
+
+export type PlusMinusIconProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  /**
+   * Which shape should be displayed.
+   */
+  shape: PlusMinusIconShape;
+};
+
+/**
+ * PlusMinusIcon component
+ *
+ * Render a plus or a minus icon.
+ */
+export const PlusMinusIcon: FC<PlusMinusIconProps> = ({
+  className = '',
+  shape,
+  ...props
+}) => {
+  const shapeClass = styles[`icon--${shape}`];
+  const iconClass = `${styles.icon} ${shapeClass} ${className}`;
+
+  return <div {...props} className={iconClass} />;
+};
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx
new file mode 100644
index 0000000..ee29d5d
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+export type ArrowOrientation = 'top' | 'right' | 'bottom' | 'left';
+
+const getArrowBarPathFrom = (orientation: ArrowOrientation) => {
+  switch (orientation) {
+    case 'bottom':
+      return 'm 55.749998,2e-6 v 61.764896 h -11.5 V 2e-6 Z';
+    case 'left':
+      return 'M 99.999996,44.25 H 38.2351 v 11.5 h 61.764896 z';
+    case 'right':
+      return 'm 0,44.25 h 61.764896 v 11.5 H 0 Z';
+    case 'top':
+    default:
+      return 'M 55.749998,99.999998 V 38.235102 h -11.5 v 61.764896 z';
+  }
+};
+
+const getArrowHeadPathFrom = (orientation: ArrowOrientation) => {
+  switch (orientation) {
+    case 'bottom':
+      return 'm 69.999998,61.764898 -20,38.2351 -20,-38.2351 z';
+    case 'left':
+      return 'M 38.2351,30 0,50 38.2351,70 Z';
+    case 'right':
+      return 'm 61.764896,30 38.2351,20 -38.2351,20 z';
+    case 'top':
+    default:
+      return 'm 69.999998,38.235102 -20,-38.2351 -20,38.2351 z';
+  }
+};
+
+export type ArrowProps = {
+  /**
+   * The arrow orientation.
+   */
+  orientation: ArrowOrientation;
+};
+
+/**
+ * ArrowIconPaths
+ *
+ * Render the svg paths to make an arrow icon.
+ */
+export const ArrowIconPaths: FC<ArrowProps> = ({ orientation }) => (
+  <>
+    <path className="arrow-head" d={getArrowHeadPathFrom(orientation)} />
+    <path className="arrow-bar" d={getArrowBarPathFrom(orientation)} />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss
new file mode 100644
index 0000000..f93e73a
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss
@@ -0,0 +1,43 @@
+.bottom,
+.diploma,
+.lines,
+.top {
+  stroke-width: 4;
+}
+
+.bottom,
+.diploma,
+.handle,
+.lock,
+.seal,
+.top {
+  stroke: var(--color-primary-darker);
+}
+
+.bottom {
+  fill: var(--color-primary);
+}
+
+.diploma,
+.lock {
+  fill: var(--color-bg);
+}
+
+.handle,
+.seal,
+.top {
+  fill: var(--color-primary-lighter);
+}
+
+.handle,
+.lock {
+  stroke-width: 3;
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.seal {
+  stroke-width: 2;
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx
new file mode 100644
index 0000000..8fbaa12
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './career-icon-paths.module.scss';
+
+/**
+ * CareerIconPaths
+ *
+ * Render the svg paths to make a career icon.
+ */
+export const CareerIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bottom}
+      d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z"
+    />
+    <path
+      className={styles.handle}
+      d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
+    />
+    <path
+      className={styles.top}
+      d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z"
+    />
+    <path
+      className={styles.diploma}
+      d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z"
+    />
+    <path
+      className={styles.seal}
+      d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z"
+    />
+    <path
+      className={styles.seal}
+      d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z"
+    />
+    <path
+      className={styles.lock}
+      d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx
new file mode 100644
index 0000000..5961d92
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * CCBySAIconPaths
+ *
+ * Render the svg paths to make a CC-BY-SA icon.
+ */
+export const CCBySAIconPaths: FC = () => (
+  <>
+    <path d="m 82.802205,12.372338 c 0,-1.418881 0.700478,-2.129264 2.102849,-2.129264 1.402371,0 2.102377,0.70944 2.102377,2.129264 0,1.401427 -0.700949,2.102377 -2.102377,2.102377 -1.401427,0 -2.102849,-0.70095 -2.102849,-2.102377 z" />
+    <path d="m 88.975373,16.253505 v 6.172224 H 87.25083 v 7.331198 h -4.690608 v -7.330726 h -1.724544 v -6.172696 c 0,-0.269814 0.09434,-0.49859 0.28255,-0.687271 0.189153,-0.188209 0.4184,-0.283021 0.68727,-0.283021 h 6.200055 c 0.251418,0 0.47642,0.09434 0.673591,0.283021 0.1967,0.188681 0.296229,0.417929 0.296229,0.687271 z" />
+    <path d="m 84.878809,4.905526 c -4.169377,0 -7.708404,1.455113 -10.619751,4.366932 C 71.294409,12.291353 69.811052,15.867416 69.811052,20 c 0,4.133056 1.483357,7.681348 4.448006,10.646469 3.000499,2.965121 6.539997,4.448005 10.619751,4.448005 4.150508,0 7.752951,-1.50092 10.807695,-4.502361 C 98.562001,27.771333 100,24.241076 100,20 100,15.777321 98.534676,12.201729 95.606348,9.272458 92.695001,6.361111 89.118469,4.905526 84.878809,4.905526 Z m 0.05343,2.722423 c 3.414181,0 6.325372,1.203902 8.732941,3.61147 2.407097,2.408512 3.611471,5.327554 3.611471,8.75966 0,3.486352 -1.185846,6.370694 -3.558036,8.652789 -2.497664,2.462758 -5.427365,3.692545 -8.787296,3.692545 -3.378332,0 -6.289056,-1.221465 -8.732946,-3.665827 -2.443418,-2.442475 -3.664905,-5.335182 -3.664905,-8.677665 0,-3.324086 1.230261,-6.24452 3.692547,-8.76058 2.372191,-2.407569 5.274118,-3.612392 8.706224,-3.612392 z" />
+    <path d="m 43.395931,17.695499 c 0.287267,-1.85096 1.032557,-3.283992 2.236813,-4.299095 1.203784,-1.015104 2.667946,-1.522656 4.393433,-1.522656 2.371248,0 4.259,0.764158 5.660428,2.290587 1.401428,1.527372 2.102377,3.486352 2.102377,5.875996 0,2.318417 -0.727837,4.245321 -2.182566,5.781183 -1.456617,1.535863 -3.342483,2.304738 -5.661372,2.304738 -1.70709,0 -3.180687,-0.511797 -4.42032,-1.536335 -1.240106,-1.024537 -1.985395,-2.479739 -2.237284,-4.366548 h 3.801449 c 0.08962,1.833035 1.19482,2.749553 3.315593,2.749553 1.059444,0 1.913697,-0.458495 2.560401,-1.374541 0.647647,-0.916046 0.971235,-2.138698 0.971235,-3.665598 0,-1.599543 -0.296701,-2.816535 -0.889159,-3.652391 -0.593402,-0.835385 -1.44624,-1.253313 -2.561344,-1.253313 -2.013225,0 -3.144839,0.889158 -3.396255,2.667948 h 1.105197 l -2.991534,2.992008 -2.992008,-2.992008 z" />
+    <path d="m 49.97328,4.905526 c -4.150978,0 -7.690953,1.464827 -10.619748,4.39457 -2.964649,3.018895 -4.448007,6.586166 -4.448007,10.700825 0,4.133528 1.483358,7.680899 4.448007,10.645548 3.000498,2.965121 6.539997,4.448005 10.619748,4.448005 4.167962,0 7.771348,-1.491677 10.807696,-4.474722 C 63.656473,27.762651 65.094472,24.223623 65.094472,20 c 0,-4.222679 -1.465325,-7.789478 -4.393653,-10.700825 C 57.771076,6.369904 54.195488,4.905526 49.97328,4.905526 Z m 0.05344,2.722423 c 3.431634,0 6.342825,1.212201 8.732941,3.639109 2.407097,2.371719 3.611471,5.283383 3.611471,8.732942 0,3.468427 -1.185846,6.352769 -3.558037,8.65279 -2.497663,2.461814 -5.427364,3.692544 -8.787295,3.692544 -3.37833,0 -6.289054,-1.221465 -8.732944,-3.665827 C 38.849433,26.253542 37.627946,23.360879 37.627946,20 c 0,-3.323614 1.230261,-6.234806 3.692547,-8.732942 2.372191,-2.425965 5.274118,-3.639109 8.706222,-3.639109 z" />
+    <path d="m 15.067296,4.905527 c -4.186958,0 -7.7182442,1.465367 -10.5933571,4.393783 C 3.0186925,10.755028 1.9089114,12.403834 1.1452027,14.245887 0.38149397,16.087941 0,18.005571 0,20.000462 c 0,2.012815 0.37755761,3.926511 1.132304,5.741678 0.7547477,1.815163 1.8552632,3.445936 3.3020181,4.892218 1.4467549,1.446282 3.0823798,2.551679 4.9060381,3.314917 1.8241278,0.764653 3.7334388,1.145198 5.7278558,1.145198 1.994419,0 3.926643,-0.385427 5.795113,-1.158099 1.869418,-0.772672 3.540664,-1.88823 5.013832,-3.343474 1.418928,-1.383545 2.493084,-2.978691 3.220944,-4.784424 0.726912,-1.805262 1.090845,-3.741421 1.090845,-5.808014 0,-2.048665 -0.369235,-3.984805 -1.105586,-5.808934 -0.736822,-1.823656 -1.814917,-3.446104 -3.23384,-4.8655 C 22.884786,6.379214 19.289631,4.905527 15.067296,4.905527 Z m 0.05436,2.722507 c 3.414285,0 6.334316,1.213182 8.761767,3.63922 1.167029,1.168914 2.056377,2.498676 2.666307,3.990245 0.610873,1.491566 0.916715,3.072594 0.916715,4.743882 0,3.469008 -1.176637,6.352963 -3.530503,8.653059 -1.22269,1.185892 -2.591561,2.092759 -4.110018,2.722505 -1.520343,0.62927 -3.087225,0.942508 -4.704268,0.942508 -1.635442,0 -3.199353,-0.309776 -4.690448,-0.929612 C 8.9386948,30.769062 7.6010602,29.87146 6.4151652,28.694053 5.2287976,27.517123 4.317072,26.178564 3.6788394,24.677093 3.0401347,23.177504 2.7215865,21.618901 2.7215865,20.001381 c 0,-1.635439 0.3185482,-3.203736 0.9572529,-4.704263 C 4.3166012,13.796585 5.2287976,12.444829 6.4151652,11.240537 8.7695027,8.832893 11.671519,7.628034 15.121655,7.628034 Z" />
+    <path d="m 23.639141,17.494232 -1.99489,1.051457 C 21.428674,18.097086 21.1631,17.78198 20.848937,17.602256 c -0.315106,-0.179251 -0.616534,-0.269351 -0.902866,-0.269351 -1.347696,0 -2.022249,0.889187 -2.022249,2.6685 0,0.808526 0.171228,1.454777 0.512282,1.940173 0.341051,0.485396 0.843904,0.728332 1.509967,0.728332 0.879753,0 1.50006,-0.431622 1.859035,-1.293922 l 1.886866,0.943438 c -0.412749,0.737289 -0.97032,1.316559 -1.67035,1.738746 -0.700968,0.422655 -1.464678,0.633515 -2.291129,0.633515 -1.366087,0 -2.457168,-0.412753 -3.274184,-1.240143 -0.818899,-0.826446 -1.227403,-1.976494 -1.227403,-3.449667 0,-1.437791 0.417466,-2.578401 1.253823,-3.423248 0.834936,-0.844371 1.890639,-1.26703 3.166632,-1.26703 1.868941,-9.43e-4 3.199655,0.726917 3.98978,2.182633 z" />
+    <path d="m 14.932663,17.494232 -2.022248,1.051457 c -0.216046,-0.448603 -0.480679,-0.763709 -0.794841,-0.943433 -0.314637,-0.179251 -0.606629,-0.269351 -0.87645,-0.269351 -1.3472231,0 -2.0217777,0.889187 -2.0217777,2.6685 0,0.808526 0.1707629,1.454777 0.5118107,1.940173 0.341524,0.485396 0.844845,0.728332 1.509967,0.728332 0.880695,0 1.50053,-0.431622 1.860449,-1.293922 l 1.85951,0.943438 c -0.395301,0.737289 -0.943435,1.316559 -1.644407,1.738746 -0.700026,0.422655 -1.47317,0.633515 -2.318015,0.633515 -1.3476953,0 -2.4354738,-0.412753 -3.2619218,-1.240143 -0.8264474,-0.826446 -1.2396714,-1.976494 -1.2396714,-3.449667 0,-1.437791 0.4179415,-2.578401 1.2533513,-3.423248 0.8354103,-0.844371 1.8911135,-1.26703 3.1675779,-1.26703 1.869414,-9.43e-4 3.207674,0.726917 4.016666,2.182633 z" />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx
new file mode 100644
index 0000000..1ff9e3c
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * CogIconPaths component
+ *
+ * Render the svg paths to make a cog icon.
+ */
+export const CogIconPaths: FC = () => (
+  <>
+    <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
+    <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
new file mode 100644
index 0000000..479b8b7
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss
@@ -0,0 +1,37 @@
+.cursor,
+.lines,
+.root,
+.separator,
+.text {
+  fill: var(--color-fg);
+}
+
+.contour,
+.stand,
+.screen {
+  stroke: var(--color-primary-dark);
+}
+
+.contour,
+.screen {
+  stroke-width: 3;
+}
+
+.contour,
+.stand {
+  fill: var(--color-primary-lighter);
+}
+
+.screen {
+  fill: var(--color-bg);
+}
+
+.stand {
+  &--top {
+    stroke-width: 3;
+  }
+
+  &--bottom {
+    stroke-width: 2;
+  }
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx
new file mode 100644
index 0000000..f581332
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './computer-icon-paths.module.scss';
+
+/**
+ * ComputerIconPaths
+ *
+ * Render the svg paths to make a computer icon.
+ */
+export const ComputerIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.contour}
+      d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
+    />
+    <path
+      className={styles.screen}
+      d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
+    />
+    <path
+      className={`${styles.stand} ${styles['stand--top']}`}
+      d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
+    />
+    <path
+      className={`${styles.stand} ${styles['stand--bottom']}`}
+      d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
+    />
+    <path
+      className={styles.lines}
+      d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
+    />
+    <path
+      className={styles.cursor}
+      d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
+    />
+    <path
+      className={styles.text}
+      d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
+    />
+    <path
+      className={styles.text}
+      d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
+    />
+    <path
+      className={styles.text}
+      d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
+    />
+    <path
+      className={styles.separator}
+      d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
+    />
+    <path
+      className={styles.root}
+      d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss
new file mode 100644
index 0000000..b30fea9
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss
@@ -0,0 +1,5 @@
+.lines {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx
new file mode 100644
index 0000000..12740af
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './cross-icon-paths.module.scss';
+
+/**
+ * CrossIconPaths
+ *
+ * Render the svg paths to make a cross icon.
+ */
+export const CrossIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.lines}
+      d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss
new file mode 100644
index 0000000..0819bba
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss
@@ -0,0 +1,22 @@
+.bg,
+.envelop,
+.paper {
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.bg {
+  fill: var(--color-shadow-dark);
+}
+
+.envelop {
+  fill: var(--color-primary-lighter);
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.paper {
+  fill: var(--color-bg);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx
new file mode 100644
index 0000000..9e23991
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './envelop-icon-paths.module.scss';
+
+/**
+ * EnvelopIconPaths
+ *
+ * Render the svg paths to make an envelop icon.
+ */
+export const EnvelopIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bg}
+      d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
+    />
+    <path
+      className={styles.paper}
+      d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
+    />
+    <path
+      className={styles.envelop}
+      d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx
new file mode 100644
index 0000000..922bf8a
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * FeedIconPaths
+ *
+ * Render the svg paths to make a feed icon.
+ */
+export const FeedIconPaths: FC = () => (
+  <>
+    <defs>
+      <linearGradient
+        x1="30.059999"
+        y1="30.059999"
+        x2="225.94"
+        y2="225.94"
+        id="RSSg"
+      >
+        <stop offset="0.0" stopColor="#E3702D" />
+        <stop offset="0.1071" stopColor="#EA7D31" />
+        <stop offset="0.3503" stopColor="#F69537" />
+        <stop offset="0.5" stopColor="#FB9E3A" />
+        <stop offset="0.7016" stopColor="#EA7C31" />
+        <stop offset="0.8866" stopColor="#DE642B" />
+        <stop offset="1.0" stopColor="#D95B29" />
+      </linearGradient>
+    </defs>
+    <path
+      d="m 21.484375,0 h 57.03125 C 90.41797,0 100,9.582031 100,21.484375 v 57.03125 C 100,90.41797 90.41797,100 78.515625,100 H 21.484375 C 9.582031,100 0,90.41797 0,78.515625 V 21.484375 C 0,9.582031 9.582031,0 21.484375,0 Z"
+      fill="#cc5d15"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 21.484375,1.953125 h 57.03125 c 10.82031,0 19.53125,8.710938 19.53125,19.53125 v 57.03125 c 0,10.82031 -8.71094,19.53125 -19.53125,19.53125 h -57.03125 c -10.820312,0 -19.53125,-8.71094 -19.53125,-19.53125 v -57.03125 c 0,-10.820312 8.710938,-19.53125 19.53125,-19.53125 z"
+      fill="#f49c52"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 22.265625,3.90625 h 55.46875 c 10.171095,0 18.359375,8.188281 18.359375,18.359375 v 55.46875 c 0,10.171095 -8.18828,18.359375 -18.359375,18.359375 H 22.265625 C 12.094531,96.09375 3.90625,87.90547 3.90625,77.734375 v -55.46875 c 0,-10.171094 8.188281,-18.359375 18.359375,-18.359375 z"
+      fill="url(#RSSg)"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="m 35.9375,73.828125 a 9.375,9.375 0 0 1 -9.375,9.375 9.375,9.375 0 0 1 -9.375,-9.375 9.375,9.375 0 0 1 9.375,-9.375 9.375,9.375 0 0 1 9.375,9.375 z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="M 62.5,83.203125 H 49.21875 A 32.03125,32.03125 0 0 0 17.1875,51.171875 V 37.890625 A 45.3125,45.3125 0 0 1 62.5,83.203125 Z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+    <path
+      d="M 71.875,83.203125 A 54.6875,54.6875 0 0 0 17.1875,28.515625 V 14.84375 a 68.359375,68.359375 0 0 1 68.359375,68.359375 z"
+      fill="#ffffff"
+      strokeWidth={0.390625}
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss
new file mode 100644
index 0000000..a8d775c
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss
@@ -0,0 +1,25 @@
+.chimney,
+.door,
+.indoor,
+.roof,
+.wall {
+  stroke: var(--color-primary-darker);
+}
+
+.door,
+.roof {
+  fill: var(--color-primary-lighter);
+}
+
+.indoor {
+  fill: var(--color-shadow-dark);
+}
+
+.chimney,
+.wall {
+  fill: var(--color-bg);
+}
+
+.lines {
+  fill: var(--color-primary-darker);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx
new file mode 100644
index 0000000..d472445
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './home-icon-paths.module.scss';
+
+/**
+ * HomeIconPaths
+ *
+ * Render the svg paths to make a home icon.
+ */
+export const HomeIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.wall}
+      d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
+    />
+    <path
+      className={styles.indoor}
+      d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+    />
+    <path
+      className={styles.door}
+      d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+    />
+    <path
+      className={styles.roof}
+      d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
+    />
+    <path
+      className={styles.chimney}
+      d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
+    />
+    <path
+      className={styles.lines}
+      d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
new file mode 100644
index 0000000..43927ae
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
@@ -0,0 +1,13 @@
+export * from './arrow-icon-paths';
+export * from './career-icon-paths';
+export * from './cc-by-sa-icon-paths';
+export * from './cog-icon-paths';
+export * from './computer-icon-paths';
+export * from './cross-icon-paths';
+export * from './envelop-icon-paths';
+export * from './feed-icon-paths';
+export * from './home-icon-paths';
+export * from './magnifying-glass-icon-paths';
+export * from './moon-icon-paths';
+export * from './posts-stack-icon-paths';
+export * from './sun-icon-paths';
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss
new file mode 100644
index 0000000..4b7db05
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss
@@ -0,0 +1,20 @@
+.big-handle,
+.upright {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 3;
+}
+
+.glass,
+.small-handle {
+  stroke: var(--color-primary-darker);
+  stroke-width: 2;
+}
+
+.glass {
+  fill: var(--color-bg-opacity);
+}
+
+.small-handle {
+  fill: var(--color-primary);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx
new file mode 100644
index 0000000..b800305
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './magnifying-glass-icon-paths.module.scss';
+
+/**
+ * MagnifyingGlassIconPaths
+ *
+ * Render the svg paths to make a magnifying glass icon.
+ */
+export const MagnifyingGlassIconPaths: FC = () => (
+  <>
+    <path
+      className={styles['small-handle']}
+      d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z"
+    />
+    <path
+      className={styles.upright}
+      d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z"
+    />
+    <path
+      className={styles.glass}
+      d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z"
+    />
+    <path
+      className={styles['big-handle']}
+      d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx
new file mode 100644
index 0000000..35025ef
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * MoonIconPaths
+ *
+ * Render the svg paths to make a moon icon.
+ */
+export const MoonIconPaths: FC = () => (
+  <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss
new file mode 100644
index 0000000..f368493
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss
@@ -0,0 +1,21 @@
+.bg,
+.lines {
+  stroke-width: 4;
+}
+
+.bg,
+.picture {
+  stroke: var(--color-primary-darker);
+}
+
+.bg {
+  fill: var(--color-bg);
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.picture {
+  fill: var(--color-primary-lighter);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx
new file mode 100644
index 0000000..daf14d4
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './posts-stack-icon-paths.module.scss';
+
+/**
+ * PostsStackIconPaths
+ *
+ * Render the svg paths to make a posts stack icon.
+ */
+export const PostsStackIconPaths: FC = () => (
+  <>
+    <path
+      className={styles.bg}
+      d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z"
+    />
+    <path
+      className={styles.bg}
+      d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z"
+    />
+    <path
+      className={styles.bg}
+      d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z"
+    />
+    <path
+      className={styles.picture}
+      d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z"
+    />
+    <path
+      className={styles.picture}
+      d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z"
+    />
+    <path className={styles.lines} d="m 17.618576,41.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,49.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,57.908926 h 45 v 2 h -45 z" />
+    <path className={styles.lines} d="m 17.618576,65.908926 h 45 v 2 h -45 z" />
+    <path
+      className={styles.lines}
+      d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+    <path
+      className={styles.lines}
+      d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z"
+    />
+  </>
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx
new file mode 100644
index 0000000..0cdffb3
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+
+/**
+ * SunIconPaths
+ *
+ * Render the svg paths to make a sun icon.
+ */
+export const SunIconPaths: FC = () => (
+  <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
+);
diff --git a/src/components/atoms/images/icons/svg-paths/index.ts b/src/components/atoms/images/icons/svg-paths/index.ts
new file mode 100644
index 0000000..01623ef
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/index.ts
@@ -0,0 +1 @@
+export * from './svg-paths';
diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
new file mode 100644
index 0000000..0f5be6e
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
@@ -0,0 +1,82 @@
+import type { FC } from 'react';
+import {
+  ArrowIconPaths,
+  type ArrowOrientation,
+  CCBySAIconPaths,
+  CareerIconPaths,
+  CogIconPaths,
+  ComputerIconPaths,
+  EnvelopIconPaths,
+  FeedIconPaths,
+  HomeIconPaths,
+  MagnifyingGlassIconPaths,
+  MoonIconPaths,
+  PostsStackIconPaths,
+  SunIconPaths,
+  CrossIconPaths,
+} from './icons-paths';
+
+export type SVGIconOrientation = ArrowOrientation;
+
+export type SVGIconShape =
+  | 'arrow'
+  | 'career'
+  | 'cc-by-sa'
+  | 'cog'
+  | 'computer'
+  | 'cross'
+  | 'envelop'
+  | 'feed'
+  | 'home'
+  | 'magnifying-glass'
+  | 'moon'
+  | 'posts-stack'
+  | 'sun';
+
+export type SVGPathsProps = {
+  /**
+   * The icon orientation. Only used with arrow icon.
+   *
+   * @default 'right'
+   */
+  orientation?: SVGIconOrientation;
+  /**
+   * The icon shape.
+   */
+  shape: SVGIconShape;
+};
+
+export const SVGPaths: FC<SVGPathsProps> = ({
+  orientation = 'right',
+  shape,
+}) => {
+  switch (shape) {
+    case 'arrow':
+      return <ArrowIconPaths orientation={orientation} />;
+    case 'career':
+      return <CareerIconPaths />;
+    case 'cc-by-sa':
+      return <CCBySAIconPaths />;
+    case 'cog':
+      return <CogIconPaths />;
+    case 'computer':
+      return <ComputerIconPaths />;
+    case 'cross':
+      return <CrossIconPaths />;
+    case 'envelop':
+      return <EnvelopIconPaths />;
+    case 'feed':
+      return <FeedIconPaths />;
+    case 'home':
+      return <HomeIconPaths />;
+    case 'magnifying-glass':
+      return <MagnifyingGlassIconPaths />;
+    case 'moon':
+      return <MoonIconPaths />;
+    case 'posts-stack':
+      return <PostsStackIconPaths />;
+    case 'sun':
+    default:
+      return <SunIconPaths />;
+  }
+};
diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts
index cb6151d..197d909 100644
--- a/src/components/atoms/images/index.ts
+++ b/src/components/atoms/images/index.ts
@@ -1 +1,2 @@
+export * from './icons';
 export * from './logo';