diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.story.vue b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
new file mode 100644
index 000000000..2b1ddec06
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
@@ -0,0 +1,39 @@
+<script setup>
+import FileIcon from './FileIcon.vue';
+const files = [
+  { name: 'file.7z', type: '7z' },
+  { name: 'file.zip', type: 'zip' },
+  { name: 'file.rar', type: 'rar' },
+  { name: 'file.tar', type: 'tar' },
+  { name: 'file.csv', type: 'csv' },
+  { name: 'file.docx', type: 'docx' },
+  { name: 'file.doc', type: 'doc' },
+  { name: 'file.odt', type: 'odt' },
+  { name: 'file.pdf', type: 'pdf' },
+  { name: 'file.ppt', type: 'ppt' },
+  { name: 'file.pptx', type: 'pptx' },
+  { name: 'file.rtf', type: 'rtf' },
+  { name: 'file.json', type: 'json' },
+  { name: 'file.txt', type: 'txt' },
+  { name: 'file.xls', type: 'xls' },
+  { name: 'file.xlsx', type: 'xlsx' },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/Icons/FileIcon"
+    :layout="{ type: 'grid', width: '800' }"
+  >
+    <div class="grid grid-cols-4 gap-5">
+      <div
+        v-for="file in files"
+        :key="file.type"
+        class="flex items-center gap-2"
+      >
+        <FileIcon :file-type="file.type" class="size-6" />
+        <p>{{ file.name }}</p>
+      </div>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.vue b/app/javascript/dashboard/components-next/icon/FileIcon.vue
new file mode 100644
index 000000000..bd6953c6a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { fileType } = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const fileTypeIcon = computed(() => {
+  const fileIconMap = {
+    '7z': 'i-teenyicons-zip-solid',
+    csv: 'i-teenyicons-csv-solid',
+    doc: 'i-teenyicons-doc-solid',
+    docx: 'i-teenyicons-doc-solid',
+    json: 'i-teenyicons-text-document-solid',
+    odt: 'i-teenyicons-doc-solid',
+    pdf: 'i-teenyicons-pdf-solid',
+    ppt: 'i-teenyicons-ppt-solid',
+    pptx: 'i-teenyicons-ppt-solid',
+    rar: 'i-teenyicons-zip-solid',
+    rtf: 'i-teenyicons-doc-solid',
+    tar: 'i-teenyicons-zip-solid',
+    txt: 'i-teenyicons-text-document-solid',
+    xls: 'i-teenyicons-xls-solid',
+    xlsx: 'i-teenyicons-xls-solid',
+    zip: 'i-teenyicons-zip-solid',
+  };
+
+  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
+});
+
+const iconColor = computed(() => {
+  const colorMap = {
+    'i-teenyicons-csv-solid': '#217346',
+    'i-teenyicons-doc-solid': '#2B579A',
+    'i-teenyicons-pdf-solid': '#FF0000',
+    'i-teenyicons-ppt-solid': '#D24726',
+    'i-teenyicons-text-document-solid': '#41A5EE',
+    'i-teenyicons-xls-solid': '#217346',
+    'i-teenyicons-zip-solid': '#FDB813',
+  };
+
+  return colorMap[fileTypeIcon.value];
+});
+</script>
+
+<template>
+  <Icon :icon="fileTypeIcon" :style="{ color: iconColor }" />
+</template>