diff --git a/src/stories/icons/AlignCenterIcon.stories.ts b/src/stories/icons/AlignCenterIcon.stories.ts
deleted file mode 100644
index 2c83cbab11dee0b53d6e284a3a89fbe5a960b88f..0000000000000000000000000000000000000000
--- a/src/stories/icons/AlignCenterIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import AlignCenterIcon from './AlignCenterIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/AlignCenter',
-  component: AlignCenterIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof AlignCenterIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/AlignLeftIcon.stories.ts b/src/stories/icons/AlignLeftIcon.stories.ts
deleted file mode 100644
index d91db0bef6da3be0c0e0e5197ff466b817842fca..0000000000000000000000000000000000000000
--- a/src/stories/icons/AlignLeftIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import AlignLeftIcon from './AlignLeftIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/AlignLeft',
-  component: AlignLeftIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof AlignLeftIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/AlignRightIcon.stories.ts b/src/stories/icons/AlignRightIcon.stories.ts
deleted file mode 100644
index a5cca2a9a340f3b917528563678f46d47b0fc28b..0000000000000000000000000000000000000000
--- a/src/stories/icons/AlignRightIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import AlignRightIcon from './AlignRightIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/AlignRight',
-  component: AlignRightIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof AlignRightIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ArrowLeftIcon.stories.ts b/src/stories/icons/ArrowLeftIcon.stories.ts
deleted file mode 100644
index 0c185022d04fd1f4a139c5f61fac5e7dc70566cb..0000000000000000000000000000000000000000
--- a/src/stories/icons/ArrowLeftIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import ArrowLeftIcon from './ArrowLeftIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/ArrowLeft',
-  component: ArrowLeftIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof ArrowLeftIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ArrowRightIcon.stories.ts b/src/stories/icons/ArrowRightIcon.stories.ts
deleted file mode 100644
index 5fe167cf6c3aeafc8e20a35ba2f74ad6ab015858..0000000000000000000000000000000000000000
--- a/src/stories/icons/ArrowRightIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import ArrowRightIcon from './ArrowRightIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/ArrowRight',
-  component: ArrowRightIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof ArrowRightIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/CropIcon.stories.ts b/src/stories/icons/CropIcon.stories.ts
deleted file mode 100644
index ff8d69add0a6270d617b471df94966f55136f5a2..0000000000000000000000000000000000000000
--- a/src/stories/icons/CropIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import CropIcon from './CropIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Crop',
-  component: CropIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof CropIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/CrossCircleIcon.stories.ts b/src/stories/icons/CrossCircleIcon.stories.ts
deleted file mode 100644
index f1bb9cb2f174c6142d32a4c82c787f26bf4ceaa1..0000000000000000000000000000000000000000
--- a/src/stories/icons/CrossCircleIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import CrossCircleIcon from './CrossCircleIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/CrossCircle',
-  component: CrossCircleIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof CrossCircleIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/DashedIcon.stories.ts b/src/stories/icons/DashedIcon.stories.ts
deleted file mode 100644
index 52a54c6734000dadfee474bcbfc96213f6e4b3b6..0000000000000000000000000000000000000000
--- a/src/stories/icons/DashedIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import DashedIcon from './DashedIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Dashed',
-  component: DashedIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof DashedIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/DiagonalLineIcon.stories.ts b/src/stories/icons/DiagonalLineIcon.stories.ts
deleted file mode 100644
index 381b801334566283ed5e73c7297cdde6390b52eb..0000000000000000000000000000000000000000
--- a/src/stories/icons/DiagonalLineIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import DiagonalLineIcon from './DiagonalLineIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/DiagonalLine',
-  component: DiagonalLineIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof DiagonalLineIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/DottedIcon.stories.ts b/src/stories/icons/DottedIcon.stories.ts
deleted file mode 100644
index a273abd7aef78ee0ecbe17c5e7fd0d612ccd6514..0000000000000000000000000000000000000000
--- a/src/stories/icons/DottedIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import DottedIcon from './DottedIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Dotted',
-  component: DottedIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof DottedIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/EditIcon.stories.ts b/src/stories/icons/EditIcon.stories.ts
deleted file mode 100644
index 763870504196f0c9ebcb405713e42b36c0323fa5..0000000000000000000000000000000000000000
--- a/src/stories/icons/EditIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import EditIcon from './EditIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Edit',
-  component: EditIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof EditIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ExitIcon.stories.ts b/src/stories/icons/ExitIcon.stories.ts
deleted file mode 100644
index 7222da8cbcea3c59358593dabdbbdc132ab46756..0000000000000000000000000000000000000000
--- a/src/stories/icons/ExitIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import ExitIcon from './ExitIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/ExitIcon',
-  component: ExitIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white'
-  },
-} satisfies Meta<typeof ExitIcon>
-
-export default meta;
-
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    color: 'black'
-  },
-}
diff --git a/src/stories/icons/HamburgerIcon.stories.ts b/src/stories/icons/HamburgerIcon.stories.ts
deleted file mode 100644
index 4b0f03856e844d804dd55cdbbb7419c14ddfb39d..0000000000000000000000000000000000000000
--- a/src/stories/icons/HamburgerIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import HamburgerIcon from './HamburgerIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Hamburger',
-  component: HamburgerIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof HamburgerIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/HomeIcon.stories.ts b/src/stories/icons/HomeIcon.stories.ts
deleted file mode 100644
index a87c46aaf3da0ecbcc7c3afd799e3702b14165e9..0000000000000000000000000000000000000000
--- a/src/stories/icons/HomeIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import HomeIcon from './HomeIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Home',
-  component: HomeIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof HomeIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ImageEditIcon.stories.ts b/src/stories/icons/ImageEditIcon.stories.ts
deleted file mode 100644
index 435ec0b4d2514258672c1c6a30d0f04c67237453..0000000000000000000000000000000000000000
--- a/src/stories/icons/ImageEditIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import ImageEditIcon from './ImageEditIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/ImageEdit',
-  component: ImageEditIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof ImageEditIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ImageIcon.stories.ts b/src/stories/icons/ImageIcon.stories.ts
deleted file mode 100644
index b16140cfa01f897afe53d2d3cc09482b139727fb..0000000000000000000000000000000000000000
--- a/src/stories/icons/ImageIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import ImageIcon from './ImageIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Image',
-  component: ImageIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof ImageIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/ImageIcon.vue b/src/stories/icons/ImageIcon.vue
deleted file mode 100644
index 6ec71e83afd8c695588db5cc0dfaeebbcf8bd407..0000000000000000000000000000000000000000
--- a/src/stories/icons/ImageIcon.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 32 32"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g id="Icon-Set" transform="translate(-360.000000, -99.000000)" :fill="color ?? '#000000'">
-        <path
-          id="image-picture"
-          d="M368,109 C366.896,109 366,108.104 366,107 C366,105.896 366.896,105 368,105 C369.104,105 370,105.896 370,107 C370,108.104 369.104,109 368,109 L368,109 Z M368,103 C365.791,103 364,104.791 364,107 C364,109.209 365.791,111 368,111 C370.209,111 372,109.209 372,107 C372,104.791 370.209,103 368,103 L368,103 Z M390,116.128 L384,110 L374.059,120.111 L370,116 L362,123.337 L362,103 C362,101.896 362.896,101 364,101 L388,101 C389.104,101 390,101.896 390,103 L390,116.128 L390,116.128 Z M390,127 C390,128.104 389.104,129 388,129 L382.832,129 L375.464,121.535 L384,112.999 L390,118.999 L390,127 L390,127 Z M364,129 C362.896,129 362,128.104 362,127 L362,126.061 L369.945,118.945 L380.001,129 L364,129 L364,129 Z M388,99 L364,99 C361.791,99 360,100.791 360,103 L360,127 C360,129.209 361.791,131 364,131 L388,131 C390.209,131 392,129.209 392,127 L392,103 C392,100.791 390.209,99 388,99 L388,99 Z"
-        ></path>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/Mono/Age18Icon.vue b/src/stories/icons/Mono/Age18Icon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be3b17c7c597cda69bd925d3c009616cd42ba012
--- /dev/null
+++ b/src/stories/icons/Mono/Age18Icon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 1C20 0.447715 20.4477 0 21 0C21.5523 0 22 0.447715 22 1V2H23C23.5523 2 24 2.44772 24 3C24 3.55228 23.5523 4 23 4H22V5C22 5.55228 21.5523 6 21 6C20.4477 6 20 5.55228 20 5V4H19C18.4477 4 18 3.55228 18 3C18 2.44772 18.4477 2 19 2H20V1Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M21.1936 8.07463C21.7016 7.85776 22.297 8.09138 22.4668 8.6169C23.145 10.7148 23.1792 12.9766 22.5523 15.1064C21.8308 17.5572 20.2788 19.6804 18.1626 21.1117C16.0464 22.5429 13.498 23.193 10.9548 22.9502C8.41165 22.7075 6.03225 21.5871 4.22503 19.7814C2.4178 17.9757 1.29545 15.5972 1.05062 13.0542C0.805783 10.5112 1.45373 7.96227 2.88325 5.84491C4.31277 3.72755 6.43471 2.17379 8.88488 1.4503C11.0142 0.821568 13.2759 0.853957 15.3744 1.53036C15.9001 1.69979 16.1342 2.29501 15.9178 2.80311C15.7013 3.31122 15.1136 3.54496 14.5846 3.38623C12.9184 2.88626 11.1353 2.8783 9.4532 3.37498C7.45003 3.96647 5.71522 5.23677 4.5465 6.96784C3.37778 8.69891 2.84804 10.7828 3.04821 12.8619C3.24838 14.9409 4.16596 16.8855 5.64348 18.3618C7.121 19.8381 9.06631 20.754 11.1455 20.9525C13.2247 21.1509 15.3082 20.6195 17.0383 19.4493C18.7684 18.2792 20.0373 16.5433 20.6271 14.5397C21.1224 12.8572 21.113 11.074 20.6116 9.40826C20.4525 8.87941 20.6857 8.29149 21.1936 8.07463Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M7.71054 9.14472L7.29441 9.35279C6.69971 9.65014 5.99999 9.21769 5.99999 8.55279C5.99999 8.214 6.1914 7.9043 6.49441 7.75279L7.78884 7.10557C7.9277 7.03615 8.08081 7 8.23605 7H8.99999C9.55227 7 9.99999 7.44772 9.99999 8V16C9.99999 16.5523 9.55227 17 8.99999 17C8.4477 17 7.99999 16.5523 7.99999 16V9.32361C7.99999 9.17493 7.84352 9.07823 7.71054 9.14472Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18 9C18 7.89543 17.1046 7 16 7H14C12.8954 7 12 7.89543 12 9V10.5C12 11.3284 12.6716 12 13.5 12C12.6716 12 12 12.6716 12 13.5V15C12 16.1046 12.8954 17 14 17H16C17.1046 17 18 16.1046 18 15V13.5C18 12.6716 17.3284 12 16.5 12C17.3284 12 18 11.3284 18 10.5V9ZM16 10C16 9.44771 15.5523 9 15 9C14.4477 9 14 9.44771 14 10C14 10.5523 14.4477 11 15 11C15.5523 11 16 10.5523 16 10ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AirplaneIcon.vue b/src/stories/icons/Mono/AirplaneIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..885289a1e007d6b8bf26382553e4ea3c7363cb10
--- /dev/null
+++ b/src/stories/icons/Mono/AirplaneIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.8286 1.72758C19.618 1.37176 21.0449 0.981099 22.1457 2.08172C23.2466 3.18244 22.8558 4.60949 22.5 5.39885C22.2409 5.97353 21.8851 6.58498 21.4343 7.03586L18.3035 10.1667L20.75 19.9527C21.0686 21.2273 19.4017 22.0136 18.6208 20.957L13.9001 14.5701L11.0678 17.4024L10.4818 21.504C10.326 22.5944 8.90642 22.9164 8.29541 21.9999L5.86325 18.3517L1.89476 15.6042C0.960857 14.9577 1.36456 13.4958 2.49799 13.4203L6.85509 13.1298L9.65741 10.3275L3.27054 5.60674C2.21395 4.82579 3.00021 3.1589 4.27485 3.47756L14.0608 5.92406L17.1916 2.7933C17.6424 2.34244 18.254 1.98663 18.8286 1.72758ZM18.5828 4.23053L15.1548 7.65856C14.8567 7.95662 14.4241 8.07643 14.0152 7.9742L7.70352 6.39628L11.5932 9.27129C12.1832 9.70735 12.2473 10.5661 11.7285 11.0848L8.05676 14.7566C7.85123 14.9621 7.57808 15.086 7.28807 15.1054L4.91621 15.2635L7.31557 16.9246L8.79804 19.1483L9.12556 16.8556C9.16228 16.5986 9.28139 16.3604 9.46498 16.1768L13.1427 12.499C13.6615 11.9803 14.5202 12.0443 14.9562 12.6343L17.8312 16.524L16.2533 10.2123C16.1511 9.80342 16.2709 9.37083 16.569 9.07277L19.997 5.64474C20.0811 5.54456 20.4407 5.10051 20.6767 4.57691C20.9648 3.93787 20.8835 3.64788 20.7316 3.49604C20.5796 3.34411 20.2895 3.26286 19.6505 3.5509C19.127 3.78691 18.683 4.14648 18.5828 4.23053Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AlarmIcon.vue b/src/stories/icons/Mono/AlarmIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b395d215ef251dfa8059a0f470510af8d014f5ac
--- /dev/null
+++ b/src/stories/icons/Mono/AlarmIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.9999 11.8811V5.99997C12.9999 5.44768 12.5522 4.99997 11.9999 4.99997C11.4476 4.99997 10.9999 5.44768 10.9999 5.99997V12.4666C10.9999 12.8159 11.2182 13.1618 11.5173 13.3345L16.1371 16.0017C16.6154 16.2779 17.227 16.114 17.5031 15.6357C17.7792 15.1574 17.6154 14.5458 17.1371 14.2697L12.9999 11.8811Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.9999 0.00012207C11.4477 0.00012207 10.9999 0.447835 10.9999 1.00012V1.04484C9.74801 1.15765 8.55656 1.48023 7.46101 1.97715C7.18844 1.67245 6.75176 1.24982 6.16157 0.932023C5.62139 0.641155 4.92587 0.427815 4.12846 0.531815C3.3261 0.636461 2.53871 1.04702 1.79289 1.79283C1.04706 2.53865 0.636487 3.32603 0.531831 4.12839C0.427821 4.9258 0.641157 5.62133 0.932021 6.1615C1.24982 6.75171 1.67247 7.1884 1.97717 7.46097C1.34951 8.84475 0.999995 10.3815 0.999995 11.9999C0.999995 14.6729 1.95339 17.1232 3.53867 19.0293L2.29875 20.2692C1.90823 20.6597 1.90892 21.2936 2.29944 21.6841C2.68996 22.0746 3.32381 22.0753 3.71433 21.6848L4.95277 20.4464C6.86141 22.0405 9.31864 22.9999 11.9999 22.9999C14.6812 22.9999 17.1385 22.0405 19.0471 20.4464L20.2855 21.6848C20.6761 22.0753 21.3099 22.0746 21.7004 21.6841C22.0909 21.2936 22.0916 20.6597 21.7011 20.2692L20.4612 19.0293C22.0465 17.1232 22.9999 14.6729 22.9999 11.9999C22.9999 10.3815 22.6504 8.84475 22.0227 7.46097C22.3274 7.18839 22.75 6.75171 23.0678 6.1615C23.3587 5.62132 23.572 4.92579 23.468 4.12839C23.3634 3.32602 22.9528 2.53864 22.207 1.79283C21.4612 1.04702 20.6738 0.636458 19.8714 0.531811C19.074 0.427811 18.3785 0.641152 17.8383 0.932019C17.2481 1.24982 16.8114 1.67245 16.5389 1.97715C15.4433 1.48023 14.2519 1.15766 12.9999 1.04484V1.00012C12.9999 0.447835 12.5522 0.00012207 11.9999 0.00012207ZM18.337 3.00768C19.3663 3.73444 20.2654 4.63349 20.9922 5.66286C21.108 5.5287 21.2187 5.37704 21.3069 5.21331C21.4535 4.94099 21.5215 4.66777 21.4848 4.38706C21.4489 4.11131 21.297 3.71121 20.7928 3.20705C20.2886 2.70289 19.8885 2.55097 19.6128 2.515C19.332 2.47839 19.0588 2.54631 18.7865 2.69295C18.6228 2.78111 18.4711 2.89187 18.337 3.00768ZM3.0077 5.66287C3.73446 4.63349 4.63351 3.73444 5.66289 3.00768C5.52874 2.89187 5.37709 2.78111 5.21337 2.69295C4.94105 2.54631 4.66783 2.4784 4.38711 2.51501C4.11136 2.55097 3.71125 2.70289 3.20708 3.20705C2.70291 3.71121 2.55099 4.11131 2.51502 4.38707C2.47841 4.66777 2.54632 4.94099 2.69295 5.21331C2.78112 5.37704 2.89189 5.52871 3.0077 5.66287ZM11.9999 20.9931C7.03317 20.9931 3.00681 16.9667 3.00681 11.9999C3.00681 7.03317 7.03317 3.00681 11.9999 3.00681C16.9667 3.00681 20.9931 7.03317 20.9931 11.9999C20.9931 16.9667 16.9667 20.9931 11.9999 20.9931Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/AlignCenterIcon.vue b/src/stories/icons/Mono/AlignCenterIcon.vue
similarity index 88%
rename from src/stories/icons/AlignCenterIcon.vue
rename to src/stories/icons/Mono/AlignCenterIcon.vue
index e7edd7ae5ee1765acb29e3a86fa24297cbe28db6..a79b39b7d03c3ec1e0db97b89bbc316afbe92534 100644
--- a/src/stories/icons/AlignCenterIcon.vue
+++ b/src/stories/icons/Mono/AlignCenterIcon.vue
@@ -8,8 +8,8 @@ defineProps<Props>();
 
 <template>
   <svg
-    :width="size ?? '25px'"
-    :height="size ?? '25px'"
+    :width="size ?? '40'"
+    :height="size ?? '40'"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/stories/icons/AlignLeftIcon.vue b/src/stories/icons/Mono/AlignLeftIcon.vue
similarity index 88%
rename from src/stories/icons/AlignLeftIcon.vue
rename to src/stories/icons/Mono/AlignLeftIcon.vue
index 52a46b689aa0332c8d6fc111bb5a3ba1fd1e98eb..878160ac6d8d5df258d526e1b82c92370a923456 100644
--- a/src/stories/icons/AlignLeftIcon.vue
+++ b/src/stories/icons/Mono/AlignLeftIcon.vue
@@ -8,8 +8,8 @@ defineProps<Props>();
 
 <template>
   <svg
-    :width="size ?? '25px'"
-    :height="size ?? '25px'"
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/stories/icons/AlignRightIcon.vue b/src/stories/icons/Mono/AlignRightIcon.vue
similarity index 88%
rename from src/stories/icons/AlignRightIcon.vue
rename to src/stories/icons/Mono/AlignRightIcon.vue
index b9d49d8541827e7a1953c1d5ce40e047cda12d4b..3e2440af6ca77a6b6fa775370fcde2376a398803 100644
--- a/src/stories/icons/AlignRightIcon.vue
+++ b/src/stories/icons/Mono/AlignRightIcon.vue
@@ -8,8 +8,8 @@ defineProps<Props>();
 
 <template>
   <svg
