diff --git a/app/components/filter/Item.vue b/app/components/filter/Item.vue
index a434f5c..0d15550 100644
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/Item.vue
@@ -4,18 +4,46 @@ const model = defineModel();
 const { canClear = false, options } = defineProps<{
 	title: string;
 	explanation: string;
-	options: string[];
+	options: (string | { name: string; icon: string })[];
 	canClear?: boolean;
 }>();
 
 const open = ref(false);
 
-function onSelect(option: string) {
-	if (canClear && model.value === option) {
+function onSelect(option: string | { name: string; icon: string }) {
+	const name = getName(option);
+
+	if (canClear && model.value === name) {
 		model.value = undefined;
 	} else {
-		model.value = option;
+		model.value = name;
+	}
+}
+
+function getIconFromModel() : string {
+  for (const option of options) {
+    if (getName(option) === model.value) {
+      return getIcon(option);
+    }
+  }
+
+  return ""
+}
+
+function getIcon(option: string | { name: string; icon: string }) {
+	if (typeof option === "string") {
+		return "";
+	}
+
+	return option.icon;
+}
+
+function getName(option: string | { name: string; icon: string }) {
+	if (typeof option === "string") {
+		return option;
 	}
+
+	return option.name;
 }
 </script>
 
@@ -28,12 +56,14 @@ function onSelect(option: string) {
     <div class="min-h-4">
       <div>
         <button class="absolute z-0 font-bold content-between justify-between" :class="{'hover:text-neutral-400': canClear}" @click="model = undefined" :disabled="!canClear">
+          <icon :name="getIconFromModel()" size="15"/>
           {{ model }}
         </button>
       </div>
       <div class="bg-neutral-900 z-10 relative flex flex-col max-h-48 overflow-scroll transition-all" :class="{'!max-h-0': !open}">
-        <button class="text-left hover:bg-neutral-800 p-0.5 rounded" :class="{'font-bold': option == model}" v-for="option in options" @click="onSelect(option)">
-          {{ option }}
+        <button class="text-left hover:bg-neutral-800 p-0.5 rounded flex items-center gap-1" :class="{'font-bold': getName(option) == model}" v-for="option in options" @click="onSelect(option)">
+          <icon :name="getIcon(option)" size="15"/>
+          {{ getName(option) }}
         </button>
       </div>
     </div>
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index b6e7923..048f186 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -57,7 +57,7 @@ const sideBarOpen = ref(false);
   <div class="flex flex-1">
     <SideBar v-model:open="sideBarOpen">
       <div class="flex-1 flex flex-col gap-6 px-2 pt-8">
-        <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack', 'projects', 'versions', 'authors', 'files', 'revenue']" title="Type" explanation=""/>
+        <FilterItem v-model="projectType" :options="[{name: 'mod', icon: 'ep:arrow-down-bold'}, 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack', 'projects', 'versions', 'authors', 'files', 'revenue']" title="Type" explanation=""/>
         <If :state="isProjectStats">
           <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']" title="Stat" explanation=""/>
           <FilterItem v-model="versionGroup" :options="['major', 'minor', 'all']" title="Version Group" explanation="What type of Minecraft versions should be displayed"/>