diff --git a/services/web/frontend/stories/icon.stories.js b/services/web/frontend/stories/icon.stories.js
new file mode 100644
index 0000000000..1c8aaa2626
--- /dev/null
+++ b/services/web/frontend/stories/icon.stories.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import Icon from '../js/shared/components/icon'
+
+export const Type = args => {
+  return (
+    <>
+      <Icon {...args} />
+      <div>
+        <a
+          href="https://fontawesome.com/v4.7.0/icons/"
+          target="_blank"
+          rel="noopener"
+        >
+          Font Awesome icons
+        </a>
+      </div>
+    </>
+  )
+}
+Type.args = {
+  type: 'tasks',
+}
+
+export const Spinner = args => {
+  return <Icon {...args} />
+}
+Spinner.args = {
+  type: 'spinner',
+  spin: true,
+}
+
+export const FixedWidth = args => {
+  return <Icon {...args} />
+}
+FixedWidth.args = {
+  type: 'tasks',
+  modifier: 'fw',
+}
+
+export const AccessibilityLabel = args => {
+  return <Icon {...args} />
+}
+AccessibilityLabel.args = {
+  type: 'check',
+  accessibilityLabel: 'Check',
+}
+
+export default {
+  title: 'Icon',
+  component: Icon,
+}