-    :width="size ?? '25px'"
-    :height="size ?? '25px'"
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/stories/icons/Mono/AnchorIcon.vue b/src/stories/icons/Mono/AnchorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d13c80cc8e80eaead8350b963904f64b04713982
--- /dev/null
+++ b/src/stories/icons/Mono/AnchorIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13 6.82929C14.1652 6.41746 15 5.30622 15 4C15 2.34315 13.6568 1 12 1C10.3431 1 8.99999 2.34315 8.99999 4C8.99999 5.30622 9.8348 6.41746 11 6.82929V9H9.99999C9.44771 9 8.99999 9.44771 8.99999 10C8.99999 10.5523 9.44771 11 9.99999 11H11V20.9513C9.6854 20.8184 8.69059 20.4252 7.92969 19.9179C6.98043 19.2851 6.33511 18.4342 5.89442 17.5528C5.45178 16.6675 5.22547 15.7701 5.11139 15.0856C5.10656 15.0566 5.10194 15.0281 5.09752 15H5.99999C6.55228 15 6.99999 14.5523 6.99999 14C6.99999 13.4477 6.55228 13 5.99999 13H3.99999C3.37285 13 2.98297 13.5373 3.0025 14.1232C3.00953 14.3341 3.03602 14.7989 3.1386 15.4144C3.27451 16.2299 3.54821 17.3325 4.10557 18.4472C4.66488 19.5658 5.51956 20.7149 6.82029 21.5821C8.12729 22.4534 9.82501 23 12 23C14.175 23 15.8727 22.4534 17.1797 21.5821C18.4804 20.7149 19.3351 19.5658 19.8944 18.4472C20.4518 17.3325 20.7255 16.2299 20.8614 15.4144C20.964 14.7989 20.9905 14.3341 20.9975 14.1232C21.017 13.5373 20.6272 13 20 13H18C17.4477 13 17 13.4477 17 14C17 14.5523 17.4477 15 18 15H18.9025C18.898 15.0281 18.8934 15.0566 18.8886 15.0856C18.7745 15.7701 18.5482 16.6675 18.1056 17.5528C17.6649 18.4342 17.0196 19.2851 16.0703 19.9179C15.3094 20.4252 14.3146 20.8184 13 20.9513V11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H13V6.82929ZM12 5.04921C11.4205 5.04921 10.9508 4.57946 10.9508 4C10.9508 3.42054 11.4205 2.95079 12 2.95079C12.5795 2.95079 13.0492 3.42054 13.0492 4C13.0492 4.57946 12.5795 5.04921 12 5.04921Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AnchorLinkIcon.vue b/src/stories/icons/Mono/AnchorLinkIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a7ef42ccc8dca5548a8569a20174d9c643d9f88
--- /dev/null
+++ b/src/stories/icons/Mono/AnchorLinkIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArchiveIcon.vue b/src/stories/icons/Mono/ArchiveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6a8e7b7ded47a385786f24d5193862f5a63a125
--- /dev/null
+++ b/src/stories/icons/Mono/ArchiveIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12H16C16.5523 12 17 11.5523 17 11C17 10.4477 16.5523 10 16 10H8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V5C1 6.30622 1.83481 7.41746 3 7.82929V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V7.82929C22.1652 7.41746 23 6.30622 23 5V4ZM20 6H4C3.44772 6 3 5.55228 3 5V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V5C21 5.55228 20.5523 6 20 6ZM5 20V8H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowForwardIcon.vue b/src/stories/icons/Mono/ArrowForwardIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ae4ade43331aa362cae436e82c896dbbb9b9121
--- /dev/null
+++ b/src/stories/icons/Mono/ArrowForwardIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.6 3.80353C16.4468 2.26658 14 3.08182 14 5.00302V8.00929C9.32281 7.86093 6.22286 9.50672 4.22042 11.7657C2.13865 14.1142 1.33668 17.0185 1.02193 18.9028C0.884035 19.7283 1.41941 20.3237 1.98513 20.5275C2.52889 20.7234 3.25333 20.6283 3.72507 20.0531C5.30555 18.1261 8.5 15.4884 14 15.4884V18.997C14 20.9182 16.4468 21.7334 17.6 20.1965L22.4 13.7992C23.2 12.733 23.2 11.267 22.4 10.2008L17.6 3.80353ZM16 5.00302L20.8 11.4003C21.0667 11.7557 21.0667 12.2443 20.8 12.5997L16 18.997V14.5C16 13.9477 15.5523 13.5 15 13.5H14C7 13.5 3.39908 17.4621 3.39908 17.4621C3.81724 16.0361 4.52506 14.4371 5.71707 13.0924C7.28166 11.3273 9.5 10 14 10H15C15.5523 10 16 9.55228 16 9V5.00302Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/ArrowLeftIcon.vue b/src/stories/icons/Mono/ArrowLeftIcon.vue
similarity index 93%
rename from src/stories/icons/ArrowLeftIcon.vue
rename to src/stories/icons/Mono/ArrowLeftIcon.vue
index 7566b03a8c154e4bc72112d30a5a184adc61d387..7b6ff8be4806b1ee229e4834ce34f23ca65ed8d2 100644
--- a/src/stories/icons/ArrowLeftIcon.vue
+++ b/src/stories/icons/Mono/ArrowLeftIcon.vue
@@ -10,8 +10,8 @@ defineProps<Props>();
   <svg
     id="left-arrow"
     :fill="color ?? '#000000'"
-    :width="size ?? '25px'"
-    :height="size ?? '25px'"
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
     viewBox="0 0 24 24"
     data-name="Flat Line"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/stories/icons/ArrowRightIcon.vue b/src/stories/icons/Mono/ArrowRightIcon.vue
similarity index 93%
rename from src/stories/icons/ArrowRightIcon.vue
rename to src/stories/icons/Mono/ArrowRightIcon.vue
index 62409b866e80d10e5d11353cc80141ad1bbddc7d..aa302e5a4d2b59175efc7fd8cc824e8575b869c0 100644
--- a/src/stories/icons/ArrowRightIcon.vue
+++ b/src/stories/icons/Mono/ArrowRightIcon.vue
@@ -10,8 +10,8 @@ defineProps<Props>();
   <svg
     id="right-arrow"
     :fill="color ?? '#000000'"
-    :width="size ?? '25px'"
-    :height="size ?? '25px'"
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
     viewBox="0 0 24 24"
     data-name="Flat Line"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/stories/icons/VerticalArrowsIcon.vue b/src/stories/icons/Mono/ArrowsVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/VerticalArrowsIcon.vue
