chore(icons): accept a classname as prop

31 files changed, 363 insertions, 112 deletions

diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
index 52b5126..96ce1d8 100644
--- a/src/components/atoms/icons/arrow.stories.tsx
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -5,15 +5,25 @@ export default {
   title: 'Atoms/Icons',
   component: ArrowIcon,
   argTypes: {
+    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'],
-      table: {
-        defaultValue: { summary: 'right' },
-      },
       type: {
         name: 'string',
         required: false,
@@ -27,3 +37,6 @@ const Template: ComponentStory<typeof ArrowIcon> = (args) => (
 );
 
 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
index 01813ce..502dcc1 100644
--- a/src/components/atoms/icons/arrow.test.tsx
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -2,8 +2,8 @@ import { render } from '@test-utils';
 import Arrow from './arrow';
 
 describe('Arrow', () => {
-  it('renders an arrow icon', () => {
-    const { container } = render(<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
index f50d117..5f3c460 100644
--- a/src/components/atoms/icons/arrow.tsx
+++ b/src/components/atoms/icons/arrow.tsx
@@ -1,13 +1,17 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './arrow.module.scss';
 
-type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
+export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
 
-type ArrowProps = {
+export type ArrowProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
   /**
    * The arrow direction. Default: right.
    */
-  direction?: ArrowDirection;
+  direction: ArrowDirection;
 };
 
 /**
@@ -15,9 +19,9 @@ type ArrowProps = {
  *
  * Render a svg arrow icon.
  */
-const Arrow: FC<ArrowProps> = ({ direction = 'right' }) => {
+const Arrow: VFC<ArrowProps> = ({ className = '', direction }) => {
   const directionClass = styles[`icon--${direction}`];
-  const classes = `${styles.icon} ${directionClass}`;
+  const classes = `${styles.icon} ${directionClass} ${className}`;
 
   if (direction === 'top') {
     return (
diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx
index 2c1d93a..8575cb9 100644
--- a/src/components/atoms/icons/career.stories.tsx
+++ b/src/components/atoms/icons/career.stories.tsx
@@ -4,6 +4,21 @@ import CareerIcon from './career';
 export default {
   title: 'Atoms/Icons',
   component: CareerIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx
index aecab1e..28edcc7 100644
--- a/src/components/atoms/icons/career.tsx
+++ b/src/components/atoms/icons/career.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './career.module.scss';
 
+export type CareerProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Career Component
  *
  * Render a career svg icon.
  */
-const Career: FC = () => {
+const Career: VFC<CareerProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles.bottom}
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index 42a93c9..21d6cd5 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -5,6 +5,21 @@ import CCBySAIcon from './cc-by-sa';
 export default {
   title: 'Atoms/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) => (
diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx
index 03d54f7..adb03e4 100644
--- a/src/components/atoms/icons/cc-by-sa.test.tsx
+++ b/src/components/atoms/icons/cc-by-sa.test.tsx
@@ -1,9 +1,9 @@
-import { render } from '@test-utils';
+import { render, screen } from '@test-utils';
 import CCBySA from './cc-by-sa';
 
 describe('CCBySA', () => {
   it('renders a CC BY SA icon', () => {
-    const { container } = render(<CCBySA />);
-    expect(container).toBeDefined();
+    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
index adc8b79..552504e 100644
--- a/src/components/atoms/icons/cc-by-sa.tsx
+++ b/src/components/atoms/icons/cc-by-sa.tsx
@@ -1,18 +1,25 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './cc-by-sa.module.scss';
 
+export type CCBySAProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * CCBySA component
  *
  * Render a CC BY SA svg icon.
  */
-const CCBySA: FC = () => {
+const CCBySA: VFC<CCBySAProps> = ({ className = '' }) => {
   const intl = useIntl();
 
   return (
     <svg
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 211.99811 63.999996"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx
index 265df7a..b1d88cd 100644
--- a/src/components/atoms/icons/close.stories.tsx
+++ b/src/components/atoms/icons/close.stories.tsx
@@ -4,6 +4,21 @@ import CloseIcon from './close';
 export default {
   title: 'Atoms/Icons',
   component: CloseIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx
index 80d904e..eb9ce7c 100644
--- a/src/components/atoms/icons/close.tsx
+++ b/src/components/atoms/icons/close.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './close.module.scss';
 
+export type CloseProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Close component
  *
  * Render a close svg icon.
  */
-const Close: FC = () => {
+const Close: VFC<CloseProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles.line}
diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx
index 3b16ffc..ee883d8 100644
--- a/src/components/atoms/icons/cog.stories.tsx
+++ b/src/components/atoms/icons/cog.stories.tsx
@@ -4,6 +4,21 @@ import CogIcon from './cog';
 export default {
   title: 'Atoms/Icons',
   component: CogIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx
index bed19ce..df6d54d 100644
--- a/src/components/atoms/icons/cog.tsx
+++ b/src/components/atoms/icons/cog.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './cog.module.scss';
 
+export type CogProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Cog component
  *
  * Render a cog svg icon.
  */
-const Cog: FC = () => {
+const Cog: VFC<CogProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <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.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
index 317b4b6..46e3ad4 100644
--- a/src/components/atoms/icons/computer-screen.stories.tsx
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -4,6 +4,21 @@ import ComputerScreenIcon from './computer-screen';
 export default {
   title: 'Atoms/Icons',
   component: ComputerScreenIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
index c9c869d..310836f 100644
--- a/src/components/atoms/icons/computer-screen.tsx
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './computer-screen.module.scss';
 
+export type ComputerScreenProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * ComputerScreen component
  *
  * Render a computer screen svg icon.
  */
-const ComputerScreen: FC = () => {
+const ComputerScreen: VFC<ComputerScreenProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
index 9577431..9139b44 100644
--- a/src/components/atoms/icons/envelop.stories.tsx
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -4,6 +4,21 @@ import EnvelopIcon from './envelop';
 export default {
   title: 'Atoms/Icons',
   component: EnvelopIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
index a846a45..7b50d1d 100644
--- a/src/components/atoms/icons/envelop.tsx
+++ b/src/components/atoms/icons/envelop.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './envelop.module.scss';
 
+export type EnvelopProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Envelop Component
  *
  * Render an envelop svg icon.
  */
-const Envelop: FC = () => {
+const Envelop: VFC<EnvelopProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles.background}
diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx
index c145daf..062d3ee 100644
--- a/src/components/atoms/icons/hamburger.stories.tsx
+++ b/src/components/atoms/icons/hamburger.stories.tsx
@@ -5,6 +5,19 @@ export default {
   title: 'Atoms/Icons',
   component: HamburgerIcon,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     isActive: {
       control: {
         type: 'boolean',
diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx
index f081bf7..6716b26 100644
--- a/src/components/atoms/icons/hamburger.tsx
+++ b/src/components/atoms/icons/hamburger.tsx
@@ -2,6 +2,13 @@ import { FC } from 'react';
 import styles from './hamburger.module.scss';
 
 type HamburgerProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+  /**
+   * Transform hamburger to a close icon when active.
+   */
   isActive: boolean;
 };
 
@@ -10,9 +17,9 @@ type HamburgerProps = {
  *
  * Render a Hamburger icon.
  */
-const Hamburger: FC<HamburgerProps> = ({ isActive }) => {
+const Hamburger: FC<HamburgerProps> = ({ className = '', isActive }) => {
   const stateClass = isActive ? `${styles['icon--active']}` : '';
-  const iconClasses = `${styles.icon} ${stateClass}`;
+  const iconClasses = `${styles.icon} ${stateClass} ${className}`;
 
   return <span className={iconClasses}></span>;
 };
diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx
index 59eb477..b1c995c 100644
--- a/src/components/atoms/icons/home.stories.tsx
+++ b/src/components/atoms/icons/home.stories.tsx
@@ -4,6 +4,21 @@ import HomeIcon from './home';
 export default {
   title: 'Atoms/Icons',
   component: HomeIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx
index 90d3a14..71bbc4a 100644
--- a/src/components/atoms/icons/home.tsx
+++ b/src/components/atoms/icons/home.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './home.module.scss';
 
+export type HomeProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Home component.
  *
  * Render a home svg icon.
  */
-const Home: FC = () => {
+const Home: VFC<HomeProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles.wall}
diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx
index 69c5b50..80e183e 100644
--- a/src/components/atoms/icons/magnifying-glass.stories.tsx
+++ b/src/components/atoms/icons/magnifying-glass.stories.tsx
@@ -4,6 +4,21 @@ import MagnifyingGlassIcon from './magnifying-glass';
 export default {
   title: 'Atoms/Icons',
   component: MagnifyingGlassIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx
index 547dd00..445ef10 100644
--- a/src/components/atoms/icons/magnifying-glass.tsx
+++ b/src/components/atoms/icons/magnifying-glass.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './magnifying-glass.module.scss';
 
+export type MagnifyingGlassProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * MagnifyingGlass component
  *
  * Render a magnifying glass svg icon.
  */
-const MagnifyingGlass: FC = () => {
+const MagnifyingGlass: VFC<MagnifyingGlassProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles['small-handle']}
diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx
index 393744b..4d2fb9a 100644
--- a/src/components/atoms/icons/moon.stories.tsx
+++ b/src/components/atoms/icons/moon.stories.tsx
@@ -4,6 +4,34 @@ import MoonIcon from './moon';
 export default {
   title: 'Atoms/Icons',
   component: MoonIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx
index 82b0ef6..4f52319 100644
--- a/src/components/atoms/icons/moon.tsx
+++ b/src/components/atoms/icons/moon.tsx
@@ -1,14 +1,21 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './moon.module.scss';
 
 type MoonProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+  /**
+   * The SVG title.
+   */
   title?: string;
 };
 
-const Moon: FC<MoonProps> = ({ title }) => {
+const Moon: VFC<MoonProps> = ({ className = '', title }) => {
   return (
     <svg
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx
index 1b5086a..ffa28f2 100644
--- a/src/components/atoms/icons/plus-minus.stories.tsx
+++ b/src/components/atoms/icons/plus-minus.stories.tsx
@@ -4,44 +4,14 @@ import PlusMinusIcon from './plus-minus';
 export default {
   title: 'Atoms/Icons',
   component: PlusMinusIcon,
-  args: {
-    ariaHidden: true,
-  },
   argTypes: {
-    additionalClasses: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classes.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    ariaHidden: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should be hidden for accessibility.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: true },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    ariaLabel: {
+    className: {
       control: {
         type: 'text',
       },
-      description: 'An accessible name.',
+      description: 'Set additional classnames.',
       table: {
-        category: 'Options',
+        category: 'Styles',
       },
       type: {
         name: 'string',
diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx
index 96c2ad0..6903c7a 100644
--- a/src/components/atoms/icons/plus-minus.test.tsx
+++ b/src/components/atoms/icons/plus-minus.test.tsx
@@ -1,16 +1,9 @@
-import { render, screen } from '@test-utils';
+import { render } from '@test-utils';
 import PlusMinus from './plus-minus';
 
 describe('PlusMinus', () => {
-  it('renders a plus icon', () => {
-    render(<PlusMinus state="plus" ariaHidden={false} ariaLabel="Plus icon" />);
-    expect(screen.getByLabelText('Plus icon')).toHaveClass('icon--plus');
-  });
-
-  it('renders a minus icon', () => {
-    render(
-      <PlusMinus state="minus" ariaHidden={false} ariaLabel="Minus icon" />
-    );
-    expect(screen.getByLabelText('Minus icon')).toHaveClass('icon--minus');
+  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
index 1a6f7b0..78aa14a 100644
--- a/src/components/atoms/icons/plus-minus.tsx
+++ b/src/components/atoms/icons/plus-minus.tsx
@@ -3,17 +3,9 @@ import styles from './plus-minus.module.scss';
 
 type PlusMinusProps = {
   /**
-   * Adds additional classes.
+   * Set additional classnames to the icon.
    */
-  additionalClasses?: string;
-  /**
-   * An accessible name.
-   */
-  ariaLabel?: string;
-  /**
-   * Should be hidden for accessibility. Default: true.
-   */
-  ariaHidden?: boolean;
+  className?: string;
   /**
    * Which state should be displayed.
    */
@@ -25,19 +17,13 @@ type PlusMinusProps = {
  *
  * Render a plus or a minus icon.
  */
-const PlusMinus: FC<PlusMinusProps> = ({
-  additionalClasses,
-  ariaHidden = true,
-  ariaLabel,
-  state,
-}) => {
+const PlusMinus: FC<PlusMinusProps> = ({ className, state }) => {
   const stateClass = `icon--${state}`;
 
   return (
     <div
-      className={`${styles.icon} ${styles[stateClass]} ${additionalClasses}`}
-      aria-label={ariaLabel}
-      aria-hidden={ariaHidden}
+      className={`${styles.icon} ${styles[stateClass]} ${className}`}
+      aria-hidden={true}
     ></div>
   );
 };
diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx
index e2206c2..46bb39f 100644
--- a/src/components/atoms/icons/posts-stack.stories.tsx
+++ b/src/components/atoms/icons/posts-stack.stories.tsx
@@ -4,6 +4,21 @@ import PostsStackIcon from './posts-stack';
 export default {
   title: 'Atoms/Icons',
   component: PostsStackIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx
index 22069ac..1998d25 100644
--- a/src/components/atoms/icons/posts-stack.tsx
+++ b/src/components/atoms/icons/posts-stack.tsx
@@ -1,17 +1,24 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './posts-stack.module.scss';
 
+export type PostsStackProps = {
+  /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+};
+
 /**
  * Posts stack component.
  *
  * Render a posts stack svg icon.
  */
-const PostsStack: FC = () => {
+const PostsStack: VFC<PostsStackProps> = ({ className = '' }) => {
   return (
     <svg
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
+      className={`${styles.icon} ${className}`}
     >
       <path
         className={styles.background}
diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx
index 613b59e..23c5b27 100644
--- a/src/components/atoms/icons/sun.stories.tsx
+++ b/src/components/atoms/icons/sun.stories.tsx
@@ -4,6 +4,34 @@ import SunIcon from './sun';
 export default {
   title: 'Atoms/Icons',
   component: SunIcon,
+  argTypes: {
+    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) => (
diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx
index 6caad9c..fa9d922 100644
--- a/src/components/atoms/icons/sun.tsx
+++ b/src/components/atoms/icons/sun.tsx
@@ -1,8 +1,12 @@
-import { FC } from 'react';
+import { VFC } from 'react';
 import styles from './sun.module.scss';
 
 type SunProps = {
   /**
+   * Set additional classnames to the icon.
+   */
+  className?: string;
+  /**
    * The SVG title.
    */
   title?: string;
@@ -13,10 +17,10 @@ type SunProps = {
  *
  * Render a svg sun icon.
  */
-const Sun: FC<SunProps> = ({ title }) => {
+const Sun: VFC<SunProps> = ({ className = '', title }) => {
   return (
     <svg
-      className={styles.sun}
+      className={`${styles.sun} ${className}`}
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >