diff --git a/src/App.tsx b/src/App.tsx
index 3729d22..7787157 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import mime from 'mime';
 import moment from 'moment';
 import { Component, createResource, createSignal, For, lazy, Show } from 'solid-js';
 
@@ -9,6 +10,16 @@ function sizeFmt(size: number) {
   var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
   return (size / Math.pow(1024, i)).toFixed(1) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
 }
+
+function getIcon(f)
+{
+  if (f.type == "directory") return "/mime/folder.svg"
+  
+  const sp = f.name.split(".")
+  const m = mime.getType(sp[sp.length - 1])
+  if (m) return `/mime/${m.replace("/", "-")}.svg`
+  else return '/mime/application-blank.svg'
+}
 export default function App() {
   const [api] = createResource(fetchApi)
 
@@ -20,6 +31,7 @@ export default function App() {
         <div class="flex flex-col gap-1">
           <For each={api()}>{(f, i) => 
             <span class="w-full flex gap-4 transition-all duration-300 bg-dark-800 hover:bg-dark-300 hover:duration-0 rounded-xl p-2 items-center">
+              <img class="w-10" src={getIcon(f)}></img>
               <span class="flex-1 font-bold">{f.name}</span>
               <Show when={f.size !== undefined}>
                 <span class="text-right basis-30">{sizeFmt(f.size)}</span>