diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
index 464a689f8..99fc31524 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
@@ -3,6 +3,7 @@
 import {StoredObject, StoredObjectVersionCreated} from "../../types";
 import {encryptFile, fetchNewStoredObject, uploadVersion} from "../../js/async-upload/uploader";
 import {computed, ref, Ref} from "vue";
+import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
 
 interface DropFileConfig {
     existingDoc?: StoredObject,
@@ -111,16 +112,7 @@ const handleFile = async (file: File): Promise<void> => {
     <div class="drop-file">
         <div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
             <p v-if="has_existing_doc" class="file-icon">
-                <i class="fa fa-file-pdf-o" v-if="props.existingDoc?.type === 'application/pdf'"></i>
-                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.oasis.opendocument.text'"></i>
-                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
-                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/msword'"></i>
-                <i class="fa fa-file-excel-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"></i>
-                <i class="fa fa-file-excel-o" v-else-if="props.existingDoc?.type === 'application/vnd.ms-excel'"></i>
-                <i class="fa fa-file-image-o" v-else-if="props.existingDoc?.type === 'image/jpeg'"></i>
-                <i class="fa fa-file-image-o" v-else-if="props.existingDoc?.type === 'image/png'"></i>
-                <i class="fa fa-file-archive-o" v-else-if="props.existingDoc?.type === 'application/x-zip-compressed'"></i>
-                <i class="fa fa-file-code-o" v-else ></i>
+                <file-icon :type="props.existingDoc?.type"></file-icon>
             </p>
 
             <p v-if="display_filename !== null" class="display-filename">{{ display_filename }}</p>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
new file mode 100644
index 000000000..437d6bdc8
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface FileIconConfig {
+    type: string;
+}
+
+const props = defineProps<FileIconConfig>();
+
+</script>
+
+<template>
+    <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/msword'"></i>
+    <i class="fa fa-file-excel-o" v-else-if="props.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"></i>
+    <i class="fa fa-file-excel-o" v-else-if="props.type === 'application/vnd.ms-excel'"></i>
+    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
+    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
+    <i class="fa fa-file-archive-o" v-else-if="props.type === 'application/x-zip-compressed'"></i>
+    <i class="fa fa-file-code-o" v-else ></i>
+</template>
+
+<style scoped lang="scss">
+
+</style>