rename to src/stories/icons/Mono/ArrowsVerticalIcon.vue
diff --git a/src/stories/icons/Mono/AtIcon.vue b/src/stories/icons/Mono/AtIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..784ee469f943e52aa0b602b7816da0b651ce1af1
--- /dev/null
+++ b/src/stories/icons/Mono/AtIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.5485 20.9074C16.7993 21.3985 16.6058 22.0046 16.0939 22.2098C13.9858 23.0552 11.6589 23.2302 9.43437 22.6966C6.885 22.0852 4.63785 20.5833 3.09784 18.4616C1.55783 16.3399 0.82623 13.7379 1.03488 11.1246C1.24352 8.51121 2.37869 6.0583 4.23584 4.20784C6.09298 2.35738 8.54997 1.23105 11.1641 1.03182C13.7782 0.832594 16.3775 1.57356 18.4936 3.12121C20.6097 4.66885 22.1035 6.9214 22.7058 9.47296C22.9026 10.3069 23 11.1549 23 12L23 12.0022C22.9999 12.5715 22.9555 13.1396 22.8676 13.7012C22.5877 15.7731 21.7158 19 19 19C16.6669 19 15.889 17.6669 15.6297 16.778C14.6219 17.5448 13.3641 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 12 18 14 17.9985 16C18 17 18.5 17 18.5 17C19.427 17 20.0112 16.2367 20.3791 15.3067C20.3882 15.2749 20.3987 15.2434 20.4106 15.2122C20.4524 15.1026 20.4921 14.9924 20.5296 14.8815C20.9613 13.5182 21 12 21 12H21.0031C21.0031 11.3083 20.9234 10.6143 20.7623 9.93171C20.2694 7.84334 19.0467 5.99971 17.3148 4.73301C15.5828 3.46632 13.4554 2.85986 11.3158 3.02292C9.17626 3.18599 7.1653 4.10785 5.64529 5.62239C4.12529 7.13693 3.19619 9.14455 3.02542 11.2835C2.85465 13.4224 3.45343 15.5521 4.71388 17.2886C5.97433 19.0251 7.81354 20.2544 9.90012 20.7548C11.6616 21.1773 13.5015 21.057 15.1819 20.4221C15.6977 20.2273 16.2977 20.4164 16.5485 20.9074ZM7.99803 12C7.99803 14.2102 9.78977 16.002 12 16.002C14.2102 16.002 16.002 14.2102 16.002 12C16.002 9.78978 14.2102 7.99803 12 7.99803C9.78977 7.99803 7.99803 9.78978 7.99803 12Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/AwardIcon.vue b/src/stories/icons/Mono/AwardIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..350d6969ef783c36ebff837f1d6c0d00cc859ea1
--- /dev/null
+++ b/src/stories/icons/Mono/AwardIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.6284 13.4807C19.4942 12.2024 20 10.6603 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 10.5545 4.44338 12.0055 5.21057 13.2333L2.05686 18.6957C1.88357 18.9958 1.87805 19.3643 2.04226 19.6695C2.20648 19.9747 2.51701 20.1731 2.86297 20.1939L5.85952 20.3738L7.51356 22.8789C7.70452 23.1681 8.03162 23.3379 8.37805 23.3275C8.72447 23.3171 9.04081 23.1281 9.2141 22.8279L12.0008 18.0013L14.634 22.5622C14.8073 22.8623 15.1236 23.0513 15.47 23.0617C15.8165 23.0721 16.1436 22.9024 16.3345 22.6132L17.9071 20.2314L20.7561 20.0604C21.102 20.0396 21.4126 19.8412 21.5768 19.536C21.741 19.2308 21.7355 18.8623 21.5622 18.5622L18.6284 13.4807ZM12 15C15.3137 15 18 12.3137 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9C6 12.3137 8.68629 15 12 15ZM13.6355 16.8327L15.557 20.1609L16.5136 18.7122C16.687 18.4495 16.974 18.2838 17.2882 18.2649L19.0211 18.1609L17.2282 15.0554C16.2192 15.9273 14.9901 16.5513 13.6355 16.8327ZM4.59792 18.2944L6.57139 14.8763C7.61642 15.8422 8.91965 16.5328 10.3659 16.833L8.29107 20.4267L7.25305 18.8545C7.07962 18.5919 6.79264 18.4262 6.47845 18.4073L4.59792 18.2944Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BackspaceIcon.vue b/src/stories/icons/Mono/BackspaceIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9a692bda3c1b8b794d8955ba3b94fd84ddcd729
--- /dev/null
+++ b/src/stories/icons/Mono/BackspaceIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.7071 15.2938C11.3166 14.9033 11.3166 14.2701 11.7071 13.8796L13.5839 12.0027L11.7079 10.1267C11.3174 9.73617 11.3174 9.103 11.7079 8.71248C12.0984 8.32195 12.7316 8.32195 13.1221 8.71248L14.9982 10.5885L16.8796 8.70702C17.2702 8.3165 17.9033 8.3165 18.2938 8.70702C18.6844 9.09755 18.6844 9.73071 18.2938 10.1212L16.4124 12.0027L18.293 13.8833C18.6835 14.2739 18.6835 14.907 18.293 15.2975C17.9025 15.6881 17.2693 15.6881 16.8788 15.2975L14.9982 13.4169L13.1213 15.2938C12.7308 15.6843 12.0976 15.6843 11.7071 15.2938Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.6131 5.14653C6.18186 4.42266 7.05148 4 7.97206 4H20C21.6568 4 23 5.34315 23 7V17C23 18.6569 21.6568 20 20 20H7.97206C7.05148 20 6.18186 19.5773 5.6131 18.8535L1.68453 13.8535C0.829805 12.7656 0.829807 11.2344 1.68453 10.1465L5.6131 5.14653ZM7.97206 6C7.6652 6 7.37533 6.14089 7.18574 6.38218L3.25717 11.3822C2.97226 11.7448 2.97226 12.2552 3.25717 12.6178L7.18574 17.6178C7.37533 17.8591 7.6652 18 7.97206 18H20C20.5523 18 21 17.5523 21 17V7C21 6.44772 20.5523 6 20 6H7.97206Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BadgeIcon.vue b/src/stories/icons/Mono/BadgeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..108092cd7821e32fb42bc9cf617de54eff634e17
--- /dev/null
+++ b/src/stories/icons/Mono/BadgeIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1 5C1 2.79086 2.79086 1 5 1H9.75736C10.8182 1 11.8356 1.42143 12.5858 2.17157L21.5858 11.1716C23.1479 12.7337 23.1479 15.2663 21.5858 16.8284L16.8284 21.5858C15.2663 23.1479 12.7337 23.1479 11.1716 21.5858L2.17157 12.5858C1.42143 11.8356 1 10.8182 1 9.75736V5ZM5 3C3.89543 3 3 3.89543 3 5V9.75736C3 10.2878 3.21071 10.7965 3.58579 11.1716L12.5858 20.1716C13.3668 20.9526 14.6332 20.9526 15.4142 20.1716L20.1716 15.4142C20.9526 14.6332 20.9526 13.3668 20.1716 12.5858L11.1716 3.58579C10.7965 3.21071 10.2878 3 9.75736 3H5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M9 7.5C9 8.32843 8.32843 9 7.5 9C6.67157 9 6 8.32843 6 7.5C6 6.67157 6.67157 6 7.5 6C8.32843 6 9 6.67157 9 7.5Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BallFootballIcon.vue b/src/stories/icons/Mono/BallFootballIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e055d6715c5d5d176e15d174cdd475bbd5d6a23
--- /dev/null
+++ b/src/stories/icons/Mono/BallFootballIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.9999 22.9998C18.075 22.9998 22.9999 18.0749 22.9999 11.9998C22.9999 5.92462 18.075 0.999756 11.9999 0.999756C5.92478 0.999756 0.999908 5.92462 0.999908 11.9998C0.999908 18.0749 5.92478 22.9998 11.9999 22.9998ZM3.02676 12.6047C3.08664 13.5062 3.27939 14.3715 3.5856 15.181L7.66338 15.9224L8.78323 14.8025L7.25464 11.7454L5.99999 11.118L3.02676 12.6047ZM4.83959 17.4418C5.74823 18.6355 6.94856 19.5951 8.3343 20.2144L7.30091 17.8893L4.83959 17.4418ZM10.8358 20.9183C11.2168 20.9675 11.6054 20.9929 11.9999 20.9929C12.3945 20.9929 12.7831 20.9675 13.1642 20.9182L14.8072 17.2215L13.5858 16H10.4142L9.19274 17.2215L10.8358 20.9183ZM15.6657 20.2143C17.0514 19.595 18.2516 18.6354 19.1602 17.4418L16.6991 17.8893L15.6657 20.2143ZM3.16748 10.2982L4.86962 9.44715L4.41375 7.16782C3.81434 8.10693 3.38453 9.16479 3.16748 10.2982ZM6.06786 5.24032L6.88466 9.3243L7.89442 9.82918L11 7.5V6.11803L7.35671 4.29639C6.89885 4.57295 6.46765 4.88918 6.06786 5.24032ZM9.79419 3.27906L12 4.38197L14.2057 3.27909C13.4999 3.10112 12.761 3.00659 11.9999 3.00659C11.2389 3.00659 10.5 3.10111 9.79419 3.27906ZM16.6432 4.29644L13 6.11803V7.5L16.1056 9.82918L17.1153 9.3243L17.9321 5.24044C17.5323 4.88928 17.1011 4.57302 16.6432 4.29644ZM19.5862 7.16802L19.1304 9.44715L20.8323 10.2981C20.6153 9.16481 20.1855 8.10706 19.5862 7.16802ZM20.9731 12.6046L18 11.118L16.7453 11.7454L15.2168 14.8025L16.3366 15.9224L20.4142 15.181C20.7204 14.3715 20.9132 13.5062 20.9731 12.6046ZM9.26765 11.2993L12 9.25L14.7323 11.2993L13.382 14H10.618L9.26765 11.2993Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BallIcon.vue b/src/stories/icons/Mono/BallIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51a7902e41e03864eab94a8ef50bc0fcbe440c73
--- /dev/null
+++ b/src/stories/icons/Mono/BallIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM5.14386 17.8201C3.81099 16.2515 3.00683 14.2197 3.00683 12L3.00683 11.9978C6.61307 11.9618 9.57567 11.4838 12.2422 10.5779C12.4668 11.0605 12.6847 11.5534 12.8956 12.0564C12.5555 12.1691 12.221 12.2949 11.8918 12.4335C9.24177 13.5489 7.00538 15.4612 5.14386 17.8201ZM6.60614 19.1967C8.10884 20.3248 9.97636 20.9932 12 20.9932C13.2188 20.9932 14.3809 20.7507 15.4409 20.3114C14.9668 18.0368 14.352 15.907 13.6265 13.9217C13.3003 14.0264 12.9807 14.1451 12.6677 14.2768C10.356 15.2499 8.33843 16.9649 6.60614 19.1967ZM15.5924 13.4765C16.2479 15.3019 16.8129 17.2399 17.267 19.2902C19.048 18.0013 20.338 16.0757 20.8032 13.8473C18.9143 13.3589 17.1821 13.2604 15.5924 13.4765ZM14.8575 11.5662C16.754 11.2412 18.7996 11.3067 20.9917 11.8332C20.9578 9.97415 20.3599 8.25291 19.3619 6.8334C17.6358 8.0531 15.9276 9.06168 14.1111 9.85398C14.3687 10.4121 14.6177 10.9829 14.8575 11.5662ZM11.3457 8.76846C8.99734 9.53429 6.39047 9.94463 3.2312 9.9948C3.85725 7.24565 5.74294 4.97565 8.24906 3.82401C9.34941 5.31262 10.3933 6.96064 11.3457 8.76846ZM13.2302 8.05623C14.8876 7.34152 16.4466 6.43089 18.0282 5.32624C16.4333 3.88469 14.3192 3.00683 12 3.00683C11.4014 3.00683 10.8165 3.06531 10.2506 3.17688C11.3103 4.66337 12.3129 6.28992 13.2302 8.05623Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BanknoteIcon.vue b/src/stories/icons/Mono/BanknoteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1dc02c2469cb38ddb03ffbd0de19c176472b238
--- /dev/null
+++ b/src/stories/icons/Mono/BanknoteIcon.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 14.0967C10.842 14.0967 9.90331 13.158 9.90331 12C9.90331 10.842 10.842 9.90331 12 9.90331C13.158 9.90331 14.0967 10.842 14.0967 12C14.0967 13.158 13.158 14.0967 12 14.0967Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M7 12C7 12.5523 6.55229 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55229 11 7 11.4477 7 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 5C22.6569 5 24 6.34315 24 8V16C24 17.6569 22.6569 19 21 19H3C1.34315 19 0 17.6569 0 16V8C0 6.34315 1.34315 5 3 5H21ZM4 7H20C20 7.26264 20.0517 7.52272 20.1522 7.76537C20.2528 8.00802 20.4001 8.2285 20.5858 8.41421C20.7715 8.59993 20.992 8.74725 21.2346 8.84776C21.4773 8.94827 21.7374 9 22 9V15C21.7374 15 21.4773 15.0517 21.2346 15.1522C20.992 15.2528 20.7715 15.4001 20.5858 15.5858C20.4001 15.7715 20.2528 15.992 20.1522 16.2346C20.0517 16.4773 20 16.7374 20 17H4C4 16.7374 3.94827 16.4773 3.84776 16.2346C3.74725 15.992 3.59993 15.7715 3.41421 15.5858C3.2285 15.4001 3.00802 15.2528 2.76537 15.1522C2.52272 15.0517 2.26264 15 2 15V9C2.26264 9 2.52272 8.94827 2.76537 8.84776C3.00802 8.74725 3.2285 8.59993 3.41421 8.41421C3.59993 8.2285 3.74725 8.00802 3.84776 7.76537C3.94827 7.52272 4 7.26264 4 7Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BellIcon.vue b/src/stories/icons/Mono/BellIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea10cb265988fcfe8e6dd3e36008affa16502cb0
--- /dev/null
+++ b/src/stories/icons/Mono/BellIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5 1C10.9477 1 10.5 1.44772 10.5 2V3H9.99998C7.23864 3 4.99999 5.23825 4.99999 7.99975V11C4.99999 11.7377 4.76718 12.5722 4.39739 13.4148C4.03165 14.2482 3.55876 15.0294 3.14142 15.6439C2.38188 16.7624 2.85216 18.5301 4.40564 18.8103C5.42144 18.9935 6.85701 19.2115 8.54656 19.3527C8.54454 19.4015 8.54352 19.4506 8.54352 19.5C8.54352 21.433 10.1105 23 12.0435 23C13.9765 23 15.5435 21.433 15.5435 19.5C15.5435 19.4482 15.5424 19.3966 15.5402 19.3453C17.1921 19.204 18.596 18.9903 19.5943 18.8103C21.1478 18.5301 21.6181 16.7624 20.8586 15.6439C20.4412 15.0294 19.9683 14.2482 19.6026 13.4148C19.2328 12.5722 19 11.7377 19 11V7.99975C19 5.23825 16.7613 3 14 3H13.5V2C13.5 1.44772 13.0523 1 12.5 1H11.5ZM12 19.5C12.5113 19.5 13.0122 19.4898 13.4997 19.4715C13.5076 20.2758 12.8541 20.9565 12.0435 20.9565C11.2347 20.9565 10.5803 20.2778 10.5872 19.4747C11.0473 19.491 11.5191 19.5 12 19.5ZM9.99998 5C8.34305 5 6.99999 6.34298 6.99999 7.99975V11C6.99999 12.1234 6.65547 13.2463 6.22878 14.2186C5.79804 15.2 5.25528 16.0911 4.79599 16.7675C4.78578 16.7825 4.78102 16.7969 4.77941 16.8113C4.77797 16.8242 4.77919 16.8362 4.78167 16.8458C6.3644 17.1303 9.00044 17.5 12 17.5C14.9995 17.5 17.6356 17.1303 19.2183 16.8458C19.2208 16.8362 19.222 16.8242 19.2206 16.8113C19.2189 16.7969 19.2142 16.7825 19.204 16.7675C18.7447 16.0911 18.2019 15.2 17.7712 14.2186C17.3445 13.2463 17 12.1234 17 11V7.99975C17 6.34298 15.6569 5 14 5H9.99998Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BellOffIcon.vue b/src/stories/icons/Mono/BellOffIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..daae8ca9ee1aa55fd7af13260846b91c4328c8a2
--- /dev/null
+++ b/src/stories/icons/Mono/BellOffIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.5 2C10.5 1.44772 10.9477 1 11.5 1H12.5C13.0523 1 13.5 1.44772 13.5 2V3H14C16.7613 3 19 5.23825 19 7.99975V11C19 11.7377 19.2328 12.5722 19.6026 13.4148C19.9683 14.2482 20.4412 15.0294 20.8586 15.6439C21.3162 16.3178 21.3274 17.2273 20.9242 17.9052L18.2876 15.2685C18.1067 14.9353 17.9312 14.5831 17.7712 14.2186C17.3445 13.2463 17 12.1234 17 11V7.99975C17 6.34298 15.6569 5 14 5H9.99999C9.43275 5 8.9023 5.15739 8.44992 5.43089L7.01062 3.99158C7.84446 3.36876 8.87917 3 9.99999 3H10.5V2Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.00027 7.94565C5.00008 7.96366 4.99999 7.98169 4.99999 7.99975V11C4.99999 11.7377 4.76718 12.5722 4.39739 13.4148C4.03165 14.2482 3.55876 15.0294 3.14142 15.6439C2.38188 16.7624 2.85216 18.5301 4.40564 18.8103C5.42144 18.9935 6.85701 19.2115 8.54657 19.3527C8.54454 19.4015 8.54352 19.4506 8.54352 19.5C8.54352 21.433 10.1105 23 12.0435 23C13.9765 23 15.5435 21.433 15.5435 19.5C15.5435 19.4482 15.5424 19.3966 15.5402 19.3453C15.8088 19.3224 16.0709 19.2975 16.3257 19.2711L14.4742 17.4196C13.6902 17.4696 12.86 17.5 12 17.5C9.00044 17.5 6.36441 17.1303 4.78167 16.8458C4.7792 16.8362 4.77797 16.8242 4.77941 16.8113C4.78102 16.7969 4.78578 16.7825 4.79599 16.7675C5.25529 16.0911 5.79804 15.2 6.22878 14.2186C6.65547 13.2463 6.99999 12.1234 6.99999 11V9.94536L5.00027 7.94565ZM13.4997 19.4715C13.0122 19.4898 12.5113 19.5 12 19.5C11.5191 19.5 11.0473 19.491 10.5872 19.4747C10.5803 20.2778 11.2347 20.9565 12.0435 20.9565C12.8541 20.9565 13.5076 20.2758 13.4997 19.4715Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M2.00789 3.42206C1.61737 3.03153 1.61737 2.39837 2.00789 2.00784C2.39841 1.61732 3.03158 1.61732 3.4221 2.00784L22.0004 20.5862C22.391 20.9767 22.391 21.6099 22.0004 22.0004C21.6099 22.3909 20.9767 22.3909 20.5862 22.0004L2.00789 3.42206Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BoxIcon.vue b/src/stories/icons/Mono/BoxIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d12ed84bd54bd9ae736bf57f3409d61e861fdc3
--- /dev/null
+++ b/src/stories/icons/Mono/BoxIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.4856 1.12584C12.1836 0.958052 11.8164 0.958052 11.5144 1.12584L2.51436 6.12584L2.5073 6.13784L2.49287 6.13802C2.18749 6.3177 2 6.64568 2 7V16.9999C2 17.3631 2.19689 17.6977 2.51436 17.874L11.5022 22.8673C11.8059 23.0416 12.1791 23.0445 12.4856 22.8742L21.4856 17.8742C21.8031 17.6978 22 17.3632 22 17V7C22 6.64568 21.8125 6.31781 21.5071 6.13813C21.4996 6.13372 21.4921 6.12942 21.4845 6.12522L12.4856 1.12584ZM5.05923 6.99995L12.0001 10.856L14.4855 9.47519L7.74296 5.50898L5.05923 6.99995ZM16.5142 8.34816L18.9409 7L12 3.14396L9.77162 4.38195L16.5142 8.34816ZM4 16.4115V8.69951L11 12.5884V20.3004L4 16.4115ZM13 20.3005V12.5884L20 8.69951V16.4116L13 20.3005Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BrightnessIcon.vue b/src/stories/icons/Mono/BrightnessIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..570a8695a6327a23d80a3491d1b734f91862e641
--- /dev/null
+++ b/src/stories/icons/Mono/BrightnessIcon.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 0C11.4477 0 11 0.447715 11 1V3C11 3.55228 11.4477 4 12 4C12.5523 4 13 3.55228 13 3V1C13 0.447715 12.5523 0 12 0Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM9.21518 14.7848C8.50248 14.0721 8.06167 13.0875 8.06167 12C8.06167 9.82492 9.82492 8.06167 12 8.06167C13.0875 8.06167 14.0721 8.50248 14.7848 9.21518L9.21518 14.7848Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M19.0711 3.51472C19.4616 3.12419 20.0947 3.12419 20.4853 3.51472C20.8758 3.90524 20.8758 4.53841 20.4853 4.92893L19.0711 6.34315C18.6805 6.73367 18.0474 6.73367 17.6568 6.34315C17.2663 5.95262 17.2663 5.31946 17.6568 4.92893L19.0711 3.51472Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M0 12C0 12.5523 0.447715 13 1 13H3C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11H1C0.447715 11 0 11.4477 0 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M3.51472 4.92893C3.1242 4.53841 3.1242 3.90524 3.51472 3.51472C3.90525 3.12419 4.53841 3.12419 4.92894 3.51472L6.34315 4.92893C6.73368 5.31946 6.73368 5.95262 6.34315 6.34314C5.95263 6.73367 5.31946 6.73367 4.92894 6.34314L3.51472 4.92893Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M12 20C11.4477 20 11 20.4477 11 21V23C11 23.5523 11.4477 24 12 24C12.5523 24 13 23.5523 13 23V21C13 20.4477 12.5523 20 12 20Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M4.92894 17.6569C5.31946 17.2663 5.95263 17.2663 6.34315 17.6569C6.73368 18.0474 6.73368 18.6805 6.34315 19.0711L4.92894 20.4853C4.53842 20.8758 3.90525 20.8758 3.51473 20.4853C3.1242 20.0948 3.1242 19.4616 3.51473 19.0711L4.92894 17.6569Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M20 12C20 12.5523 20.4477 13 21 13H23C23.5523 13 24 12.5523 24 12C24 11.4477 23.5523 11 23 11H21C20.4477 11 20 11.4477 20 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M17.6568 19.0711C17.2663 18.6805 17.2663 18.0474 17.6568 17.6569C18.0474 17.2663 18.6805 17.2663 19.0711 17.6569L20.4853 19.0711C20.8758 19.4616 20.8758 20.0948 20.4853 20.4853C20.0947 20.8758 19.4616 20.8758 19.0711 20.4853L17.6568 19.0711Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/BulbIcon.vue b/src/stories/icons/Mono/BulbIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..376111bd2ba54317a645c2b05039f6f47a834a16
--- /dev/null
+++ b/src/stories/icons/Mono/BulbIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 1C8.20602 1 6.15147 3.02886 5.1033 5.03734C4.591 6.01899 4.31823 6.98949 4.17245 7.70719C4.09911 8.06826 4.05672 8.3713 4.03245 8.58786C4.01718 8.72417 4 8.86266 4 9C4 11.7224 5.23215 13.3137 6.29447 14.1534C6.82295 14.5712 7.11709 14.999 7.16406 15.3747L7.78873 20.3721C7.97639 21.8734 9.25259 23 10.7656 23H13.2344C14.7474 23 16.0236 21.8734 16.2113 20.3721L16.8359 15.3747C16.8829 14.999 17.177 14.5712 17.7055 14.1534C18.7678 13.3137 20 11.7224 20 9C20 8.86266 19.9828 8.72417 19.9675 8.58786C19.9433 8.3713 19.9009 8.06826 19.8275 7.70719C19.6818 6.98949 19.409 6.01899 18.8967 5.03734C17.8485 3.02886 15.794 1 12 1ZM7.53474 12.5845C6.43811 11.7176 5.86517 10.1925 6.02001 8.81057C6.03864 8.64432 6.07247 8.40049 6.13243 8.10531C6.25324 7.51051 6.47539 6.73101 6.87637 5.96266C7.65476 4.47114 9.10021 3 12 3C14.8998 3 16.3452 4.47114 17.1236 5.96266C17.5246 6.73101 17.7468 7.51051 17.8676 8.10531C17.9275 8.40049 17.9614 8.64432 17.98 8.81057C18.1348 10.1925 17.5619 11.7176 16.4653 12.5845C15.7853 13.1219 14.9955 13.974 14.8514 15.1267L14.6172 17H9.38278L9.14862 15.1267C9.00453 13.974 8.21469 13.1219 7.53474 12.5845ZM9.63278 19L9.77329 20.124C9.83584 20.6245 10.2612 21 10.7656 21H13.2344C13.7388 21 14.1642 20.6245 14.2267 20.124L14.3672 19H9.63278Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalculatorIcon.vue b/src/stories/icons/Mono/CalculatorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8531fdab0c515617b4001f6c67ef5e279bcf2681
--- /dev/null
+++ b/src/stories/icons/Mono/CalculatorIcon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 7C14 6.44771 14.4477 6 15 6H16V5C16 4.44772 16.4477 4 17 4C17.5523 4 18 4.44772 18 5V6H19C19.5523 6 20 6.44771 20 7C20 7.55229 19.5523 8 19 8H18V9C18 9.55228 17.5523 10 17 10C16.4477 10 16 9.55228 16 9V8H15C14.4477 8 14 7.55229 14 7Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M14 15C14 14.4477 14.4477 14 15 14H19C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16H15C14.4477 16 14 15.5523 14 15Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M15 18C14.4477 18 14 18.4477 14 19C14 19.5523 14.4477 20 15 20H19C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18H15Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5 6C4.44772 6 4 6.44771 4 7C4 7.55229 4.44772 8 5 8H9C9.55228 8 10 7.55229 10 7C10 6.44771 9.55228 6 9 6H5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5.92512 14.5109C5.5346 14.1204 4.90143 14.1204 4.51091 14.5109C4.12039 14.9014 4.12039 15.5346 4.51091 15.9251L5.5858 17L4.50337 18.0824C4.11284 18.4729 4.11284 19.1061 4.50337 19.4966C4.89389 19.8872 5.52705 19.8872 5.91758 19.4966L7.00002 18.4142L8.08944 19.5036C8.47996 19.8941 9.11313 19.8941 9.50365 19.5036C9.89418 19.1131 9.89418 18.4799 9.50365 18.0894L8.41423 17L9.50194 15.9123C9.89246 15.5218 9.89246 14.8886 9.50194 14.4981C9.11141 14.1075 8.47825 14.1075 8.08772 14.4981L7.00002 15.5858L5.92512 14.5109Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V11H13V3H20ZM21 13V20C21 20.5523 20.5523 21 20 21H13V13H21ZM4 3H11V11H3V4C3 3.44772 3.44772 3 4 3ZM3 20V13H11V21H4C3.44772 21 3 20.5523 3 20Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarAddIcon.vue b/src/stories/icons/Mono/CalendarAddIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f3cad6d52b70882b7bc4aef9bb47d1a2ed7d9ed5
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarAddIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H13.101C12.5151 22.4259 12.0297 21.7496 11.6736 21H5C4.44772 21 4 20.5523 4 20V11H20V11.2899C20.7224 11.5049 21.396 11.8334 22 12.2547V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55228 1 7 1ZM16 6V5H8V6C8 6.55228 7.55228 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M17 16C17 15.4477 17.4477 15 18 15C18.5523 15 19 15.4477 19 16V17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H19V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V19H16C15.4477 19 15 18.5523 15 18C15 17.4477 15.4477 17 16 17H17V16Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24 18C24 21.3137 21.3137 24 18 24C14.6863 24 12 21.3137 12 18C12 14.6863 14.6863 12 18 12C21.3137 12 24 14.6863 24 18ZM13.9819 18C13.9819 20.2191 15.7809 22.0181 18 22.0181C20.2191 22.0181 22.0181 20.2191 22.0181 18C22.0181 15.7809 20.2191 13.9819 18 13.9819C15.7809 13.9819 13.9819 15.7809 13.9819 18Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarIcon.vue b/src/stories/icons/Mono/CalendarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f0d9a933963e8a20f1beaea31eef767e72d61f2
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55229 1 7 1ZM16 6V5H8V6C8 6.55228 7.55229 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6ZM4 15V11H8V15H4ZM4 17V20C4 20.5523 4.44772 21 5 21H8V17H4ZM10 17V21H14V17H10ZM16 17V21H19C19.5523 21 20 20.5523 20 20V17H16ZM20 15H16V11H20V15ZM14 15H10V11H14V15Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CalendarRemoveIcon.vue b/src/stories/icons/Mono/CalendarRemoveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a0541bd422820661b9dd11abe506945f1458321
--- /dev/null
+++ b/src/stories/icons/Mono/CalendarRemoveIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 1C6.44772 1 6 1.44772 6 2V3H5C3.34315 3 2 4.34315 2 6V20C2 21.6569 3.34315 23 5 23H13.101C12.5151 22.4259 12.0297 21.7496 11.6736 21H5C4.44772 21 4 20.5523 4 20V11H20V11.2899C20.7224 11.5049 21.396 11.8334 22 12.2547V6C22 4.34315 20.6569 3 19 3H18V2C18 1.44772 17.5523 1 17 1C16.4477 1 16 1.44772 16 2V3H8V2C8 1.44772 7.55228 1 7 1ZM16 6V5H8V6C8 6.55228 7.55228 7 7 7C6.44772 7 6 6.55228 6 6V5H5C4.44772 5 4 5.44772 4 6V9H20V6C20 5.44772 19.5523 5 19 5H18V6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16 17C15.4477 17 15 17.4477 15 18C15 18.5523 15.4477 19 16 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H16Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24 18C24 21.3137 21.3137 24 18 24C14.6863 24 12 21.3137 12 18C12 14.6863 14.6863 12 18 12C21.3137 12 24 14.6863 24 18ZM13.9819 18C13.9819 20.2191 15.7809 22.0181 18 22.0181C20.2191 22.0181 22.0181 20.2191 22.0181 18C22.0181 15.7809 20.2191 13.9819 18 13.9819C15.7809 13.9819 13.9819 15.7809 13.9819 18Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CardsIcon.vue b/src/stories/icons/Mono/CardsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fafda21bde70718e80d37c70a21f284e1c770d85
--- /dev/null
+++ b/src/stories/icons/Mono/CardsIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.4 7.53333C9.2 7.26667 8.8 7.26667 8.6 7.53333L6.225 10.7C6.09167 10.8778 6.09167 11.1222 6.225 11.3L8.6 14.4667C8.8 14.7333 9.2 14.7333 9.4 14.4667L11.775 11.3C11.9083 11.1222 11.9083 10.8778 11.775 10.7L9.4 7.53333Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M4.09245 5.63868C4.03647 5.5547 4.03647 5.4453 4.09245 5.36133L4.79199 4.31202C4.89094 4.16359 5.10906 4.16359 5.20801 4.31202L5.90755 5.36132C5.96353 5.4453 5.96353 5.5547 5.90755 5.63867L5.20801 6.68798C5.10906 6.83641 4.89094 6.83641 4.79199 6.68798L4.09245 5.63868Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M13.208 15.312C13.1091 15.1636 12.8909 15.1636 12.792 15.312L12.0924 16.3613C12.0365 16.4453 12.0365 16.5547 12.0924 16.6387L12.792 17.688C12.8909 17.8364 13.1091 17.8364 13.208 17.688L13.9075 16.6387C13.9635 16.5547 13.9635 16.4453 13.9075 16.3613L13.208 15.312Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1 4C1 2.34315 2.34315 1 4 1H14C15.1323 1 16.1181 1.62732 16.6288 2.55337L20.839 3.68148C22.4394 4.11031 23.3891 5.75532 22.9603 7.35572L19.3368 20.8787C18.908 22.4791 17.263 23.4288 15.6626 23L8.19849 21H4C2.34315 21 1 19.6569 1 18V4ZM17 18V4.72339L20.3213 5.61334C20.8548 5.75628 21.1714 6.30461 21.0284 6.83808L17.405 20.361C17.262 20.8945 16.7137 21.2111 16.1802 21.0681L15.1198 20.784C16.222 20.3403 17 19.261 17 18ZM4 3C3.44772 3 3 3.44772 3 4V18C3 18.5523 3.44772 19 4 19H14C14.5523 19 15 18.5523 15 18V4C15 3.44772 14.5523 3 14 3H4Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChartLineIcon.vue b/src/stories/icons/Mono/ChartLineIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c09464e6d93a26011f83ec5f55e3936ea4d31d7f
--- /dev/null
+++ b/src/stories/icons/Mono/ChartLineIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 2C1 1.44772 1.44772 1 2 1C2.55228 1 3 1.44772 3 2V20C3 20.5523 3.44771 21 4 21L22 21C22.5523 21 23 21.4477 23 22C23 22.5523 22.5523 23 22 23H3C1.89543 23 1 22.1046 1 21V2Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M19.9285 5.37139C20.1336 4.85861 19.8842 4.27664 19.3714 4.07152C18.8586 3.86641 18.2766 4.11583 18.0715 4.62861L14.8224 12.7513C14.6978 13.0628 14.3078 13.1656 14.0459 12.9561L11.0811 10.5843C10.3619 10.0089 9.29874 10.2116 8.84174 11.0114L5.13176 17.5039C4.85775 17.9834 5.02434 18.5942 5.50386 18.8682C5.98338 19.1423 6.59423 18.9757 6.86824 18.4961L9.9982 13.0187C10.1505 12.7521 10.5049 12.6846 10.7447 12.8764L13.849 15.3598C14.635 15.9886 15.805 15.6802 16.1788 14.7456L19.9285 5.37139Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChartPieIcon.vue b/src/stories/icons/Mono/ChartPieIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c456f242234f386c1bc4dab7d34454bb452bb440
--- /dev/null
+++ b/src/stories/icons/Mono/ChartPieIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9932C7.03321 20.9932 3.00683 16.9668 3.00683 12C3.00683 7.37122 6.50383 3.55921 11 3.0618V11.5858C11 12.1162 11.2107 12.6249 11.5858 13L17.6128 19.027C16.0744 20.2574 14.1231 20.9932 12 20.9932ZM19.027 17.6128L14.7556 13.3414C14.6296 13.2154 14.7189 13 14.8971 13H20.9382C20.7464 14.734 20.0616 16.3193 19.027 17.6128ZM20.9382 11H13.5C13.2239 11 13 10.7761 13 10.5V3.0618C17.1678 3.52289 20.4771 6.83216 20.9382 11Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChatIcon.vue b/src/stories/icons/Mono/ChatIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ea3573d63481df06526e3e1122240239641d1aa
--- /dev/null
+++ b/src/stories/icons/Mono/ChatIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 3C7.85113 3 4 5.73396 4 10C4 11.5704 4.38842 12.7289 5.08252 13.6554C5.79003 14.5998 6.87746 15.3863 8.41627 16.0908L9.2326 16.4645L8.94868 17.3162C8.54129 18.5384 7.84997 19.6611 7.15156 20.5844C9.56467 19.8263 12.7167 18.6537 14.9453 17.1679C17.1551 15.6948 18.3969 14.5353 19.0991 13.455C19.7758 12.4139 20 11.371 20 10C20 5.73396 16.1489 3 12 3ZM2 10C2 4.26604 7.14887 1 12 1C16.8511 1 22 4.26604 22 10C22 11.629 21.7242 13.0861 20.7759 14.545C19.8531 15.9647 18.3449 17.3052 16.0547 18.8321C13.0781 20.8164 8.76589 22.2232 6.29772 22.9281C5.48665 23.1597 4.84055 22.6838 4.56243 22.1881C4.28848 21.6998 4.22087 20.9454 4.74413 20.3614C5.44439 19.5798 6.21203 18.5732 6.72616 17.4871C5.40034 16.7841 4.29326 15.9376 3.48189 14.8545C2.48785 13.5277 2 11.9296 2 10Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChatWritingIcon.vue b/src/stories/icons/Mono/ChatWritingIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c11f9c1f67accf1426b5dbc2cbe13e0488aa05f
--- /dev/null
+++ b/src/stories/icons/Mono/ChatWritingIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 3C7.85113 3 4 5.73396 4 10C4 11.5704 4.38842 12.7289 5.08252 13.6554C5.79003 14.5998 6.87746 15.3863 8.41627 16.0908L9.2326 16.4645L8.94868 17.3162C8.54129 18.5384 7.84997 19.6611 7.15156 20.5844C9.56467 19.8263 12.7167 18.6537 14.9453 17.1679C17.1551 15.6948 18.3969 14.5353 19.0991 13.455C19.7758 12.4139 20 11.371 20 10C20 5.73396 16.1489 3 12 3ZM2 10C2 4.26604 7.14887 1 12 1C16.8511 1 22 4.26604 22 10C22 11.629 21.7242 13.0861 20.7759 14.545C19.8531 15.9647 18.3449 17.3052 16.0547 18.8321C13.0781 20.8164 8.76589 22.2232 6.29772 22.9281C5.48665 23.1597 4.84055 22.6838 4.56243 22.1881C4.28848 21.6998 4.22087 20.9454 4.74413 20.3614C5.44439 19.5798 6.21203 18.5732 6.72616 17.4871C5.40034 16.7841 4.29326 15.9376 3.48189 14.8545C2.48785 13.5277 2 11.9296 2 10Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M9 10C9 10.8284 8.32843 11.5 7.5 11.5C6.67157 11.5 6 10.8284 6 10C6 9.17157 6.67157 8.5 7.5 8.5C8.32843 8.5 9 9.17157 9 10Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M13.4976 10C13.4976 10.8284 12.826 11.5 11.9976 11.5C11.1692 11.5 10.4976 10.8284 10.4976 10C10.4976 9.17157 11.1692 8.5 11.9976 8.5C12.826 8.5 13.4976 9.17157 13.4976 10Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16.5 11.5C17.3284 11.5 18 10.8284 18 10C18 9.17157 17.3284 8.5 16.5 8.5C15.6716 8.5 15 9.17157 15 10C15 10.8284 15.6716 11.5 16.5 11.5Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CheckmarkIcon.vue b/src/stories/icons/Mono/CheckmarkIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05ab9bd0e2251521a3accab1cf8bc2257026a566
--- /dev/null
+++ b/src/stories/icons/Mono/CheckmarkIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 7.34189C18.6095 6.95136 17.9763 6.95136 17.5858 7.34189L10.3407 14.587C9.95016 14.9775 9.31699 14.9775 8.92647 14.587L6.38507 12.0456C5.99454 11.6551 5.36138 11.6551 4.97085 12.0456C4.58033 12.4361 4.58033 13.0693 4.97085 13.4598L7.51774 16C8.68969 17.1689 10.5869 17.1677 11.7574 15.9974L19 8.7561C19.3905 8.36558 19.3905 7.73241 19 7.34189Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ChemistryFlaskIcon.vue b/src/stories/icons/Mono/ChemistryFlaskIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f49358a6f446460d45693224b4664119cc61e288
--- /dev/null
+++ b/src/stories/icons/Mono/ChemistryFlaskIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15C9.44772 15 9 15.4477 9 16C9 16.5523 9.44772 17 10 17Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M15 18C15 18.5523 14.5523 19 14 19C13.4477 19 13 18.5523 13 18C13 17.4477 13.4477 17 14 17C14.5523 17 15 17.4477 15 18Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15 3V7.58152C17.9318 8.76829 20 11.6426 20 15C20 19.4183 16.4183 23 12 23C7.58172 23 4 19.4183 4 15C4 11.6426 6.06817 8.76829 9 7.58152V3H8C7.44772 3 7 2.55228 7 2C7 1.44772 7.44772 1 8 1H16C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3H15ZM9.75043 9.43539L10.3752 9.18249C10.7529 9.02962 11 8.66295 11 8.25555V3H13V8.25555C13 8.66295 13.2471 9.02962 13.6248 9.18249L14.2496 9.43539C15.1075 9.78268 15.8661 10.3221 16.4726 11L7.52739 11C8.13388 10.3221 8.89249 9.78268 9.75043 9.43539ZM6.3414 13C6.12025 13.6258 6 14.2991 6 15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15C18 14.2991 17.8798 13.6258 17.6586 13L6.3414 13Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CodeIcon.vue b/src/stories/icons/Mono/CodeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6eba9b7dbb464087f5dd26179047fc2432a4e49
--- /dev/null
+++ b/src/stories/icons/Mono/CodeIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.9615 5.27473C15.1132 4.7437 14.8058 4.19021 14.2747 4.03849C13.7437 3.88677 13.1902 4.19426 13.0385 4.72529L9.03847 18.7253C8.88675 19.2563 9.19424 19.8098 9.72528 19.9615C10.2563 20.1133 10.8098 19.8058 10.9615 19.2747L14.9615 5.27473Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5.7991 7.39879C6.13114 7.84012 6.04255 8.46705 5.60123 8.7991L2.40894 11.2009C1.87724 11.601 1.87723 12.399 2.40894 12.7991L5.60123 15.2009C6.04255 15.533 6.13114 16.1599 5.7991 16.6012C5.46705 17.0426 4.84012 17.1311 4.39879 16.7991L1.20651 14.3973C-0.388615 13.1971 -0.388621 10.8029 1.2065 9.60276L4.39879 7.20093C4.84012 6.86889 5.46705 6.95747 5.7991 7.39879Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M18.2009 16.6012C17.8689 16.1599 17.9575 15.533 18.3988 15.2009L21.5911 12.7991C22.1228 12.399 22.1228 11.601 21.5911 11.2009L18.3988 8.7991C17.9575 8.46705 17.8689 7.84012 18.2009 7.39879C18.533 6.95747 19.1599 6.86889 19.6012 7.20093L22.7935 9.60276C24.3886 10.8029 24.3886 13.1971 22.7935 14.3973L19.6012 16.7991C19.1599 17.1311 18.533 17.0426 18.2009 16.6012Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CoinsIcon.vue b/src/stories/icons/Mono/CoinsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ab24d7290d89443e64eb0dacf5ac70e28cefa85
--- /dev/null
+++ b/src/stories/icons/Mono/CoinsIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 1C11.866 1 15 2.56689 15 4.5V6C15 6.55228 14.5523 7 14 7H13C11.7295 7.64819 9.95868 8 8 8C6.04132 8 4.27051 7.64819 3 7V8.5C3 9.22569 4.71803 9.83109 7.00053 9.97002C7.55179 10.0036 8 10.4477 8 11C8 11.5523 7.55166 12.0038 7.0005 11.9686C5.44274 11.8692 4.05039 11.5359 3 11V12.5C3 13.2257 4.71803 13.8311 7.00053 13.97C7.55179 14.0036 8 14.4477 8 15C8 15.5523 7.55132 16.004 7.00044 15.9646C3.60793 15.7221 1 14.2634 1 12.5V4.5C1 2.56689 4.134 1 8 1ZM3 4.5C3 3.67163 5.23859 3 8 3C10.7614 3 13 3.67163 13 4.5C13 5.32837 10.7614 6 8 6C5.23859 6 3 5.32837 3 4.5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 11.5C23 9.567 19.866 8 16 8C12.134 8 9 9.567 9 11.5V19.5C9 21.433 12.134 23 16 23C19.866 23 23 21.433 23 19.5V11.5ZM11 19.5C11 20.3284 13.2386 21 16 21C18.7614 21 21 20.3284 21 19.5V18C19.7295 18.6483 17.9587 19 16 19C14.0413 19 12.2705 18.6483 11 18V19.5ZM16 17C13.2386 17 11 16.3284 11 15.5V14C12.2705 14.6483 14.0413 15 16 15C17.9587 15 19.7295 14.6483 21 14V15.5C21 16.3284 18.7614 17 16 17ZM16 10C13.2386 10 11 10.6716 11 11.5C11 12.3284 13.2386 13 16 13C18.7614 13 21 12.3284 21 11.5C21 10.6716 18.7614 10 16 10Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ColorPaletteIcon.vue b/src/stories/icons/Mono/ColorPaletteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56a85805dcc52f05ba18674d85901bf8a27ed6ed
--- /dev/null
+++ b/src/stories/icons/Mono/ColorPaletteIcon.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 12.5001C14 13.3285 13.3284 14.0001 12.5 14.0001C11.6716 14.0001 11 13.3285 11 12.5001C11 11.6717 11.6716 11.0001 12.5 11.0001C13.3284 11.0001 14 11.6717 14 12.5001Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16.5 10.0001C17.3284 10.0001 18 9.32854 18 8.50011C18 7.67169 17.3284 7.00011 16.5 7.00011C15.6716 7.00011 15 7.67169 15 8.50011C15 9.32854 15.6716 10.0001 16.5 10.0001Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M13 6.50011C13 7.32854 12.3284 8.00011 11.5 8.00011C10.6716 8.00011 10 7.32854 10 6.50011C10 5.67169 10.6716 5.00011 11.5 5.00011C12.3284 5.00011 13 5.67169 13 6.50011Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M7.50001 12.0001C8.32844 12.0001 9.00001 11.3285 9.00001 10.5001C9.00001 9.67169 8.32844 9.00011 7.50001 9.00011C6.67158 9.00011 6.00001 9.67169 6.00001 10.5001C6.00001 11.3285 6.67158 12.0001 7.50001 12.0001Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M14 17.5001C14 18.3285 13.3284 19.0001 12.5 19.0001C11.6716 19.0001 11 18.3285 11 17.5001C11 16.6717 11.6716 16.0001 12.5 16.0001C13.3284 16.0001 14 16.6717 14 17.5001Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M7.50001 17.0001C8.32844 17.0001 9.00001 16.3285 9.00001 15.5001C9.00001 14.6717 8.32844 14.0001 7.50001 14.0001C6.67158 14.0001 6.00001 14.6717 6.00001 15.5001C6.00001 16.3285 6.67158 17.0001 7.50001 17.0001Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5017 1.02215C15.4049 0.791746 19.5636 2.32444 21.8087 5.41131C22.5084 6.37324 22.8228 7.63628 22.6489 8.83154C22.471 10.054 21.7734 11.2315 20.4472 11.8945C19.6389 12.2987 18.7731 12.9466 18.2401 13.668C17.7158 14.3778 17.6139 14.9917 17.8944 15.5529C18.4231 16.6102 18.8894 17.9257 18.8106 19.1875C18.7699 19.8375 18.5828 20.4946 18.1664 21.0799C17.7488 21.6667 17.1448 22.1192 16.3714 22.4286C14.6095 23.1333 12.6279 23.1643 10.8081 22.8207C8.98579 22.4765 7.24486 21.7421 5.92656 20.8194C4.00568 19.4748 2.47455 17.6889 1.71371 15.4464C0.9504 13.1965 0.995912 10.5851 2.06024 7.65803C3.64355 3.30372 7.56248 1.25469 11.5017 1.02215ZM11.6196 3.01868C8.26589 3.21665 5.18483 4.9176 3.93984 8.34149C3.00414 10.9148 3.01388 13.0536 3.60768 14.8038C4.20395 16.5613 5.42282 18.0255 7.07347 19.1809C8.14405 19.9303 9.6169 20.5604 11.1792 20.8554C12.7442 21.151 14.3181 21.0959 15.6286 20.5716C16.308 20.2999 16.7678 19.8099 16.8145 19.0627C16.8606 18.3245 16.5769 17.3901 16.1056 16.4473C15.3639 14.9639 15.8542 13.5318 16.6315 12.4796C17.4002 11.4391 18.5455 10.6093 19.5528 10.1057C20.2266 9.76878 20.5747 9.19623 20.6697 8.54355C20.7686 7.86365 20.5831 7.12638 20.1913 6.58769C18.4364 4.17486 15.0093 2.81858 11.6196 3.01868Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CompassIcon.vue b/src/stories/icons/Mono/CompassIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20dee87a3833db4338333d027a3bff9e48709786
--- /dev/null
+++ b/src/stories/icons/Mono/CompassIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.982 8.99791C17.5399 7.7427 16.2573 6.46011 15.0021 7.01799L10.0018 9.24033C9.66249 9.39115 9.39115 9.66249 9.24033 10.0018L7.01798 15.0021C6.46011 16.2573 7.74269 17.5399 8.99791 16.982L13.9982 14.7597C14.3375 14.6089 14.6089 14.3375 14.7597 13.9982L16.982 8.99791ZM10.9898 10.9898L14.6264 9.37359L13.0102 13.0102L9.37359 14.6264L10.9898 10.9898Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 20.9869C7.03665 20.9869 3.01306 16.9633 3.01306 12C3.01306 7.03665 7.03665 3.01306 12 3.01306C16.9633 3.01306 20.9869 7.03665 20.9869 12C20.9869 16.9633 16.9633 20.9869 12 20.9869Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ConstructionWorkerIcon.vue b/src/stories/icons/Mono/ConstructionWorkerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b22431194eb2491ecdb9b79448bdf1c729783cf5
--- /dev/null
+++ b/src/stories/icons/Mono/ConstructionWorkerIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.13861 8.5856C3.10395 8.79352 3.07799 8.98444 3.05852 9.15412C2.89911 9.20305 2.72733 9.2683 2.55279 9.35557C2.18416 9.53989 1.78511 9.83206 1.48045 10.2891C1.17162 10.7523 1 11.325 1 12C1 12.675 1.17162 13.2477 1.48045 13.7109C1.78511 14.1679 2.18416 14.4601 2.55279 14.6444C2.72733 14.7317 2.89911 14.7969 3.05852 14.8459C3.07798 15.0156 3.10395 15.2065 3.13861 15.4144C3.27452 16.2299 3.54822 17.3325 4.10557 18.4472C4.66489 19.5658 5.51956 20.7149 6.8203 21.5821C8.1273 22.4534 9.82502 23 12 23C14.175 23 15.8727 22.4534 17.1797 21.5821C18.4804 20.7149 19.3351 19.5658 19.8944 18.4472C20.4518 17.3325 20.7255 16.2299 20.8614 15.4144C20.896 15.2065 20.922 15.0156 20.9415 14.8459C21.1009 14.7969 21.2727 14.7317 21.4472 14.6444C21.8158 14.4601 22.2149 14.1679 22.5196 13.7109C22.8284 13.2477 23 12.675 23 12C23 11.325 22.8284 10.7523 22.5196 10.2891C22.2149 9.83206 21.8158 9.53989 21.4472 9.35557C21.2727 9.2683 21.1009 9.20305 20.9415 9.15412C20.922 8.98444 20.896 8.79352 20.8614 8.5856C20.7255 7.77011 20.4518 6.6675 19.8944 5.55278C19.3351 4.43416 18.4804 3.28511 17.1797 2.41795C15.8727 1.54662 14.175 1 12 1C9.82502 1 8.1273 1.54662 6.8203 2.41795C5.51957 3.28511 4.66489 4.43416 4.10558 5.55279C3.54822 6.6675 3.27452 7.77011 3.13861 8.5856ZM18.9025 15H5.09753C5.20639 15.692 5.43305 16.63 5.89443 17.5528C6.33511 18.4342 6.98044 19.2851 7.9297 19.9179C8.8727 20.5466 10.175 21 12 21C13.825 21 15.1273 20.5466 16.0703 19.9179C17.0196 19.2851 17.6649 18.4342 18.1056 17.5528C18.5669 16.63 18.7936 15.692 18.9025 15ZM18.9025 9H18C17.4477 9 17 9.44771 17 10C17 10.5523 17.4477 11 18 11H20C20.3084 11.012 20.6759 11.1291 20.8554 11.3984C20.9216 11.4977 21 11.675 21 12C21 12.325 20.9216 12.5023 20.8554 12.6016C20.6759 12.8709 20.3084 12.988 20 13H4C3.69155 12.988 3.32414 12.8709 3.14455 12.6016C3.07838 12.5023 3 12.325 3 12C3 11.675 3.07838 11.4977 3.14455 11.3984C3.32414 11.1291 3.69155 11.012 4 11H6C6.55228 11 7 10.5523 7 10C7 9.44771 6.55228 9 6 9H5.09753C5.20639 8.30804 5.43306 7.36996 5.89443 6.44721C6.33512 5.56584 6.98044 4.71489 7.92971 4.08205C8.24443 3.87224 8.59917 3.68195 9 3.52152V6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6V3.04872C11.3146 3.01691 11.6476 3 12 3C12.3524 3 12.6854 3.01691 13 3.04872V6C13 6.55228 13.4477 7 14 7C14.5523 7 15 6.55228 15 6V3.52152C15.4008 3.68195 15.7556 3.87224 16.0703 4.08205C17.0196 4.71489 17.6649 5.56584 18.1056 6.44721C18.5669 7.36996 18.7936 8.30804 18.9025 9Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ContactsIcon.vue b/src/stories/icons/Mono/ContactsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cdad55fa75d52d2215c9a6c9f8b26ffa083cd2b1
--- /dev/null
+++ b/src/stories/icons/Mono/ContactsIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4C14.2091 4 16 5.79086 16 8ZM9.97716 8C9.97716 9.11719 10.8828 10.0228 12 10.0228C13.1172 10.0228 14.0228 9.11719 14.0228 8C14.0228 6.88281 13.1172 5.97716 12 5.97716C10.8828 5.97716 9.97716 6.88281 9.97716 8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.39909 16.6808C6.49015 13.8286 9.47114 13 12 13C14.5289 13 17.5099 13.8286 18.6009 16.6808C18.9505 17.5948 18.6826 18.4756 18.1363 19.0778C17.6103 19.6576 16.8215 20 16 20H8C7.17849 20 6.38973 19.6576 5.86372 19.0778C5.31737 18.4756 5.04947 17.5948 5.39909 16.6808ZM12 15C9.72346 15 7.89905 15.7433 7.26709 17.3954C7.21826 17.523 7.25506 17.6349 7.34496 17.734C7.47492 17.8772 7.71694 18 8 18H16C16.2831 18 16.5251 17.8772 16.655 17.734C16.7449 17.6349 16.7817 17.523 16.7329 17.3954C16.101 15.7433 14.2765 15 12 15Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/CropIcon.vue b/src/stories/icons/Mono/CropIcon.vue
similarity index 100%
rename from src/stories/icons/CropIcon.vue
rename to src/stories/icons/Mono/CropIcon.vue
diff --git a/src/stories/icons/CrossCircleIcon.vue b/src/stories/icons/Mono/CrossCircleIcon.vue
similarity index 100%
rename from src/stories/icons/CrossCircleIcon.vue
rename to src/stories/icons/Mono/CrossCircleIcon.vue
diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/stories/icons/Mono/CrossIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..294696a8c1dc4256bd98f9492a5af1973da925ce
--- /dev/null
+++ b/src/stories/icons/Mono/CrossIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CubeIcon.vue b/src/stories/icons/Mono/CubeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3cceaa827416e78d3e4dad342f1653e60664e934
--- /dev/null
+++ b/src/stories/icons/Mono/CubeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5144 1.12584C11.8164 0.958052 12.1836 0.958052 12.4856 1.12584L21.4845 6.12522C21.4921 6.12942 21.4996 6.13372 21.5071 6.13813C21.8125 6.31781 22 6.64568 22 7V17C22 17.3632 21.8031 17.6978 21.4856 17.8742L12.4856 22.8742C12.1791 23.0445 11.8059 23.0416 11.5022 22.8673L2.51436 17.874C2.19689 17.6977 2 17.3631 2 16.9999V7C2 6.64568 2.18749 6.3177 2.49287 6.13802L2.5073 6.13784L2.51436 6.12584L11.5144 1.12584ZM12.0001 10.856L5.05923 6.99995L12 3.14396L18.9409 7L12.0001 10.856ZM4 8.69951V16.4115L11 20.3004V12.5884L4 8.69951ZM13 12.5884V20.3005L20 16.4116V8.69951L13 12.5884Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CupIcon.vue b/src/stories/icons/Mono/CupIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f39410aefa670159b7d2cd6989b6ef3afa90789
--- /dev/null
+++ b/src/stories/icons/Mono/CupIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 4C5 2.34315 6.34315 1 8 1H15.9999C17.6568 1 19 2.34314 19 4H20C21.6569 4 23 5.34315 23 7V7.64593C23 8.87265 22.2531 9.97577 21.1142 10.4314L18.031 11.6646C17.5965 12.464 16.958 13.2715 16.0234 13.8946C15.211 14.4361 14.2124 14.8132 13 14.9467V17H15C16.6569 17 18 18.3431 18 20V21C18 22.1046 17.1046 23 16 23H8C6.89543 23 6 22.1046 6 21V20C6 18.3431 7.34315 17 9 17H11V14.9467C9.78757 14.8133 8.7889 14.4361 7.97651 13.8945C7.04188 13.2715 6.40335 12.464 5.9689 11.6646L2.88583 10.4314C1.74685 9.97577 1 8.87265 1 7.64593V7C1 5.34315 2.34315 4 4 4H5ZM5 6H4C3.44772 6 3 6.44772 3 7V7.64593C3 8.05484 3.24895 8.42255 3.62861 8.57441L5.11907 9.1706C5.05194 8.78628 5.00063 8.39214 5 8.00104L5 6ZM19 8V6H20C20.5523 6 21 6.44772 21 7V7.64593C21 8.05484 20.751 8.42255 20.3714 8.57441L18.8809 9.17062C18.9469 8.78361 19 8.39286 19 8ZM8 3C7.44772 3 7 3.44772 7 4V7.99707L7 7.99832C7 7.99996 7 8.00078 7 7.99832C7.00508 8.25761 7.03756 8.51764 7.08014 8.77311C7.16297 9.27012 7.32677 9.91751 7.6444 10.5528C7.96008 11.1842 8.4179 11.7851 9.08591 12.2305C9.74766 12.6716 10.6749 13 12 13C13.325 13 14.2522 12.6716 14.914 12.2304C15.582 11.7851 16.0398 11.1842 16.3555 10.5528C16.6732 9.9175 16.837 9.27011 16.9198 8.7731C16.9624 8.51735 16.993 8.25848 17 7.99909V4C17 3.44772 16.5522 3 15.9999 3H8ZM9 19C8.44772 19 8 19.4477 8 20V21H16V20C16 19.4477 15.5523 19 15 19H9Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CursorIcon.vue b/src/stories/icons/Mono/CursorIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47e49b27174acf08567fcfe11c584a2332f01093
--- /dev/null
+++ b/src/stories/icons/Mono/CursorIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.50001 4.07491C0.897091 2.46714 2.46715 0.897094 4.07491 1.50001L21.2155 7.92774C23.1217 8.64256 22.8657 11.4162 20.8609 11.77L13.1336 13.1336L11.77 20.8609C11.4162 22.8657 8.64255 23.1217 7.92774 21.2155L1.50001 4.07491ZM3.37267 3.37267L9.8004 20.5133L11.164 12.786C11.3101 11.9582 11.9582 11.3101 12.786 11.164L20.5133 9.8004L3.37267 3.37267Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiamondIcon.vue b/src/stories/icons/Mono/DiamondIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19a08adc05a5304b75a5f2038d62782f07321f02
--- /dev/null
+++ b/src/stories/icons/Mono/DiamondIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.23607 1C5.09976 1 4.06097 1.64201 3.55279 2.65836L1.14806 7.46782C0.647975 8.46799 0.745665 9.66329 1.40152 10.569L9.57018 21.8495C10.7679 23.5035 13.2321 23.5035 14.4298 21.8495L22.5985 10.569C23.2543 9.66329 23.352 8.468 22.852 7.46782L20.4472 2.65836C19.939 1.64201 18.9003 1 17.7639 1H6.23607ZM5.34165 3.55279C5.51104 3.214 5.8573 3 6.23607 3H8.67428L7.24571 8H3.11804L5.34165 3.55279ZM9.32574 8L10.7543 3H13.2457L14.6743 8H9.32574ZM14.646 10H9.35397L12 18.5996L14.646 10ZM13.929 19.1312L16.7386 10H20.5412L13.929 19.1312ZM16.7543 8L15.3257 3H17.7639C18.1427 3 18.489 3.214 18.6584 3.55279L20.882 8H16.7543ZM3.4588 10H7.26143L10.071 19.1312L3.4588 10Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiaryIcon.vue b/src/stories/icons/Mono/DiaryIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6caf5a1edf4e746c20d439068e0685ae01c0d2ae
--- /dev/null
+++ b/src/stories/icons/Mono/DiaryIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 8C7 6.89543 7.89543 6 9 6H15C16.1046 6 17 6.89543 17 8V10C17 11.1046 16.1046 12 15 12H9C7.89543 12 7 11.1046 7 10V8ZM9 8H15V10H9V8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 1C3.89543 1 3 1.89543 3 3V21C3 22.1046 3.89543 23 5 23H17C19.2091 23 21 21.2091 21 19V5C21 2.79086 19.2091 1 17 1H5ZM5 4C5 3.44772 5.44772 3 6 3H17C18.1046 3 19 3.89543 19 5V19C19 20.1046 18.1046 21 17 21H6C5.44772 21 5 20.5523 5 20V4Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DiceIcon.vue b/src/stories/icons/Mono/DiceIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd78aedd306cb04aac066e91963c93eb138bb029
--- /dev/null
+++ b/src/stories/icons/Mono/DiceIcon.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 8C9 8.55229 8.55229 9 8 9C7.44771 9 7 8.55229 7 8C7 7.44771 7.44771 7 8 7C8.55229 7 9 7.44771 9 8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5 8C5 8.55229 4.55228 9 4 9C3.44772 9 3 8.55229 3 8C3 7.44771 3.44772 7 4 7C4.55228 7 5 7.44771 5 8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M9 4C9 4.55228 8.55229 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55229 3 9 3.44772 9 4Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M4 5C4.55228 5 5 4.55228 5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9 0C10.6569 0 12 1.34315 12 3V9C12 10.6569 10.6569 12 9 12H3C1.34315 12 0 10.6569 0 9V3C0 1.34315 1.34315 0 3 0H9ZM9 2C9.55229 2 10 2.44772 10 3V9C10 9.55229 9.55229 10 9 10H3C2.44772 10 2 9.55229 2 9V3C2 2.44772 2.44772 2 3 2H9Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 12C22.6569 12 24 13.3431 24 15V21C24 22.6569 22.6569 24 21 24H15C13.3431 24 12 22.6569 12 21V15C12 13.3431 13.3431 12 15 12H21ZM21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H15C14.4477 22 14 21.5523 14 21V15C14 14.4477 14.4477 14 15 14H21Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DigIcon.vue b/src/stories/icons/Mono/DigIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae8c3dc64b875380bcc5d33548bd38eb21999d9c
--- /dev/null
+++ b/src/stories/icons/Mono/DigIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.6712 1.257C19.2806 0.86648 18.6475 0.86648 18.257 1.257C17.8664 1.64753 17.8664 2.28069 18.257 2.67122L19.0983 3.5126L10.0125 12.5984L8.41422 11.0001C7.63317 10.219 6.36684 10.219 5.58579 11.0001L3.02918 13.5567C1.76017 14.8257 0.867312 16.5433 0.875174 18.4552C0.877805 19.0951 0.912494 19.7972 1.02031 20.4227C1.11795 20.9892 1.30983 21.7241 1.79291 22.2072C2.27599 22.6903 3.01093 22.8822 3.57741 22.9798C4.20292 23.0876 4.90502 23.1223 5.54494 23.1249C7.45684 23.1328 9.17438 22.2399 10.4434 20.9709L13 18.4143C13.7811 17.6333 13.7811 16.3669 13 15.5859L11.4268 14.0126L20.5126 4.92684L21.3213 5.73561C21.7119 6.12613 22.345 6.12613 22.7356 5.73561C23.1261 5.34508 23.1261 4.71192 22.7356 4.32139L19.6712 1.257ZM7.11903 15.4919L8.59832 14.0126L7.00001 12.4143L4.4434 14.9709C3.46451 15.9498 2.86995 17.1799 2.87516 18.4469C2.87758 19.0363 2.91037 19.6138 2.99124 20.083C3.03079 20.3124 3.0712 20.595 3.20771 20.7924C3.40514 20.9289 3.68766 20.9693 3.91712 21.0089C4.38634 21.0897 4.96381 21.1225 5.55316 21.1249C6.82023 21.1302 8.05029 20.5356 9.02917 19.5567L11.5858 17.0001L10.0126 15.4269L8.53327 16.9061C8.14275 17.2967 7.50957 17.2967 7.11905 16.9061C6.72852 16.5156 6.72851 15.8824 7.11903 15.4919Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DislikeIcon.vue b/src/stories/icons/Mono/DislikeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52ad47896a1ad1e9f8535167ffc772a2feb01341
--- /dev/null
+++ b/src/stories/icons/Mono/DislikeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.556 22.646C12.3525 23.0443 13.3186 22.6649 13.6313 21.8311L16.193 15L20 15C21.6568 15 23 13.6569 23 12L23 4C23 2.34315 21.6568 1 20 1L5.62625 1C4.20523 1 2.97914 1.99698 2.68931 3.38814L1.02265 11.3881C0.634535 13.2511 2.05665 15 3.95959 15H9.11255L8.37409 17.2154C7.7446 19.1039 8.59952 21.1678 10.38 22.058L11.556 22.646ZM14.3203 14.2978L11.9537 20.6088L11.2744 20.2692C10.3842 19.8241 9.95671 18.7921 10.2715 17.8479L11.0099 15.6325C11.4416 14.3374 10.4777 13 9.11256 13H3.95959C3.32527 13 2.85124 12.417 2.98061 11.7961L3.14645 11L6.99998 11C7.55226 11 7.99998 10.5523 7.99998 10C7.99998 9.44772 7.55226 9.00001 6.99998 9.00001L3.56312 9.00001L3.97978 7.00001L6.99998 7.00001C7.55226 7.00001 7.99998 6.55229 7.99998 6.00001C7.99998 5.44772 7.55226 5.00001 6.99998 5.00001L4.39645 5.00001L4.64727 3.79605C4.74388 3.33233 5.15258 3 5.62625 3L16 3L16 13.0093C15.2458 13.0821 14.5903 13.5779 14.3203 14.2978ZM18 13H20C20.5523 13 21 12.5523 21 12L21 4C21 3.44772 20.5523 3 20 3L18 3L18 13Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DisplayIcon.vue b/src/stories/icons/Mono/DisplayIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..91719d88212195ec79e5d63509787616a34d953d
--- /dev/null
+++ b/src/stories/icons/Mono/DisplayIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V15C1 16.6569 2.34315 18 4 18H11V21H6C5.44772 21 5 21.4477 5 22C5 22.5523 5.44772 23 6 23H18C18.5523 23 19 22.5523 19 22C19 21.4477 18.5523 21 18 21H13V18H20C21.6569 18 23 16.6569 23 15V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V15C3 15.5523 3.44772 16 4 16H20C20.5523 16 21 15.5523 21 15V4Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentAddIcon.vue b/src/stories/icons/Mono/DocumentAddIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c7884cff69ebb2455e7c44bf4f02aebc8f186ec
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentAddIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      :fill="color ?? '#000000'"
+      d="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm320 512V448h64v128h128v64H544v128h-64V640H352v-64h128z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentDeleteIcon.vue b/src/stories/icons/Mono/DocumentDeleteIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..355553fa95843060704f00da67c6446d2a68046d
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentDeleteIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      :fill="color ?? '#000000'"
+      d="M805.504 320 640 154.496V320h165.504zM832 384H576V128H192v768h640V384zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm308.992 546.304-90.496-90.624 45.248-45.248 90.56 90.496 90.496-90.432 45.248 45.248-90.496 90.56 90.496 90.496-45.248 45.248-90.496-90.496-90.56 90.496-45.248-45.248 90.496-90.496z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentEditIcon.vue b/src/stories/icons/Mono/DocumentEditIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d462a7960806c028b6f60d91c53704e365340b0e
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentEditIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H10.0293C9.92216 21.0483 10.0375 21.5732 10.3007 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H12.3358C12.7999 2 13.245 2.18437 13.5732 2.51256L19.4874 8.42678C19.8156 8.75497 20 9.20009 20 9.66421V10H19.8698C19.7592 9.99447 19.6484 9.99447 19.5378 10H14C12.8954 10 12 9.10457 12 8V3.5H6.25ZM13.5 4.56066V8C13.5 8.27614 13.7239 8.5 14 8.5H17.4393L13.5 4.56066Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M19.7133 11H19.7154C20.3 11.0003 20.8845 11.2234 21.3305 11.6695C22.2231 12.5621 22.2231 14.0093 21.3305 14.9019L15.4281 20.8043C15.084 21.1485 14.6528 21.3926 14.1806 21.5106L12.3499 21.9683C11.5538 22.1674 10.8326 21.4462 11.0317 20.6501L11.4894 18.8194C11.6074 18.3472 11.8515 17.916 12.1957 17.5719L18.0981 11.6695C18.5441 11.2234 19.1287 11.0003 19.7133 11ZM20.2699 12.7301C19.963 12.4233 19.4656 12.4233 19.1587 12.7301L13.2563 18.6325C13.1044 18.7844 12.9967 18.9748 12.9446 19.1832L12.6538 20.3462L13.8168 20.0554C14.0252 20.0033 14.2155 19.8956 14.3674 19.7437L20.2699 13.8412C20.5767 13.5344 20.5767 13.0369 20.2699 12.7301Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DocumentIcon.vue b/src/stories/icons/Mono/DocumentIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..124df228dea3554e0f5fcd89330ceb8a6ed346c6
--- /dev/null
+++ b/src/stories/icons/Mono/DocumentIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8.82843C21 8.03278 20.6839 7.26972 20.1213 6.70711L15.2929 1.87868C14.7303 1.31607 13.9672 1 13.1716 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V8C12 9.10457 12.8954 10 14 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM18.5858 8L14 3.41421V8H18.5858Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DollarIcon.vue b/src/stories/icons/Mono/DollarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10866c472ba1e3e13c9cf2f5363329d30a4e45a2
--- /dev/null
+++ b/src/stories/icons/Mono/DollarIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 1C11.4477 1 11 1.44772 11 2V3H10C8.3642 3 7.0588 3.60369 6.1691 4.57428C5.29413 5.52878 4.875 6.77845 4.875 8C4.875 9.22155 5.29413 10.4712 6.1691 11.4257C6.33335 11.6049 6.51177 11.7716 6.70382 11.9243C7.55205 12.5986 8.6662 13 10 13H11V19H10C9.17499 19 8.62271 18.7966 8.2422 18.5429C7.85544 18.2851 7.58511 17.9342 7.39443 17.5528C7.20178 17.1675 7.10048 16.7701 7.04889 16.4606C7.02329 16.307 7.00411 16.1512 6.99999 15.9953C6.99736 15.4454 6.55059 15 6 15C5.44771 15 5 15.4477 5 16C5.00003 16.0672 5.0024 16.1317 5.01035 16.2431C5.02006 16.3791 5.039 16.5668 5.07611 16.7894C5.14952 17.2299 5.29821 17.8325 5.60557 18.4472C5.91489 19.0658 6.39456 19.7149 7.1328 20.2071C7.8773 20.7034 8.82502 21 10 21H11V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V21H14C15.6358 21 16.9412 20.3963 17.8309 19.4257C18.7059 18.4712 19.125 17.2216 19.125 16C19.125 14.7784 18.7059 13.5288 17.8309 12.5743C16.9412 11.6037 15.6358 11 14 11H13V5H14C14.825 5 15.3773 5.20338 15.7578 5.45705C16.1446 5.71489 16.4149 6.06584 16.6056 6.44721C16.7982 6.8325 16.8995 7.22989 16.9511 7.5394C16.9767 7.69303 16.9959 7.84879 17 8.00465C17.0027 8.55467 17.4494 9 18 9C18.5458 9 19 8.54436 19 7.99898C18.9999 7.93212 18.9976 7.8677 18.9896 7.75688C18.9799 7.62092 18.961 7.43322 18.9239 7.2106C18.8505 6.77011 18.7018 6.1675 18.3944 5.55279C18.0851 4.93416 17.6054 4.28511 16.8672 3.79295C16.1227 3.29662 15.175 3 14 3H13V2C13 1.44772 12.5523 1 12 1ZM11 5H10C8.8858 5 8.1287 5.39631 7.6434 5.92572C7.14337 6.47122 6.875 7.22155 6.875 8C6.875 8.77845 7.14337 9.52878 7.6434 10.0743C8.1287 10.6037 8.8858 11 10 11H11V5ZM13 13V19H14C15.1142 19 15.8713 18.6037 16.3566 18.0743C16.8566 17.5288 17.125 16.7784 17.125 16C17.125 15.2216 16.8566 14.4712 16.3566 13.9257C15.8713 13.3963 15.1142 13 14 13H13Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DotsHorizontalIcon.vue b/src/stories/icons/Mono/DotsHorizontalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4acef683109ece4d0f91140bad4d3fb40f426d75
--- /dev/null
+++ b/src/stories/icons/Mono/DotsHorizontalIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM2.97192 12C2.97192 12.5678 3.43221 13.0281 4 13.0281C4.56779 13.0281 5.02808 12.5678 5.02808 12C5.02808 11.4322 4.56779 10.9719 4 10.9719C3.43221 10.9719 2.97192 11.4322 2.97192 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM10.9719 12C10.9719 12.5678 11.4322 13.0281 12 13.0281C12.5678 13.0281 13.0281 12.5678 13.0281 12C13.0281 11.4322 12.5678 10.9719 12 10.9719C11.4322 10.9719 10.9719 11.4322 10.9719 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12ZM18.9719 12C18.9719 12.5678 19.4322 13.0281 20 13.0281C20.5678 13.0281 21.0281 12.5678 21.0281 12C21.0281 11.4322 20.5678 10.9719 20 10.9719C19.4322 10.9719 18.9719 11.4322 18.9719 12Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DotsVerticalIcon.vue b/src/stories/icons/Mono/DotsVerticalIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ad56aff03d4c443bb0197d10d04169161a9defb
--- /dev/null
+++ b/src/stories/icons/Mono/DotsVerticalIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15 20C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20C9 18.3431 10.3431 17 12 17C13.6569 17 15 18.3431 15 20ZM10.9719 20C10.9719 20.5678 11.4322 21.0281 12 21.0281C12.5678 21.0281 13.0281 20.5678 13.0281 20C13.0281 19.4322 12.5678 18.9719 12 18.9719C11.4322 18.9719 10.9719 19.4322 10.9719 20Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM10.9719 12C10.9719 12.5678 11.4322 13.0281 12 13.0281C12.5678 13.0281 13.0281 12.5678 13.0281 12C13.0281 11.4322 12.5678 10.9719 12 10.9719C11.4322 10.9719 10.9719 11.4322 10.9719 12Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M15 4C15 5.65685 13.6569 7 12 7C10.3431 7 9 5.65685 9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4ZM10.9719 4C10.9719 4.56779 11.4322 5.02808 12 5.02808C12.5678 5.02808 13.0281 4.56779 13.0281 4C13.0281 3.43221 12.5678 2.97192 12 2.97192C11.4322 2.97192 10.9719 3.43221 10.9719 4Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DownloadIcon.vue b/src/stories/icons/Mono/DownloadIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85cb21b873728358e5609abd8567e41420980e22
--- /dev/null
+++ b/src/stories/icons/Mono/DownloadIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 22C23 22.5523 22.5523 23 22 23H2C1.44772 23 1 22.5523 1 22C1 21.4477 1.44772 21 2 21H22C22.5523 21 23 21.4477 23 22Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.3099 18.6881C12.5581 19.3396 11.4419 19.3396 10.6901 18.6881L5.87088 14.5114C4.47179 13.2988 5.32933 11 7.18074 11L9.00001 11V3C9.00001 1.89543 9.89544 1 11 1L13 1C14.1046 1 15 1.89543 15 3L15 11H16.8193C18.6707 11 19.5282 13.2988 18.1291 14.5114L13.3099 18.6881ZM11.3451 16.6091C11.7209 16.9348 12.2791 16.9348 12.6549 16.6091L16.8193 13H14.5C13.6716 13 13 12.3284 13 11.5V3L11 3V11.5C11 12.3284 10.3284 13 9.50001 13L7.18074 13L11.3451 16.6091Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DropIcon.vue b/src/stories/icons/Mono/DropIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25781f2025d4a95314b29fe1248e89abe68ec998
--- /dev/null
+++ b/src/stories/icons/Mono/DropIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.99999 14C8.99999 13.4477 8.55227 13 7.99999 13C7.4477 13 6.99999 13.4477 6.99999 14C6.99999 15.3574 7.26721 16.7375 8.08236 17.7972C8.93437 18.9048 10.2571 19.5 12 19.5C12.5523 19.5 13 19.0523 13 18.5C13 17.9477 12.5523 17.5 12 17.5C10.7429 17.5 10.0656 17.0952 9.66761 16.5778C9.23276 16.0125 8.99999 15.1426 8.99999 14Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.4228 1.54267C12.6513 0.711988 11.348 0.712021 10.5766 1.54273C9.63287 2.55896 7.89116 4.5305 6.37916 6.77881C4.87045 9.02222 3.46953 11.5773 3.49416 14.3526C3.49633 14.5981 3.50939 14.9426 3.55218 15.3536C3.63717 16.17 3.84245 17.278 4.33361 18.4008C4.82693 19.5285 5.61868 20.6923 6.88173 21.5709C8.15052 22.4536 9.82552 23 11.9997 23C14.1739 23 15.8489 22.4536 17.1178 21.5709C18.3808 20.6923 19.1727 19.5286 19.6661 18.4009C20.1573 17.2781 20.3627 16.17 20.4477 15.3536C20.4905 14.9427 20.5036 14.5982 20.5058 14.3527C20.5306 11.5774 19.1293 9.02208 17.6206 6.77875C16.1084 4.53043 14.3666 2.55889 13.4228 1.54267ZM8.03877 7.89491C9.44577 5.80274 11.0797 3.94302 11.9997 2.94942C12.9198 3.94301 14.5539 5.80273 15.961 7.89491C17.2351 9.78932 18.5269 11.9805 18.5059 14.3348C18.5042 14.5268 18.4938 14.8074 18.4585 15.1464C18.3873 15.83 18.2176 16.722 17.8338 17.5992C17.4521 18.4715 16.8689 19.3078 15.9756 19.9291C15.0882 20.5465 13.8256 21 11.9997 21C10.1738 21 8.91129 20.5465 8.02387 19.9291C7.13071 19.3078 6.54754 18.4715 6.16596 17.5992C5.78221 16.722 5.61259 15.8301 5.54142 15.1465C5.50613 14.8074 5.49578 14.5269 5.49408 14.3349C5.4732 11.9806 6.76469 9.78944 8.03877 7.89491Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/DumbbelIcon.vue b/src/stories/icons/Mono/DumbbelIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c77acd702199743750da501ca51f0688a404bc97
--- /dev/null
+++ b/src/stories/icons/Mono/DumbbelIcon.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.7781 1.39348C20.1686 1.00295 20.8018 1.00295 21.1923 1.39348L22.6066 2.80769C22.9971 3.19822 22.9971 3.83138 22.6066 4.22191C22.216 4.61243 21.5829 4.61243 21.1923 4.22191L19.7781 2.80769C19.3876 2.41717 19.3876 1.784 19.7781 1.39348Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16.2425 2.10051C16.633 1.70999 17.2662 1.70999 17.6567 2.10051L21.8993 6.34315C22.2899 6.73368 22.2899 7.36684 21.8993 7.75736C21.5088 8.14789 20.8756 8.14789 20.4851 7.75736L16.2425 3.51472C15.852 3.1242 15.852 2.49103 16.2425 2.10051Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16.9497 8.46463L8.46451 16.9498L10.5858 19.0711C10.9763 19.4616 10.9763 20.0948 10.5858 20.4853C10.1952 20.8758 9.56207 20.8758 9.17155 20.4853L3.5147 14.8284C3.12417 14.4379 3.12417 13.8048 3.51469 13.4142C3.90522 13.0237 4.53838 13.0237 4.92891 13.4142L7.05029 15.5356L15.5355 7.05041L13.4141 4.92903C13.0236 4.53851 13.0236 3.90534 13.4141 3.51482C13.8046 3.12429 14.4378 3.12429 14.8283 3.51482L20.4852 9.17167C20.8757 9.56219 20.8757 10.1954 20.4852 10.5859C20.0947 10.9764 19.4615 10.9764 19.071 10.5859L16.9497 8.46463Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M3.5146 16.2428C3.12408 15.8523 2.49091 15.8523 2.10039 16.2428C1.70986 16.6334 1.70986 17.2665 2.10039 17.6571L6.34303 21.8997C6.73355 22.2902 7.36672 22.2902 7.75724 21.8997C8.14777 21.5092 8.14777 20.876 7.75724 20.4855L3.5146 16.2428Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M2.80757 19.7782C2.41705 19.3877 1.78388 19.3877 1.39336 19.7782C1.00283 20.1688 1.00283 20.8019 1.39336 21.1925L2.80757 22.6067C3.1981 22.9972 3.83126 22.9972 4.22178 22.6067C4.61231 22.2161 4.61231 21.583 4.22178 21.1925L2.80757 19.7782Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/EarthIcon.vue b/src/stories/icons/Mono/EarthIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6592b504dfa426589a7c4c66eb151ba746718772
--- /dev/null
+++ b/src/stories/icons/Mono/EarthIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM3.11735 13.414C3.0446 12.9533 3.00683 12.4811 3.00683 12C3.00683 7.92975 5.71082 4.49105 9.42045 3.38225C9.26876 4.1948 8.92119 4.82883 8.56392 5.48056C8.49846 5.59998 8.43262 5.72008 8.36765 5.84191C8.11741 6.3111 7.8125 6.92968 7.8125 7.63281C7.8125 8.40645 8.16953 9.08375 8.79289 9.70711C9.47791 10.3921 9.61869 10.9399 9.77777 11.5589C9.80021 11.6462 9.823 11.7349 9.84774 11.8256C9.9509 12.2039 10.1151 12.7168 10.5507 13.1524C10.9866 13.5883 11.5772 13.8352 12.3039 13.9806C14.5643 14.4327 15.27 15.276 15.6056 15.9472C15.6352 16.0065 15.6909 16.2077 15.7213 16.6337C15.7495 17.0287 15.75 17.4906 15.75 18V18.0209C15.75 18.5058 15.75 19.0355 15.7838 19.5087C15.7976 19.702 15.8183 19.9137 15.855 20.1274C14.9439 20.5603 13.9484 20.8445 12.9 20.9487C12.8003 20.4939 12.6154 20.0705 12.3 19.65C11.8228 19.0138 11.0709 18.4282 10.1 17.7C9.84017 17.5051 9.76955 17.3242 9.74598 17.1091C9.71395 16.8166 9.7722 16.4839 9.86464 15.965L9.87042 15.9326C9.94741 15.5014 10.0634 14.8519 9.91598 14.2343C9.73457 13.4741 9.21019 12.9071 8.37139 12.5715C6.79661 11.9416 5.08866 12.472 3.95556 12.9878C3.65093 13.1265 3.36866 13.2729 3.11735 13.414ZM3.67505 15.4081C4.86529 18.3124 7.53119 20.4558 10.7402 20.9056C10.4744 20.5227 9.98152 20.1111 8.9 19.3C8.15983 18.7449 7.83633 18.0431 7.75787 17.3268C7.69302 16.7348 7.80144 16.1354 7.87812 15.7115L7.89565 15.6142C7.98731 15.0997 8.00826 14.8563 7.9706 14.6985L7.96922 14.6918C7.96193 14.6543 7.94243 14.554 7.6286 14.4285C6.85633 14.1196 5.81428 14.3392 4.78415 14.8081C4.35219 15.0047 3.96855 15.2241 3.67505 15.4081ZM12 3.00683C11.8255 3.00683 11.6522 3.0118 11.4802 3.0216C11.3622 4.56477 10.7424 5.68086 10.3067 6.46524C10.2441 6.57794 10.1853 6.6838 10.1324 6.78309C9.88258 7.2514 9.8125 7.47657 9.8125 7.63281C9.8125 7.71855 9.83047 7.91625 10.2071 8.29289C11.2928 9.37855 11.5515 10.4075 11.7187 11.0724C11.7391 11.1537 11.7582 11.2295 11.7773 11.2994C11.8616 11.6086 11.9162 11.6895 11.9649 11.7382C12.0134 11.7867 12.1728 11.9148 12.6961 12.0194C15.4357 12.5673 16.73 13.724 17.3944 15.0528C17.6148 15.4935 17.6841 16.0423 17.7162 16.4913C17.75 16.9645 17.75 17.4942 17.75 17.9792V18C17.75 18.3238 17.7502 18.6284 17.7576 18.9088C19.735 17.2591 20.9932 14.7765 20.9932 12C20.9932 11.8662 20.9902 11.733 20.9845 11.6006C20.2535 11.6212 19.6814 11.3344 19.2306 11.1084C18.5139 10.7494 17.8137 10.5 17 10.5C16.2483 10.5 15.6108 10.35 15.102 9.98256C14.5938 9.61549 14.3483 9.12594 14.1965 8.74639C14.11 8.52998 14.0455 8.35024 13.991 8.19815C13.8293 7.74679 13.7545 7.5382 13.4453 7.33205C12.9178 6.98037 12.5083 6.49222 12.4492 5.82227C12.3986 5.24927 12.6363 4.74129 12.7931 4.42778C12.8619 4.29017 12.9292 4.16168 12.9929 4.03999C13.1683 3.70495 13.3183 3.41848 13.4087 3.11652C12.9497 3.04432 12.4792 3.00683 12 3.00683ZM20.6571 9.55597C20.5134 9.50863 20.3335 9.42369 20.0722 9.29307L20.0672 9.29057C19.4072 8.96054 18.4861 8.5 17 8.5C16.5017 8.5 16.3267 8.4 16.273 8.36119C16.2187 8.32201 16.1517 8.24906 16.0535 8.00361C16.03 7.94484 16.0042 7.8672 15.9737 7.77553C15.8013 7.25678 15.4779 6.28341 14.5547 5.66795C14.408 5.57017 14.5089 5.46824 14.5819 5.32222C14.6169 5.25224 14.6606 5.17129 14.7098 5.08013C14.8964 4.73435 15.1623 4.24166 15.333 3.64469C17.9082 4.67287 19.8967 6.8571 20.6571 9.55597Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/EditIcon.vue b/src/stories/icons/Mono/EditIcon.vue
similarity index 100%
rename from src/stories/icons/EditIcon.vue
rename to src/stories/icons/Mono/EditIcon.vue
diff --git a/src/stories/icons/Mono/EncyclopediaIcon.vue b/src/stories/icons/Mono/EncyclopediaIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6585958fc495e69b33cf8c5930ea8ba9cd7d2f5
--- /dev/null
+++ b/src/stories/icons/Mono/EncyclopediaIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19 23H7C4.27504 23 2 20.7055 2 18V6C2 3.23858 4.23858 1 7 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23ZM7 3C5.34315 3 4 4.34315 4 6V14.9996C4.83566 14.3719 5.87439 14 7 14H19C19.3506 14 19.6872 14.0602 20 14.1707V4C20 3.44772 19.5523 3 19 3H18V9C18 9.3688 17.797 9.70765 17.4719 9.88167C17.1467 10.0557 16.7522 10.0366 16.4453 9.83205L14 8.20185L11.5547 9.83205C11.2478 10.0366 10.8533 10.0557 10.5281 9.88167C10.203 9.70765 10 9.3688 10 9V3H7ZM12 3H16V7.13148L14.5547 6.16795C14.2188 5.94402 13.7812 5.94402 13.4453 6.16795L12 7.13148V3ZM19 16C19.5523 16 20 16.4477 20 17V20C20 20.5523 19.5523 21 19 21H7C5.5135 21 4.04148 19.9162 4.04148 18.5C4.04148 17.0532 5.5135 16 7 16H19Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/ExitIcon.vue b/src/stories/icons/Mono/ExitIcon.vue
similarity index 100%
rename from src/stories/icons/ExitIcon.vue
rename to src/stories/icons/Mono/ExitIcon.vue
diff --git a/src/stories/icons/Mono/EyeIcon.vue b/src/stories/icons/Mono/EyeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf92eec82328b39f519b85b9f66f6f3ec170af57
--- /dev/null
+++ b/src/stories/icons/Mono/EyeIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.9944 15.5C13.9274 15.5 15.4944 13.933 15.4944 12C15.4944 10.067 13.9274 8.5 11.9944 8.5C10.0614 8.5 8.49439 10.067 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5ZM11.9944 13.4944C11.1691 13.4944 10.5 12.8253 10.5 12C10.5 11.1747 11.1691 10.5056 11.9944 10.5056C12.8197 10.5056 13.4888 11.1747 13.4888 12C13.4888 12.8253 12.8197 13.4944 11.9944 13.4944Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 5C7.18879 5 3.9167 7.60905 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C16.8112 19 20.0833 16.391 21.8107 14.5202C23.1426 13.0778 23.1426 10.9222 21.8107 9.47978C20.0833 7.60905 16.8112 5 12 5ZM3.65868 10.8366C5.18832 9.18002 7.9669 7 12 7C16.0331 7 18.8117 9.18002 20.3413 10.8366C20.9657 11.5128 20.9657 12.4872 20.3413 13.1634C18.8117 14.82 16.0331 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FeedbackIcon.vue b/src/stories/icons/Mono/FeedbackIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..089ff8c5e42f3116e7acb3bf99de018336bb0e6a
--- /dev/null
+++ b/src/stories/icons/Mono/FeedbackIcon.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 1C17.6569 1 19 2.34315 19 4C19 4.55228 18.5523 5 18 5C17.4477 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H16C16.5523 21 17 20.5523 17 20V19C17 18.4477 17.4477 18 18 18C18.5523 18 19 18.4477 19 19V20C19 21.6569 17.6569 23 16 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H16Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.7991 8.20087C20.4993 7.90104 20.0132 7.90104 19.7133 8.20087L11.9166 15.9977C11.7692 16.145 11.6715 16.3348 11.6373 16.5404L11.4728 17.5272L12.4596 17.3627C12.6652 17.3285 12.855 17.2308 13.0023 17.0835L20.7991 9.28666C21.099 8.98682 21.099 8.5007 20.7991 8.20087ZM18.2991 6.78666C19.38 5.70578 21.1325 5.70577 22.2134 6.78665C23.2942 7.86754 23.2942 9.61999 22.2134 10.7009L14.4166 18.4977C13.9744 18.9398 13.4052 19.2327 12.7884 19.3355L11.8016 19.5C10.448 19.7256 9.2744 18.5521 9.50001 17.1984L9.66448 16.2116C9.76728 15.5948 10.0602 15.0256 10.5023 14.5834L18.2991 6.78666Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5 7C5 6.44772 5.44772 6 6 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H6C5.44772 8 5 7.55228 5 7Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5 11C5 10.4477 5.44772 10 6 10H10C10.5523 10 11 10.4477 11 11C11 11.5523 10.5523 12 10 12H6C5.44772 12 5 11.5523 5 11Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M5 15C5 14.4477 5.44772 14 6 14H7C7.55228 14 8 14.4477 8 15C8 15.5523 7.55228 16 7 16H6C5.44772 16 5 15.5523 5 15Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FilterIcon.vue b/src/stories/icons/Mono/FilterIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f94447137de48b9f960ba9c4f9e36495fdbd86d
--- /dev/null
+++ b/src/stories/icons/Mono/FilterIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.2673 6.24223C2.20553 4.40955 3.50184 1 6.26039 1H17.7396C20.4981 1 21.7945 4.40955 19.7327 6.24223L15.3356 10.1507C15.1221 10.3405 15 10.6125 15 10.8981V21.0858C15 22.8676 12.8457 23.7599 11.5858 22.5L9.58578 20.5C9.21071 20.1249 8.99999 19.6162 8.99999 19.0858V10.8981C8.99999 10.6125 8.87785 10.3405 8.66436 10.1507L4.2673 6.24223ZM6.26039 3C5.34088 3 4.90877 4.13652 5.59603 4.74741L9.99309 8.6559C10.6336 9.22521 11 10.0412 11 10.8981V19.0858L13 21.0858V10.8981C13 10.0412 13.3664 9.22521 14.0069 8.6559L18.404 4.74741C19.0912 4.13652 18.6591 3 17.7396 3H6.26039Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FingerprintIcon.vue b/src/stories/icons/Mono/FingerprintIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e3ef0ded3be79f12572693467ae4149c2c64113
--- /dev/null
+++ b/src/stories/icons/Mono/FingerprintIcon.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.1268 2.15028C17.6261 2.38624 17.7846 3.00768 17.5079 3.48565C17.2312 3.96362 16.6178 4.12728 16.1146 3.89974C15.03 3.40935 13.8639 3.11566 12.6709 3.03534C11.1445 2.93257 9.61495 3.18183 8.20017 3.76389C6.78538 4.34594 5.52323 5.24524 4.51108 6.39239C3.72001 7.28897 3.09818 8.31822 2.67268 9.42988C2.47526 9.94568 1.92433 10.261 1.39138 10.1161C0.858439 9.97127 0.533708 9.41823 0.722442 8.89919C1.23443 7.49117 2.00666 6.18858 3.00179 5.06072C4.21793 3.68238 5.73445 2.60184 7.43437 1.90248C9.13428 1.20312 10.9721 0.903626 12.8061 1.02711C14.3068 1.12815 15.7722 1.5102 17.1268 2.15028Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M20.0201 8.91621C19.4756 7.84688 18.7228 6.89722 17.8059 6.12311C16.889 5.349 15.8265 4.76607 14.681 4.40861C13.5355 4.05114 12.3301 3.92636 11.1357 4.0416C9.94123 4.15684 8.7819 4.50978 7.72587 5.07966C6.66984 5.64954 5.73843 6.42484 4.98644 7.35997C4.23444 8.2951 3.67705 9.37117 3.34704 10.5249C3.18538 11.0901 3.07988 11.6683 3.03121 12.2511C3.01084 12.3307 3 12.4141 3 12.5V17.3332C3 18.1576 2.79646 18.6456 2.6425 18.9022C2.53296 19.0847 2.43609 19.1713 2.41696 19.1875C1.98077 19.5002 1.86799 20.1048 2.16796 20.5547C2.47432 21.0142 3.09519 21.1384 3.55471 20.832C3.63204 20.7804 3.72468 20.7104 3.86337 20.5717C4.00971 20.4253 4.1868 20.2156 4.3575 19.9311C4.70354 19.3544 5 18.509 5 17.3332V12.8341C5.01408 12.2399 5.10381 11.6485 5.26803 11.0744C5.52478 10.1768 5.95843 9.33961 6.54348 8.61208C7.12852 7.88455 7.85315 7.28137 8.67474 6.83801C9.49633 6.39464 10.3983 6.12006 11.3276 6.0304C12.2568 5.94074 13.1946 6.03782 14.0858 6.31593C14.977 6.59404 15.8036 7.04755 16.517 7.64981C17.2303 8.25206 17.816 8.99089 18.2396 9.82283C18.4483 10.2326 18.6155 10.6608 18.7396 11.1012C19.0927 12.59 19.2646 13.5941 19.3135 14.6704C19.3722 15.9606 19.2562 17.388 19.005 19.9005C18.95 20.45 19.351 20.9401 19.9005 20.995C20.45 21.05 20.9401 20.649 20.995 20.0995C21.2438 17.6119 21.3778 16.0394 21.3115 14.5796C21.2632 13.5175 21.11 12.5324 20.841 11.3158C20.7991 11.0956 20.7489 10.8771 20.6907 10.6608C20.5353 10.0048 20.3195 9.50404 20.0201 8.91621Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M1.17257 11.0106C0.634077 10.9117 0.113017 11.268 0.0588556 11.8128C-0.081407 13.2237 0.0295143 14.6485 0.386451 16.0207C0.52428 16.5506 1.09421 16.822 1.6109 16.6409C2.1276 16.4598 2.39451 15.8948 2.26536 15.3628C2.01211 14.3194 1.92824 13.242 2.01696 12.1721C2.06221 11.6264 1.71107 11.1096 1.17257 11.0106Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M23.9985 12.8083C24.0072 13.3555 23.5308 13.7691 22.9847 13.7327C22.4387 13.6963 22.0308 13.2234 22.0131 12.6764C21.9681 11.2865 21.6341 9.91726 21.0282 8.65752C20.4222 7.39777 19.561 6.28215 18.5032 5.37942C18.0869 5.02419 17.9721 4.41027 18.2845 3.96096C18.5969 3.51165 19.2174 3.3976 19.6395 3.74597C20.9753 4.84876 22.0598 6.23042 22.814 7.79852C23.5683 9.36662 23.9708 11.0763 23.9985 12.8083Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M17.9942 13.2638C17.9699 13.8156 17.4295 14.161 16.8895 14.0455L16.536 13.9699C15.9959 13.8544 15.6665 13.3178 15.6311 12.7666C15.6174 12.5535 15.5849 12.3414 15.5337 12.1327C15.4026 11.5988 15.1523 11.1015 14.8015 10.6782C14.4507 10.255 14.0086 9.91668 13.5083 9.68879C13.008 9.46091 12.4626 9.34935 11.913 9.36249C11.3634 9.37564 10.8239 9.51315 10.3351 9.76469C9.84631 10.0162 9.42084 10.3753 9.09069 10.8148C8.76054 11.2544 8.53428 11.7631 8.42891 12.3026C8.38773 12.5135 8.36543 12.727 8.36194 12.9405C8.35291 13.4927 8.04949 14.0445 7.51555 14.1857L7.16611 14.2781C6.63217 14.4192 6.07591 14.1001 6.02528 13.5501C5.97314 12.9839 6.00161 12.4114 6.11124 11.85C6.28499 10.9603 6.65809 10.1215 7.20252 9.39665C7.74694 8.6718 8.44854 8.07974 9.25461 7.66495C10.0607 7.25015 10.9503 7.02339 11.8565 7.00172C12.7628 6.98004 13.6622 7.164 14.4872 7.53979C15.3122 7.91557 16.0413 8.47341 16.6197 9.1714C17.1982 9.86939 17.611 10.6894 17.827 11.5698C17.9634 12.1253 18.0192 12.6958 17.9942 13.2638Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M8 16.5C8 15.9477 7.55229 15.5 7 15.5C6.44772 15.5 6 15.9477 6 16.5C6 18.1048 5.65647 19.3538 5.32153 20.1911C5.15388 20.6102 4.98845 20.926 4.86959 21.1307C4.81545 21.2239 4.75944 21.3168 4.69662 21.4045C4.36925 21.8461 4.45969 22.4698 4.9 22.8C5.34183 23.1314 5.96863 23.0418 6.3 22.6C6.40836 22.4507 6.50656 22.2944 6.59917 22.1349C6.76156 21.8553 6.97112 21.4523 7.17848 20.9339C7.59354 19.8962 8 18.3952 8 16.5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M17 15.5C17.5523 15.5 18 15.9477 18 16.5C18 18.2976 17.8716 19.7168 17.7412 20.6947C17.676 21.1836 17.6103 21.5623 17.5599 21.8228C17.5328 21.9629 17.5049 22.1032 17.4704 22.2417C17.3364 22.7775 16.7933 23.1041 16.2575 22.9701C15.7222 22.8363 15.3965 22.2943 15.5295 21.759C15.5555 21.6545 15.5759 21.5484 15.5963 21.4428C15.6397 21.219 15.699 20.8789 15.7588 20.4303C15.8784 19.5332 16 18.2024 16 16.5C16 15.9477 16.4477 15.5 17 15.5Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M11.8239 12.4476C12.5509 12.1987 12.6356 12.8392 12.7294 13.4601C12.9398 14.8536 12.7861 17.0747 12.5049 19.9012C12.4502 20.4507 12.8514 20.9406 13.401 20.9953C13.9506 21.0499 14.4404 20.6487 14.4951 20.0992C14.7695 17.3408 14.9622 14.8516 14.7069 13.1614C14.5821 12.3346 14.3206 11.4669 13.6907 10.9075C12.9687 10.2661 12.0495 10.2564 11.1761 10.5555C10.7476 10.7022 10.3575 10.9081 10.0434 11.2153C9.71867 11.5328 9.52989 11.9048 9.42805 12.2925C9.33149 12.6602 9.31356 13.0409 9.31671 13.3918C9.31983 13.7399 9.34613 14.1377 9.36662 14.5245C9.4486 16.0716 9.49899 18.2972 8.08086 21.6062C7.8633 22.1138 8.09845 22.7017 8.60608 22.9192C9.11371 23.1368 9.70159 22.9016 9.91915 22.394C11.501 18.703 11.455 16.1403 11.3638 14.4187C11.341 13.9885 11.3192 13.6637 11.3166 13.3739C11.3125 12.9089 11.3453 12.6115 11.8239 12.4476Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FireIcon.vue b/src/stories/icons/Mono/FireIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e40c6cd8f8adf60f036af06ce1261037e4c8ded4
--- /dev/null
+++ b/src/stories/icons/Mono/FireIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.0284 1.11813C9.69728 1.2952 9.53443 1.61638 9.49957 1.97965C9.48456 2.15538 9.46201 2.32986 9.43136 2.50363C9.3663 2.87248 9.24303 3.3937 9.01205 3.98313C8.5513 5.15891 7.67023 6.58926 5.96985 7.65195C3.57358 9.14956 2.68473 12.5146 3.06456 15.527C3.45234 18.6026 5.20871 21.7903 8.68375 22.9486C9.03 23.0641 9.41163 22.9817 9.67942 22.7337C10.0071 22.4303 10.0238 22.0282 9.94052 21.6223C9.87941 21.3244 9.74999 20.5785 9.74999 19.6875C9.74999 19.3992 9.76332 19.1034 9.79413 18.8068C10.3282 20.031 11.0522 20.9238 11.7758 21.5623C12.8522 22.5121 13.8694 22.8574 14.1722 22.9466C14.402 23.0143 14.6462 23.0185 14.8712 22.9284C17.5283 21.8656 19.2011 20.4232 20.1356 18.7742C21.068 17.1288 21.1993 15.3939 20.9907 13.8648C20.7833 12.3436 20.2354 10.9849 19.7537 10.0215C19.3894 9.29292 19.0534 8.77091 18.8992 8.54242C18.7101 8.26241 18.4637 8.04626 18.1128 8.00636C17.8332 7.97456 17.5531 8.06207 17.3413 8.24739L15.7763 9.61686C15.9107 7.44482 15.1466 5.61996 14.1982 4.24472C13.5095 3.24609 12.7237 2.47913 12.1151 1.96354C11.8094 1.70448 11.5443 1.50549 11.3525 1.36923C11.2564 1.30103 11.1784 1.24831 11.1224 1.21142C10.7908 0.99291 10.3931 0.923125 10.0284 1.11813ZM7.76396 20.256C7.75511 20.0744 7.74999 19.8842 7.74999 19.6875C7.75 18.6347 7.89677 17.3059 8.47802 16.0708C8.67271 15.6572 8.91614 15.254 9.21914 14.8753C9.47408 14.5566 9.89709 14.4248 10.2879 14.5423C10.6787 14.6598 10.959 15.003 10.9959 15.4094C11.2221 17.8977 12.2225 19.2892 13.099 20.0626C13.5469 20.4579 13.979 20.7056 14.292 20.8525C15.5 20.9999 17.8849 18.6892 18.3955 17.7882C19.0569 16.6211 19.1756 15.356 19.0091 14.1351C18.8146 12.7092 18.2304 11.3897 17.7656 10.5337L14.6585 13.2525C14.3033 13.5634 13.779 13.5835 13.401 13.3008C13.023 13.018 12.8942 12.5095 13.092 12.0809C14.4081 9.22933 13.655 6.97987 12.5518 5.38019C12.1138 4.74521 11.6209 4.21649 11.18 3.80695C11.0999 4.088 10.9997 4.39262 10.8742 4.71284C10.696 5.16755 10.4662 5.65531 10.1704 6.15187C9.50801 7.26379 8.51483 8.41987 7.02982 9.34797C5.57752 10.2556 4.71646 12.6406 5.04885 15.2768C5.29944 17.2643 6.20241 19.1244 7.76396 20.256Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlagIcon.vue b/src/stories/icons/Mono/FlagIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..149ce0ea35fa41bdfc8fd5b796f555a5d83929e8
--- /dev/null
+++ b/src/stories/icons/Mono/FlagIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 1C4.44772 1 4 1.44772 4 2V22C4 22.5523 4.44772 23 5 23C5.55228 23 6 22.5523 6 22V14H19C19.3603 14 19.6927 13.8062 19.8702 13.4927C20.0477 13.1792 20.0429 12.7944 19.8575 12.4855L17.1662 8L19.8575 3.5145C20.0429 3.20556 20.0477 2.82081 19.8702 2.5073C19.6927 2.19379 19.3603 2 19 2L6 2C6 1.44772 5.55228 1 5 1ZM6 4V12H17.2338L15.1425 8.5145C14.9525 8.19781 14.9525 7.80219 15.1425 7.4855L17.2338 4H6Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlashIcon.vue b/src/stories/icons/Mono/FlashIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2608f6ee0d4a54238425b94b939eba74b73eb07
--- /dev/null
+++ b/src/stories/icons/Mono/FlashIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.66493 2.74199C5.99503 1.70455 6.95855 1 8.04724 1H13.1756C14.9704 1 16.1805 2.83513 15.4735 4.4848L13.967 8H18.2405C20.4882 8 21.5942 10.7352 19.978 12.2975L9.43055 22.4934C8.25327 23.6314 6.36431 22.329 7.0093 20.824L9.93388 14H5.50179C3.80978 14 2.60645 12.3544 3.11948 10.742L5.66493 2.74199ZM8.04724 3C7.82951 3 7.6368 3.14091 7.57078 3.3484L5.02533 11.3484C4.92272 11.6709 5.16339 12 5.50179 12H11.1471C12.0086 12 12.5894 12.8809 12.2501 13.6727L9.82561 19.3298L18.588 10.8595C18.9112 10.547 18.69 10 18.2405 10H12.7537C11.8922 10 11.3114 9.11914 11.6508 8.3273L13.6352 3.69696C13.7766 3.36703 13.5346 3 13.1756 3H8.04724Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FlashlightIcon.vue b/src/stories/icons/Mono/FlashlightIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5b56efc182a9923be54c3be5b4df2c08bb717bca
--- /dev/null
+++ b/src/stories/icons/Mono/FlashlightIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5 4C5 2.34315 6.34315 1 8 1H16C17.6569 1 19 2.34315 19 4V5.33333C19 5.98244 18.7895 6.61404 18.4 7.13333L16 10.3333V20C16 21.6569 14.6569 23 13 23H11C9.34315 23 8 21.6569 8 20V10.3333L5.6 7.13333C5.21053 6.61404 5 5.98244 5 5.33333V4ZM8 3C7.44772 3 7 3.44772 7 4H17C17 3.44772 16.5523 3 16 3H8ZM9.6 9.13333L7.25 6H16.75L14.4 9.13333C14.1404 9.47952 14 9.90059 14 10.3333V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V10.3333C10 9.90059 9.85964 9.47952 9.6 9.13333Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FolderLockIcon.vue b/src/stories/icons/Mono/FolderLockIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83cc1a221c055472710df2b60f1a7fa72146ac91
--- /dev/null
+++ b/src/stories/icons/Mono/FolderLockIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1 4C1 2.34315 2.34315 1 4 1H7.76393C8.90025 1 9.93904 1.64201 10.4472 2.65836L11.3416 4.44721C11.511 4.786 11.8573 5 12.2361 5H20C21.6569 5 23 6.34315 23 8V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4ZM4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V8C21 7.44772 20.5523 7 20 7H12.2361C11.0998 7 10.061 6.35799 9.55279 5.34164L8.65836 3.55279C8.48897 3.214 8.1427 3 7.76393 3H4Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.96182 13.0007C8.9616 12.9928 8.9614 12.9849 8.96121 12.9769C8.95231 12.6032 8.96882 12.0812 9.08469 11.5405C9.1987 11.0084 9.42623 10.3766 9.90001 9.86642C10.4037 9.32402 11.1116 9 12 9C12.8884 9 13.5963 9.32402 14.1 9.86642C14.5737 10.3766 14.8013 11.0084 14.9153 11.5405C15.0312 12.0812 15.0477 12.6033 15.0388 12.9769C15.0386 12.9849 15.0384 12.9928 15.0382 13.0007C15.5728 13.0208 16 13.4605 16 14V18C16 18.5523 15.5523 19 15 19H9C8.44772 19 8 18.5523 8 18V14C8 13.4605 8.42723 13.0208 8.96182 13.0007ZM13.0372 13C13.038 12.9772 13.0388 12.9537 13.0393 12.9293C13.0461 12.6467 13.0313 12.2938 12.9597 11.9595C12.8862 11.6166 12.77 11.3734 12.6344 11.2273C12.5287 11.1135 12.3616 11 12 11C11.6384 11 11.4713 11.1135 11.3656 11.2273C11.23 11.3734 11.1138 11.6166 11.0403 11.9595C10.9687 12.2938 10.9539 12.6468 10.9606 12.9293C10.9612 12.9537 10.962 12.9772 10.9628 13H13.0372Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FrameIcon.vue b/src/stories/icons/Mono/FrameIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4a721bfc1dd5f90d01d01e164d7ec4110640cd1
--- /dev/null
+++ b/src/stories/icons/Mono/FrameIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 1C6.44775 1 6 1.44775 6 2V6H2C1.44775 6 1 6.44775 1 7C1 7.55225 1.44775 8 2 8H6V16H2C1.44775 16 1 16.4478 1 17C1 17.5522 1.44775 18 2 18H6V22C6 22.5522 6.44775 23 7 23C7.55225 23 8 22.5522 8 22V18H16V22C16 22.5522 16.4478 23 17 23C17.5522 23 18 22.5522 18 22V18H22C22.5522 18 23 17.5522 23 17C23 16.4478 22.5522 16 22 16H18V8H22C22.5522 8 23 7.55225 23 7C23 6.44775 22.5522 6 22 6H18V2C18 1.44775 17.5522 1 17 1C16.4478 1 16 1.44775 16 2V6H8V2C8 1.44775 7.55225 1 7 1ZM8 8V16H16V8H8Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/FullScreenIcon.vue b/src/stories/icons/Mono/FullScreenIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..592854ca34a2afa57e8e72c980cb0070aca75bba
--- /dev/null
+++ b/src/stories/icons/Mono/FullScreenIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23 4C23 2.34315 21.6569 1 20 1H16C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 21.4477 9 22 9C22.5523 9 23 8.55228 23 8V4Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H16C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23H20C21.6569 23 23 21.6569 23 20V16Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M4 21H8C8.55228 21 9 21.4477 9 22C9 22.5523 8.55228 23 8 23H4C2.34315 23 1 21.6569 1 20V16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8L3 4C3 3.44772 3.44772 3 4 3H8C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1H4C2.34315 1 1 2.34315 1 4V8Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GameControllerIcon.vue b/src/stories/icons/Mono/GameControllerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e1f7e6c080954ee4d29f2f1dd5fc7d825573c0b
--- /dev/null
+++ b/src/stories/icons/Mono/GameControllerIcon.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 6C7 5.44772 7.44771 5 8 5C8.55228 5 9 5.44772 9 6V7H10C10.5523 7 11 7.44771 11 8C11 8.55228 10.5523 9 10 9H9V10C9 10.5523 8.55228 11 8 11C7.44771 11 7 10.5523 7 10V9H6C5.44771 9 5 8.55229 5 8C5 7.44771 5.44771 7 6 7H7V6Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M17 6C17 6.55229 16.5523 7 16 7C15.4477 7 15 6.55229 15 6C15 5.44772 15.4477 5 16 5C16.5523 5 17 5.44772 17 6Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M16 11C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9C15.4477 9 15 9.44771 15 10C15 10.5523 15.4477 11 16 11Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M19 8C19 8.55229 18.5523 9 18 9C17.4477 9 17 8.55229 17 8C17 7.44771 17.4477 7 18 7C18.5523 7 19 7.44771 19 8Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M14 9C14.5523 9 15 8.55229 15 8C15 7.44771 14.5523 7 14 7C13.4477 7 13 7.44771 13 8C13 8.55229 13.4477 9 14 9Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.17856 3.46413C2.7668 1.72817 4.47823 1 5.99997 1H18C19.5217 1 21.2331 1.72817 21.8214 3.46411C22.5987 5.75813 22.9381 9.03747 23.0762 12.1306C23.2157 15.2519 23.1537 18.2926 23.0858 20.165C23.0275 21.7748 21.6987 23 20.1211 23H18.5615C17.1849 23 15.985 22.0631 15.6511 20.7276L14.4086 15.7575C14.2973 15.3123 13.8973 15 13.4384 15H10.5615C10.1026 15 9.70266 15.3123 9.59137 15.7575L8.34884 20.7276C8.01496 22.0631 6.81501 23 5.43841 23H3.87886C2.30118 23 0.972467 21.7748 0.914126 20.165C0.846263 18.2926 0.784238 15.2519 0.923689 12.1306C1.06188 9.03748 1.40122 5.75815 2.17856 3.46413ZM5.99997 3C5.00364 3 4.29265 3.45709 4.07276 4.10599C3.39318 6.11152 3.05905 9.14533 2.9217 12.2198C2.7856 15.2661 2.84594 18.2475 2.91281 20.0926C2.93098 20.5937 3.34429 21 3.87886 21H5.43841C5.89728 21 6.29726 20.6877 6.40855 20.2425L7.65109 15.2724C7.98496 13.9369 9.18491 13 10.5615 13H13.4384C14.815 13 16.015 13.9369 16.3488 15.2724L17.5914 20.2425C17.7027 20.6877 18.1026 21 18.5615 21H20.1211C20.6556 21 21.0689 20.5937 21.0871 20.0926C21.154 18.2475 21.2143 15.2661 21.0782 12.2198C20.9409 9.14532 20.6068 6.11151 19.9272 4.10598C19.7073 3.45708 18.9963 3 18 3H5.99997Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GiftIcon.vue b/src/stories/icons/Mono/GiftIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eccf30de6eab465ad98dc74a44a7352c013ed051
--- /dev/null
+++ b/src/stories/icons/Mono/GiftIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.12702 6C4.97689 5.41856 4.95943 4.81002 5.07686 4.21964C5.20519 3.57448 5.49065 2.97092 5.90796 2.46243C6.32527 1.95394 6.86154 1.55621 7.46927 1.30448C8.077 1.05275 8.73743 0.954786 9.39207 1.01926C10.0467 1.08374 10.6753 1.30867 11.2223 1.67412C11.5109 1.86698 11.7721 2.09584 12 2.35425C12.2125 2.11335 12.4539 1.89804 12.7197 1.7136C13.2506 1.34528 13.8627 1.11103 14.5038 1.03089C15.145 0.95075 15.7959 1.0271 16.4011 1.25342C17.0063 1.47973 17.5476 1.84928 17.9788 2.33043C18.41 2.81159 18.7183 3.39004 18.8772 4.0163C19.0361 4.64256 19.0409 5.29799 18.8912 5.92652C18.8854 5.95109 18.8793 5.97558 18.873 6H19C20.6569 6 22 7.34315 22 9V10C22 11.3062 21.1652 12.4175 20 12.8293V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V12.8293C2.83481 12.4175 2 11.3062 2 10V9C2 7.34315 3.34315 6 5 6H5.12702ZM10.7528 4.06311C10.9068 4.3512 10.9999 4.6728 11 4.99947V6H7.28241C7.20504 5.86711 7.14307 5.7252 7.09809 5.57694C7.00322 5.26417 6.98694 4.93283 7.0507 4.61226C7.11447 4.2917 7.2563 3.99181 7.46365 3.73915C7.671 3.4865 7.93746 3.28888 8.23942 3.1638C8.54139 3.03872 8.86954 2.99005 9.19481 3.02208C9.52008 3.05412 9.83243 3.16588 10.1042 3.34747C10.376 3.52905 10.5987 3.77485 10.7528 4.06311ZM13 21H17C17.5523 21 18 20.5523 18 20V13H13V21ZM11 13V21H7C6.44772 21 6 20.5523 6 20V13H11ZM13 11H19C19.5523 11 20 10.5523 20 10V9C20 8.44772 19.5523 8 19 8H13V11ZM11 8V11H5C4.44772 11 4 10.5523 4 10V9C4 8.44772 4.44772 8 5 8H11ZM13 6H16.7176C16.8153 5.83225 16.8882 5.65051 16.9334 5.46036C17.0078 5.14806 17.0054 4.8224 16.9265 4.51123C16.8475 4.20006 16.6944 3.91264 16.4801 3.67357C16.2658 3.43449 15.9969 3.25088 15.6962 3.13843C15.3955 3.02598 15.072 2.98804 14.7535 3.02786C14.4349 3.06768 14.1308 3.18407 13.867 3.36708C13.6032 3.55009 13.3877 3.79427 13.2389 4.07873C13.0903 4.3629 13.0001 4.6793 13 5V6Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/GlassesIcon.vue b/src/stories/icons/Mono/GlassesIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36e6e4c2f291342f7c2dbf60085a1f69ce623f3f
--- /dev/null
+++ b/src/stories/icons/Mono/GlassesIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.44152 5.00024C5.00819 5.00024 4.63559 5.27423 4.50847 5.67256C4.12006 6.88964 3.54128 8.7533 3.03552 10.582C3.77685 10.2098 4.61396 10.0002 5.5 10.0002C8.08018 10.0002 10.2454 11.7769 10.839 14.1737C11.1739 14.0666 11.5598 14.0002 12 14.0002C12.4402 14.0002 12.8261 14.0666 13.161 14.1737C13.7546 11.7769 15.9198 10.0002 18.5 10.0002C19.386 10.0002 20.2231 10.2098 20.9645 10.582C20.4587 8.7533 19.8799 6.88964 19.4915 5.67256C19.3644 5.27423 18.9918 5.00024 18.5585 5.00024H17C16.4477 5.00024 16 4.55253 16 4.00024C16 3.44796 16.4477 3.00024 17 3.00024H18.5585C19.8469 3.00024 21.0005 3.82262 21.3969 5.06451C21.8162 6.3784 22.4602 8.45388 23.0003 10.4437C23.2702 11.438 23.517 12.4208 23.6969 13.2818C23.8041 13.7942 23.8932 14.2893 23.9465 14.7302C23.9818 14.9818 24 15.2389 24 15.5002C24 18.5378 21.5376 21.0002 18.5 21.0002C15.7742 21.0002 13.5116 19.0174 13.0758 16.4154C12.8172 16.1044 12.3886 16.0002 12 16.0002C11.6114 16.0002 11.1828 16.1044 10.9242 16.4154C10.4884 19.0174 8.22578 21.0002 5.5 21.0002C2.46243 21.0002 0 18.5378 0 15.5002C0 15.2389 0.0182295 14.9818 0.0534864 14.7302C0.106769 14.2893 0.195948 13.7942 0.303069 13.2818C0.483034 12.4208 0.729752 11.438 0.99968 10.4437C1.53984 8.45388 2.18384 6.3784 2.60314 5.06451C2.99947 3.82262 4.15313 3.00024 5.44152 3.00024H7C7.55228 3.00024 8 3.44796 8 4.00024C8 4.55253 7.55228 5.00024 7 5.00024H5.44152ZM2.00992 15.5002C2.00992 17.4278 3.57248 18.9903 5.5 18.9903C7.42752 18.9903 8.99008 17.4278 8.99008 15.5002C8.99008 13.5727 7.42752 12.0102 5.5 12.0102C3.57248 12.0102 2.00992 13.5727 2.00992 15.5002ZM15.0099 15.5002C15.0099 17.4278 16.5725 18.9903 18.5 18.9903C20.4275 18.9903 21.9901 17.4278 21.9901 15.5002C21.9901 13.5727 20.4275 12.0102 18.5 12.0102C16.5725 12.0102 15.0099 13.5727 15.0099 15.5002Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/HamburgerIcon.vue b/src/stories/icons/Mono/HamburgerIcon.vue
similarity index 100%
rename from src/stories/icons/HamburgerIcon.vue
rename to src/stories/icons/Mono/HamburgerIcon.vue
diff --git a/src/stories/icons/Mono/HandIcon.vue b/src/stories/icons/Mono/HandIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..045ddd669081780a552e9b7a3400ba131cb03c95
--- /dev/null
+++ b/src/stories/icons/Mono/HandIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.5 3C13.2239 3 13 3.22386 13 3.5V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V5.5C11 5.22386 10.7761 5 10.5 5C10.2239 5 9.99999 5.22386 9.99999 5.5V13.9677C9.99999 15.0757 8.62655 15.5918 7.8969 14.7579L5.34951 11.8466C5.19167 11.6662 4.95459 11.576 4.71675 11.6057C4.15329 11.6761 3.88804 12.3395 4.24762 12.779L8.93807 18.5118C10.2266 20.0867 12.154 21 14.1888 21C17.3982 21 20 18.3982 20 15.1888V7.5C20 7.22386 19.7761 7 19.5 7C19.2239 7 19 7.22386 19 7.5V12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12V5.5C17 5.22386 16.7761 5 16.5 5C16.2239 5 16 5.22386 16 5.5V12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12V3.5C14 3.22386 13.7761 3 13.5 3ZM15.9611 3.05823C15.7525 1.88823 14.73 1 13.5 1C12.27 1 11.2475 1.88823 11.0389 3.05823C10.8653 3.0201 10.685 3 10.5 3C9.11928 3 7.99999 4.11929 7.99999 5.5V11.8386L6.85467 10.5296C6.2595 9.84942 5.36551 9.50903 4.46868 9.62113C2.34401 9.88672 1.34381 12.3883 2.6997 14.0455L7.39016 19.7783C9.05854 21.8174 11.5541 23 14.1888 23C18.5028 23 22 19.5028 22 15.1888V7.5C22 6.11929 20.8807 5 19.5 5C19.315 5 19.1347 5.0201 18.9611 5.05823C18.7525 3.88823 17.73 3 16.5 3C16.315 3 16.1347 3.0201 15.9611 3.05823Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/HomeIcon.vue b/src/stories/icons/Mono/HomeIcon.vue
similarity index 100%
rename from src/stories/icons/HomeIcon.vue
rename to src/stories/icons/Mono/HomeIcon.vue
diff --git a/src/stories/icons/ImageEditIcon.vue b/src/stories/icons/Mono/ImageEditIcon.vue
similarity index 100%
rename from src/stories/icons/ImageEditIcon.vue
rename to src/stories/icons/Mono/ImageEditIcon.vue
diff --git a/src/stories/icons/Mono/ImageIcon.vue b/src/stories/icons/Mono/ImageIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7aad96ee52b4b751c929d38b3bbfba2aed40519
--- /dev/null
+++ b/src/stories/icons/Mono/ImageIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M4.80665 17.5211L9.1221 9.60947C9.50112 8.91461 10.4989 8.91461 10.8779 9.60947L14.0465 15.4186L15.1318 13.5194C15.5157 12.8476 16.4843 12.8476 16.8682 13.5194L19.1451 17.5039C19.526 18.1705 19.0446 19 18.2768 19H5.68454C4.92548 19 4.44317 18.1875 4.80665 17.5211Z"
+      :fill="color ?? '#000000'"
+    />
+    <path
+      d="M18 8C18 9.10457 17.1046 10 16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/DashedIcon.vue b/src/stories/icons/Mono/LineDashedIcon.vue
similarity index 100%
rename from src/stories/icons/DashedIcon.vue
rename to src/stories/icons/Mono/LineDashedIcon.vue
diff --git a/src/stories/icons/DiagonalLineIcon.vue b/src/stories/icons/Mono/LineDiagonalIcon.vue
similarity index 100%
rename from src/stories/icons/DiagonalLineIcon.vue
rename to src/stories/icons/Mono/LineDiagonalIcon.vue
diff --git a/src/stories/icons/DottedIcon.vue b/src/stories/icons/Mono/LineDottedIcon.vue
similarity index 100%
rename from src/stories/icons/DottedIcon.vue
rename to src/stories/icons/Mono/LineDottedIcon.vue
diff --git a/src/stories/icons/SolidIcon.vue b/src/stories/icons/Mono/LineIcon.vue
similarity index 92%
rename from src/stories/icons/SolidIcon.vue
rename to src/stories/icons/Mono/LineIcon.vue
index a63c2baefcdcacb782e77bb16a208e3478228815..5ff4ff12f2066b6d0e385b94da8445a5eff4017a 100644
--- a/src/stories/icons/SolidIcon.vue
+++ b/src/stories/icons/Mono/LineIcon.vue
@@ -8,7 +8,7 @@ defineProps<Props>();
 
 <template>
   <svg
