diff --git a/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js
new file mode 100644
index 000000000..321ebc0de
--- /dev/null
+++ b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js
@@ -0,0 +1,53 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import BaseIcon from './BaseIcon.vue'
+import { iconNames } from '~/assets/_new/icons'
+
+const wrapperStyles = `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+`
+
+const iconPresenterStyles = `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 20%;
+  max-width: 120px;
+  height: 120px;
+  padding: 12px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  background-color: white;
+  text-align: center;
+`
+
+const iconStyles = `
+  font-size: 20px;
+`
+
+storiesOf('BaseIcon', module)
+  .addDecorator(helpers.layout)
+
+  .add('pure icon', () => ({
+    components: { BaseIcon },
+    template: '<base-icon name="tree" />',
+  }))
+
+  .add('all icons', () => ({
+    components: { BaseIcon },
+    data() {
+      return { iconNames }
+    },
+    template: `
+      <div style="${wrapperStyles}">
+        <div v-for="name in iconNames" :key="name" style="${iconPresenterStyles}">
+          <base-icon :name="name" style="${iconStyles}" />
+          {{ name }}
+        </div>
+      </div>
+    `,
+  }))
diff --git a/webapp/components/_new/generic/BaseIcon.vue b/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
similarity index 100%
rename from webapp/components/_new/generic/BaseIcon.vue
rename to webapp/components/_new/generic/BaseIcon/BaseIcon.vue