diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.story.vue b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
index 2b1ddec06..3a831b96f 100644
--- a/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
@@ -21,10 +21,7 @@ const files = [
 </script>
 
 <template>
-  <Story
-    title="Components/Icons/FileIcon"
-    :layout="{ type: 'grid', width: '800' }"
-  >
+  <Story title="Components/Icons/FileIcon">
     <div class="grid grid-cols-4 gap-5">
       <div
         v-for="file in files"
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.vue b/app/javascript/dashboard/components-next/icon/FileIcon.vue
index bd6953c6a..8dd9e7ce1 100644
--- a/app/javascript/dashboard/components-next/icon/FileIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.vue
@@ -11,42 +11,28 @@ const { fileType } = defineProps({
 
 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',
+    '7z': 'i-woot-file-zip',
+    csv: 'i-woot-file-csv',
+    doc: 'i-woot-file-doc',
+    docx: 'i-woot-file-doc',
+    json: 'i-woot-file-txt',
+    odt: 'i-woot-file-doc',
+    pdf: 'i-woot-file-pdf',
+    ppt: 'i-woot-file-ppt',
+    pptx: 'i-woot-file-ppt',
+    rar: 'i-woot-file-zip',
+    rtf: 'i-woot-file-doc',
+    tar: 'i-woot-file-zip',
+    txt: 'i-woot-file-txt',
+    xls: 'i-woot-file-xls',
+    xlsx: 'i-woot-file-xls',
+    zip: 'i-woot-file-zip',
   };
 
   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 }" />
+  <Icon :icon="fileTypeIcon" />
 </template>