From 16ac2aae6b9e5680727ba55a7daac83696ce87cb Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 28 Jan 2026 11:01:56 -0800
Subject: [PATCH] Make tags translatable, move icons to frontend, a few other
 things (#5229)

* Make tags translatable, move icons to frontend, a few other things

* Migrate more things

* fix import

* more import fixes

* export tag-messages

* lint
---
 .../src/components/ui/InstanceIndicator.vue   |   6 +-
 .../src/components/ui/ProjectCard.vue         |   6 +-
 .../src/components/ui/SearchCard.vue          |   6 +-
 .../InstallationSettings.vue                  |  35 +-
 .../src/components/ui/ProjectCard.vue         |   3 +-
 .../components/LoaderPicker.vue               |   8 +-
 .../stages/LoadersStage.vue                   |   9 +-
 .../stages/MetadataStage.vue                  |   8 +-
 .../src/components/ui/search/Categories.vue   |  72 ---
 .../ui/servers/ContentVersionEditModal.vue    |  31 +-
 .../ui/servers/icons/LoaderIcon.vue           |  13 +-
 apps/frontend/src/pages/[type]/[id].vue       |   2 +-
 .../src/pages/[type]/[id]/settings/tags.vue   |  55 ++-
 .../pages/[type]/[id]/version/[version].vue   |   2 +-
 packages/assets/build/generate-exports.ts     | 179 +++++++-
 packages/assets/generated-icons.ts            | 271 ++++++++++++
 .../icons/tags/categories/adventure.svg       |   1 +
 .../icons/tags/categories/atmosphere.svg      |   1 +
 .../assets/icons/tags/categories/audio.svg    |   1 +
 .../assets/icons/tags/categories/blocks.svg   |   1 +
 .../assets/icons/tags/categories/bloom.svg    |   1 +
 .../assets/icons/tags/categories/cartoon.svg  |   1 +
 .../icons/tags/categories/challenging.svg     |   1 +
 .../tags/categories/colored-lighting.svg      |   1 +
 .../assets/icons/tags/categories/combat.svg   |   1 +
 .../icons/tags/categories/core-shaders.svg    |   1 +
 .../assets/icons/tags/categories/cursed.svg   |   1 +
 .../icons/tags/categories/decoration.svg      |   1 +
 .../assets/icons/tags/categories/economy.svg  |   1 +
 .../assets/icons/tags/categories/entities.svg |   5 +
 .../icons/tags/categories/environment.svg     |   1 +
 .../icons/tags/categories/equipment.svg       |   1 +
 .../assets/icons/tags/categories/fantasy.svg  |   1 +
 .../assets/icons/tags/categories/foliage.svg  |   1 +
 .../assets/icons/tags/categories/fonts.svg    |   1 +
 .../assets/icons/tags/categories/food.svg     |   1 +
 .../icons/tags/categories/game-mechanics.svg  |   1 +
 packages/assets/icons/tags/categories/gui.svg |   1 +
 .../assets/icons/tags/categories/high.svg     |   1 +
 .../assets/icons/tags/categories/items.svg    |   1 +
 .../icons/tags/categories/kitchen-sink.svg    |   1 +
 .../assets/icons/tags/categories/library.svg  |   1 +
 .../icons/tags/categories/lightweight.svg     |   1 +
 .../assets/icons/tags/categories/locale.svg   |   1 +
 packages/assets/icons/tags/categories/low.svg |   1 +
 .../assets/icons/tags/categories/magic.svg    |   1 +
 .../icons/tags/categories/management.svg      |   1 +
 .../assets/icons/tags/categories/medium.svg   |   1 +
 .../assets/icons/tags/categories/minigame.svg |   1 +
 .../assets/icons/tags/categories/mobs.svg     |   5 +
 .../assets/icons/tags/categories/modded.svg   |   1 +
 .../assets/icons/tags/categories/models.svg   |   1 +
 .../icons/tags/categories/multiplayer.svg     |   1 +
 .../icons/tags/categories/optimization.svg    |   1 +
 .../icons/tags/categories/path-tracing.svg    |   1 +
 packages/assets/icons/tags/categories/pbr.svg |   1 +
 .../assets/icons/tags/categories/potato.svg   |   1 +
 .../assets/icons/tags/categories/quests.svg   |   1 +
 .../icons/tags/categories/realistic.svg       |   1 +
 .../icons/tags/categories/reflections.svg     |   1 +
 .../icons/tags/categories/screenshot.svg      |   1 +
 .../icons/tags/categories/semi-realistic.svg  |   1 +
 .../assets/icons/tags/categories/shadows.svg  |   1 +
 .../icons/tags/categories/simplistic.svg      |   1 +
 .../assets/icons/tags/categories/social.svg   |   1 +
 .../assets/icons/tags/categories/storage.svg  |   1 +
 .../icons/tags/categories/technology.svg      |   1 +
 .../assets/icons/tags/categories/themed.svg   |   1 +
 .../icons/tags/categories/transportation.svg  |   1 +
 .../assets/icons/tags/categories/tweaks.svg   |   1 +
 .../assets/icons/tags/categories/utility.svg  |   1 +
 .../icons/tags/categories/vanilla-like.svg    |   1 +
 .../assets/icons/tags/categories/worldgen.svg |   1 +
 packages/assets/icons/tags/loaders/babric.svg |   1 +
 .../assets/icons/tags/loaders/bta-babric.svg  |   1 +
 packages/assets/icons/tags/loaders/bukkit.svg |   1 +
 .../assets/icons/tags/loaders/bungeecord.svg  |   7 +
 packages/assets/icons/tags/loaders/canvas.svg |   1 +
 .../assets/icons/tags/loaders/datapack.svg    |   1 +
 packages/assets/icons/tags/loaders/fabric.svg |   4 +
 packages/assets/icons/tags/loaders/folia.svg  |   1 +
 packages/assets/icons/tags/loaders/forge.svg  |   4 +
 packages/assets/icons/tags/loaders/geyser.svg |   1 +
 packages/assets/icons/tags/loaders/iris.svg   |   4 +
 .../assets/icons/tags/loaders/java-agent.svg  |   1 +
 .../icons/tags/loaders/legacy-fabric.svg      |   1 +
 .../assets/icons/tags/loaders/liteloader.svg  |   1 +
 .../assets/icons/tags/loaders/minecraft.svg   |   1 +
 .../assets/icons/tags/loaders/modloader.svg   |   1 +
 packages/assets/icons/tags/loaders/mrpack.svg |   1 +
 .../assets/icons/tags/loaders/neoforge.svg    |   1 +
 .../assets/icons/tags/loaders/nilloader.svg   |   1 +
 .../assets/icons/tags/loaders/optifine.svg    |   1 +
 .../assets/icons/tags/loaders/ornithe.svg     |   1 +
 packages/assets/icons/tags/loaders/paper.svg  |   6 +
 packages/assets/icons/tags/loaders/purpur.svg |  12 +
 packages/assets/icons/tags/loaders/quilt.svg  |  10 +
 packages/assets/icons/tags/loaders/rift.svg   |   1 +
 packages/assets/icons/tags/loaders/spigot.svg |   1 +
 packages/assets/icons/tags/loaders/sponge.svg |   1 +
 .../assets/icons/tags/loaders/vanilla.svg     |   1 +
 .../assets/icons/tags/loaders/velocity.svg    |   1 +
 .../assets/icons/tags/loaders/waterfall.svg   |   1 +
 packages/assets/index.ts                      |  16 +
 packages/assets/styles/variables.scss         |   2 -
 .../ui/src/components/base/FormattedTag.vue   |  19 +
 .../ui/src/components/base/ProjectCard.vue    |   3 +-
 packages/ui/src/components/base/TagIcon.vue   |  21 +
 packages/ui/src/components/base/index.ts      |   1 +
 .../src/components/project/NewProjectCard.vue |   6 +-
 .../src/components/project/ProjectHeader.vue  |   5 +-
 .../project/ProjectPageVersions.vue           |  21 +-
 .../project/ProjectSidebarCompatibility.vue   |  16 +-
 .../project/ProjectSidebarDetails.vue         |   9 +-
 .../ui/src/components/search/Categories.vue   |  34 +-
 .../version/VersionFilterControl.vue          |  10 +-
 packages/ui/src/locales/en-US/index.json      | 285 ++++++++++++
 packages/ui/src/utils/index.ts                |   1 +
 packages/ui/src/utils/search.ts               |  59 ++-
 packages/ui/src/utils/tag-messages.ts         | 409 ++++++++++++++++++
 packages/utils/utils.ts                       |   3 +
 121 files changed, 1532 insertions(+), 229 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/search/Categories.vue
 create mode 100644 packages/assets/icons/tags/categories/adventure.svg
 create mode 100644 packages/assets/icons/tags/categories/atmosphere.svg
 create mode 100644 packages/assets/icons/tags/categories/audio.svg
 create mode 100644 packages/assets/icons/tags/categories/blocks.svg
 create mode 100644 packages/assets/icons/tags/categories/bloom.svg
 create mode 100644 packages/assets/icons/tags/categories/cartoon.svg
 create mode 100644 packages/assets/icons/tags/categories/challenging.svg
 create mode 100644 packages/assets/icons/tags/categories/colored-lighting.svg
 create mode 100644 packages/assets/icons/tags/categories/combat.svg
 create mode 100644 packages/assets/icons/tags/categories/core-shaders.svg
 create mode 100644 packages/assets/icons/tags/categories/cursed.svg
 create mode 100644 packages/assets/icons/tags/categories/decoration.svg
 create mode 100644 packages/assets/icons/tags/categories/economy.svg
 create mode 100644 packages/assets/icons/tags/categories/entities.svg
 create mode 100644 packages/assets/icons/tags/categories/environment.svg
 create mode 100644 packages/assets/icons/tags/categories/equipment.svg
 create mode 100644 packages/assets/icons/tags/categories/fantasy.svg
 create mode 100644 packages/assets/icons/tags/categories/foliage.svg
 create mode 100644 packages/assets/icons/tags/categories/fonts.svg
 create mode 100644 packages/assets/icons/tags/categories/food.svg
 create mode 100644 packages/assets/icons/tags/categories/game-mechanics.svg
 create mode 100644 packages/assets/icons/tags/categories/gui.svg
 create mode 100644 packages/assets/icons/tags/categories/high.svg
 create mode 100644 packages/assets/icons/tags/categories/items.svg
 create mode 100644 packages/assets/icons/tags/categories/kitchen-sink.svg
 create mode 100644 packages/assets/icons/tags/categories/library.svg
 create mode 100644 packages/assets/icons/tags/categories/lightweight.svg
 create mode 100644 packages/assets/icons/tags/categories/locale.svg
 create mode 100644 packages/assets/icons/tags/categories/low.svg
 create mode 100644 packages/assets/icons/tags/categories/magic.svg
 create mode 100644 packages/assets/icons/tags/categories/management.svg
 create mode 100644 packages/assets/icons/tags/categories/medium.svg
 create mode 100644 packages/assets/icons/tags/categories/minigame.svg
 create mode 100644 packages/assets/icons/tags/categories/mobs.svg
 create mode 100644 packages/assets/icons/tags/categories/modded.svg
 create mode 100644 packages/assets/icons/tags/categories/models.svg
 create mode 100644 packages/assets/icons/tags/categories/multiplayer.svg
 create mode 100644 packages/assets/icons/tags/categories/optimization.svg
 create mode 100644 packages/assets/icons/tags/categories/path-tracing.svg
 create mode 100644 packages/assets/icons/tags/categories/pbr.svg
 create mode 100644 packages/assets/icons/tags/categories/potato.svg
 create mode 100644 packages/assets/icons/tags/categories/quests.svg
 create mode 100644 packages/assets/icons/tags/categories/realistic.svg
 create mode 100644 packages/assets/icons/tags/categories/reflections.svg
 create mode 100644 packages/assets/icons/tags/categories/screenshot.svg
 create mode 100644 packages/assets/icons/tags/categories/semi-realistic.svg
 create mode 100644 packages/assets/icons/tags/categories/shadows.svg
 create mode 100644 packages/assets/icons/tags/categories/simplistic.svg
 create mode 100644 packages/assets/icons/tags/categories/social.svg
 create mode 100644 packages/assets/icons/tags/categories/storage.svg
 create mode 100644 packages/assets/icons/tags/categories/technology.svg
 create mode 100644 packages/assets/icons/tags/categories/themed.svg
 create mode 100644 packages/assets/icons/tags/categories/transportation.svg
 create mode 100644 packages/assets/icons/tags/categories/tweaks.svg
 create mode 100644 packages/assets/icons/tags/categories/utility.svg
 create mode 100644 packages/assets/icons/tags/categories/vanilla-like.svg
 create mode 100644 packages/assets/icons/tags/categories/worldgen.svg
 create mode 100644 packages/assets/icons/tags/loaders/babric.svg
 create mode 100644 packages/assets/icons/tags/loaders/bta-babric.svg
 create mode 100644 packages/assets/icons/tags/loaders/bukkit.svg
 create mode 100644 packages/assets/icons/tags/loaders/bungeecord.svg
 create mode 100644 packages/assets/icons/tags/loaders/canvas.svg
 create mode 100644 packages/assets/icons/tags/loaders/datapack.svg
 create mode 100644 packages/assets/icons/tags/loaders/fabric.svg
 create mode 100644 packages/assets/icons/tags/loaders/folia.svg
 create mode 100644 packages/assets/icons/tags/loaders/forge.svg
 create mode 100644 packages/assets/icons/tags/loaders/geyser.svg
 create mode 100644 packages/assets/icons/tags/loaders/iris.svg
 create mode 100644 packages/assets/icons/tags/loaders/java-agent.svg
 create mode 100644 packages/assets/icons/tags/loaders/legacy-fabric.svg
 create mode 100644 packages/assets/icons/tags/loaders/liteloader.svg
 create mode 100644 packages/assets/icons/tags/loaders/minecraft.svg
 create mode 100644 packages/assets/icons/tags/loaders/modloader.svg
 create mode 100644 packages/assets/icons/tags/loaders/mrpack.svg
 create mode 100644 packages/assets/icons/tags/loaders/neoforge.svg
 create mode 100644 packages/assets/icons/tags/loaders/nilloader.svg
 create mode 100644 packages/assets/icons/tags/loaders/optifine.svg
 create mode 100644 packages/assets/icons/tags/loaders/ornithe.svg
 create mode 100644 packages/assets/icons/tags/loaders/paper.svg
 create mode 100644 packages/assets/icons/tags/loaders/purpur.svg
 create mode 100644 packages/assets/icons/tags/loaders/quilt.svg
 create mode 100644 packages/assets/icons/tags/loaders/rift.svg
 create mode 100644 packages/assets/icons/tags/loaders/spigot.svg
 create mode 100644 packages/assets/icons/tags/loaders/sponge.svg
 create mode 100644 packages/assets/icons/tags/loaders/vanilla.svg
 create mode 100644 packages/assets/icons/tags/loaders/velocity.svg
 create mode 100644 packages/assets/icons/tags/loaders/waterfall.svg
 create mode 100644 packages/ui/src/components/base/FormattedTag.vue
 create mode 100644 packages/ui/src/components/base/TagIcon.vue
 create mode 100644 packages/ui/src/utils/tag-messages.ts

diff --git a/apps/app-frontend/src/components/ui/InstanceIndicator.vue b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
index a00263bd7..72a7e2151 100644
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 
 type Instance = {
@@ -37,7 +36,8 @@ defineProps<{
 					</span>
 					<span class="text-secondary flex items-center gap-2 font-semibold">
 						<GameIcon class="h-5 w-5 text-secondary" />
-						{{ formatCategory(instance.loader) }} {{ instance.game_version }}
+						<FormattedTag :tag="instance.loader" enforce-type="loader" />
+						{{ instance.game_version }}
 					</span>
 				</span>
 			</span>
diff --git a/apps/app-frontend/src/components/ui/ProjectCard.vue b/apps/app-frontend/src/components/ui/ProjectCard.vue
index 43e9a10df..000970c65 100644
--- a/apps/app-frontend/src/components/ui/ProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag, TagItem } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -107,7 +107,7 @@ const toTransparent = computed(() => {
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />
 					<TagItem>
-						{{ formatCategory(featuredCategory) }}
+						<FormattedTag :tag="featuredCategory" />
 					</TagItem>
 				</div>
 			</div>
diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
index 7f7b6c444..a30012f44 100644
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -67,7 +67,7 @@
 					:key="tag"
 					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
 				>
-					{{ formatCategory(tag.name) }}
+					<FormattedTag :tag="tag.name" />
 				</div>
 			</div>
 		</div>
@@ -118,8 +118,8 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag, injectNotificationManager } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref } from 'vue'
diff --git a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
index c0a175581..ed6adef3d 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
 	DownloadIcon,
+	getLoaderIcon,
 	HammerIcon,
 	IssuesIcon,
 	SpinnerIcon,
@@ -17,16 +18,11 @@ import {
 	Chips,
 	Combobox,
 	defineMessages,
+	getTagMessageOrDefault,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
-import {
-	formatCategory,
-	type GameVersionTag,
-	type PlatformTag,
-	type Project,
-	type Version,
-} from '@modrinth/utils'
+import type { GameVersionTag, PlatformTag, Project, Version } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
 
@@ -129,9 +125,7 @@ if (props.instance.linked_data && props.instance.linked_data.project_id && !prop
 	fetching.value = false
 }
 
-const currentLoaderIcon = computed(
-	() => loaders?.value.find((x) => x.name === props.instance.loader)?.icon,
-)
+const currentLoaderIcon = computed(() => getLoaderIcon(props.instance.loader))
 
 const gameVersionsForLoader = computed(() => {
 	return all_game_versions?.value.filter((item) => {
@@ -550,7 +544,7 @@ const messages = defineMessages({
 						v-else
 						class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
 					>
-						<div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
+						<component :is="currentLoaderIcon" v-if="currentLoaderIcon" />
 						<WrenchIcon v-else />
 					</div>
 					<div class="flex flex-col gap-2 justify-center">
@@ -569,7 +563,10 @@ const messages = defineMessages({
 									? modpackVersion
 										? modpackVersion?.version_number
 										: 'Unknown version'
-									: formatCategory(instance.loader)
+									: (() => {
+											const message = getTagMessageOrDefault(instance.loader, 'loader')
+											return typeof message === 'string' ? message : formatMessage(message)
+										})()
 							}}
 							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
 								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
@@ -677,7 +674,14 @@ const messages = defineMessages({
 			</div>
 			<template v-if="loader !== 'vanilla'">
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
+					{{
+						formatMessage(messages.loaderVersion, {
+							loader: (() => {
+								const message = getTagMessageOrDefault(loader, 'loader')
+								return typeof message === 'string' ? message : formatMessage(message)
+							})(),
+						})
+					}}
 				</h2>
 				<Combobox
 					v-if="selectableLoaderVersions"
@@ -709,7 +713,10 @@ const messages = defineMessages({
 												? messages.alreadyInstalledVanilla
 												: messages.alreadyInstalledModded,
 											{
-												platform: formatCategory(loader),
+												platform: (() => {
+													const message = getTagMessageOrDefault(loader, 'loader')
+													return typeof message === 'string' ? message : formatMessage(message)
+												})(),
 												version: instance.loader_version,
 												game_version: gameVersion,
 											},
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index a91868fc1..933a0ed04 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -91,10 +91,9 @@
 
 <script>
 import { CalendarIcon, DownloadIcon, HeartIcon, UpdatedIcon } from '@modrinth/assets'
-import { Avatar, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
+import { Avatar, Categories, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
 
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
-import Categories from '~/components/ui/search/Categories.vue'
 
 export default {
 	components: {
diff --git a/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
index 7a037fd12..dd396f62d 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
@@ -27,8 +27,8 @@
 						"
 						:style="`--_color: var(--color-platform-${loader.name})`"
 					>
-						<div v-html="loader.icon"></div>
-						{{ formatCategory(loader.name) }}
+						<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+						<FormattedTag :tag="loader.name" enforce-type="loader" />
 					</TagItem>
 				</div>
 			</div>
@@ -40,8 +40,8 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { Chips, TagItem } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { getLoaderIcon } from '@modrinth/assets'
+import { Chips, FormattedTag, TagItem } from '@modrinth/ui'
 
 const selectedLoaders = defineModel<string[]>({ default: [] })
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
index 5ac5cdfbd..63aba691d 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
@@ -29,8 +29,8 @@
 							class="border !border-solid border-surface-5 !transition-all hover:bg-button-bgHover hover:no-underline"
 							:style="`--_color: var(--color-platform-${loader.name})`"
 						>
-							<div v-html="loader.icon"></div>
-							{{ formatCategory(loader.name) }}
+							<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+							<FormattedTag :tag="loader.name" enforce-type="loader" />
 							<XIcon class="text-secondary" />
 						</TagItem>
 					</template>
@@ -41,9 +41,8 @@
 </template>
 
 <script lang="ts" setup>
-import { XIcon } from '@modrinth/assets'
-import { ButtonStyled, TagItem } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { getLoaderIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, FormattedTag, TagItem } from '@modrinth/ui'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 4ae56a09a..be3bf5054 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -72,8 +72,8 @@
 							class="border !border-solid border-surface-5 hover:no-underline"
 							:style="`--_color: var(--color-platform-${loader.name})`"
 						>
-							<div v-html="loader.icon"></div>
-							{{ formatCategory(loader.name) }}
+							<component :is="getLoaderIcon(loader.name)" v-if="getLoaderIcon(loader.name)" />
+							<FormattedTag :tag="loader.name" enforce-type="loader" />
 						</TagItem>
 					</template>
 
@@ -189,16 +189,16 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon, UnknownIcon } from '@modrinth/assets'
+import { EditIcon, getLoaderIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	defineMessages,
 	ENVIRONMENTS_COPY,
+	FormattedTag,
 	injectProjectPageContext,
 	TagItem,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
diff --git a/apps/frontend/src/components/ui/search/Categories.vue b/apps/frontend/src/components/ui/search/Categories.vue
deleted file mode 100644
index 832de2a5a..000000000
--- a/apps/frontend/src/components/ui/search/Categories.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-	<div class="categories">
-		<slot />
-		<span
-			v-for="category in categoriesFiltered"
-			:key="category.name"
-			v-html="category.icon + formatCategory(category.name)"
-		/>
-	</div>
-</template>
-
-<script>
-import { formatCategory } from '@modrinth/utils'
-
-export default {
-	props: {
-		categories: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
-		type: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		const tags = useGeneratedState()
-
-		return { tags }
-	},
-	computed: {
-		categoriesFiltered() {
-			return this.tags.categories
-				.concat(this.tags.loaders)
-				.filter(
-					(x) =>
-						this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type),
-				)
-		},
-	},
-	methods: { formatCategory },
-}
-</script>
-
-<style lang="scss" scoped>
-.categories {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-
-	:deep(span) {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-
-		&:not(:last-child) {
-			margin-right: var(--spacing-card-md);
-		}
-
-		&:not(.badge) {
-			color: var(--color-icon);
-		}
-
-		svg {
-			width: 1rem;
-			margin-right: 0.2rem;
-		}
-	}
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index a87db5e83..0bfe2ba11 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -132,17 +132,24 @@
 							:loader="'Vanilla'"
 							class="size-5 flex-none"
 						/>
-						<svg
-							v-else
+						<component
+							:is="getLoaderIcon(filtersRef.selectedPlatforms[0])"
+							v-else-if="
+								filtersRef?.selectedPlatforms[0] && getLoaderIcon(filtersRef.selectedPlatforms[0])
+							"
 							class="size-5 flex-none"
-							v-html="tags.loaders.find((x) => x.name === filtersRef?.selectedPlatforms[0])?.icon"
-						></svg>
+						/>
 
 						<div class="w-full truncate text-left">
 							{{
 								filtersRef?.selectedPlatforms.length === 0
 									? 'All platforms'
-									: filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(', ')
+									: filtersRef?.selectedPlatforms
+											.map((x) => {
+												const message = getTagMessageOrDefault(x, 'loader')
+												return typeof message === 'string' ? message : formatMessage(message)
+											})
+											.join(', ')
 							}}
 						</div>
 					</template>
@@ -242,6 +249,7 @@ import {
 	DropdownIcon,
 	ExternalIcon,
 	GameIcon,
+	getLoaderIcon,
 	LockOpenIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -252,10 +260,12 @@ import {
 	Checkbox,
 	Combobox,
 	CopyCode,
+	getTagMessageOrDefault,
 	NewModal,
+	TagItem,
+	useVIntl,
 } from '@modrinth/ui'
-import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
-import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
+import { formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import Accordion from '~/components/ui/Accordion.vue'
@@ -265,6 +275,8 @@ import ContentVersionFilter, {
 } from '~/components/ui/servers/ContentVersionFilter.vue'
 import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
 
+const { formatMessage } = useVIntl()
+
 const props = defineProps<{
 	type: 'Mod' | 'Plugin'
 	loader: string
@@ -424,7 +436,10 @@ const formattedVersions = computed(() => {
 				if (secondLoaderPosition === -1) return -1
 				return firstLoaderPosition - secondLoaderPosition
 			})
-			.map((loader: string) => formatCategory(loader)),
+			.map((loader: string) => {
+				const message = getTagMessageOrDefault(loader, 'loader')
+				return typeof message === 'string' ? message : formatMessage(message)
+			}),
 	}
 })
 
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
index 4bd494e49..090bb945b 100644
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
@@ -1,22 +1,15 @@
 <template>
-	<div v-if="loaderData?.icon" v-html="loaderData.icon" />
+	<component :is="icon" v-if="icon" />
 	<LoaderIcon v-else />
 </template>
 
 <script setup lang="ts">
-import { LoaderIcon } from '@modrinth/assets'
+import { getLoaderIcon, LoaderIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { useGeneratedState } from '~/composables/generated'
-
 const props = defineProps<{
 	loader: string
 }>()
 
-const tags = useGeneratedState()
-
-// Find the loader by name (case-insensitive comparison)
-const loaderData = computed(() =>
-	tags.value.loaders.find((l) => l.name.toLowerCase() === props.loader.toLowerCase()),
-)
+const icon = computed(() => getLoaderIcon(props.loader))
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index f6bc2767c..fe52b5d86 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -977,7 +977,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
-import { formatCategory, formatPrice, formatProjectType, renderString } from '@modrinth/utils'
+import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index 203730ba7..e705c5ab7 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -66,18 +66,24 @@
 							v-for="category in categoryLists[header]"
 							:key="`category-${header}-${category.name}`"
 							:model-value="current.selectedTags.includes(category)"
-							:description="formatCategory(category.name)"
+							:description="
+								typeof getTagMessageOrDefault(category.name, 'category') === 'string'
+									? getTagMessageOrDefault(category.name, 'category')
+									: formatMessage(getTagMessageOrDefault(category.name, 'category'))
+							"
 							class="category-selector"
 							@update:model-value="toggleCategory(category)"
 						>
 							<div class="category-selector__label">
-								<div
-									v-if="header !== 'resolutions' && category.icon"
+								<component
+									:is="getCategoryIcon(category.name)"
+									v-if="header !== 'resolutions' && getCategoryIcon(category.name)"
 									aria-hidden="true"
 									class="icon"
-									v-html="category.icon"
 								/>
-								<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
+								<span aria-hidden="true">
+									<FormattedTag :tag="category.name" enforce-type="category" />
+								</span>
 							</div>
 						</Checkbox>
 					</div>
@@ -100,18 +106,24 @@
 						:key="`featured-category-${category.name}`"
 						class="category-selector"
 						:model-value="current.featuredTags.includes(category)"
-						:description="formatCategory(category.name)"
+						:description="
+							typeof getTagMessageOrDefault(category.name, 'category') === 'string'
+								? getTagMessageOrDefault(category.name, 'category')
+								: formatMessage(getTagMessageOrDefault(category.name, 'category'))
+						"
 						:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
 						@update:model-value="toggleFeaturedCategory(category)"
 					>
 						<div class="category-selector__label">
-							<div
-								v-if="category.header !== 'resolutions' && category.icon"
+							<component
+								:is="getCategoryIcon(category.name)"
+								v-if="category.header !== 'resolutions' && getCategoryIcon(category.name)"
 								aria-hidden="true"
 								class="icon"
-								v-html="category.icon"
 							/>
-							<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
+							<span aria-hidden="true">
+								<FormattedTag :tag="category.name" enforce-type="category" />
+							</span>
 						</div>
 					</Checkbox>
 				</div>
@@ -128,14 +140,17 @@
 </template>
 
 <script setup lang="ts">
-import { StarIcon, TriangleAlertIcon } from '@modrinth/assets'
-import { Checkbox, injectProjectPageContext, UnsavedChangesPopup, useSavable } from '@modrinth/ui'
+import { getCategoryIcon, StarIcon, TriangleAlertIcon } from '@modrinth/assets'
 import {
-	formatCategory,
-	formatCategoryHeader,
-	formatProjectType,
-	sortedCategories,
-} from '@modrinth/utils'
+	Checkbox,
+	FormattedTag,
+	getTagMessageOrDefault,
+	injectProjectPageContext,
+	UnsavedChangesPopup,
+	useSavable,
+	useVIntl,
+} from '@modrinth/ui'
+import { formatCategoryHeader, formatProjectType, sortedCategories } from '@modrinth/utils'
 import { computed } from 'vue'
 
 interface Category {
@@ -146,6 +161,7 @@ interface Category {
 }
 
 const tags = useGeneratedState()
+const { formatMessage } = useVIntl()
 
 const { projectV2: project, patchProject } = injectProjectPageContext()
 
@@ -308,9 +324,12 @@ const toggleFeaturedCategory = (category: Category) => {
 
 			.icon {
 				height: 1rem;
+				width: 1rem;
+				margin-right: 0.25rem;
+				display: flex;
+				align-items: center;
 
 				svg {
-					margin-right: 0.25rem;
 					width: 1rem;
 					height: 1rem;
 				}
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 5bd819432..9a7d56fa9 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -428,6 +428,7 @@ import {
 	Avatar,
 	Badge,
 	ButtonStyled,
+	Categories,
 	ConfirmModal,
 	CopyCode,
 	ENVIRONMENTS_COPY,
@@ -440,7 +441,6 @@ import { Multiselect } from 'vue-multiselect'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import Modal from '~/components/ui/Modal.vue'
-import Categories from '~/components/ui/search/Categories.vue'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package.js'
diff --git a/packages/assets/build/generate-exports.ts b/packages/assets/build/generate-exports.ts
index 5b56d4366..ed73cfc67 100644
--- a/packages/assets/build/generate-exports.ts
+++ b/packages/assets/build/generate-exports.ts
@@ -15,7 +15,12 @@ function toPascalCase(str: string): string {
 		.join('')
 }
 
-function generateIconExports(): { imports: string; exports: string } {
+function generateIconExports(): {
+	imports: string
+	exports: string
+	categoryMap: string
+	loaderMap: string
+} {
 	const packageRoot = path.resolve(__dirname, '..')
 	const iconsDir = path.join(packageRoot, 'icons')
 
@@ -23,10 +28,17 @@ function generateIconExports(): { imports: string; exports: string } {
 		throw new Error(`Icons directory not found: ${iconsDir}`)
 	}
 
-	const files = fs.readdirSync(iconsDir).filter((file) => file.endsWith('.svg'))
+	const icons: Array<{ importPath: string; pascalName: string; privateName: string }> = []
+	const categoryMapEntries: Array<{ key: string; value: string }> = []
+	const loaderMapEntries: Array<{ key: string; value: string }> = []
 
-	// Build icon data with import paths
-	const icons = files.map((file) => {
+	// Process top-level icons
+	const files = fs.readdirSync(iconsDir).filter((file) => {
+		const filePath = path.join(iconsDir, file)
+		return fs.statSync(filePath).isFile() && file.endsWith('.svg')
+	})
+
+	files.forEach((file) => {
 		const baseName = path.basename(file, '.svg')
 		let pascalName = toPascalCase(baseName)
 
@@ -38,16 +50,84 @@ function generateIconExports(): { imports: string; exports: string } {
 			pascalName += 'Icon'
 		}
 
-		return {
+		icons.push({
 			importPath: `./icons/${file}?component`,
 			pascalName,
 			privateName: `_${pascalName}`,
-		}
+		})
 	})
 
+	// Process tag icons from icons/tags/categories/
+	const categoriesDir = path.join(iconsDir, 'tags', 'categories')
+	if (fs.existsSync(categoriesDir)) {
+		const categoryFiles = fs.readdirSync(categoriesDir).filter((file) => file.endsWith('.svg'))
+		categoryFiles.forEach((file) => {
+			const baseName = path.basename(file, '.svg')
+			let pascalName = toPascalCase(baseName)
+
+			if (pascalName === '') {
+				pascalName = 'Unknown'
+			}
+
+			// Prefix with TagCategory
+			pascalName = `TagCategory${pascalName}`
+			if (!pascalName.endsWith('Icon')) {
+				pascalName += 'Icon'
+			}
+
+			icons.push({
+				importPath: `./icons/tags/categories/${file}?component`,
+				pascalName,
+				privateName: `_${pascalName}`,
+			})
+
+			// Add to category map (key is the original filename without extension, lowercase)
+			categoryMapEntries.push({
+				key: baseName.toLowerCase(),
+				value: pascalName,
+			})
+		})
+	}
+
+	// Process tag icons from icons/tags/loaders/
+	const loadersDir = path.join(iconsDir, 'tags', 'loaders')
+	if (fs.existsSync(loadersDir)) {
+		const loaderFiles = fs.readdirSync(loadersDir).filter((file) => file.endsWith('.svg'))
+		loaderFiles.forEach((file) => {
+			const baseName = path.basename(file, '.svg')
+			let pascalName = toPascalCase(baseName)
+
+			if (pascalName === '') {
+				pascalName = 'Unknown'
+			}
+
+			// Prefix with TagLoader
+			pascalName = `TagLoader${pascalName}`
+			if (!pascalName.endsWith('Icon')) {
+				pascalName += 'Icon'
+			}
+
+			icons.push({
+				importPath: `./icons/tags/loaders/${file}?component`,
+				pascalName,
+				privateName: `_${pascalName}`,
+			})
+
+			// Add to loader map (key is the original filename without extension, lowercase)
+			loaderMapEntries.push({
+				key: baseName.toLowerCase(),
+				value: pascalName,
+			})
+		})
+	}
+
 	// Sort by import path using simple-import-sort's algorithm
 	icons.sort((a, b) => compareImportSources(a.importPath, b.importPath))
 
+	// Sort map entries by key for consistent output
+	categoryMapEntries.sort((a, b) => a.key.localeCompare(b.key))
+	loaderMapEntries.sort((a, b) => a.key.localeCompare(b.key))
+
 	let imports = ''
 	let exports = ''
 
@@ -56,7 +136,21 @@ function generateIconExports(): { imports: string; exports: string } {
 		exports += `export const ${pascalName} = ${privateName}\n`
 	})
 
-	return { imports, exports }
+	// Generate category map
+	let categoryMap = 'export const categoryIconMap: Record<string, IconComponent> = {\n'
+	categoryMapEntries.forEach(({ key, value }) => {
+		categoryMap += `\t'${key}': ${value},\n`
+	})
+	categoryMap += '}\n'
+
+	// Generate loader map
+	let loaderMap = 'export const loaderIconMap: Record<string, IconComponent> = {\n'
+	loaderMapEntries.forEach(({ key, value }) => {
+		loaderMap += `\t'${key}': ${value},\n`
+	})
+	loaderMap += '}\n'
+
+	return { imports, exports, categoryMap, loaderMap }
 }
 
 function runTests(): void {
@@ -106,12 +200,19 @@ function generateFiles(): void {
 	try {
 		console.log('🔄 Generating icon exports...')
 
-		const { imports, exports } = generateIconExports()
+		const { imports, exports, categoryMap, loaderMap } = generateIconExports()
 		const output = `// Auto-generated icon imports and exports
 // Do not edit this file manually - run 'pnpm run fix' to regenerate
 
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 ${imports}
-${exports}`
+${exports}
+
+${categoryMap}
+${loaderMap}`
 
 		const packageRoot = path.resolve(__dirname, '..')
 		const outputPath = path.join(packageRoot, 'generated-icons.ts')
@@ -146,10 +247,34 @@ function getExpectedIconExports(iconsDir: string): string[] {
 		return []
 	}
 
-	return fs
-		.readdirSync(iconsDir)
-		.filter((file) => file.endsWith('.svg'))
-		.map((file) => {
+	const exports: string[] = []
+
+	// Process top-level icons
+	const files = fs.readdirSync(iconsDir).filter((file) => {
+		const filePath = path.join(iconsDir, file)
+		return fs.statSync(filePath).isFile() && file.endsWith('.svg')
+	})
+
+	files.forEach((file) => {
+		const baseName = path.basename(file, '.svg')
+		let pascalName = toPascalCase(baseName)
+
+		if (pascalName === '') {
+			pascalName = 'Unknown'
+		}
+
+		if (!pascalName.endsWith('Icon')) {
+			pascalName += 'Icon'
+		}
+
+		exports.push(pascalName)
+	})
+
+	// Process tag icons from icons/tags/categories/
+	const categoriesDir = path.join(iconsDir, 'tags', 'categories')
+	if (fs.existsSync(categoriesDir)) {
+		const categoryFiles = fs.readdirSync(categoriesDir).filter((file) => file.endsWith('.svg'))
+		categoryFiles.forEach((file) => {
 			const baseName = path.basename(file, '.svg')
 			let pascalName = toPascalCase(baseName)
 
@@ -157,13 +282,37 @@ function getExpectedIconExports(iconsDir: string): string[] {
 				pascalName = 'Unknown'
 			}
 
+			pascalName = `TagCategory${pascalName}`
 			if (!pascalName.endsWith('Icon')) {
 				pascalName += 'Icon'
 			}
 
-			return pascalName
+			exports.push(pascalName)
 		})
-		.sort()
+	}
+
+	// Process tag icons from icons/tags/loaders/
+	const loadersDir = path.join(iconsDir, 'tags', 'loaders')
+	if (fs.existsSync(loadersDir)) {
+		const loaderFiles = fs.readdirSync(loadersDir).filter((file) => file.endsWith('.svg'))
+		loaderFiles.forEach((file) => {
+			const baseName = path.basename(file, '.svg')
+			let pascalName = toPascalCase(baseName)
+
+			if (pascalName === '') {
+				pascalName = 'Unknown'
+			}
+
+			pascalName = `TagLoader${pascalName}`
+			if (!pascalName.endsWith('Icon')) {
+				pascalName += 'Icon'
+			}
+
+			exports.push(pascalName)
+		})
+	}
+
+	return exports.sort()
 }
 
 function getActualIconExports(indexFile: string): string[] {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 9db93b9c6..22569d9b3 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -1,6 +1,10 @@
 // Auto-generated icon imports and exports
 // Do not edit this file manually - run 'pnpm run fix' to regenerate
 
+import type { FunctionalComponent, SVGAttributes } from 'vue'
+
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -202,6 +206,93 @@ import _SunriseIcon from './icons/sunrise.svg?component'
 import _SupportChatIcon from './icons/support-chat.svg?component'
 import _TagIcon from './icons/tag.svg?component'
 import _TagsIcon from './icons/tags.svg?component'
+import _TagCategoryAdventureIcon from './icons/tags/categories/adventure.svg?component'
+import _TagCategoryAtmosphereIcon from './icons/tags/categories/atmosphere.svg?component'
+import _TagCategoryAudioIcon from './icons/tags/categories/audio.svg?component'
+import _TagCategoryBlocksIcon from './icons/tags/categories/blocks.svg?component'
+import _TagCategoryBloomIcon from './icons/tags/categories/bloom.svg?component'
+import _TagCategoryCartoonIcon from './icons/tags/categories/cartoon.svg?component'
+import _TagCategoryChallengingIcon from './icons/tags/categories/challenging.svg?component'
+import _TagCategoryColoredLightingIcon from './icons/tags/categories/colored-lighting.svg?component'
+import _TagCategoryCombatIcon from './icons/tags/categories/combat.svg?component'
+import _TagCategoryCoreShadersIcon from './icons/tags/categories/core-shaders.svg?component'
+import _TagCategoryCursedIcon from './icons/tags/categories/cursed.svg?component'
+import _TagCategoryDecorationIcon from './icons/tags/categories/decoration.svg?component'
+import _TagCategoryEconomyIcon from './icons/tags/categories/economy.svg?component'
+import _TagCategoryEntitiesIcon from './icons/tags/categories/entities.svg?component'
+import _TagCategoryEnvironmentIcon from './icons/tags/categories/environment.svg?component'
+import _TagCategoryEquipmentIcon from './icons/tags/categories/equipment.svg?component'
+import _TagCategoryFantasyIcon from './icons/tags/categories/fantasy.svg?component'
+import _TagCategoryFoliageIcon from './icons/tags/categories/foliage.svg?component'
+import _TagCategoryFontsIcon from './icons/tags/categories/fonts.svg?component'
+import _TagCategoryFoodIcon from './icons/tags/categories/food.svg?component'
+import _TagCategoryGameMechanicsIcon from './icons/tags/categories/game-mechanics.svg?component'
+import _TagCategoryGuiIcon from './icons/tags/categories/gui.svg?component'
+import _TagCategoryHighIcon from './icons/tags/categories/high.svg?component'
+import _TagCategoryItemsIcon from './icons/tags/categories/items.svg?component'
+import _TagCategoryKitchenSinkIcon from './icons/tags/categories/kitchen-sink.svg?component'
+import _TagCategoryLibraryIcon from './icons/tags/categories/library.svg?component'
+import _TagCategoryLightweightIcon from './icons/tags/categories/lightweight.svg?component'
+import _TagCategoryLocaleIcon from './icons/tags/categories/locale.svg?component'
+import _TagCategoryLowIcon from './icons/tags/categories/low.svg?component'
+import _TagCategoryMagicIcon from './icons/tags/categories/magic.svg?component'
+import _TagCategoryManagementIcon from './icons/tags/categories/management.svg?component'
+import _TagCategoryMediumIcon from './icons/tags/categories/medium.svg?component'
+import _TagCategoryMinigameIcon from './icons/tags/categories/minigame.svg?component'
+import _TagCategoryMobsIcon from './icons/tags/categories/mobs.svg?component'
+import _TagCategoryModdedIcon from './icons/tags/categories/modded.svg?component'
+import _TagCategoryModelsIcon from './icons/tags/categories/models.svg?component'
+import _TagCategoryMultiplayerIcon from './icons/tags/categories/multiplayer.svg?component'
+import _TagCategoryOptimizationIcon from './icons/tags/categories/optimization.svg?component'
+import _TagCategoryPathTracingIcon from './icons/tags/categories/path-tracing.svg?component'
+import _TagCategoryPbrIcon from './icons/tags/categories/pbr.svg?component'
+import _TagCategoryPotatoIcon from './icons/tags/categories/potato.svg?component'
+import _TagCategoryQuestsIcon from './icons/tags/categories/quests.svg?component'
+import _TagCategoryRealisticIcon from './icons/tags/categories/realistic.svg?component'
+import _TagCategoryReflectionsIcon from './icons/tags/categories/reflections.svg?component'
+import _TagCategoryScreenshotIcon from './icons/tags/categories/screenshot.svg?component'
+import _TagCategorySemiRealisticIcon from './icons/tags/categories/semi-realistic.svg?component'
+import _TagCategoryShadowsIcon from './icons/tags/categories/shadows.svg?component'
+import _TagCategorySimplisticIcon from './icons/tags/categories/simplistic.svg?component'
+import _TagCategorySocialIcon from './icons/tags/categories/social.svg?component'
+import _TagCategoryStorageIcon from './icons/tags/categories/storage.svg?component'
+import _TagCategoryTechnologyIcon from './icons/tags/categories/technology.svg?component'
+import _TagCategoryThemedIcon from './icons/tags/categories/themed.svg?component'
+import _TagCategoryTransportationIcon from './icons/tags/categories/transportation.svg?component'
+import _TagCategoryTweaksIcon from './icons/tags/categories/tweaks.svg?component'
+import _TagCategoryUtilityIcon from './icons/tags/categories/utility.svg?component'
+import _TagCategoryVanillaLikeIcon from './icons/tags/categories/vanilla-like.svg?component'
+import _TagCategoryWorldgenIcon from './icons/tags/categories/worldgen.svg?component'
+import _TagLoaderBabricIcon from './icons/tags/loaders/babric.svg?component'
+import _TagLoaderBtaBabricIcon from './icons/tags/loaders/bta-babric.svg?component'
+import _TagLoaderBukkitIcon from './icons/tags/loaders/bukkit.svg?component'
+import _TagLoaderBungeecordIcon from './icons/tags/loaders/bungeecord.svg?component'
+import _TagLoaderCanvasIcon from './icons/tags/loaders/canvas.svg?component'
+import _TagLoaderDatapackIcon from './icons/tags/loaders/datapack.svg?component'
+import _TagLoaderFabricIcon from './icons/tags/loaders/fabric.svg?component'
+import _TagLoaderFoliaIcon from './icons/tags/loaders/folia.svg?component'
+import _TagLoaderForgeIcon from './icons/tags/loaders/forge.svg?component'
+import _TagLoaderGeyserIcon from './icons/tags/loaders/geyser.svg?component'
+import _TagLoaderIrisIcon from './icons/tags/loaders/iris.svg?component'
+import _TagLoaderJavaAgentIcon from './icons/tags/loaders/java-agent.svg?component'
+import _TagLoaderLegacyFabricIcon from './icons/tags/loaders/legacy-fabric.svg?component'
+import _TagLoaderLiteloaderIcon from './icons/tags/loaders/liteloader.svg?component'
+import _TagLoaderMinecraftIcon from './icons/tags/loaders/minecraft.svg?component'
+import _TagLoaderModloaderIcon from './icons/tags/loaders/modloader.svg?component'
+import _TagLoaderMrpackIcon from './icons/tags/loaders/mrpack.svg?component'
+import _TagLoaderNeoforgeIcon from './icons/tags/loaders/neoforge.svg?component'
+import _TagLoaderNilloaderIcon from './icons/tags/loaders/nilloader.svg?component'
+import _TagLoaderOptifineIcon from './icons/tags/loaders/optifine.svg?component'
+import _TagLoaderOrnitheIcon from './icons/tags/loaders/ornithe.svg?component'
+import _TagLoaderPaperIcon from './icons/tags/loaders/paper.svg?component'
+import _TagLoaderPurpurIcon from './icons/tags/loaders/purpur.svg?component'
+import _TagLoaderQuiltIcon from './icons/tags/loaders/quilt.svg?component'
+import _TagLoaderRiftIcon from './icons/tags/loaders/rift.svg?component'
+import _TagLoaderSpigotIcon from './icons/tags/loaders/spigot.svg?component'
+import _TagLoaderSpongeIcon from './icons/tags/loaders/sponge.svg?component'
+import _TagLoaderVanillaIcon from './icons/tags/loaders/vanilla.svg?component'
+import _TagLoaderVelocityIcon from './icons/tags/loaders/velocity.svg?component'
+import _TagLoaderWaterfallIcon from './icons/tags/loaders/waterfall.svg?component'
 import _TerminalSquareIcon from './icons/terminal-square.svg?component'
 import _TestIcon from './icons/test.svg?component'
 import _TextQuoteIcon from './icons/text-quote.svg?component'
@@ -437,6 +528,93 @@ export const SunriseIcon = _SunriseIcon
 export const SupportChatIcon = _SupportChatIcon
 export const TagIcon = _TagIcon
 export const TagsIcon = _TagsIcon
+export const TagCategoryAdventureIcon = _TagCategoryAdventureIcon
+export const TagCategoryAtmosphereIcon = _TagCategoryAtmosphereIcon
+export const TagCategoryAudioIcon = _TagCategoryAudioIcon
+export const TagCategoryBlocksIcon = _TagCategoryBlocksIcon
+export const TagCategoryBloomIcon = _TagCategoryBloomIcon
+export const TagCategoryCartoonIcon = _TagCategoryCartoonIcon
+export const TagCategoryChallengingIcon = _TagCategoryChallengingIcon
+export const TagCategoryColoredLightingIcon = _TagCategoryColoredLightingIcon
+export const TagCategoryCombatIcon = _TagCategoryCombatIcon
+export const TagCategoryCoreShadersIcon = _TagCategoryCoreShadersIcon
+export const TagCategoryCursedIcon = _TagCategoryCursedIcon
+export const TagCategoryDecorationIcon = _TagCategoryDecorationIcon
+export const TagCategoryEconomyIcon = _TagCategoryEconomyIcon
+export const TagCategoryEntitiesIcon = _TagCategoryEntitiesIcon
+export const TagCategoryEnvironmentIcon = _TagCategoryEnvironmentIcon
+export const TagCategoryEquipmentIcon = _TagCategoryEquipmentIcon
+export const TagCategoryFantasyIcon = _TagCategoryFantasyIcon
+export const TagCategoryFoliageIcon = _TagCategoryFoliageIcon
+export const TagCategoryFontsIcon = _TagCategoryFontsIcon
+export const TagCategoryFoodIcon = _TagCategoryFoodIcon
+export const TagCategoryGameMechanicsIcon = _TagCategoryGameMechanicsIcon
+export const TagCategoryGuiIcon = _TagCategoryGuiIcon
+export const TagCategoryHighIcon = _TagCategoryHighIcon
+export const TagCategoryItemsIcon = _TagCategoryItemsIcon
+export const TagCategoryKitchenSinkIcon = _TagCategoryKitchenSinkIcon
+export const TagCategoryLibraryIcon = _TagCategoryLibraryIcon
+export const TagCategoryLightweightIcon = _TagCategoryLightweightIcon
+export const TagCategoryLocaleIcon = _TagCategoryLocaleIcon
+export const TagCategoryLowIcon = _TagCategoryLowIcon
+export const TagCategoryMagicIcon = _TagCategoryMagicIcon
+export const TagCategoryManagementIcon = _TagCategoryManagementIcon
+export const TagCategoryMediumIcon = _TagCategoryMediumIcon
+export const TagCategoryMinigameIcon = _TagCategoryMinigameIcon
+export const TagCategoryMobsIcon = _TagCategoryMobsIcon
+export const TagCategoryModdedIcon = _TagCategoryModdedIcon
+export const TagCategoryModelsIcon = _TagCategoryModelsIcon
+export const TagCategoryMultiplayerIcon = _TagCategoryMultiplayerIcon
+export const TagCategoryOptimizationIcon = _TagCategoryOptimizationIcon
+export const TagCategoryPathTracingIcon = _TagCategoryPathTracingIcon
+export const TagCategoryPbrIcon = _TagCategoryPbrIcon
+export const TagCategoryPotatoIcon = _TagCategoryPotatoIcon
+export const TagCategoryQuestsIcon = _TagCategoryQuestsIcon
+export const TagCategoryRealisticIcon = _TagCategoryRealisticIcon
+export const TagCategoryReflectionsIcon = _TagCategoryReflectionsIcon
+export const TagCategoryScreenshotIcon = _TagCategoryScreenshotIcon
+export const TagCategorySemiRealisticIcon = _TagCategorySemiRealisticIcon
+export const TagCategoryShadowsIcon = _TagCategoryShadowsIcon
+export const TagCategorySimplisticIcon = _TagCategorySimplisticIcon
+export const TagCategorySocialIcon = _TagCategorySocialIcon
+export const TagCategoryStorageIcon = _TagCategoryStorageIcon
+export const TagCategoryTechnologyIcon = _TagCategoryTechnologyIcon
+export const TagCategoryThemedIcon = _TagCategoryThemedIcon
+export const TagCategoryTransportationIcon = _TagCategoryTransportationIcon
+export const TagCategoryTweaksIcon = _TagCategoryTweaksIcon
+export const TagCategoryUtilityIcon = _TagCategoryUtilityIcon
+export const TagCategoryVanillaLikeIcon = _TagCategoryVanillaLikeIcon
+export const TagCategoryWorldgenIcon = _TagCategoryWorldgenIcon
+export const TagLoaderBabricIcon = _TagLoaderBabricIcon
+export const TagLoaderBtaBabricIcon = _TagLoaderBtaBabricIcon
+export const TagLoaderBukkitIcon = _TagLoaderBukkitIcon
+export const TagLoaderBungeecordIcon = _TagLoaderBungeecordIcon
+export const TagLoaderCanvasIcon = _TagLoaderCanvasIcon
+export const TagLoaderDatapackIcon = _TagLoaderDatapackIcon
+export const TagLoaderFabricIcon = _TagLoaderFabricIcon
+export const TagLoaderFoliaIcon = _TagLoaderFoliaIcon
+export const TagLoaderForgeIcon = _TagLoaderForgeIcon
+export const TagLoaderGeyserIcon = _TagLoaderGeyserIcon
+export const TagLoaderIrisIcon = _TagLoaderIrisIcon
+export const TagLoaderJavaAgentIcon = _TagLoaderJavaAgentIcon
+export const TagLoaderLegacyFabricIcon = _TagLoaderLegacyFabricIcon
+export const TagLoaderLiteloaderIcon = _TagLoaderLiteloaderIcon
+export const TagLoaderMinecraftIcon = _TagLoaderMinecraftIcon
+export const TagLoaderModloaderIcon = _TagLoaderModloaderIcon
+export const TagLoaderMrpackIcon = _TagLoaderMrpackIcon
+export const TagLoaderNeoforgeIcon = _TagLoaderNeoforgeIcon
+export const TagLoaderNilloaderIcon = _TagLoaderNilloaderIcon
+export const TagLoaderOptifineIcon = _TagLoaderOptifineIcon
+export const TagLoaderOrnitheIcon = _TagLoaderOrnitheIcon
+export const TagLoaderPaperIcon = _TagLoaderPaperIcon
+export const TagLoaderPurpurIcon = _TagLoaderPurpurIcon
+export const TagLoaderQuiltIcon = _TagLoaderQuiltIcon
+export const TagLoaderRiftIcon = _TagLoaderRiftIcon
+export const TagLoaderSpigotIcon = _TagLoaderSpigotIcon
+export const TagLoaderSpongeIcon = _TagLoaderSpongeIcon
+export const TagLoaderVanillaIcon = _TagLoaderVanillaIcon
+export const TagLoaderVelocityIcon = _TagLoaderVelocityIcon
+export const TagLoaderWaterfallIcon = _TagLoaderWaterfallIcon
 export const TerminalSquareIcon = _TerminalSquareIcon
 export const TestIcon = _TestIcon
 export const TextQuoteIcon = _TextQuoteIcon
@@ -470,3 +648,96 @@ export const XIcon = _XIcon
 export const XCircleIcon = _XCircleIcon
 export const ZoomInIcon = _ZoomInIcon
 export const ZoomOutIcon = _ZoomOutIcon
+
+export const categoryIconMap: Record<string, IconComponent> = {
+	adventure: TagCategoryAdventureIcon,
+	atmosphere: TagCategoryAtmosphereIcon,
+	audio: TagCategoryAudioIcon,
+	blocks: TagCategoryBlocksIcon,
+	bloom: TagCategoryBloomIcon,
+	cartoon: TagCategoryCartoonIcon,
+	challenging: TagCategoryChallengingIcon,
+	'colored-lighting': TagCategoryColoredLightingIcon,
+	combat: TagCategoryCombatIcon,
+	'core-shaders': TagCategoryCoreShadersIcon,
+	cursed: TagCategoryCursedIcon,
+	decoration: TagCategoryDecorationIcon,
+	economy: TagCategoryEconomyIcon,
+	entities: TagCategoryEntitiesIcon,
+	environment: TagCategoryEnvironmentIcon,
+	equipment: TagCategoryEquipmentIcon,
+	fantasy: TagCategoryFantasyIcon,
+	foliage: TagCategoryFoliageIcon,
+	fonts: TagCategoryFontsIcon,
+	food: TagCategoryFoodIcon,
+	'game-mechanics': TagCategoryGameMechanicsIcon,
+	gui: TagCategoryGuiIcon,
+	high: TagCategoryHighIcon,
+	items: TagCategoryItemsIcon,
+	'kitchen-sink': TagCategoryKitchenSinkIcon,
+	library: TagCategoryLibraryIcon,
+	lightweight: TagCategoryLightweightIcon,
+	locale: TagCategoryLocaleIcon,
+	low: TagCategoryLowIcon,
+	magic: TagCategoryMagicIcon,
+	management: TagCategoryManagementIcon,
+	medium: TagCategoryMediumIcon,
+	minigame: TagCategoryMinigameIcon,
+	mobs: TagCategoryMobsIcon,
+	modded: TagCategoryModdedIcon,
+	models: TagCategoryModelsIcon,
+	multiplayer: TagCategoryMultiplayerIcon,
+	optimization: TagCategoryOptimizationIcon,
+	'path-tracing': TagCategoryPathTracingIcon,
+	pbr: TagCategoryPbrIcon,
+	potato: TagCategoryPotatoIcon,
+	quests: TagCategoryQuestsIcon,
+	realistic: TagCategoryRealisticIcon,
+	reflections: TagCategoryReflectionsIcon,
+	screenshot: TagCategoryScreenshotIcon,
+	'semi-realistic': TagCategorySemiRealisticIcon,
+	shadows: TagCategoryShadowsIcon,
+	simplistic: TagCategorySimplisticIcon,
+	social: TagCategorySocialIcon,
+	storage: TagCategoryStorageIcon,
+	technology: TagCategoryTechnologyIcon,
+	themed: TagCategoryThemedIcon,
+	transportation: TagCategoryTransportationIcon,
+	tweaks: TagCategoryTweaksIcon,
+	utility: TagCategoryUtilityIcon,
+	'vanilla-like': TagCategoryVanillaLikeIcon,
+	worldgen: TagCategoryWorldgenIcon,
+}
+
+export const loaderIconMap: Record<string, IconComponent> = {
+	babric: TagLoaderBabricIcon,
+	'bta-babric': TagLoaderBtaBabricIcon,
+	bukkit: TagLoaderBukkitIcon,
+	bungeecord: TagLoaderBungeecordIcon,
+	canvas: TagLoaderCanvasIcon,
+	datapack: TagLoaderDatapackIcon,
+	fabric: TagLoaderFabricIcon,
+	folia: TagLoaderFoliaIcon,
+	forge: TagLoaderForgeIcon,
+	geyser: TagLoaderGeyserIcon,
+	iris: TagLoaderIrisIcon,
+	'java-agent': TagLoaderJavaAgentIcon,
+	'legacy-fabric': TagLoaderLegacyFabricIcon,
+	liteloader: TagLoaderLiteloaderIcon,
+	minecraft: TagLoaderMinecraftIcon,
+	modloader: TagLoaderModloaderIcon,
+	mrpack: TagLoaderMrpackIcon,
+	neoforge: TagLoaderNeoforgeIcon,
+	nilloader: TagLoaderNilloaderIcon,
+	optifine: TagLoaderOptifineIcon,
+	ornithe: TagLoaderOrnitheIcon,
+	paper: TagLoaderPaperIcon,
+	purpur: TagLoaderPurpurIcon,
+	quilt: TagLoaderQuiltIcon,
+	rift: TagLoaderRiftIcon,
+	spigot: TagLoaderSpigotIcon,
+	sponge: TagLoaderSpongeIcon,
+	vanilla: TagLoaderVanillaIcon,
+	velocity: TagLoaderVelocityIcon,
+	waterfall: TagLoaderWaterfallIcon,
+}
diff --git a/packages/assets/icons/tags/categories/adventure.svg b/packages/assets/icons/tags/categories/adventure.svg
new file mode 100644
index 000000000..d892a08df
--- /dev/null
+++ b/packages/assets/icons/tags/categories/adventure.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/atmosphere.svg b/packages/assets/icons/tags/categories/atmosphere.svg
new file mode 100644
index 000000000..519d99b7c
--- /dev/null
+++ b/packages/assets/icons/tags/categories/atmosphere.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"/><path d="M11 20v2"/><path d="M7 19v2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/audio.svg b/packages/assets/icons/tags/categories/audio.svg
new file mode 100644
index 000000000..cd789def9
--- /dev/null
+++ b/packages/assets/icons/tags/categories/audio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/blocks.svg b/packages/assets/icons/tags/categories/blocks.svg
new file mode 100644
index 000000000..74c01b702
--- /dev/null
+++ b/packages/assets/icons/tags/categories/blocks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/bloom.svg b/packages/assets/icons/tags/categories/bloom.svg
new file mode 100644
index 000000000..4736dffd5
--- /dev/null
+++ b/packages/assets/icons/tags/categories/bloom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2h8l4 10H4L8 2Z"/><path d="M12 12v6"/><path d="M8 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H8Z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/cartoon.svg b/packages/assets/icons/tags/categories/cartoon.svg
new file mode 100644
index 000000000..537bc3a13
--- /dev/null
+++ b/packages/assets/icons/tags/categories/cartoon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="" data-darkreader-inline-stroke=""><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/challenging.svg b/packages/assets/icons/tags/categories/challenging.svg
new file mode 100644
index 000000000..f06286f31
--- /dev/null
+++ b/packages/assets/icons/tags/categories/challenging.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/colored-lighting.svg b/packages/assets/icons/tags/categories/colored-lighting.svg
new file mode 100644
index 000000000..792e5eeab
--- /dev/null
+++ b/packages/assets/icons/tags/categories/colored-lighting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="7.618" cy="6.578" r="5.422" style="" transform="translate(3.143 .726) scale(1.16268)"/><circle cx="7.618" cy="6.578" r="5.422" style="" transform="translate(-.862 7.796) scale(1.16268)"/><circle cx="7.618" cy="6.578" r="5.422" style="" transform="translate(7.148 7.796) scale(1.16268)"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/combat.svg b/packages/assets/icons/tags/categories/combat.svg
new file mode 100644
index 000000000..af9021a05
--- /dev/null
+++ b/packages/assets/icons/tags/categories/combat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"/><path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25"/><path d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"/><path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761"/><path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/core-shaders.svg b/packages/assets/icons/tags/categories/core-shaders.svg
new file mode 100644
index 000000000..875233824
--- /dev/null
+++ b/packages/assets/icons/tags/categories/core-shaders.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/cursed.svg b/packages/assets/icons/tags/categories/cursed.svg
new file mode 100644
index 000000000..e50c22bea
--- /dev/null
+++ b/packages/assets/icons/tags/categories/cursed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="7.5" width="10" height="14" rx="5"/><polyline points="2 12.5 4 14.5 7 14.5"/><polyline points="22 12.5 20 14.5 17 14.5"/><polyline points="3 21.5 5 18.5 7 17.5"/><polyline points="21 21.5 19 18.5 17 17.5"/><polyline points="3 8.5 5 10.5 7 11.5"/><polyline points="21 8.5 19 10.5 17 11.5"/><line x1="12" y1="7.5" x2="12" y2="21.5"/><path d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"/><line x1="9" y1="4.5" x2="8" y2="2.5"/><line x1="15" y1="4.5" x2="16" y2="2.5"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/decoration.svg b/packages/assets/icons/tags/categories/decoration.svg
new file mode 100644
index 000000000..3b4d86c64
--- /dev/null
+++ b/packages/assets/icons/tags/categories/decoration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/economy.svg b/packages/assets/icons/tags/categories/economy.svg
new file mode 100644
index 000000000..b16eae87c
--- /dev/null
+++ b/packages/assets/icons/tags/categories/economy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/entities.svg b/packages/assets/icons/tags/categories/entities.svg
new file mode 100644
index 000000000..50c784be1
--- /dev/null
+++ b/packages/assets/icons/tags/categories/entities.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" d="M3 3h18v18H3z"/>
+  <path stroke="currentColor" fill="currentColor" d="M6 6h4v4H6zm8 0h4v4h-4zm-4 4h4v2h2v6h-2v-2h-4v2H8v-6h2v-2Z"/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/environment.svg b/packages/assets/icons/tags/categories/environment.svg
new file mode 100644
index 000000000..f9ca6ff0e
--- /dev/null
+++ b/packages/assets/icons/tags/categories/environment.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
diff --git a/packages/assets/icons/tags/categories/equipment.svg b/packages/assets/icons/tags/categories/equipment.svg
new file mode 100644
index 000000000..af9021a05
--- /dev/null
+++ b/packages/assets/icons/tags/categories/equipment.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"/><path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25"/><path d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"/><path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761"/><path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/fantasy.svg b/packages/assets/icons/tags/categories/fantasy.svg
new file mode 100644
index 000000000..ec386682d
--- /dev/null
+++ b/packages/assets/icons/tags/categories/fantasy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/foliage.svg b/packages/assets/icons/tags/categories/foliage.svg
new file mode 100644
index 000000000..6db137b74
--- /dev/null
+++ b/packages/assets/icons/tags/categories/foliage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="" data-darkreader-inline-stroke=""><path d="M12 22v-7l-2-2"/><path d="M17 8v.8A6 6 0 0 1 13.8 20v0H10v0A6.5 6.5 0 0 1 7 8h0a5 5 0 0 1 10 0Z"/><path d="m14 14-2 2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/fonts.svg b/packages/assets/icons/tags/categories/fonts.svg
new file mode 100644
index 000000000..99e11e60e
--- /dev/null
+++ b/packages/assets/icons/tags/categories/fonts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/food.svg b/packages/assets/icons/tags/categories/food.svg
new file mode 100644
index 000000000..c7818efed
--- /dev/null
+++ b/packages/assets/icons/tags/categories/food.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46"></path><path d="M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z"></path><path d="M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/game-mechanics.svg b/packages/assets/icons/tags/categories/game-mechanics.svg
new file mode 100644
index 000000000..90fa6846b
--- /dev/null
+++ b/packages/assets/icons/tags/categories/game-mechanics.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/gui.svg b/packages/assets/icons/tags/categories/gui.svg
new file mode 100644
index 000000000..225b22a6a
--- /dev/null
+++ b/packages/assets/icons/tags/categories/gui.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/high.svg b/packages/assets/icons/tags/categories/high.svg
new file mode 100644
index 000000000..3ef80d1c7
--- /dev/null
+++ b/packages/assets/icons/tags/categories/high.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path><path d="M17 20V8"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/items.svg b/packages/assets/icons/tags/categories/items.svg
new file mode 100644
index 000000000..f5d542f89
--- /dev/null
+++ b/packages/assets/icons/tags/categories/items.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/kitchen-sink.svg b/packages/assets/icons/tags/categories/kitchen-sink.svg
new file mode 100644
index 000000000..a18eed06b
--- /dev/null
+++ b/packages/assets/icons/tags/categories/kitchen-sink.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19.9 14-1.4 4.9c-.3 1-1.1 1.7-2.1 1.7H7.6c-.9 0-1.8-.7-2.1-1.7L4.1 14h15.8zM12 10V4.5M12 4.5c0-1.2.9-2.1 2.1-2.1M14.1 2.4c1.2 0 2.1.9 2.1 2.1M22.2 12c0 .6-.2 1.1-.6 1.4-.4.4-.9.6-1.4.6H3.8c-1.1 0-2-.9-2-2 0-.6.2-1.1.6-1.4.4-.4.9-.6 1.4-.6h16.4c1.1 0 2 .9 2 2z"/></g><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M16.2 7.2h0"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/library.svg b/packages/assets/icons/tags/categories/library.svg
new file mode 100644
index 000000000..f5d542f89
--- /dev/null
+++ b/packages/assets/icons/tags/categories/library.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/lightweight.svg b/packages/assets/icons/tags/categories/lightweight.svg
new file mode 100644
index 000000000..ed0955d89
--- /dev/null
+++ b/packages/assets/icons/tags/categories/lightweight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/locale.svg b/packages/assets/icons/tags/categories/locale.svg
new file mode 100644
index 000000000..706fa2517
--- /dev/null
+++ b/packages/assets/icons/tags/categories/locale.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/low.svg b/packages/assets/icons/tags/categories/low.svg
new file mode 100644
index 000000000..959065958
--- /dev/null
+++ b/packages/assets/icons/tags/categories/low.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h.01"></path><path d="M7 20v-4"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/magic.svg b/packages/assets/icons/tags/categories/magic.svg
new file mode 100644
index 000000000..75ca8b098
--- /dev/null
+++ b/packages/assets/icons/tags/categories/magic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4V2"></path><path d="M15 16v-2"></path><path d="M8 9h2"></path><path d="M20 9h2"></path><path d="M17.8 11.8 19 13"></path><path d="M15 9h0"></path><path d="M17.8 6.2 19 5"></path><path d="m3 21 9-9"></path><path d="M12.2 6.2 11 5"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/management.svg b/packages/assets/icons/tags/categories/management.svg
new file mode 100644
index 000000000..dd8c00230
--- /dev/null
+++ b/packages/assets/icons/tags/categories/management.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/medium.svg b/packages/assets/icons/tags/categories/medium.svg
new file mode 100644
index 000000000..0b47d92d3
--- /dev/null
+++ b/packages/assets/icons/tags/categories/medium.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/minigame.svg b/packages/assets/icons/tags/categories/minigame.svg
new file mode 100644
index 000000000..c59061613
--- /dev/null
+++ b/packages/assets/icons/tags/categories/minigame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/mobs.svg b/packages/assets/icons/tags/categories/mobs.svg
new file mode 100644
index 000000000..50c784be1
--- /dev/null
+++ b/packages/assets/icons/tags/categories/mobs.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" d="M3 3h18v18H3z"/>
+  <path stroke="currentColor" fill="currentColor" d="M6 6h4v4H6zm8 0h4v4h-4zm-4 4h4v2h2v6h-2v-2h-4v2H8v-6h2v-2Z"/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/modded.svg b/packages/assets/icons/tags/categories/modded.svg
new file mode 100644
index 000000000..03f72b5d9
--- /dev/null
+++ b/packages/assets/icons/tags/categories/modded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
diff --git a/packages/assets/icons/tags/categories/models.svg b/packages/assets/icons/tags/categories/models.svg
new file mode 100644
index 000000000..d0268bd6a
--- /dev/null
+++ b/packages/assets/icons/tags/categories/models.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/multiplayer.svg b/packages/assets/icons/tags/categories/multiplayer.svg
new file mode 100644
index 000000000..235d675f6
--- /dev/null
+++ b/packages/assets/icons/tags/categories/multiplayer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/optimization.svg b/packages/assets/icons/tags/categories/optimization.svg
new file mode 100644
index 000000000..7b404cd1b
--- /dev/null
+++ b/packages/assets/icons/tags/categories/optimization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/path-tracing.svg b/packages/assets/icons/tags/categories/path-tracing.svg
new file mode 100644
index 000000000..6131f26a4
--- /dev/null
+++ b/packages/assets/icons/tags/categories/path-tracing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.977 19.17h16.222" style="" transform="translate(-.189 -.328) scale(1.09932)"/><path d="M3.889 3.259 12 19.17l5.749-11.277" style="" transform="translate(-1.192 -.328) scale(1.09932)"/><path d="M9.865 6.192h4.623v4.623" style="" transform="scale(1.09931) rotate(-18 20.008 .02)"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/pbr.svg b/packages/assets/icons/tags/categories/pbr.svg
new file mode 100644
index 000000000..2dd432e08
--- /dev/null
+++ b/packages/assets/icons/tags/categories/pbr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/potato.svg b/packages/assets/icons/tags/categories/potato.svg
new file mode 100644
index 000000000..e041f3572
--- /dev/null
+++ b/packages/assets/icons/tags/categories/potato.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" stroke="currentColor"><g><g><path d="M218.913,116.8c-6.4-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8c3.2-3.2,4.8-6.4,4.8-11.2S222.113,120,218.913,116.8z"/></g></g><g><g><path d="M170.913,372.8c-6.4-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8c3.2-3.2,4.8-8,4.8-11.2C175.713,379.2,174.113,376,170.913,372.8z"/></g></g><g><g><path d="M250.913,228.8c-4.8-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8c3.2-3.2,4.8-8,4.8-11.2C255.713,235.2,254.113,232,250.913,228.8z"/></g></g><g><g><path d="M410.913,212.8c-4.8-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8c3.2-3.2,4.8-8,4.8-11.2C415.713,219.2,414.113,216,410.913,212.8z"/></g></g><g><g><path d="M346.913,308.8c-4.8-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8c3.2-3.2,4.8-8,4.8-11.2C351.713,315.2,350.113,312,346.913,308.8z"/></g></g><g><g><path d="M346.913,100.8c-6.4-6.4-16-6.4-22.4,0c-3.2,3.2-4.8,6.4-4.8,11.2s1.6,8,4.8,11.2c3.2,3.2,8,4.8,11.2,4.8    c4.8,0,8-1.6,11.2-4.8s4.8-6.4,4.8-11.2S350.113,104,346.913,100.8z"/></g></g><g><g><path d="M503.713,142.4c-28.8-136-179.2-142.4-208-142.4c-4.8,0-9.6,0-16,0c-67.2,1.6-132.8,36.8-187.2,97.6    c-60.8,67.2-96,155.2-91.2,227.2c8,126.4,70.4,187.2,192,187.2c115.2,0,201.6-33.6,256-100.8    C513.313,331.2,519.713,219.2,503.713,142.4z M423.713,392c-48,59.2-126.4,89.6-230.4,89.6s-152-48-160-158.4    c-4.8-64,28.8-144,83.2-203.2c48-54.4,107.2-84.8,164.8-88c4.8,0,9.6,0,14.4,0c140.8,0,171.2,89.6,176,116.8    C486.113,219.2,481.313,320,423.713,392z"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/quests.svg b/packages/assets/icons/tags/categories/quests.svg
new file mode 100644
index 000000000..58c568815
--- /dev/null
+++ b/packages/assets/icons/tags/categories/quests.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="6"></rect><rect x="16" y="16" width="6" height="6"></rect><rect x="2" y="16" width="6" height="6"></rect><path d="M12 8v4m0 0H5v4m7-4h7v4"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/realistic.svg b/packages/assets/icons/tags/categories/realistic.svg
new file mode 100644
index 000000000..b9b3dd929
--- /dev/null
+++ b/packages/assets/icons/tags/categories/realistic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/reflections.svg b/packages/assets/icons/tags/categories/reflections.svg
new file mode 100644
index 000000000..d29116425
--- /dev/null
+++ b/packages/assets/icons/tags/categories/reflections.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style=""><path d="m3 7 5 5-5 5V7"/><path d="m21 7-5 5 5 5V7"/><path d="M12 20v2"/><path d="M12 14v2"/><path d="M12 8v2"/><path d="M12 2v2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/screenshot.svg b/packages/assets/icons/tags/categories/screenshot.svg
new file mode 100644
index 000000000..0143d7467
--- /dev/null
+++ b/packages/assets/icons/tags/categories/screenshot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/semi-realistic.svg b/packages/assets/icons/tags/categories/semi-realistic.svg
new file mode 100644
index 000000000..6e0d7f89c
--- /dev/null
+++ b/packages/assets/icons/tags/categories/semi-realistic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/shadows.svg b/packages/assets/icons/tags/categories/shadows.svg
new file mode 100644
index 000000000..b9da25ebd
--- /dev/null
+++ b/packages/assets/icons/tags/categories/shadows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 3 4 8 5-5 5 15H2L8 3z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/simplistic.svg b/packages/assets/icons/tags/categories/simplistic.svg
new file mode 100644
index 000000000..23a69aaee
--- /dev/null
+++ b/packages/assets/icons/tags/categories/simplistic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/social.svg b/packages/assets/icons/tags/categories/social.svg
new file mode 100644
index 000000000..abe2b55a3
--- /dev/null
+++ b/packages/assets/icons/tags/categories/social.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/storage.svg b/packages/assets/icons/tags/categories/storage.svg
new file mode 100644
index 000000000..bc848549a
--- /dev/null
+++ b/packages/assets/icons/tags/categories/storage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/technology.svg b/packages/assets/icons/tags/categories/technology.svg
new file mode 100644
index 000000000..5bc5aa458
--- /dev/null
+++ b/packages/assets/icons/tags/categories/technology.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" y1="16" x2="6.01" y2="16"/><line x1="10" y1="16" x2="10.01" y2="16"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/themed.svg b/packages/assets/icons/tags/categories/themed.svg
new file mode 100644
index 000000000..27624513e
--- /dev/null
+++ b/packages/assets/icons/tags/categories/themed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/transportation.svg b/packages/assets/icons/tags/categories/transportation.svg
new file mode 100644
index 000000000..21e56c36d
--- /dev/null
+++ b/packages/assets/icons/tags/categories/transportation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/tweaks.svg b/packages/assets/icons/tags/categories/tweaks.svg
new file mode 100644
index 000000000..31d73bee9
--- /dev/null
+++ b/packages/assets/icons/tags/categories/tweaks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/utility.svg b/packages/assets/icons/tags/categories/utility.svg
new file mode 100644
index 000000000..779805880
--- /dev/null
+++ b/packages/assets/icons/tags/categories/utility.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/vanilla-like.svg b/packages/assets/icons/tags/categories/vanilla-like.svg
new file mode 100644
index 000000000..215f94c74
--- /dev/null
+++ b/packages/assets/icons/tags/categories/vanilla-like.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="" data-darkreader-inline-stroke=""><path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11"/><path d="M17 7A5 5 0 0 0 7 7"/><path d="M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/categories/worldgen.svg b/packages/assets/icons/tags/categories/worldgen.svg
new file mode 100644
index 000000000..d079aa5ad
--- /dev/null
+++ b/packages/assets/icons/tags/categories/worldgen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/babric.svg b/packages/assets/icons/tags/loaders/babric.svg
new file mode 100644
index 000000000..6f042e05e
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/babric.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.35 5.89001L12.34 5.90001C10.59 7.37001 5.67003 11.13 2.64003 13.76C2.09003 14.23 1.97003 15.38 2.44003 15.93C4.24003 17.97 6.24003 20.2 6.89003 20.97C7.52003 21.69 8.91003 22.39 10 21.49C11.8 20 16.78 16.01 19.62 13.7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.59 13.66C19.34 13.33 18.02 11.53 19.05 10.25C19.52 9.63998 20.61 9.20998 21.3 9.98998C21.87 10.62 22.23 11.55 21.01 12.56C20.66 12.85 20.18 13.24 19.62 13.7C19.61 13.69 19.6 13.67 19.59 13.66Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.63 13.71L19.62 13.7C19.61 13.69 19.6 13.67 19.59 13.66C18.65 12.59 14.44 8.13999 12.34 5.89999C11.76 5.28999 11.33 4.83999 11.18 4.66999C10.91 4.36999 9.91004 3.64999 11.63 2.46999C12.98 1.54999 13.48 1.97999 13.88 2.37999L21.3 9.97999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6352 14.7743C10.7992 14.517 10.8811 14.2194 10.8811 13.8978C10.8811 12 9.2582 12 8.06967 12C7.61886 12 7.25 12.3538 7.25 12.8041V17.1948C7.25 17.637 7.61886 17.9989 8.06967 17.9989C8.1552 17.9965 9.54283 18.0068 9.57789 17.9909C10.3894 17.9668 11.25 17.6531 11.25 15.9886C11.25 15.7232 11.1762 15.1925 10.6352 14.7743ZM9.61886 13.8978C9.61886 14.0506 9.53686 14.1953 9.40574 14.2918H9.39753C9.29097 14.3722 9.15164 14.4205 9.00411 14.4205H8.47951V13.3831C8.56539 13.3831 8.92616 13.3832 9.00411 13.3831C9.34015 13.3831 9.61886 13.6163 9.61886 13.8978ZM9.29918 16.7927H8.47951V15.7554C8.68401 15.7555 9.09478 15.7553 9.29918 15.7554C9.71537 15.7517 10.0548 16.1404 9.85655 16.4871C9.7664 16.6641 9.54507 16.7927 9.29918 16.7927Z" fill="currentColor" stroke="currentColor" stroke-width="0.25"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/bta-babric.svg b/packages/assets/icons/tags/loaders/bta-babric.svg
new file mode 100644
index 000000000..9f869e2ac
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/bta-babric.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.35 5.89001L12.34 5.90001C10.59 7.37001 5.67003 11.13 2.64003 13.76C2.09003 14.23 1.97003 15.38 2.44003 15.93C4.24003 17.97 6.24003 20.2 6.89003 20.97C7.52003 21.69 8.91003 22.39 10 21.49C11.8 20 16.78 16.01 19.62 13.7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.59 13.66C19.34 13.33 18.02 11.53 19.05 10.25C19.52 9.63998 20.61 9.20998 21.3 9.98998C21.87 10.62 22.23 11.55 21.01 12.56C20.66 12.85 20.18 13.24 19.62 13.7C19.61 13.69 19.6 13.67 19.59 13.66Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.63 13.71L19.62 13.7C19.61 13.69 19.6 13.67 19.59 13.66C18.65 12.59 14.44 8.13999 12.34 5.89999C11.76 5.28999 11.33 4.83999 11.18 4.66999C10.91 4.36999 9.91004 3.64999 11.63 2.46999C12.98 1.54999 13.48 1.97999 13.88 2.37999L21.3 9.97999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6352 14.7743C10.7992 14.517 10.8811 14.2194 10.8811 13.8978C10.8811 12 9.2582 12 8.06967 12C7.61886 12 7.25 12.3538 7.25 12.8041V17.1948C7.25 17.637 7.61886 17.9989 8.06967 17.9989C8.1552 17.9965 9.54283 18.0068 9.57789 17.9909C10.3894 17.9668 11.25 17.6531 11.25 15.9886C11.25 15.7232 11.1762 15.1925 10.6352 14.7743ZM9.61886 13.8978C9.61886 14.0506 9.53686 14.1953 9.40574 14.2918H9.39753C9.29097 14.3722 9.15164 14.4205 9.00411 14.4205H8.47951V13.3831C8.56539 13.3831 8.92616 13.3832 9.00411 13.3831C9.34015 13.3831 9.61886 13.6163 9.61886 13.8978ZM9.29918 16.7927H8.47951V15.7554C8.68401 15.7555 9.09478 15.7553 9.29918 15.7554C9.71537 15.7517 10.0548 16.1404 9.85655 16.4871C9.7664 16.6641 9.54507 16.7927 9.29918 16.7927Z" fill="currentColor" stroke="currentColor" stroke-width="0.25"/><path d="M13.2991 11V14" stroke="currentColor" stroke-linecap="round"/><path d="M12 13.25L14.5981 11.75" stroke="currentColor" stroke-linecap="round"/><path d="M14.5981 13.25L12.0001 11.75" stroke="currentColor" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/bukkit.svg b/packages/assets/icons/tags/loaders/bukkit.svg
new file mode 100644
index 000000000..bcdb498ba
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/bukkit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292 319" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" stroke="currentColor"><g transform="matrix(1,0,0,1,0,-5)"><path d="M12,109.5L12,155L34.5,224L57.5,224L57.5,271L81,294L160,294L160,172L259.087,172L265,155L265,109.5M12,109.5L12,64L34.5,64L34.5,41L81,17L195.5,17L241,41L241,64L265,64L265,109.5M12,109.5L81,109.5L81,132L195.5,132L195.5,109.5L265,109.5M264.087,204L264.087,244M207.5,272L207.5,312M250,272L250,312L280,312L280,272L250,272ZM192.5,204L192.5,244L222.5,244L222.5,204L192.5,204Z" style="fill:none;fill-rule:nonzero;stroke-width:24px;"/></g></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/bungeecord.svg b/packages/assets/icons/tags/loaders/bungeecord.svg
new file mode 100644
index 000000000..7571f9c1c
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/bungeecord.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
+    <rect id="Bungeecord" x="-0" y="0" width="24" height="24" style="fill:none;"/>
+    <path d="M3.778,19.778C3.778,21.004 4.774,22 6,22C7.226,22 8.222,21.004 8.222,19.778L8.222,16.444C8.222,15.218 7.226,14.222 6,14.222L6,7.556C6,5.727 7.171,4.222 9,4.222C10.829,4.222 12,5.727 12,7.556L12,16.444" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M7,15L6,13L5,15L7,15" style="fill:none;stroke:currentColor;stroke-width:2px;stroke-miterlimit:1.5;"/>
+    <path d="M20.222,4.444C20.222,3.218 19.226,2.222 18,2.222C16.774,2.222 15.778,3.218 15.778,4.444L15.778,7.778C15.778,9.004 16.774,10 18,10L18,16.667C18,18.495 16.829,20 15,20C13.171,20 12,18.495 12,16.667L12,7.778" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:2px;"/>
+    <path d="M17,9.222L18,11.222L19,9.222L17,9.222" style="fill:none;stroke:currentColor;stroke-width:2px;stroke-miterlimit:1.5;"/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/canvas.svg b/packages/assets/icons/tags/loaders/canvas.svg
new file mode 100644
index 000000000..b8a0aaf7d
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/canvas.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1.305 1.305 12 12 22.695 22.695 12 12 1.305Z" style=""/><path d="M12 5.547 5.547 12 12 18.453 18.453 12 12 5.547Z" style=""/><path d="M12 9.79 9.79 12 12 14.21 14.21 12 12 9.79Z" style=""/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/datapack.svg b/packages/assets/icons/tags/loaders/datapack.svg
new file mode 100644
index 000000000..6092817a9
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/datapack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/fabric.svg b/packages/assets/icons/tags/loaders/fabric.svg
new file mode 100644
index 000000000..3eac47583
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/fabric.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" clip-rule="evenodd" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="none" stroke="currentColor" stroke-width="23" d="m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8" transform="matrix(.08671 0 0 .0867 -49.8 -56)"/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/folia.svg b/packages/assets/icons/tags/loaders/folia.svg
new file mode 100644
index 000000000..bec1f0b54
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/folia.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/forge.svg b/packages/assets/icons/tags/loaders/forge.svg
new file mode 100644
index 000000000..4df14cca5
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/forge.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"></path>
+  <path fill="none" stroke="currentColor" stroke-width="2" d="M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/geyser.svg b/packages/assets/icons/tags/loaders/geyser.svg
new file mode 100644
index 000000000..cccf46f27
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/geyser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5" viewBox="0 0 24 24"><path d="M-29.359 21.58s.347-4.964-2.603-9.503l3.419 1.511 2.032-4.165s.407 5.006.717 6.82l4.201-2.269s-3.582 5.066-3.339 7.726" style="fill:none;stroke:currentColor;stroke-width:1.81px" transform="matrix(1.04036 0 0 1.1631 40.307 -2.368)"/><path d="M-28.662 13.511s-.605-4.431-3.127-5.772c-.957-.256-1.802 1.129-2.839.953-.783-.134-.92-1.322.118-2.625 1.253-1.572 3.754-3.239 7.51-3.133s7.899 2.025 8.029 4.378c-.139 1.765-2.05.754-2.05.754s-2.885-1.535-4.801 7.697" style="fill:none;stroke:currentColor;stroke-width:1.81px" transform="matrix(1.04036 0 0 1.1631 40.432 -2.278)"/><path d="M-33.825 10.737s-1.006.602-1.867 2.089" style="fill:none;stroke:currentColor;stroke-width:1.81px" transform="matrix(1.0317 -.13393 .14973 1.15343 36.882 -5.8)"/><path d="M-21.195 10.385s1.378.38 1.947 1.615" style="fill:none;stroke:currentColor;stroke-width:1.81px" transform="matrix(1.04036 0 0 1.1631 41.36 -1.513)"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/iris.svg b/packages/assets/icons/tags/loaders/iris.svg
new file mode 100644
index 000000000..4068fa1ef
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/iris.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="square" clip-rule="evenodd" viewBox="0 0 596 596">
+  <path fill="none" stroke="#000" stroke-width="48.862205499999995" d="m553.978 297.989-75.277 74.781V478.16l-106.207.322-74.881 74.509-75.178-74.906h-105.91l-.322-105.71-74.881-74.534 75.203-75.302V117.124l106.232-.322 74.856-74.509 75.178 74.906h105.91l.322 105.735 74.88 74.51"/>
+	<path fill="none" stroke="#000" stroke-width="48.862205499999995" d="m419.893 297.79-35.915 35.667v50.251l-50.648.174-35.692 35.543-35.866-35.741h-50.499l-.149-50.425-35.716-35.543 35.865-35.94v-50.251l50.648-.174 35.717-35.518 35.865 35.742h50.475l.148 50.4 35.717 35.543"/>
+</svg>
diff --git a/packages/assets/icons/tags/loaders/java-agent.svg b/packages/assets/icons/tags/loaders/java-agent.svg
new file mode 100644
index 000000000..e039ccf1b
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/java-agent.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 2L22 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 7L20 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 9L8.69995 19.3C7.69995 20.3 6.19995 20.3 5.29995 19.3L4.69995 18.7C3.69995 17.7 3.69995 16.2 4.69995 15.3L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 11L13 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 19L2 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 4L20 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/legacy-fabric.svg b/packages/assets/icons/tags/loaders/legacy-fabric.svg
new file mode 100644
index 000000000..54bfc94da
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/legacy-fabric.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6351_12952)"><path d="M21.3022 9.9787L13.8798 2.38379C13.4809 1.9763 12.978 1.55147 11.634 2.47049C9.90847 3.64961 10.9056 4.36921 11.1831 4.67266C11.8941 5.45296 18.4754 12.389 19.6113 13.6895C19.8281 13.9322 17.8511 11.7387 19.0477 10.2475C19.5159 9.64057 20.6085 9.20707 21.3022 9.98737C21.8658 10.6203 22.23 11.548 21.0074 12.5624C18.8656 14.331 12.1629 19.7064 9.99518 21.4925C8.91131 22.3855 7.52395 21.6919 6.89096 20.9723C6.24064 20.2006 4.23764 17.9724 2.44274 15.9263C1.96584 15.3801 2.08723 14.227 2.64218 13.7588C5.67703 11.1318 10.6108 7.36036 12.345 5.88646" stroke="currentColor" stroke-width="1.99422" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 13V17H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 13V17H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_6351_12952"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/liteloader.svg b/packages/assets/icons/tags/loaders/liteloader.svg
new file mode 100644
index 000000000..fa63d0aad
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/liteloader.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none"/><path d="m3.924 21.537s3.561-1.111 8.076-6.365c2.544-2.959 2.311-1.986 4-4.172" fill="none" stroke="currentColor" stroke-width="2px"/><path d="m7.778 19s1.208-0.48 4.222 0c2.283 0.364 6.037-4.602 6.825-6.702 1.939-5.165 0.894-10.431 0.894-10.431s-4.277 4.936-6.855 7.133c-5.105 4.352-6.509 11-6.509 11" fill="none" stroke="currentColor" stroke-width="2px"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/minecraft.svg b/packages/assets/icons/tags/loaders/minecraft.svg
new file mode 100644
index 000000000..6092817a9
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/minecraft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/modloader.svg b/packages/assets/icons/tags/loaders/modloader.svg
new file mode 100644
index 000000000..5d35f33f4
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/modloader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1.4 18V6h3.8v1.5h1.5V9h1.5V7.5h1.5V6h3.8v12H9.7v-5.3H9v1.5H6v-1.5h-.8V18H1.4zm12.1 0V6h3.8v9h5.3v3h-9.1z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/mrpack.svg b/packages/assets/icons/tags/loaders/mrpack.svg
new file mode 100644
index 000000000..dcd3e1ba1
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/mrpack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/neoforge.svg b/packages/assets/icons/tags/loaders/neoforge.svg
new file mode 100644
index 000000000..afd5420fb
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/neoforge.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m12 19.2v2m0-2v2"/><path d="m8.4 1.3c0.5 1.5 0.7 3 0.1 4.6-0.2 0.5-0.9 1.5-1.6 1.5m8.7-6.1c-0.5 1.5-0.7 3-0.1 4.6 0.2 0.6 0.9 1.5 1.6 1.5"/><path d="m3.6 15.8h-1.7m18.5 0h1.7"/><path d="m3.2 12.1h-1.7m19.3 0h1.8"/><path d="m8.1 12.7v1.6m7.8-1.6v1.6"/><path d="m10.8 18h1.2m0 1.2-1.2-1.2m2.4 0h-1.2m0 1.2 1.2-1.2"/><path d="m4 9.7c-0.5 1.2-0.8 2.4-0.8 3.7 0 3.1 2.9 6.3 5.3 8.2 0.9 0.7 2.2 1.1 3.4 1.1m0.1-17.8c-1.1 0-2.1 0.2-3.2 0.7m11.2 4.1c0.5 1.2 0.8 2.4 0.8 3.7 0 3.1-2.9 6.3-5.3 8.2-0.9 0.7-2.2 1.1-3.4 1.1m-0.1-17.8c1.1 0 2.1 0.2 3.2 0.7"/><path d="m4 9.7c-0.2-1.8-0.3-3.7 0.5-5.5s2.2-2.6 3.9-3m11.6 8.5c0.2-1.9 0.3-3.7-0.5-5.5s-2.2-2.6-3.9-3"/><path d="m12 21.2-2.4 0.4m2.4-0.4 2.4 0.4"/></g></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/nilloader.svg b/packages/assets/icons/tags/loaders/nilloader.svg
new file mode 100644
index 000000000..b2090286a
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/nilloader.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="12" cy="11" rx="5" ry="8" stroke="currentColor" stroke-width="2"/><path d="M16.563 2.72485L6.75577 19.7114L12.3865 22.9624" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/optifine.svg b/packages/assets/icons/tags/loaders/optifine.svg
new file mode 100644
index 000000000..64f4d1356
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/optifine.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M10.985 9.205c0-1.38-1.121-2.5-2.5-2.5H7.156a2.5 2.5 0 0 0-2.5 2.5v5.59a2.5 2.5 0 0 0 2.5 2.5h1.329c1.379 0 2.5-1.12 2.5-2.5v-5.59ZM14.793 17.295v-9.34a1.252 1.252 0 0 1 1.25-1.25h3.301M18.007 10.997h-3.214" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/ornithe.svg b/packages/assets/icons/tags/loaders/ornithe.svg
new file mode 100644
index 000000000..0dd571dd5
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/ornithe.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 7H7.99" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.6 18H12C9.87827 18 7.84344 17.1572 6.34315 15.6569C4.84285 14.1566 4 12.1217 4 10V7.00001C3.99775 6.14792 4.26766 5.31737 4.7704 4.6294C5.27315 3.94142 5.98245 3.43197 6.79496 3.17527C7.60747 2.91857 8.48072 2.92804 9.28746 3.2023C10.0942 3.47657 10.7923 4.00129 11.28 4.70001L22 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7L2 7.5L4 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 18V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 17.75V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 18C15.7669 18 14.5637 17.62 13.5543 16.9117C12.5448 16.2035 11.7781 15.2014 11.3584 14.0419C10.9388 12.8824 10.8866 11.6218 11.2089 10.4315C11.5313 9.24128 12.2126 8.17927 13.16 7.39001" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/paper.svg b/packages/assets/icons/tags/loaders/paper.svg
new file mode 100644
index 000000000..dc3f02484
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/paper.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" d="m12 18 6 2 3-17L2 14l6 2"/>
+  <path stroke="currentColor" stroke-width="2" d="m9 21-1-5 4 2-3 3Z"/>
+  <path fill="currentColor" d="m12 18-4-2 10-9-6 11Z"/>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/purpur.svg b/packages/assets/icons/tags/loaders/purpur.svg
new file mode 100644
index 000000000..f43f34b72
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/purpur.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 24 24">
+  <defs>
+    <path id="purpur" fill="none" stroke="currentColor" stroke-width="1.68" d="m264 41.95 8-4v8l-8 4v-8Z"></path>
+  </defs>
+  <path fill="none" d="M0 0h24v24H0z"></path>
+  <path fill="none" stroke="currentColor" stroke-width="1.77" d="m264 29.95-8 4 8 4.42 8-4.42-8-4Z" transform="matrix(1.125 0 0 1.1372 -285 -31.69)"></path>
+  <path fill="none" stroke="currentColor" stroke-width="1.77" d="m272 38.37-8 4.42-8-4.42" transform="matrix(1.125 0 0 1.1372 -285 -31.69)"></path>
+  <path fill="none" stroke="currentColor" stroke-width="1.77" d="m260 31.95 8 4.21V45" transform="matrix(1.125 0 0 1.1372 -285 -31.69)"></path>
+  <path fill="none" stroke="currentColor" stroke-width="1.77" d="M260 45v-8.84l8-4.21" transform="matrix(1.125 0 0 1.1372 -285 -31.69)"></path>
+  <use xlink:href="#purpur" stroke-width="1.68" transform="matrix(1.125 0 0 1.2569 -285 -40.78)"></use>
+  <use xlink:href="#purpur" stroke-width="1.68" transform="matrix(-1.125 0 0 1.2569 309 -40.78)"></use>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/quilt.svg b/packages/assets/icons/tags/loaders/quilt.svg
new file mode 100644
index 000000000..a09e57598
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/quilt.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 24 24">
+  <defs>
+    <path id="quilt" fill="none" stroke="currentColor" stroke-width="65.6" d="M442.5 233.9c0-6.4-5.2-11.6-11.6-11.6h-197c-6.4 0-11.6 5.2-11.6 11.6v197c0 6.4 5.2 11.6 11.6 11.6h197c6.4 0 11.6-5.2 11.6-11.7v-197Z"></path>
+  </defs>
+  <path fill="none" d="M0 0h24v24H0z"></path>
+  <use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 -3.2 -3.2)"></use>
+  <use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 -3.2 7)"></use>
+  <use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 6.9 -3.2)"></use>
+  <path fill="none" stroke="currentColor" stroke-width="70.4" d="M442.5 234.8c0-7-5.6-12.5-12.5-12.5H234.7c-6.8 0-12.4 5.6-12.4 12.5V430c0 6.9 5.6 12.5 12.4 12.5H430c6.9 0 12.5-5.6 12.5-12.5V234.8Z" transform="rotate(45 3.5 24) scale(.02843 .02835)"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/rift.svg b/packages/assets/icons/tags/loaders/rift.svg
new file mode 100644
index 000000000..8807b70e7
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/rift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2.7 6.6v10.8l9.3 5.3 9.3-5.3V6.6L12 1.3zm0 0L12 12m9.3-5.4L12 12m0 10.7V12"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/spigot.svg b/packages/assets/icons/tags/loaders/spigot.svg
new file mode 100644
index 000000000..bc6b5065a
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/spigot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332 284" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;fill:none;fill-rule:nonzero;stroke-width:24px;" stroke="currentColor"><path d="M147.5,27l27,-15l27.5,15l66.5,0l0,33.5l-73,-0.912l0,45.5l26,-0.088l0,31.5l-12.5,0l0,15.5l16,21.5l35,0l0,-21.5l35.5,0l0,21.5l24.5,0l0,55.5l-24.5,0l0,17l-35.5,0l0,-27l-35,0l-55.5,14.5l-67.5,-14.5l-15,14.5l18,12.5l-3,24.5l-41.5,1.5l-48.5,-19.5l6,-19l24.5,-4.5l16,-41l79,-36l-7,-15.5l0,-31.5l23.5,0l0,-45.5l-73.5,0l0,-32.5l67,0Z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/sponge.svg b/packages/assets/icons/tags/loaders/sponge.svg
new file mode 100644
index 000000000..ec782f2c0
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/sponge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 313" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;fill:none;fill-rule:nonzero;stroke-width:24px;" stroke="currentColor"><path d="M84.299,35.5c-5.547,-13.776 -19.037,-23.5 -34.799,-23.5c-20.711,0 -37.5,16.789 -37.5,37.5c-0,20.711 16.789,37.5 37.5,37.5c20.711,0 37.5,-16.789 37.5,-37.5c0,-4.949 -0.959,-9.674 -2.701,-14Zm0,0l44.701,-8.5l28,65m0,0l-99,20l-18,47.5l15.5,37l-25,32.5l0,72l222.5,0l2.5,-72l-33.5,-117l-65,-20Zm-60,65l0,15m94,-13.5l0,13.5m-67.5,45l46,0l-12.5,50.5l-14.5,0l-19,-50.5Z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/vanilla.svg b/packages/assets/icons/tags/loaders/vanilla.svg
new file mode 100644
index 000000000..6092817a9
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/vanilla.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" /></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/velocity.svg b/packages/assets/icons/tags/loaders/velocity.svg
new file mode 100644
index 000000000..39ff2854b
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/velocity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" fill="currentColor"><path d="M236.25 232.55l-54.08-73.79a11.86 11.86 0 00-11.91-4.62L84 171.57a11.88 11.88 0 00-8 5.88l-42.64 77.07a11.84 11.84 0 00.81 12.75l54.21 74a11.86 11.86 0 0011.91 4.62l86-17.37a11.85 11.85 0 008-5.89l42.78-77.3a11.86 11.86 0 00-.82-12.78zm-59.45 74.21a9.57 9.57 0 01-13.39-2.06l-31-42.24a16 16 0 00-16-6.21l-52.58 10.63a9.58 9.58 0 01-11.29-7.49A9.58 9.58 0 0160 248.1l57-11.52a16 16 0 0010.81-7.92L156.42 177a9.58 9.58 0 0113-3.75 9.58 9.58 0 013.75 13L146.81 234a16 16 0 001.09 17.16l31 42.23a9.58 9.58 0 01-2.1 13.37z"/><circle cx="416.44" cy="236.11" r="9.83"/><path d="M458.29 265.6H280.52a9.83 9.83 0 110-19.66h106.22a9.84 9.84 0 000-19.67h-70.2a9.83 9.83 0 110-19.66H422.9a9.84 9.84 0 000-19.67H202.83l33.42 45.61a11.86 11.86 0 01.81 12.75l-42.78 77.3a11.75 11.75 0 01-1.4 2h212.29a9.83 9.83 0 100-19.66h-53.53a9.84 9.84 0 110-19.67h106.65a9.84 9.84 0 100-19.67z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/tags/loaders/waterfall.svg b/packages/assets/icons/tags/loaders/waterfall.svg
new file mode 100644
index 000000000..8a49eb594
--- /dev/null
+++ b/packages/assets/icons/tags/loaders/waterfall.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index e16578bd3..0bf8d6ecf 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -64,6 +64,9 @@ import _YouTubeIcon from './external/youtube.svg?component'
 import _YouTubeGaming from './external/youtubegaming.svg?component'
 import _YouTubeShortsIcon from './external/youtubeshorts.svg?component'
 import _EmptyIllustration from './illustrations/empty.svg?component'
+// Tag icon helpers - import maps from generated-icons
+import type { IconComponent } from './generated-icons'
+import { categoryIconMap, loaderIconMap } from './generated-icons'
 
 export const ModrinthIcon = _ModrinthIcon
 export const BrowserWindowSuccessIllustration = _BrowserWindowSuccessIllustration
@@ -124,3 +127,16 @@ export { default as ClassicPlayerModel } from './models/classic-player.gltf?url'
 export { default as SlimPlayerModel } from './models/slim-player.gltf?url'
 
 export const EmptyIllustration = _EmptyIllustration
+
+export function getCategoryIcon(categoryName: string): IconComponent | undefined {
+	return categoryIconMap[categoryName.toLowerCase()]
+}
+
+export function getLoaderIcon(loaderName: string): IconComponent | undefined {
+	return loaderIconMap[loaderName.toLowerCase()]
+}
+
+// will try loader first, then category
+export function getTagIcon(tagName: string): IconComponent | undefined {
+	return getLoaderIcon(tagName) ?? getCategoryIcon(tagName)
+}
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 69b4cd781..ce82f5736 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -174,7 +174,6 @@
 	--color-platform-sponge: #c49528;
 	--color-platform-ornithe: #6097ca;
 	--color-platform-bta-babric: #5ba938;
-	--color-platform-legacy-fabric: #6879f6;
 	--color-platform-nilloader: #dd5088;
 
 	--hover-brightness: 0.9;
@@ -385,7 +384,6 @@ html {
 	--color-platform-sponge: #f9e580;
 	--color-platform-ornithe: #87c7ff;
 	--color-platform-bta-babric: #72cc4a;
-	--color-platform-legacy-fabric: #6879f6;
 	--color-platform-nilloader: #f45e9a;
 
 	--hover-brightness: 1.25;
diff --git a/packages/ui/src/components/base/FormattedTag.vue b/packages/ui/src/components/base/FormattedTag.vue
new file mode 100644
index 000000000..87d9fb7ab
--- /dev/null
+++ b/packages/ui/src/components/base/FormattedTag.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useVIntl } from '../../composables'
+import { getTagMessageOrDefault } from '../../utils/tag-messages.ts'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	tag: string
+	enforceType?: 'loader' | 'category'
+}>()
+
+const message = computed(() => getTagMessageOrDefault(props.tag, props.enforceType))
+</script>
+
+<template>
+	{{ typeof message === 'string' ? message : formatMessage(message) }}
+</template>
diff --git a/packages/ui/src/components/base/ProjectCard.vue b/packages/ui/src/components/base/ProjectCard.vue
index a2dcddd0a..201a1b46a 100644
--- a/packages/ui/src/components/base/ProjectCard.vue
+++ b/packages/ui/src/components/base/ProjectCard.vue
@@ -69,14 +69,13 @@
 
 <script setup>
 import { CalendarIcon, DownloadIcon, EditIcon, HeartIcon } from '@modrinth/assets'
+import { Avatar, Categories } from '@modrinth/ui'
 import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
 import { computed } from 'vue'
 
 import { useRelativeTime } from '../../composables'
-import Categories from '../search/Categories.vue'
-import Avatar from './Avatar.vue'
 import EnvironmentIndicator from './EnvironmentIndicator.vue'
 import Badge from './SimpleBadge.vue'
 
diff --git a/packages/ui/src/components/base/TagIcon.vue b/packages/ui/src/components/base/TagIcon.vue
new file mode 100644
index 000000000..a23e38833
--- /dev/null
+++ b/packages/ui/src/components/base/TagIcon.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { getCategoryIcon, getLoaderIcon, getTagIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	tag: string
+	enforceType?: 'loader' | 'category'
+}>()
+
+const icon = computed(() =>
+	props.enforceType === 'loader'
+		? getLoaderIcon(props.tag)
+		: props.enforceType === 'category'
+			? getCategoryIcon(props.tag)
+			: getTagIcon(props.tag),
+)
+</script>
+
+<template>
+	<component :is="icon" v-if="icon" />
+</template>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index ebe2c7901..a0f430b1c 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -28,6 +28,7 @@ export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
 export { default as FloatingActionBar } from './FloatingActionBar.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
+export { default as FormattedTag } from './FormattedTag.vue'
 export { default as HeadingLink } from './HeadingLink.vue'
 export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as IconSelect } from './IconSelect.vue'
diff --git a/packages/ui/src/components/project/NewProjectCard.vue b/packages/ui/src/components/project/NewProjectCard.vue
index e7491b084..7e8378bdd 100644
--- a/packages/ui/src/components/project/NewProjectCard.vue
+++ b/packages/ui/src/components/project/NewProjectCard.vue
@@ -20,7 +20,7 @@
 					:key="tag"
 					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
 				>
-					{{ formatCategory(tag) }}
+					<FormattedTag :tag="tag" />
 				</div>
 			</div>
 		</div>
@@ -65,10 +65,10 @@
 
 <script setup>
 import { DownloadIcon, HeartIcon, HistoryIcon, TagsIcon } from '@modrinth/assets'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 
 import { useRelativeTime } from '../../composables'
-import Avatar from '../base/Avatar.vue'
 
 const formatRelativeTime = useRelativeTime()
 
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 64d42ad75..7463028ba 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -42,7 +42,7 @@
 						:key="index"
 						:action="() => router.push(`/${project.project_type}s?f=categories:${category}`)"
 					>
-						{{ formatCategory(category) }}
+						<FormattedTag :tag="category" />
 					</TagItem>
 				</div>
 			</div>
@@ -54,11 +54,12 @@
 </template>
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
-import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
+import { formatNumber, type Project } from '@modrinth/utils'
 import { useRouter } from 'vue-router'
 
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
+import FormattedTag from '../base/FormattedTag.vue'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index f433f3134..769c78281 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -149,9 +149,8 @@
 										:style="`--_color: var(--color-platform-${platform})`"
 										:action="() => versionFilters?.toggleFilter('platform', platform)"
 									>
-										<!-- eslint-disable-next-line vue/no-v-html -->
-										<svg v-html="loaders.find((x) => x.name === platform)?.icon"></svg>
-										{{ formatCategory(platform) }}
+										<component :is="getLoaderIcon(platform)" v-if="getLoaderIcon(platform)" />
+										<FormattedTag :tag="platform" enforce-type="loader" />
 									</TagItem>
 								</div>
 							</div>
@@ -221,11 +220,18 @@
 </template>
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { CalendarIcon, DownloadIcon, PlusIcon, StarIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { CalendarIcon, DownloadIcon, getLoaderIcon, PlusIcon, StarIcon } from '@modrinth/assets'
+import {
+	AutoLink,
+	ButtonStyled,
+	FormattedTag,
+	Pagination,
+	TagItem,
+	VersionChannelIndicator,
+	VersionFilterControl,
+} from '@modrinth/ui'
 import {
 	formatBytes,
-	formatCategory,
 	formatNumber,
 	formatVersionsForDisplay,
 	type GameVersionTag,
@@ -237,9 +243,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { useRelativeTime } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import AutoLink from '../base/AutoLink.vue'
-import TagItem from '../base/TagItem.vue'
-import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
 import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index a213cca65..5ded45287 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -21,8 +21,8 @@
 					:action="() => router.push(`/${project.project_type}s?g=categories:${platform}`)"
 					:style="`--_color: var(--color-platform-${platform})`"
 				>
-					<svg v-html="tags.loaders.find((x) => x.name === platform)?.icon"></svg>
-					{{ formatCategory(platform) }}
+					<component :is="getLoaderIcon(platform)" v-if="getLoaderIcon(platform)" />
+					<FormattedTag :tag="platform" enforce-type="loader" />
 				</TagItem>
 			</div>
 		</section>
@@ -85,9 +85,16 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import {
+	ClientIcon,
+	getLoaderIcon,
+	MonitorSmartphoneIcon,
+	ServerIcon,
+	UserIcon,
+} from '@modrinth/assets'
+import { FormattedTag, TagItem } from '@modrinth/ui'
 import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
-import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
+import { getVersionsToDisplay } from '@modrinth/utils'
 import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -97,7 +104,6 @@ import {
 	type MessageDescriptor,
 	useVIntl,
 } from '../../composables/i18n'
-import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
 const router = useRouter()
diff --git a/packages/ui/src/components/project/ProjectSidebarDetails.vue b/packages/ui/src/components/project/ProjectSidebarDetails.vue
index 4df7b3b30..f6ef5d174 100644
--- a/packages/ui/src/components/project/ProjectSidebarDetails.vue
+++ b/packages/ui/src/components/project/ProjectSidebarDetails.vue
@@ -33,13 +33,13 @@
 			>
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.published, { date: publishedDate }) }}
+					{{ capitalizeString(formatMessage(messages.published, { date: publishedDate })) }}
 				</div>
 			</div>
 			<div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
 				<CalendarIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.created, { date: createdDate }) }}
+					{{ capitalizeString(formatMessage(messages.created, { date: createdDate })) }}
 				</div>
 			</div>
 			<div
@@ -48,7 +48,7 @@
 			>
 				<ScaleIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.submitted, { date: submittedDate }) }}
+					{{ capitalizeString(formatMessage(messages.submitted, { date: submittedDate })) }}
 				</div>
 			</div>
 			<div
@@ -57,7 +57,7 @@
 			>
 				<VersionIcon aria-hidden="true" />
 				<div>
-					{{ formatMessage(messages.updated, { date: updatedDate }) }}
+					{{ capitalizeString(formatMessage(messages.updated, { date: updatedDate })) }}
 				</div>
 			</div>
 		</div>
@@ -65,6 +65,7 @@
 </template>
 <script setup lang="ts">
 import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
+import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
diff --git a/packages/ui/src/components/search/Categories.vue b/packages/ui/src/components/search/Categories.vue
index c8485bc3f..e0aa1e728 100644
--- a/packages/ui/src/components/search/Categories.vue
+++ b/packages/ui/src/components/search/Categories.vue
@@ -1,24 +1,28 @@
 <template>
 	<div class="categories">
 		<slot />
-		<span
-			v-for="category in categories"
-			:key="category.name"
-			v-html="category.icon + formatCategory(category.name)"
-		/>
+		<span v-for="category in categories.filter((x) => !!x)" :key="category">
+			<component :is="getTagIcon(category)" v-if="getTagIcon(category)" />
+			{{ getFormattedMessage(category) }}
+		</span>
 	</div>
 </template>
-<script setup>
-import { formatCategory } from '@modrinth/utils'
+<script setup lang="ts">
+import { getTagIcon } from '@modrinth/assets'
 
-defineProps({
-	categories: {
-		type: Array,
-		default() {
-			return []
-		},
-	},
-})
+import { useVIntl } from '../../composables'
+import { getTagMessageOrDefault } from '../../utils/tag-messages.ts'
+
+const { formatMessage } = useVIntl()
+
+defineProps<{
+	categories: string[]
+}>()
+
+const getFormattedMessage = (tag: string) => {
+	const message = getTagMessageOrDefault(tag)
+	return typeof message === 'string' ? message : formatMessage(message)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/ui/src/components/version/VersionFilterControl.vue b/packages/ui/src/components/version/VersionFilterControl.vue
index a650ee4c5..2476bfcb6 100644
--- a/packages/ui/src/components/version/VersionFilterControl.vue
+++ b/packages/ui/src/components/version/VersionFilterControl.vue
@@ -10,7 +10,7 @@
 				<FilterIcon class="h-5 w-5 text-secondary" />
 				Platform
 				<template #option="{ option }">
-					{{ formatCategory(option) }}
+					<FormattedTag :tag="option" enforce-type="loader" />
 				</template>
 			</ManySelect>
 			<ManySelect
@@ -72,7 +72,7 @@
 				:action="() => toggleFilter('platform', platform)"
 			>
 				<XIcon />
-				{{ formatCategory(platform) }}
+				<FormattedTag :tag="platform" enforce-type="loader" />
 			</TagItem>
 		</div>
 	</div>
@@ -80,13 +80,11 @@
 
 <script setup lang="ts">
 import { FilterIcon, XCircleIcon, XIcon } from '@modrinth/assets'
-import { formatCategory, type GameVersionTag, type Version } from '@modrinth/utils'
+import { Checkbox, FormattedTag, ManySelect, TagItem } from '@modrinth/ui'
+import type { GameVersionTag, Version } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import TagItem from '../base/TagItem.vue'
-import { Checkbox, ManySelect } from '../index'
-
 const props = defineProps<{
 	versions: Version[]
 	gameVersions: GameVersionTag[]
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 70c9e935e..243c087f8 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -1235,6 +1235,291 @@
   "settings.sessions.title": {
     "defaultMessage": "Sessions"
   },
+  "tag.category.128x": {
+    "defaultMessage": "128x"
+  },
+  "tag.category.16x": {
+    "defaultMessage": "16x"
+  },
+  "tag.category.256x": {
+    "defaultMessage": "256x"
+  },
+  "tag.category.32x": {
+    "defaultMessage": "32x"
+  },
+  "tag.category.48x": {
+    "defaultMessage": "48x"
+  },
+  "tag.category.512x+": {
+    "defaultMessage": "512x or higher"
+  },
+  "tag.category.64x": {
+    "defaultMessage": "64x"
+  },
+  "tag.category.8x-": {
+    "defaultMessage": "8x or lower"
+  },
+  "tag.category.adventure": {
+    "defaultMessage": "Adventure"
+  },
+  "tag.category.atmosphere": {
+    "defaultMessage": "Atmosphere"
+  },
+  "tag.category.audio": {
+    "defaultMessage": "Audio"
+  },
+  "tag.category.blocks": {
+    "defaultMessage": "Blocks"
+  },
+  "tag.category.bloom": {
+    "defaultMessage": "Bloom"
+  },
+  "tag.category.cartoon": {
+    "defaultMessage": "Cartoon"
+  },
+  "tag.category.challenging": {
+    "defaultMessage": "Challenging"
+  },
+  "tag.category.colored-lighting": {
+    "defaultMessage": "Colored Lighting"
+  },
+  "tag.category.combat": {
+    "defaultMessage": "Combat"
+  },
+  "tag.category.core-shaders": {
+    "defaultMessage": "Core Shaders"
+  },
+  "tag.category.cursed": {
+    "defaultMessage": "Cursed"
+  },
+  "tag.category.decoration": {
+    "defaultMessage": "Decoration"
+  },
+  "tag.category.economy": {
+    "defaultMessage": "Economy"
+  },
+  "tag.category.entities": {
+    "defaultMessage": "Entities"
+  },
+  "tag.category.environment": {
+    "defaultMessage": "Environment"
+  },
+  "tag.category.equipment": {
+    "defaultMessage": "Equipment"
+  },
+  "tag.category.fantasy": {
+    "defaultMessage": "Fantasy"
+  },
+  "tag.category.foliage": {
+    "defaultMessage": "Foliage"
+  },
+  "tag.category.fonts": {
+    "defaultMessage": "Fonts"
+  },
+  "tag.category.food": {
+    "defaultMessage": "Food"
+  },
+  "tag.category.game-mechanics": {
+    "defaultMessage": "Game Mechanics"
+  },
+  "tag.category.gui": {
+    "defaultMessage": "GUI"
+  },
+  "tag.category.high": {
+    "defaultMessage": "High"
+  },
+  "tag.category.items": {
+    "defaultMessage": "Items"
+  },
+  "tag.category.kitchen-sink": {
+    "defaultMessage": "Kitchen Sink"
+  },
+  "tag.category.library": {
+    "defaultMessage": "Library"
+  },
+  "tag.category.lightweight": {
+    "defaultMessage": "Lightweight"
+  },
+  "tag.category.locale": {
+    "defaultMessage": "Locale"
+  },
+  "tag.category.low": {
+    "defaultMessage": "Low"
+  },
+  "tag.category.magic": {
+    "defaultMessage": "Magic"
+  },
+  "tag.category.management": {
+    "defaultMessage": "Management"
+  },
+  "tag.category.medium": {
+    "defaultMessage": "Medium"
+  },
+  "tag.category.minigame": {
+    "defaultMessage": "Minigame"
+  },
+  "tag.category.mobs": {
+    "defaultMessage": "Mobs"
+  },
+  "tag.category.modded": {
+    "defaultMessage": "Modded"
+  },
+  "tag.category.models": {
+    "defaultMessage": "Models"
+  },
+  "tag.category.multiplayer": {
+    "defaultMessage": "Multiplayer"
+  },
+  "tag.category.optimization": {
+    "defaultMessage": "Optimization"
+  },
+  "tag.category.path-tracing": {
+    "defaultMessage": "Path Tracing"
+  },
+  "tag.category.pbr": {
+    "defaultMessage": "PBR"
+  },
+  "tag.category.potato": {
+    "defaultMessage": "Potato"
+  },
+  "tag.category.quests": {
+    "defaultMessage": "Quests"
+  },
+  "tag.category.realistic": {
+    "defaultMessage": "Realistic"
+  },
+  "tag.category.reflections": {
+    "defaultMessage": "Reflections"
+  },
+  "tag.category.screenshot": {
+    "defaultMessage": "Screenshot"
+  },
+  "tag.category.semi-realistic": {
+    "defaultMessage": "Semi Realistic"
+  },
+  "tag.category.shadows": {
+    "defaultMessage": "Shadows"
+  },
+  "tag.category.simplistic": {
+    "defaultMessage": "Simplistic"
+  },
+  "tag.category.social": {
+    "defaultMessage": "Social"
+  },
+  "tag.category.storage": {
+    "defaultMessage": "Storage"
+  },
+  "tag.category.technology": {
+    "defaultMessage": "Technology"
+  },
+  "tag.category.themed": {
+    "defaultMessage": "Themed"
+  },
+  "tag.category.transportation": {
+    "defaultMessage": "Transportation"
+  },
+  "tag.category.tweaks": {
+    "defaultMessage": "Tweaks"
+  },
+  "tag.category.utility": {
+    "defaultMessage": "Utility"
+  },
+  "tag.category.vanilla-like": {
+    "defaultMessage": "Vanilla Like"
+  },
+  "tag.category.worldgen": {
+    "defaultMessage": "World Generation"
+  },
+  "tag.loader.babric": {
+    "defaultMessage": "Babric"
+  },
+  "tag.loader.bta-babric": {
+    "defaultMessage": "BTA (Babric)"
+  },
+  "tag.loader.bukkit": {
+    "defaultMessage": "Bukkit"
+  },
+  "tag.loader.bungeecord": {
+    "defaultMessage": "BungeeCord"
+  },
+  "tag.loader.canvas": {
+    "defaultMessage": "Canvas"
+  },
+  "tag.loader.datapack": {
+    "defaultMessage": "Data Pack"
+  },
+  "tag.loader.fabric": {
+    "defaultMessage": "Fabric"
+  },
+  "tag.loader.folia": {
+    "defaultMessage": "Folia"
+  },
+  "tag.loader.forge": {
+    "defaultMessage": "Forge"
+  },
+  "tag.loader.geyser": {
+    "defaultMessage": "Geyser Extension"
+  },
+  "tag.loader.iris": {
+    "defaultMessage": "Iris"
+  },
+  "tag.loader.java-agent": {
+    "defaultMessage": "Java Agent"
+  },
+  "tag.loader.legacy-fabric": {
+    "defaultMessage": "Legacy Fabric"
+  },
+  "tag.loader.liteloader": {
+    "defaultMessage": "LiteLoader"
+  },
+  "tag.loader.minecraft": {
+    "defaultMessage": "Resource Pack"
+  },
+  "tag.loader.modloader": {
+    "defaultMessage": "Risugami's ModLoader"
+  },
+  "tag.loader.mrpack": {
+    "defaultMessage": "Modpack"
+  },
+  "tag.loader.neoforge": {
+    "defaultMessage": "NeoForge"
+  },
+  "tag.loader.nilloader": {
+    "defaultMessage": "NilLoader"
+  },
+  "tag.loader.optifine": {
+    "defaultMessage": "OptiFine"
+  },
+  "tag.loader.ornithe": {
+    "defaultMessage": "Ornithe"
+  },
+  "tag.loader.paper": {
+    "defaultMessage": "Paper"
+  },
+  "tag.loader.purpur": {
+    "defaultMessage": "Purpur"
+  },
+  "tag.loader.quilt": {
+    "defaultMessage": "Quilt"
+  },
+  "tag.loader.rift": {
+    "defaultMessage": "Rift"
+  },
+  "tag.loader.spigot": {
+    "defaultMessage": "Spigot"
+  },
+  "tag.loader.sponge": {
+    "defaultMessage": "Sponge"
+  },
+  "tag.loader.vanilla": {
+    "defaultMessage": "Vanilla Shader"
+  },
+  "tag.loader.velocity": {
+    "defaultMessage": "Velocity"
+  },
+  "tag.loader.waterfall": {
+    "defaultMessage": "Waterfall"
+  },
   "tooltip.date-at-time": {
     "defaultMessage": "{date, date, long} at {time, time, short}"
   },
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 83b963a0d..b44dcadbb 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -6,4 +6,5 @@ export * from './game-modes'
 export * from './notices'
 export * from './savable'
 export * from './search'
+export * from './tag-messages'
 export * from './vue-children'
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index 379bd6e91..c445340cc 100644
--- a/packages/ui/src/utils/search.ts
+++ b/packages/ui/src/utils/search.ts
@@ -1,10 +1,11 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { ClientIcon, ServerIcon } from '@modrinth/assets'
-import { formatCategory, formatCategoryHeader, sortByNameOrNumber } from '@modrinth/utils'
+import { ClientIcon, getCategoryIcon, getLoaderIcon, ServerIcon } from '@modrinth/assets'
+import { formatCategoryHeader, sortByNameOrNumber } from '@modrinth/utils'
 import { type Component, computed, readonly, type Ref, ref } from 'vue'
 import { type LocationQueryRaw, type LocationQueryValue, useRoute } from 'vue-router'
 
 import { defineMessage, useVIntl } from '../composables/i18n'
+import { getTagMessageOrDefault } from './tag-messages.ts'
 
 type BaseOption = {
 	id: string
@@ -111,7 +112,22 @@ export function useSearch(
 
 	const filters = computed(() => {
 		const categoryFilters: Record<string, FilterType> = {}
-		for (const category of sortByNameOrNumber(tags.value.categories.slice(), ['header', 'name'])) {
+		const sortedCategories = sortByNameOrNumber(tags.value.categories.slice(), ['header', 'name'])
+		sortedCategories.sort((a, b) => {
+			if (a.header === 'performance impact' && b.header === 'performance impact') {
+				const qualityOrder = ['potato', 'low', 'medium', 'high', 'screenshot']
+				const aIndex = qualityOrder.indexOf(a.name)
+				const bIndex = qualityOrder.indexOf(b.name)
+
+				if (aIndex !== -1 && bIndex !== -1) {
+					return aIndex - bIndex
+				}
+				if (aIndex !== -1) return -1
+				if (bIndex !== -1) return 1
+			}
+			return 0
+		})
+		for (const category of sortedCategories) {
 			const filterTypeId = `category_${category.project_type}_${category.header}`
 			if (!categoryFilters[filterTypeId]) {
 				categoryFilters[filterTypeId] = {
@@ -120,7 +136,7 @@ export function useSearch(
 					supported_project_types:
 						category.project_type === 'mod'
 							? ['mod', 'plugin', 'datapack']
-							: [category.project_type],
+							: ([category.project_type] as ProjectType[]),
 					display: 'all',
 					query_param: category.header === 'resolutions' ? 'g' : 'f',
 					supports_negative_filter: true,
@@ -128,10 +144,11 @@ export function useSearch(
 					options: [],
 				}
 			}
+			const message = getTagMessageOrDefault(category.name, 'category')
 			categoryFilters[filterTypeId].options.push({
 				id: category.name,
-				formatted_name: formatCategory(category.name),
-				icon: category.icon,
+				formatted_name: typeof message === 'string' ? message : formatMessage(message),
+				icon: getCategoryIcon(category.name),
 				value: `categories:${category.name}`,
 				method: category.header === 'resolutions' ? 'or' : 'and',
 			})
@@ -225,7 +242,7 @@ export function useSearch(
 				display: 'expandable',
 				query_param: 'g',
 				supports_negative_filter: true,
-				default_values: ['fabric', 'forge', 'neoforge', 'quilt'],
+				default_values: ['fabric', 'forge', 'neoforge'],
 				searchable: false,
 				options: tags.value.loaders
 					.filter(
@@ -235,10 +252,11 @@ export function useSearch(
 							!loader.supported_project_types.includes('datapack'),
 					)
 					.map((loader) => {
+						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: formatCategory(loader.name),
-							icon: loader.icon,
+							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
 						}
@@ -261,10 +279,11 @@ export function useSearch(
 				options: tags.value.loaders
 					.filter((loader) => loader.supported_project_types.includes('modpack'))
 					.map((loader) => {
+						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: formatCategory(loader.name),
-							icon: loader.icon,
+							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
 						}
@@ -290,10 +309,11 @@ export function useSearch(
 							!PLUGIN_PLATFORMS.includes(loader.name),
 					)
 					.map((loader) => {
+						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: formatCategory(loader.name),
-							icon: loader.icon,
+							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
 						}
@@ -315,10 +335,11 @@ export function useSearch(
 				options: tags.value.loaders
 					.filter((loader) => PLUGIN_PLATFORMS.includes(loader.name))
 					.map((loader) => {
+						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: formatCategory(loader.name),
-							icon: loader.icon,
+							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
 						}
@@ -333,17 +354,19 @@ export function useSearch(
 					}),
 				),
 				supported_project_types: ['shader'],
-				display: 'all',
 				query_param: 'g',
 				supports_negative_filter: true,
 				searchable: false,
+				display: 'expandable',
+				default_values: ['iris', 'optifine', 'vanilla'],
 				options: tags.value.loaders
 					.filter((loader) => loader.supported_project_types.includes('shader'))
 					.map((loader) => {
+						const message = getTagMessageOrDefault(loader.name, 'loader')
 						return {
 							id: loader.name,
-							formatted_name: formatCategory(loader.name),
-							icon: loader.icon,
+							formatted_name: typeof message === 'string' ? message : formatMessage(message),
+							icon: getLoaderIcon(loader.name),
 							method: 'or',
 							value: `categories:${loader.name}`,
 						}
diff --git a/packages/ui/src/utils/tag-messages.ts b/packages/ui/src/utils/tag-messages.ts
new file mode 100644
index 000000000..cae6b138b
--- /dev/null
+++ b/packages/ui/src/utils/tag-messages.ts
@@ -0,0 +1,409 @@
+import { capitalizeString } from '@modrinth/utils'
+
+import { defineMessages, type MessageDescriptor } from '../composables/i18n'
+
+export const loaderMessages = defineMessages({
+	babric: {
+		id: 'tag.loader.babric',
+		defaultMessage: 'Babric',
+	},
+	'bta-babric': {
+		id: 'tag.loader.bta-babric',
+		defaultMessage: 'BTA (Babric)',
+	},
+	bukkit: {
+		id: 'tag.loader.bukkit',
+		defaultMessage: 'Bukkit',
+	},
+	bungeecord: {
+		id: 'tag.loader.bungeecord',
+		defaultMessage: 'BungeeCord',
+	},
+	canvas: {
+		id: 'tag.loader.canvas',
+		defaultMessage: 'Canvas',
+	},
+	datapack: {
+		id: 'tag.loader.datapack',
+		defaultMessage: 'Data Pack',
+	},
+	fabric: {
+		id: 'tag.loader.fabric',
+		defaultMessage: 'Fabric',
+	},
+	folia: {
+		id: 'tag.loader.folia',
+		defaultMessage: 'Folia',
+	},
+	forge: {
+		id: 'tag.loader.forge',
+		defaultMessage: 'Forge',
+	},
+	geyser: {
+		id: 'tag.loader.geyser',
+		defaultMessage: 'Geyser Extension',
+	},
+	iris: {
+		id: 'tag.loader.iris',
+		defaultMessage: 'Iris',
+	},
+	'java-agent': {
+		id: 'tag.loader.java-agent',
+		defaultMessage: 'Java Agent',
+	},
+	'legacy-fabric': {
+		id: 'tag.loader.legacy-fabric',
+		defaultMessage: 'Legacy Fabric',
+	},
+	liteloader: {
+		id: 'tag.loader.liteloader',
+		defaultMessage: 'LiteLoader',
+	},
+	minecraft: {
+		id: 'tag.loader.minecraft',
+		defaultMessage: 'Resource Pack',
+	},
+	modloader: {
+		id: 'tag.loader.modloader',
+		defaultMessage: "Risugami's ModLoader",
+	},
+	mrpack: {
+		id: 'tag.loader.mrpack',
+		defaultMessage: 'Modpack',
+	},
+	neoforge: {
+		id: 'tag.loader.neoforge',
+		defaultMessage: 'NeoForge',
+	},
+	nilloader: {
+		id: 'tag.loader.nilloader',
+		defaultMessage: 'NilLoader',
+	},
+	optifine: {
+		id: 'tag.loader.optifine',
+		defaultMessage: 'OptiFine',
+	},
+	ornithe: {
+		id: 'tag.loader.ornithe',
+		defaultMessage: 'Ornithe',
+	},
+	paper: {
+		id: 'tag.loader.paper',
+		defaultMessage: 'Paper',
+	},
+	purpur: {
+		id: 'tag.loader.purpur',
+		defaultMessage: 'Purpur',
+	},
+	quilt: {
+		id: 'tag.loader.quilt',
+		defaultMessage: 'Quilt',
+	},
+	rift: {
+		id: 'tag.loader.rift',
+		defaultMessage: 'Rift',
+	},
+	spigot: {
+		id: 'tag.loader.spigot',
+		defaultMessage: 'Spigot',
+	},
+	sponge: {
+		id: 'tag.loader.sponge',
+		defaultMessage: 'Sponge',
+	},
+	vanilla: {
+		id: 'tag.loader.vanilla',
+		defaultMessage: 'Vanilla Shader',
+	},
+	velocity: {
+		id: 'tag.loader.velocity',
+		defaultMessage: 'Velocity',
+	},
+	waterfall: {
+		id: 'tag.loader.waterfall',
+		defaultMessage: 'Waterfall',
+	},
+})
+
+export const categoryMessages = defineMessages({
+	'128x': {
+		id: 'tag.category.128x',
+		defaultMessage: '128x',
+	},
+	'16x': {
+		id: 'tag.category.16x',
+		defaultMessage: '16x',
+	},
+	'256x': {
+		id: 'tag.category.256x',
+		defaultMessage: '256x',
+	},
+	'32x': {
+		id: 'tag.category.32x',
+		defaultMessage: '32x',
+	},
+	'48x': {
+		id: 'tag.category.48x',
+		defaultMessage: '48x',
+	},
+	'512x+': {
+		id: 'tag.category.512x+',
+		defaultMessage: '512x or higher',
+	},
+	'64x': {
+		id: 'tag.category.64x',
+		defaultMessage: '64x',
+	},
+	'8x-': {
+		id: 'tag.category.8x-',
+		defaultMessage: '8x or lower',
+	},
+	adventure: {
+		id: 'tag.category.adventure',
+		defaultMessage: 'Adventure',
+	},
+	atmosphere: {
+		id: 'tag.category.atmosphere',
+		defaultMessage: 'Atmosphere',
+	},
+	audio: {
+		id: 'tag.category.audio',
+		defaultMessage: 'Audio',
+	},
+	blocks: {
+		id: 'tag.category.blocks',
+		defaultMessage: 'Blocks',
+	},
+	bloom: {
+		id: 'tag.category.bloom',
+		defaultMessage: 'Bloom',
+	},
+	cartoon: {
+		id: 'tag.category.cartoon',
+		defaultMessage: 'Cartoon',
+	},
+	challenging: {
+		id: 'tag.category.challenging',
+		defaultMessage: 'Challenging',
+	},
+	'colored-lighting': {
+		id: 'tag.category.colored-lighting',
+		defaultMessage: 'Colored Lighting',
+	},
+	combat: {
+		id: 'tag.category.combat',
+		defaultMessage: 'Combat',
+	},
+	'core-shaders': {
+		id: 'tag.category.core-shaders',
+		defaultMessage: 'Core Shaders',
+	},
+	cursed: {
+		id: 'tag.category.cursed',
+		defaultMessage: 'Cursed',
+	},
+	decoration: {
+		id: 'tag.category.decoration',
+		defaultMessage: 'Decoration',
+	},
+	economy: {
+		id: 'tag.category.economy',
+		defaultMessage: 'Economy',
+	},
+	entities: {
+		id: 'tag.category.entities',
+		defaultMessage: 'Entities',
+	},
+	environment: {
+		id: 'tag.category.environment',
+		defaultMessage: 'Environment',
+	},
+	equipment: {
+		id: 'tag.category.equipment',
+		defaultMessage: 'Equipment',
+	},
+	fantasy: {
+		id: 'tag.category.fantasy',
+		defaultMessage: 'Fantasy',
+	},
+	foliage: {
+		id: 'tag.category.foliage',
+		defaultMessage: 'Foliage',
+	},
+	fonts: {
+		id: 'tag.category.fonts',
+		defaultMessage: 'Fonts',
+	},
+	food: {
+		id: 'tag.category.food',
+		defaultMessage: 'Food',
+	},
+	'game-mechanics': {
+		id: 'tag.category.game-mechanics',
+		defaultMessage: 'Game Mechanics',
+	},
+	gui: {
+		id: 'tag.category.gui',
+		defaultMessage: 'GUI',
+	},
+	high: {
+		id: 'tag.category.high',
+		defaultMessage: 'High',
+	},
+	items: {
+		id: 'tag.category.items',
+		defaultMessage: 'Items',
+	},
+	'kitchen-sink': {
+		id: 'tag.category.kitchen-sink',
+		defaultMessage: 'Kitchen Sink',
+	},
+	library: {
+		id: 'tag.category.library',
+		defaultMessage: 'Library',
+	},
+	lightweight: {
+		id: 'tag.category.lightweight',
+		defaultMessage: 'Lightweight',
+	},
+	locale: {
+		id: 'tag.category.locale',
+		defaultMessage: 'Locale',
+	},
+	low: {
+		id: 'tag.category.low',
+		defaultMessage: 'Low',
+	},
+	magic: {
+		id: 'tag.category.magic',
+		defaultMessage: 'Magic',
+	},
+	management: {
+		id: 'tag.category.management',
+		defaultMessage: 'Management',
+	},
+	medium: {
+		id: 'tag.category.medium',
+		defaultMessage: 'Medium',
+	},
+	minigame: {
+		id: 'tag.category.minigame',
+		defaultMessage: 'Minigame',
+	},
+	mobs: {
+		id: 'tag.category.mobs',
+		defaultMessage: 'Mobs',
+	},
+	modded: {
+		id: 'tag.category.modded',
+		defaultMessage: 'Modded',
+	},
+	models: {
+		id: 'tag.category.models',
+		defaultMessage: 'Models',
+	},
+	multiplayer: {
+		id: 'tag.category.multiplayer',
+		defaultMessage: 'Multiplayer',
+	},
+	optimization: {
+		id: 'tag.category.optimization',
+		defaultMessage: 'Optimization',
+	},
+	'path-tracing': {
+		id: 'tag.category.path-tracing',
+		defaultMessage: 'Path Tracing',
+	},
+	pbr: {
+		id: 'tag.category.pbr',
+		defaultMessage: 'PBR',
+	},
+	potato: {
+		id: 'tag.category.potato',
+		defaultMessage: 'Potato',
+	},
+	quests: {
+		id: 'tag.category.quests',
+		defaultMessage: 'Quests',
+	},
+	realistic: {
+		id: 'tag.category.realistic',
+		defaultMessage: 'Realistic',
+	},
+	reflections: {
+		id: 'tag.category.reflections',
+		defaultMessage: 'Reflections',
+	},
+	screenshot: {
+		id: 'tag.category.screenshot',
+		defaultMessage: 'Screenshot',
+	},
+	'semi-realistic': {
+		id: 'tag.category.semi-realistic',
+		defaultMessage: 'Semi Realistic',
+	},
+	shadows: {
+		id: 'tag.category.shadows',
+		defaultMessage: 'Shadows',
+	},
+	simplistic: {
+		id: 'tag.category.simplistic',
+		defaultMessage: 'Simplistic',
+	},
+	social: {
+		id: 'tag.category.social',
+		defaultMessage: 'Social',
+	},
+	storage: {
+		id: 'tag.category.storage',
+		defaultMessage: 'Storage',
+	},
+	technology: {
+		id: 'tag.category.technology',
+		defaultMessage: 'Technology',
+	},
+	themed: {
+		id: 'tag.category.themed',
+		defaultMessage: 'Themed',
+	},
+	transportation: {
+		id: 'tag.category.transportation',
+		defaultMessage: 'Transportation',
+	},
+	tweaks: {
+		id: 'tag.category.tweaks',
+		defaultMessage: 'Tweaks',
+	},
+	utility: {
+		id: 'tag.category.utility',
+		defaultMessage: 'Utility',
+	},
+	'vanilla-like': {
+		id: 'tag.category.vanilla-like',
+		defaultMessage: 'Vanilla Like',
+	},
+	worldgen: {
+		id: 'tag.category.worldgen',
+		defaultMessage: 'World Generation',
+	},
+})
+
+export function getTagMessage(
+	tag: string,
+	enforceType?: 'loader' | 'category',
+): MessageDescriptor | undefined {
+	if (enforceType === 'loader') {
+		return loaderMessages[tag]
+	} else if (enforceType === 'category') {
+		return categoryMessages[tag]
+	} else {
+		return loaderMessages[tag] ?? categoryMessages[tag]
+	}
+}
+
+export function getTagMessageOrDefault(
+	tag: string,
+	enforceType?: 'loader' | 'category',
+): MessageDescriptor | string {
+	return getTagMessage(tag, enforceType) ?? capitalizeString(tag)
+}
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 46d2ef608..b96364687 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -162,6 +162,9 @@ export const formatProjectType = (name, short = false) => {
 	return capitalizeString(name)
 }
 
+/**
+ * @deprecated Use tag-messages.ts' `getTagMessageOrDefault(tag)` instead.
+ */
 export const formatCategory = (name) => {
 	if (name === 'modloader') {
 		return "Risugami's ModLoader"