diff --git a/webapp/components/Empty/Empty.story.js b/webapp/components/Empty/Empty.story.js
new file mode 100644
index 000000000..44d241df7
--- /dev/null
+++ b/webapp/components/Empty/Empty.story.js
@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import HcEmpty from '~/components/Empty/Empty'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+storiesOf('Empty', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add(
+    'tasks icon with message',
+    () => ({
+      components: { HcEmpty },
+      template: '<hc-empty icon="tasks" message="Sorry, there are no ... available." />',
+    }),
+    {
+      notes: "Possible icons include 'messages', 'events', 'alert', 'tasks', 'docs', and 'file'",
+    },
+  )
+  .add('default icon, no message', () => ({
+    components: { HcEmpty },
+    template: '<hc-empty />',
+  }))
diff --git a/webapp/components/Empty/Empty.vue b/webapp/components/Empty/Empty.vue
index 8760a6e6f..ea99702b5 100644
--- a/webapp/components/Empty/Empty.vue
+++ b/webapp/components/Empty/Empty.vue
@@ -26,7 +26,7 @@ export default {
      */
     icon: {
       type: String,
-      required: true,
+      default: 'alert',
       validator: value => {
         return value.match(/(messages|events|alert|tasks|docs|file)/)
       },