diff --git a/src/components/common/fork-awesome/__snapshots__/fork-awesome-icon.test.tsx.snap b/src/components/common/fork-awesome/__snapshots__/fork-awesome-icon.test.tsx.snap
new file mode 100644
index 000000000..238394832
--- /dev/null
+++ b/src/components/common/fork-awesome/__snapshots__/fork-awesome-icon.test.tsx.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  fa-stack-1x"
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders a heart correctly 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  "
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders in size 2x 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  fa-2x"
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders in size 3x 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  fa-3x"
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders in size 4x 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  fa-4x"
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders in size 5x 1`] = `
+<div>
+  <i
+    class="fa  fa-heart  fa-5x"
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders with additional className 1`] = `
+<div>
+  <i
+    class="fa  fa-heart testClass "
+  />
+</div>
+`;
+
+exports[`ForkAwesomeIcon renders with fixed width icon 1`] = `
+<div>
+  <i
+    class="fa fa-fw fa-heart  "
+  />
+</div>
+`;
diff --git a/src/components/common/fork-awesome/__snapshots__/fork-awesome-stack.test.tsx.snap b/src/components/common/fork-awesome/__snapshots__/fork-awesome-stack.test.tsx.snap
new file mode 100644
index 000000000..96f4a77fd
--- /dev/null
+++ b/src/components/common/fork-awesome/__snapshots__/fork-awesome-stack.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ForkAwesomeStack renders a heart and a download icon stack 1`] = `
+<div>
+  <span
+    class="fa-stack "
+  >
+    <i
+      class="fa  fa-heart  fa-stack-1x"
+    />
+    <i
+      class="fa  fa-download  fa-stack-1x"
+    />
+  </span>
+</div>
+`;
+
+exports[`ForkAwesomeStack renders in size 2x 1`] = `
+<div>
+  <span
+    class="fa-stack fa-2x"
+  >
+    <i
+      class="fa  fa-heart  fa-stack-1x"
+    />
+    <i
+      class="fa  fa-download  fa-stack-1x"
+    />
+  </span>
+</div>
+`;
+
+exports[`ForkAwesomeStack renders in size 3x 1`] = `
+<div>
+  <span
+    class="fa-stack fa-3x"
+  >
+    <i
+      class="fa  fa-heart  fa-stack-1x"
+    />
+    <i
+      class="fa  fa-download  fa-stack-1x"
+    />
+  </span>
+</div>
+`;
+
+exports[`ForkAwesomeStack renders in size 4x 1`] = `
+<div>
+  <span
+    class="fa-stack fa-4x"
+  >
+    <i
+      class="fa  fa-heart  fa-stack-1x"
+    />
+    <i
+      class="fa  fa-download  fa-stack-1x"
+    />
+  </span>
+</div>
+`;
+
+exports[`ForkAwesomeStack renders in size 5x 1`] = `
+<div>
+  <span
+    class="fa-stack fa-5x"
+  >
+    <i
+      class="fa  fa-heart  fa-stack-1x"
+    />
+    <i
+      class="fa  fa-download  fa-stack-1x"
+    />
+  </span>
+</div>
+`;
diff --git a/src/components/common/fork-awesome/fork-awesome-icon.test.tsx b/src/components/common/fork-awesome/fork-awesome-icon.test.tsx
new file mode 100644
index 000000000..d2b7bbd49
--- /dev/null
+++ b/src/components/common/fork-awesome/fork-awesome-icon.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { IconName } from './types'
+import { render } from '@testing-library/react'
+import { ForkAwesomeIcon } from './fork-awesome-icon'
+
+describe('ForkAwesomeIcon', () => {
+  const icon: IconName = 'heart'
+  it('renders a heart correctly', () => {
+    const view = render(<ForkAwesomeIcon icon={icon} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders with fixed width icon', () => {
+    const view = render(<ForkAwesomeIcon icon={icon} fixedWidth={true} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  it('renders with additional className', () => {
+    const view = render(<ForkAwesomeIcon icon={icon} className={'testClass'} />)
+    expect(view.container).toMatchSnapshot()
+  })
+  describe('renders in size', () => {
+    it('2x', () => {
+      const view = render(<ForkAwesomeIcon icon={icon} size={'2x'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('3x', () => {
+      const view = render(<ForkAwesomeIcon icon={icon} size={'3x'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('4x', () => {
+      const view = render(<ForkAwesomeIcon icon={icon} size={'4x'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('5x', () => {
+      const view = render(<ForkAwesomeIcon icon={icon} size={'5x'} />)
+      expect(view.container).toMatchSnapshot()
+    })
+  })
+  describe('renders in stack', () => {
+    const view = render(<ForkAwesomeIcon icon={icon} stacked={true} />)
+    expect(view.container).toMatchSnapshot()
+  })
+})
diff --git a/src/components/common/fork-awesome/fork-awesome-stack.test.tsx b/src/components/common/fork-awesome/fork-awesome-stack.test.tsx
new file mode 100644
index 000000000..fd1466545
--- /dev/null
+++ b/src/components/common/fork-awesome/fork-awesome-stack.test.tsx
@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { render } from '@testing-library/react'
+import { ForkAwesomeStack } from './fork-awesome-stack'
+import type { ForkAwesomeIconProps } from './fork-awesome-icon'
+import { ForkAwesomeIcon } from './fork-awesome-icon'
+import type { ReactElement } from 'react'
+
+describe('ForkAwesomeStack', () => {
+  const stack: Array<ReactElement<ForkAwesomeIconProps>> = [
+    <ForkAwesomeIcon icon={'heart'} key={'heart'} />,
+    <ForkAwesomeIcon icon={'download'} key={'download'} />
+  ]
+  it('renders a heart and a download icon stack', () => {
+    const view = render(<ForkAwesomeStack>{stack}</ForkAwesomeStack>)
+    expect(view.container).toMatchSnapshot()
+  })
+  describe('renders in size', () => {
+    it('2x', () => {
+      const view = render(<ForkAwesomeStack size={'2x'}>{stack}</ForkAwesomeStack>)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('3x', () => {
+      const view = render(<ForkAwesomeStack size={'3x'}>{stack}</ForkAwesomeStack>)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('4x', () => {
+      const view = render(<ForkAwesomeStack size={'4x'}>{stack}</ForkAwesomeStack>)
+      expect(view.container).toMatchSnapshot()
+    })
+    it('5x', () => {
+      const view = render(<ForkAwesomeStack size={'5x'}>{stack}</ForkAwesomeStack>)
+      expect(view.container).toMatchSnapshot()
+    })
+  })
+})