diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
index c8aca4d38..807c8effa 100644
--- a/frontend/src/assets/icons/index.ts
+++ b/frontend/src/assets/icons/index.ts
@@ -7,11 +7,14 @@ type Module = {
   default: object
 }
 const icons: Record<string, Module> = {}
+const iconNames: string[] = []
 
 Object.entries(iconsModule).forEach(([key, module]) => {
   const iconName: string = key.split('/').slice(-1)[0].replace('.vue', '')
   // eslint-disable-next-line security/detect-object-injection
   icons[iconName] = module as Module
+  iconNames.push('$' + iconName) // because it's used this way
 })
 
 export default icons
+export { iconNames }
diff --git a/frontend/src/components/IconSVG.stories.ts b/frontend/src/components/IconSVG.stories.ts
new file mode 100644
index 000000000..0453d254e
--- /dev/null
+++ b/frontend/src/components/IconSVG.stories.ts
@@ -0,0 +1,36 @@
+import { iconNames } from '#assets/icons'
+import { SBComp } from '#types/SBComp'
+
+import IconSVG from './IconSVG.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta = {
+  title: 'Icons/IconSVG',
+  component: IconSVG as SBComp,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    icon: { control: 'select', options: iconNames },
+    size: { control: 'select', options: ['x-small', 'small', 'default', 'large', 'x-large'] },
+    color: {
+      control: {
+        type: 'color',
+        presetColors: ['#000000', '#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+  },
+  args: { size: 'default', icon: '$heart', color: '' }, // default value
+} satisfies Meta<typeof IconSVG>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {},
+}