diff --git a/src/components/quad-status/BottomStatusIcons.stories.js b/src/components/quad-status/BottomStatusIcons.stories.js
new file mode 100644
index 0000000000..e8ff2a35aa
--- /dev/null
+++ b/src/components/quad-status/BottomStatusIcons.stories.js
@@ -0,0 +1,16 @@
+import BottomStatusIcons from "./BottomStatusIcons";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+ title: "Bottom status icons",
+ component: BottomStatusIcons,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { BottomStatusIcons },
+ template: '',
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue
new file mode 100644
index 0000000000..de89414fbf
--- /dev/null
+++ b/src/components/quad-status/BottomStatusIcons.vue
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+