-    :fill="color ?? '#ffffff'"
+    :fill="color ?? '#000000'"
     :width="`${size ?? 40}px`"
     :height="`${size ?? 40}px`"
     viewBox="0 0 24 24"
diff --git a/src/stories/icons/MoveIcon.vue b/src/stories/icons/Mono/MoveIcon.vue
similarity index 100%
rename from src/stories/icons/MoveIcon.vue
rename to src/stories/icons/Mono/MoveIcon.vue
diff --git a/src/stories/icons/ParagraphIcon.vue b/src/stories/icons/Mono/ParagraphIcon.vue
similarity index 100%
rename from src/stories/icons/ParagraphIcon.vue
rename to src/stories/icons/Mono/ParagraphIcon.vue
diff --git a/src/stories/icons/Mono/PhoneHandsetIcon.vue b/src/stories/icons/Mono/PhoneHandsetIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4a1dd73e2b9c5ceef4c86f921a0807263b851b6
--- /dev/null
+++ b/src/stories/icons/Mono/PhoneHandsetIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.3545 22.2323C15.3344 21.7262 11.1989 20.2993 7.44976 16.5502C3.70065 12.8011 2.2738 8.66559 1.76767 6.6455C1.47681 5.48459 2.00058 4.36434 2.88869 3.72997L5.21694 2.06693C6.57922 1.09388 8.47432 1.42407 9.42724 2.80051L10.893 4.91776C11.5152 5.8165 11.3006 7.0483 10.4111 7.68365L9.24234 8.51849C9.41923 9.1951 9.96939 10.5846 11.6924 12.3076C13.4154 14.0306 14.8049 14.5807 15.4815 14.7576L16.3163 13.5888C16.9517 12.6994 18.1835 12.4847 19.0822 13.1069L21.1995 14.5727C22.5759 15.5257 22.9061 17.4207 21.933 18.783L20.27 21.1113C19.6356 21.9994 18.5154 22.5232 17.3545 22.2323ZM8.86397 15.136C12.2734 18.5454 16.0358 19.8401 17.8405 20.2923C18.1043 20.3583 18.4232 20.2558 18.6425 19.9488L20.3056 17.6205C20.6299 17.1665 20.5199 16.5348 20.061 16.2171L17.9438 14.7513L17.0479 16.0056C16.6818 16.5182 16.0047 16.9202 15.2163 16.7501C14.2323 16.5378 12.4133 15.8569 10.2782 13.7218C8.1431 11.5867 7.46219 9.7677 7.24987 8.7837C7.07977 7.9953 7.48181 7.31821 7.99439 6.95208L9.24864 6.05618L7.78285 3.93893C7.46521 3.48011 6.83351 3.37005 6.37942 3.6944L4.05117 5.35744C3.74413 5.57675 3.64162 5.89565 3.70771 6.15943C4.15989 7.96418 5.45459 11.7266 8.86397 15.136Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/PlusCircleIcon.vue b/src/stories/icons/Mono/PlusCircleIcon.vue
similarity index 100%
rename from src/stories/icons/PlusCircleIcon.vue
rename to src/stories/icons/Mono/PlusCircleIcon.vue
diff --git a/src/stories/icons/PlusIcon.vue b/src/stories/icons/Mono/PlusIcon.vue
similarity index 100%
rename from src/stories/icons/PlusIcon.vue
rename to src/stories/icons/Mono/PlusIcon.vue
diff --git a/src/stories/icons/Mono/PointerIcon.vue b/src/stories/icons/Mono/PointerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72ad734813d9656d8dcfcd8254da4e1b29b147ca
--- /dev/null
+++ b/src/stories/icons/Mono/PointerIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2V3H17.9477C18.6289 3 19.2898 3.23184 19.8217 3.65739L22.0478 5.43826C23.0486 6.23891 23.0486 7.76109 22.0478 8.56174L19.8217 10.3426C19.2898 10.7682 18.6289 11 17.9477 11H13V22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22V11H5C3.34315 11 2 9.65685 2 8V6C2 4.34315 3.34315 3 5 3H11V2ZM5 5H17.9477C18.1747 5 18.395 5.07728 18.5724 5.21913L20.3104 6.60957C20.5606 6.80973 20.5606 7.19027 20.3104 7.39043L18.5724 8.78087C18.395 8.92272 18.1747 9 17.9477 9H5C4.44772 9 4 8.55228 4 8V6C4 5.44772 4.44772 5 5 5Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/SaveIcon.vue b/src/stories/icons/Mono/SaveIcon.vue
similarity index 100%
rename from src/stories/icons/SaveIcon.vue
rename to src/stories/icons/Mono/SaveIcon.vue
diff --git a/src/stories/icons/SettingsIcon.vue b/src/stories/icons/Mono/SettingsIcon.vue
similarity index 100%
rename from src/stories/icons/SettingsIcon.vue
rename to src/stories/icons/Mono/SettingsIcon.vue
diff --git a/src/stories/icons/TableIcon.vue b/src/stories/icons/Mono/TableIcon.vue
similarity index 100%
rename from src/stories/icons/TableIcon.vue
rename to src/stories/icons/Mono/TableIcon.vue
diff --git a/src/stories/icons/TrashIcon.vue b/src/stories/icons/Mono/TrashIcon.vue
similarity index 100%
rename from src/stories/icons/TrashIcon.vue
rename to src/stories/icons/Mono/TrashIcon.vue
diff --git a/src/stories/icons/UserIcon.vue b/src/stories/icons/Mono/UserIcon.vue
similarity index 100%
rename from src/stories/icons/UserIcon.vue
rename to src/stories/icons/Mono/UserIcon.vue
diff --git a/src/stories/icons/MoveIcon.stories.ts b/src/stories/icons/MoveIcon.stories.ts
deleted file mode 100644
index 47e078f37f2db4eca988dfd7d9a1ed1065469c8d..0000000000000000000000000000000000000000
--- a/src/stories/icons/MoveIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MoveIcon from './MoveIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Move',
-  component: MoveIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof MoveIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/NavigationIcon.stories.ts b/src/stories/icons/NavigationIcon.stories.ts
deleted file mode 100644
index 165085a94a29c6eb4fff0f57a8b9e9330d141ef8..0000000000000000000000000000000000000000
--- a/src/stories/icons/NavigationIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import NavigationIcon from './NavigationIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Navigation',
-  component: NavigationIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof NavigationIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/NavigationIcon.vue b/src/stories/icons/NavigationIcon.vue
deleted file mode 100644
index 1454c3b1255be38c5ff116b7487e394ce2812a5c..0000000000000000000000000000000000000000
--- a/src/stories/icons/NavigationIcon.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 512 512"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>navigation-filled</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g id="icon" :fill="color ?? '#000000'" transform="translate(42.666667, 42.666667)">
-        <path
-          id="Combined-Shape"
-          d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,341.333333 L192,341.333333 L192,384 L234.666667,384 L234.666667,341.333333 Z M320,106.666667 L181.333333,181.333333 L106.666667,320 L245.333333,245.333333 L320,106.666667 Z M213.333333,192 C225.115408,192 234.666667,201.551259 234.666667,213.333333 C234.666667,225.115408 225.115408,234.666667 213.333333,234.666667 C201.551259,234.666667 192,225.115408 192,213.333333 C192,201.551259 201.551259,192 213.333333,192 Z M384,192 L341.333333,192 L341.333333,234.666667 L384,234.666667 L384,192 Z M85.3333333,192 L42.6666667,192 L42.6666667,234.666667 L85.3333333,234.666667 L85.3333333,192 Z M234.666667,42.6666667 L192,42.6666667 L192,85.3333333 L234.666667,85.3333333 L234.666667,42.6666667 Z"
-        ></path>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/PageAddIcon.stories.ts b/src/stories/icons/PageAddIcon.stories.ts
deleted file mode 100644
index fb0a9e3d0044a995bea805b0bd34adf954ea5fff..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageAddIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import PageAddIcon from './PageAddIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/PageAdd',
-  component: PageAddIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof PageAddIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/PageAddIcon.vue b/src/stories/icons/PageAddIcon.vue
deleted file mode 100644
index 5c85c9e8c330a20019897e701da4465dfd57fc51..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageAddIcon.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :fill="color ?? '#000000'"
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="-3.5 0 19 19"
-    xmlns="http://www.w3.org/2000/svg"
-    class="cf-icon-svg"
-  >
-    <path
-      d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.477.477 0 0 1-.475-.475V3.046a.477.477 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.924H8.059a.575.575 0 0 1-.574-.574V3.679H1.95v11.84h8.102zm-1.519 4.198a.475.475 0 0 1-.475.475H6.475v1.582a.475.475 0 1 1-.95 0v-1.582H3.944a.475.475 0 0 1 0-.95h1.581v-1.58a.475.475 0 0 1 .95 0v1.58h1.581a.475.475 0 0 1 .475.475z"
-    />
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/PageDeleteIcon.stories.ts b/src/stories/icons/PageDeleteIcon.stories.ts
deleted file mode 100644
index 7edf74d780ef80fae16bd629cb2d609eca7f3e53..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageDeleteIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import PageDeleteIcon from './PageDeleteIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/PageDelete',
-  component: PageDeleteIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof PageDeleteIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/PageDeleteIcon.vue b/src/stories/icons/PageDeleteIcon.vue
deleted file mode 100644
index 585079b99f9c185ce74025c8be9cc015d4602549..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageDeleteIcon.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 76 76"
-    xmlns="http://www.w3.org/2000/svg"
-    xml:space="preserve"
-  >
-    <path
-      :fill="color ?? '#000000'"
-      fill-opacity="1"
-      stroke-width="0.2"
-      stroke-linejoin="round"
-      d="M 43,30L 50.75,30L 43,22.25L 43,30 Z M 52,34L 39,34L 39,21L 24,21L 24,39L 20,43L 20,17L 43.25,17L 56,29.75L 56,59L 36.5,59L 40.5,55L 52,55L 52,34 Z M 35.1379,40.67L 38.4967,44.0287L 32.8988,49.6266L 38.4967,55.2246L 35.1379,58.5833L 29.54,52.9854L 23.9421,58.5833L 20.5833,55.2246L 26.1813,49.6266L 20.5833,44.0287L 23.9421,40.67L 29.54,46.2679L 35.1379,40.67 Z "
-    />
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/PageEditIcon.stories.ts b/src/stories/icons/PageEditIcon.stories.ts
deleted file mode 100644
index eb179362d85122f02f4b3a37356f112ef91213a3..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageEditIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import PageEditIcon from './PageEditIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/PageEdit',
-  component: PageEditIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof PageEditIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/PageEditIcon.vue b/src/stories/icons/PageEditIcon.vue
deleted file mode 100644
index 070762d55d4d810a86cb204b65ac1ab10b704ccb..0000000000000000000000000000000000000000
--- a/src/stories/icons/PageEditIcon.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 76 76"
-    xmlns="http://www.w3.org/2000/svg"
-    xml:space="preserve"
-  >
-    <path
-      :fill="color ?? '#000000'"
-      fill-opacity="1"
-      stroke-width="0.2"
-      stroke-linejoin="round"
-      d="M 48,30L 55.75,30L 48,22.25L 48,30 Z M 57,33L 44,33L 44,21L 29,21L 29,31.25L 25,27.25L 25,17L 48.25,17L 61,29.75L 61,59L 25,59L 25,41.75L 29,45.75L 29,55L 57,55L 57,33 Z M 24.5417,28.5L 39.5833,43.5417L 34.0417,49.0833L 19,34.0417L 24.5417,28.5 Z M 17.8125,32.8542L 14.6458,30.314C 13.6303,29.2984 14.0262,27.1405 15.0417,26.125L 16.625,24.5417C 17.6405,23.5262 19.5678,23.1303 20.5833,24.1459L 23.3541,27.3126L 17.8125,32.8542 Z M 41.9715,52.25L 35.2292,50.2709L 40.7708,44.7292L 42.6216,51.5999L 41.9715,52.25 Z "
-    />
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/ParagraphIcon.stories.ts b/src/stories/icons/ParagraphIcon.stories.ts
deleted file mode 100644
index 986a8843e77b0a7454b095c6ea0c2024dc859ec1..0000000000000000000000000000000000000000
--- a/src/stories/icons/ParagraphIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import ParagraphIcon from './ParagraphIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Paragraph',
-  component: ParagraphIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof ParagraphIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/PlusCircleIcon.stories.ts b/src/stories/icons/PlusCircleIcon.stories.ts
deleted file mode 100644
index 0e39e774fa81d67f8dc2e23429642ba27b556d82..0000000000000000000000000000000000000000
--- a/src/stories/icons/PlusCircleIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import PlusCircleIcon from './PlusCircleIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/PlusCircle',
-  component: PlusCircleIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof PlusCircleIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/PlusIcon.stories.ts b/src/stories/icons/PlusIcon.stories.ts
deleted file mode 100644
index d5af8f6df05432b14813acabcd968228c9c9cb17..0000000000000000000000000000000000000000
--- a/src/stories/icons/PlusIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import PlusIcon from './PlusIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Plus',
-  component: PlusIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof PlusIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/SaveIcon.stories.ts b/src/stories/icons/SaveIcon.stories.ts
deleted file mode 100644
index 82072439ccc5dfe93cd81f0daae8ffa79c4b11a8..0000000000000000000000000000000000000000
--- a/src/stories/icons/SaveIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import SaveIcon from './SaveIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Save',
-  component: SaveIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof SaveIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/SettingsIcon.stories.ts b/src/stories/icons/SettingsIcon.stories.ts
deleted file mode 100644
index d61216cbd6664ba2af248b0991901c1005c103cc..0000000000000000000000000000000000000000
--- a/src/stories/icons/SettingsIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import SettingsIcon from './SettingsIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Settings',
-  component: SettingsIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof SettingsIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/SolidIcon.stories.ts b/src/stories/icons/SolidIcon.stories.ts
deleted file mode 100644
index 4f286d484fdde1d9d8dfed53a85870b9cea981a3..0000000000000000000000000000000000000000
--- a/src/stories/icons/SolidIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import SolidIcon from './SolidIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Solid',
-  component: SolidIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof SolidIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/TableIcon.stories.ts b/src/stories/icons/TableIcon.stories.ts
deleted file mode 100644
index 4a125b4848ba16f0eece6a73ccd6f1325abd4ed8..0000000000000000000000000000000000000000
--- a/src/stories/icons/TableIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import TableIcon from './TableIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Table',
-  component: TableIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof TableIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/TrashIcon.stories.ts b/src/stories/icons/TrashIcon.stories.ts
deleted file mode 100644
index aec53872a4843b136feae6a0159b2b2030925ce1..0000000000000000000000000000000000000000
--- a/src/stories/icons/TrashIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import TrashIcon from './TrashIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Trash',
-  component: TrashIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof TrashIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/UploadIcon.stories.ts b/src/stories/icons/UploadIcon.stories.ts
deleted file mode 100644
index bb5dd78edd48ab49786a118831fac535c6a95432..0000000000000000000000000000000000000000
--- a/src/stories/icons/UploadIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import UploadIcon from './UploadIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/Upload',
-  component: UploadIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof UploadIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/UploadIcon.vue b/src/stories/icons/UploadIcon.vue
deleted file mode 100644
index 09cfc40f9cc768e7d07de3427feedcd8d226a432..0000000000000000000000000000000000000000
--- a/src/stories/icons/UploadIcon.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  color?: string;
-  size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
-  <svg
-    :width="`${size ?? 40}px`"
-    :height="`${size ?? 40}px`"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 17L12 10M12 10L15 13M12 10L9 13"
-      :stroke="color ?? '#000000'"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path d="M16 7H12H8" :stroke="color ?? '#000000'" stroke-width="1.5" stroke-linecap="round" />
-    <path
-      d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8"
-      :stroke="color ?? '#000000'"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-  </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/stories/icons/UserIcon.stories.ts b/src/stories/icons/UserIcon.stories.ts
deleted file mode 100644
index 3591236eae672a15cd1e35f4d5c138c70fd7e41a..0000000000000000000000000000000000000000
--- a/src/stories/icons/UserIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import UserIcon from './UserIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/User',
-  component: UserIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof UserIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};
diff --git a/src/stories/icons/VerticalArrowsIcon.stories.ts b/src/stories/icons/VerticalArrowsIcon.stories.ts
deleted file mode 100644
index 5fe48913ea6ad7007cc516d9cdd5b521db86fa1d..0000000000000000000000000000000000000000
--- a/src/stories/icons/VerticalArrowsIcon.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import VerticalArrowsIcon from './VerticalArrowsIcon.vue';
-
-const meta: Meta = {
-  title: 'Icons/VerticalArrows',
-  component: VerticalArrowsIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['10', '20', '30', '40', '50', '60'] },
-  },
-  args: {
-    color: 'white',
-  },
-} satisfies Meta<typeof VerticalArrowsIcon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    color: 'black',
-  },
-};