From 1846c597335eb15de3f65a601ab46523aa4a726c Mon Sep 17 00:00:00 2001
From: IMB11 <hendersoncal117@gmail.com>
Date: Tue, 1 Jul 2025 21:54:21 +0100
Subject: [PATCH] feat: DEV-132 automatic icon generation (#3878)

* feat: automatic icon generation

* fix: lint

* fix: broken icon imports after changes

* fix: deps
---
 .../components/ui/modal/AppSettingsModal.vue  |   4 +-
 .../src/components/ui/ModerationChecklist.vue |   9 +-
 .../src/components/ui/servers/ServerStats.vue |   6 +-
 apps/frontend/src/layouts/default.vue         |  12 +-
 .../src/pages/[type]/[id]/moderation.vue      |   8 +-
 .../frontend/src/pages/dashboard/projects.vue |  18 +-
 apps/frontend/src/pages/moderation/review.vue |   8 +-
 .../organization/[id]/settings/projects.vue   |   8 +-
 apps/frontend/src/pages/settings.vue          |   4 +-
 apps/frontend/src/pages/settings/account.vue  |   4 +-
 packages/assets/README.md                     |  13 +
 packages/assets/build/generate-exports.ts     | 211 ++++++++++
 packages/assets/generated-icons.ts            | 374 +++++++++++++++++
 packages/assets/icons/github.svg              |   4 -
 .../{rotate-cw.svg => rotate-clockwise.svg}   |   0
 ...e-ccw.svg => rotate-counter-clockwise.svg} |   0
 packages/assets/index.ts                      | 389 +-----------------
 packages/assets/package.json                  |   8 +-
 .../src/components/billing/ServersSpecs.vue   |   4 +-
 pnpm-lock.yaml                                |   3 +
 20 files changed, 660 insertions(+), 427 deletions(-)
 create mode 100644 packages/assets/README.md
 create mode 100644 packages/assets/build/generate-exports.ts
 create mode 100644 packages/assets/generated-icons.ts
 delete mode 100644 packages/assets/icons/github.svg
 rename packages/assets/icons/{rotate-cw.svg => rotate-clockwise.svg} (100%)
 rename packages/assets/icons/{rotate-ccw.svg => rotate-counter-clockwise.svg} (100%)

diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
index 16be2330..fa3ea544 100644
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -5,7 +5,7 @@ import {
   ShieldIcon,
   SettingsIcon,
   GaugeIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   GameIcon,
   CoffeeIcon,
 } from '@modrinth/assets'
@@ -41,7 +41,7 @@ const tabs = [
       id: 'app.settings.tabs.appearance',
       defaultMessage: 'Appearance',
     }),
-    icon: PaintBrushIcon,
+    icon: PaintbrushIcon,
     content: AppearanceSettings,
   },
   {
diff --git a/apps/frontend/src/components/ui/ModerationChecklist.vue b/apps/frontend/src/components/ui/ModerationChecklist.vue
index fa692949..b21fd995 100644
--- a/apps/frontend/src/components/ui/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/ModerationChecklist.vue
@@ -9,7 +9,7 @@
       </h1>
       <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
         <button v-tooltip="`Exit moderation`" @click="exitModeration">
-          <CrossIcon />
+          <XIcon />
         </button>
       </ButtonStyled>
       <ButtonStyled circular>
@@ -306,7 +306,7 @@
           <div class="flex items-center gap-2">
             <ButtonStyled v-if="!done">
               <button aria-label="Skip" @click="goToNextProject">
-                <ExitIcon aria-hidden="true" />
+                <XIcon aria-hidden="true" />
                 <template v-if="futureProjects.length > 0">Skip</template>
                 <template v-else>Exit</template>
               </button>
@@ -335,7 +335,7 @@
               <div class="joined-buttons">
                 <ButtonStyled color="red">
                   <button @click="sendMessage('rejected')">
-                    <CrossIcon aria-hidden="true" /> Reject
+                    <XIcon aria-hidden="true" /> Reject
                   </button>
                 </ButtonStyled>
                 <ButtonStyled color="red">
@@ -373,9 +373,8 @@ import {
   UpdatedIcon,
   CheckIcon,
   DropdownIcon,
-  XIcon as CrossIcon,
   EyeOffIcon,
-  ExitIcon,
+  XIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index 4acbe091..d6b60c1d 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { ref, computed, shallowRef } from "vue";
-import { FolderOpenIcon, CPUIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
+import { FolderOpenIcon, CpuIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
 import { useStorage } from "@vueuse/core";
 import type { Stats } from "@modrinth/utils";
 
@@ -126,7 +126,7 @@ const metrics = computed(() => {
         title: "CPU usage",
         value: "0.00%",
         max: "100%",
-        icon: CPUIcon,
+        icon: CpuIcon,
         data: cpuData.value,
         showGraph: false,
         warning: null,
@@ -157,7 +157,7 @@ const metrics = computed(() => {
       title: "CPU usage",
       value: `${cpuPercent.toFixed(2)}%`,
       max: "100%",
-      icon: CPUIcon,
+      icon: CpuIcon,
       data: cpuData.value,
       showGraph: true,
       warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 4e772769..64376545 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -142,7 +142,7 @@
             "
           >
             <nuxt-link to="/resourcepacks">
-              <PaintBrushIcon aria-hidden="true" /> Resource Packs
+              <PaintbrushIcon aria-hidden="true" /> Resource Packs
             </nuxt-link>
           </ButtonStyled>
           <ButtonStyled
@@ -221,7 +221,7 @@
                 v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
                 aria-hidden="true"
               />
-              <PaintBrushIcon
+              <PaintbrushIcon
                 v-else-if="
                   route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
                 "
@@ -250,7 +250,7 @@
 
               <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
               <template #resourcepacks>
-                <PaintBrushIcon aria-hidden="true" /> Resource Packs
+                <PaintbrushIcon aria-hidden="true" /> Resource Packs
               </template>
               <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
               <template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
@@ -696,14 +696,14 @@ import {
   CurrencyIcon,
   BracesIcon,
   GlassesIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   PackageOpenIcon,
   DiscordIcon,
   BlueskyIcon,
   TumblrIcon,
   TwitterIcon,
   MastodonIcon,
-  GitHubIcon,
+  GithubIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import {
@@ -1202,7 +1202,7 @@ const socialLinks = [
       defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
     ),
     href: "https://github.com/modrinth",
-    icon: GitHubIcon,
+    icon: GithubIcon,
   },
 ];
 
diff --git a/apps/frontend/src/pages/[type]/[id]/moderation.vue b/apps/frontend/src/pages/[type]/[id]/moderation.vue
index 4dc0e3d3..c7b9c3a2 100644
--- a/apps/frontend/src/pages/[type]/[id]/moderation.vue
+++ b/apps/frontend/src/pages/[type]/[id]/moderation.vue
@@ -50,7 +50,7 @@
           Listed in search results
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed in search results
         </li>
         <li v-if="isListed(project)">
@@ -58,11 +58,11 @@
           Listed on the profiles of members
         </li>
         <li v-else>
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not listed on the profiles of members
         </li>
         <li v-if="isPrivate(project)">
-          <ExitIcon class="bad" />
+          <XIcon class="bad" />
           Not accessible with a direct link
         </li>
         <li v-else>
@@ -92,7 +92,7 @@
   </div>
 </template>
 <script setup>
-import { ExitIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
+import { XIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
 import { Badge } from "@modrinth/ui";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import {
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 17bee67f..2680ee2c 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -146,7 +146,7 @@
         />
         <div class="push-right input-group">
           <button class="iconified-button" @click="$refs.editLinksModal.hide()">
-            <CrossIcon />
+            <XIcon />
             Cancel
           </button>
           <button class="iconified-button brand-button" @click="bulkEditLinks()">
@@ -199,8 +199,8 @@
                 class="square-button"
                 @click="updateDescending()"
               >
-                <DescendingIcon v-if="descending" />
-                <AscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </button>
             </div>
           </div>
@@ -306,12 +306,12 @@ import {
   SettingsIcon,
   TrashIcon,
   PlusIcon,
-  XIcon as CrossIcon,
+  XIcon,
   IssuesIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon as AscendingIcon,
-  SortDescendingIcon as DescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -337,15 +337,15 @@ export default defineNuxtComponent({
     Checkbox,
     IssuesIcon,
     PlusIcon,
-    CrossIcon,
+    XIcon,
     EditIcon,
     SaveIcon,
     Modal,
     ModalCreation,
     Multiselect,
     CopyCode,
-    AscendingIcon,
-    DescendingIcon,
+    SortAscIcon,
+    SortDescIcon,
   },
   async setup() {
     const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/moderation/review.vue b/apps/frontend/src/pages/moderation/review.vue
index d50ec9e7..cf5fb2ec 100644
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -8,11 +8,11 @@
         :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x) + 's')"
       />
       <button v-if="oldestFirst" class="iconified-button push-right" @click="oldestFirst = false">
-        <SortDescendingIcon />
+        <SortDescIcon />
         Sorting by oldest
       </button>
       <button v-else class="iconified-button push-right" @click="oldestFirst = true">
-        <SortAscendingIcon />
+        <SortAscIcon />
         Sorting by newest
       </button>
       <button
@@ -109,8 +109,8 @@ import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui
 import {
   UnknownIcon,
   EyeIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
   IssuesIcon,
   ScaleIcon,
 } from "@modrinth/assets";
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index 47c0d8f9..86226cc2 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -201,8 +201,8 @@
                 icon-only
                 @click="updateDescending()"
               >
-                <SortDescendingIcon v-if="descending" />
-                <SortAscendingIcon v-else />
+                <SortDescIcon v-if="descending" />
+                <SortAscIcon v-else />
               </Button>
             </div>
           </div>
@@ -308,8 +308,8 @@ import {
   XIcon,
   EditIcon,
   SaveIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
+  SortAscIcon,
+  SortDescIcon,
 } from "@modrinth/assets";
 import { Button, Modal, Avatar, CopyCode, Badge, Checkbox, commonMessages } from "@modrinth/ui";
 
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index 8dfcf3b2..7278fd99 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -12,7 +12,7 @@
               link="/settings"
               :label="formatMessage(commonSettingsMessages.appearance)"
             >
-              <PaintBrushIcon />
+              <PaintbrushIcon />
             </NavStackItem>
             <NavStackItem
               v-if="isStaging"
@@ -82,7 +82,7 @@
 import {
   ServerIcon,
   GridIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
   UserIcon,
   ShieldIcon,
   KeyIcon,
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 10c153f3..8a9a2d0c 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -422,7 +422,7 @@ import {
 } from "@modrinth/assets";
 import QrcodeVue from "qrcode.vue";
 import { ConfirmModal } from "@modrinth/ui";
-import GitHubIcon from "assets/icons/auth/sso-github.svg";
+import GithubIcon from "assets/icons/auth/sso-github.svg";
 import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
 import SteamIcon from "assets/icons/auth/sso-steam.svg";
@@ -583,7 +583,7 @@ const authProviders = [
   {
     id: "github",
     display: "GitHub",
-    icon: GitHubIcon,
+    icon: GithubIcon,
   },
   {
     id: "gitlab",
diff --git a/packages/assets/README.md b/packages/assets/README.md
new file mode 100644
index 00000000..6c2e3bc7
--- /dev/null
+++ b/packages/assets/README.md
@@ -0,0 +1,13 @@
+# `@modrinth/assets`
+
+This package contains various assets used across the Modrinth platform, including icons, images, and branding materials.
+
+Modrinth uses the [Lucide icon set](https://lucide.dev/) for its icons, which are automatically imported and exported in the `index.ts` file. This file is generated through the `pnpm run fix` command, which also ensures that all icons are consistent and correctly formatted.
+
+The "Mr Rinth"/"Rinthbot" branding assets were created and given to Modrinth by [Devin (integrav)](https://github.com/intergrav) and are used across the platform. These assets are also included in this package.
+
+## Adding New Assets
+
+If you're adding a new icon from the [Lucide icon set](https://lucide.dev/), download the icon as an SVG file and place it in the `icons` directory. The icon should be named in kebab-case (e.g., `example-icon.svg`). Then run the `pnpm run fix` command to automatically generate the necessary imports and exports.
+
+If you're adding anything else, you should manually add the import statement to `index.ts` and ensure it is exported correctly.
diff --git a/packages/assets/build/generate-exports.ts b/packages/assets/build/generate-exports.ts
new file mode 100644
index 00000000..c4c555fe
--- /dev/null
+++ b/packages/assets/build/generate-exports.ts
@@ -0,0 +1,211 @@
+import fs from 'fs'
+import path from 'path'
+
+function toPascalCase(str: string): string {
+  return str
+    .split(/[-_.]/)
+    .filter((part) => part.length > 0)
+    .map((word) => {
+      if (/^\d/.test(word)) {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      }
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+    })
+    .join('')
+}
+
+function generateIconExports(): { imports: string; exports: string } {
+  const packageRoot = path.resolve(__dirname, '..')
+  const iconsDir = path.join(packageRoot, 'icons')
+
+  if (!fs.existsSync(iconsDir)) {
+    throw new Error(`Icons directory not found: ${iconsDir}`)
+  }
+
+  const files = fs
+    .readdirSync(iconsDir)
+    .filter((file) => file.endsWith('.svg'))
+    .sort()
+
+  let imports = ''
+  let exports = ''
+
+  files.forEach((file) => {
+    const baseName = path.basename(file, '.svg')
+    let pascalName = toPascalCase(baseName)
+
+    if (pascalName === '') {
+      pascalName = 'Unknown'
+    }
+
+    if (!pascalName.endsWith('Icon')) {
+      pascalName += 'Icon'
+    }
+
+    const privateName = `_${pascalName}`
+
+    imports += `import ${privateName} from './icons/${file}?component'\n`
+    exports += `export const ${pascalName} = ${privateName}\n`
+  })
+
+  return { imports, exports }
+}
+
+function runTests(): void {
+  console.log('🧪 Running conversion tests...\n')
+
+  const testCases: Array<{ input: string; expected: string }> = [
+    { input: 'align-left', expected: 'AlignLeftIcon' },
+    { input: 'arrow-big-up-dash', expected: 'ArrowBigUpDashIcon' },
+    { input: 'check-check', expected: 'CheckCheckIcon' },
+    { input: 'chevron-left', expected: 'ChevronLeftIcon' },
+    { input: 'file-archive', expected: 'FileArchiveIcon' },
+    { input: 'heart-handshake', expected: 'HeartHandshakeIcon' },
+    { input: 'monitor-smartphone', expected: 'MonitorSmartphoneIcon' },
+    { input: 'x-circle', expected: 'XCircleIcon' },
+    { input: 'rotate-ccw', expected: 'RotateCcwIcon' },
+    { input: 'bell-ring', expected: 'BellRingIcon' },
+    { input: 'more-horizontal', expected: 'MoreHorizontalIcon' },
+    { input: 'list_bulleted', expected: 'ListBulletedIcon' },
+    { input: 'test.name', expected: 'TestNameIcon' },
+    { input: 'test-name_final.icon', expected: 'TestNameFinalIcon' },
+  ]
+
+  let passed = 0
+  let failed = 0
+
+  testCases.forEach(({ input, expected }) => {
+    const result = toPascalCase(input) + (toPascalCase(input).endsWith('Icon') ? '' : 'Icon')
+    const success = result === expected
+
+    if (success) {
+      console.log(`✅ ${input} → ${result}`)
+      passed++
+    } else {
+      console.log(`❌ ${input} → ${result} (expected: ${expected})`)
+      failed++
+    }
+  })
+
+  console.log(`\n📊 Test Results: ${passed} passed, ${failed} failed`)
+
+  if (failed > 0) {
+    process.exit(1)
+  }
+}
+
+function generateFiles(): void {
+  try {
+    console.log('🔄 Generating icon exports...')
+
+    const { imports, exports } = generateIconExports()
+    const output = `// Auto-generated icon imports and exports
+// Do not edit this file manually - run 'pnpm run fix' to regenerate
+
+${imports}
+${exports}`
+
+    const packageRoot = path.resolve(__dirname, '..')
+    const outputPath = path.join(packageRoot, 'generated-icons.ts')
+    fs.writeFileSync(outputPath, output)
+
+    console.log(`✅ Generated icon exports to: ${outputPath}`)
+    console.log(
+      `📦 Generated ${imports.split('\n').filter((line) => line.trim()).length} icon imports/exports`,
+    )
+  } catch (error) {
+    console.error('❌ Error generating icons:', error)
+    process.exit(1)
+  }
+}
+
+function main(): void {
+  const args = process.argv.slice(2)
+
+  if (args.includes('--test')) {
+    runTests()
+  } else if (args.includes('--validate')) {
+    validateIconConsistency()
+  } else {
+    generateFiles()
+  }
+}
+
+main()
+
+function getExpectedIconExports(iconsDir: string): string[] {
+  if (!fs.existsSync(iconsDir)) {
+    return []
+  }
+
+  return fs
+    .readdirSync(iconsDir)
+    .filter((file) => file.endsWith('.svg'))
+    .map((file) => {
+      const baseName = path.basename(file, '.svg')
+      let pascalName = toPascalCase(baseName)
+
+      if (pascalName === '') {
+        pascalName = 'Unknown'
+      }
+
+      if (!pascalName.endsWith('Icon')) {
+        pascalName += 'Icon'
+      }
+
+      return pascalName
+    })
+    .sort()
+}
+
+function getActualIconExports(indexFile: string): string[] {
+  if (!fs.existsSync(indexFile)) {
+    return []
+  }
+
+  const content = fs.readFileSync(indexFile, 'utf8')
+  const exportMatches = content.match(/export const (\w+Icon) = _\w+Icon/g) || []
+
+  return exportMatches
+    .map((match) => {
+      const result = match.match(/export const (\w+Icon)/)
+      return result ? result[1] : ''
+    })
+    .filter((name) => name.endsWith('Icon'))
+    .sort()
+}
+
+function validateIconConsistency(): void {
+  try {
+    console.log('🔍 Validating icon consistency...')
+
+    const packageRoot = path.resolve(__dirname, '..')
+    const iconsDir = path.join(packageRoot, 'icons')
+    const declarationFile = path.join(packageRoot, 'generated-icons.ts')
+
+    const expectedExports = getExpectedIconExports(iconsDir)
+    const actualExports = getActualIconExports(declarationFile)
+
+    const missingExports = expectedExports.filter((name) => !actualExports.includes(name))
+    const extraExports = actualExports.filter((name) => !expectedExports.includes(name))
+
+    if (missingExports.length > 0) {
+      console.error(`❌ Missing icon exports: ${missingExports.join(', ')}`)
+      console.error("Run 'pnpm run fix' to generate them.")
+      process.exit(1)
+    }
+
+    if (extraExports.length > 0) {
+      console.error(
+        `❌ Extra icon exports (no corresponding SVG files): ${extraExports.join(', ')}`,
+      )
+      console.error("Run 'pnpm run fix' to clean them up.")
+      process.exit(1)
+    }
+
+    console.log('✅ Icon exports are consistent with SVG files')
+  } catch (error) {
+    console.error('❌ Error validating icons:', error)
+    process.exit(1)
+  }
+}
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
new file mode 100644
index 00000000..c944c9c0
--- /dev/null
+++ b/packages/assets/generated-icons.ts
@@ -0,0 +1,374 @@
+// Auto-generated icon imports and exports
+// Do not edit this file manually - run 'pnpm run fix' to regenerate
+
+import _AlignLeftIcon from './icons/align-left.svg?component'
+import _ArchiveIcon from './icons/archive.svg?component'
+import _ArrowBigRightDashIcon from './icons/arrow-big-right-dash.svg?component'
+import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
+import _AsteriskIcon from './icons/asterisk.svg?component'
+import _BadgeCheckIcon from './icons/badge-check.svg?component'
+import _BanIcon from './icons/ban.svg?component'
+import _BellRingIcon from './icons/bell-ring.svg?component'
+import _BellIcon from './icons/bell.svg?component'
+import _BlocksIcon from './icons/blocks.svg?component'
+import _BoldIcon from './icons/bold.svg?component'
+import _BookTextIcon from './icons/book-text.svg?component'
+import _BookIcon from './icons/book.svg?component'
+import _BookmarkIcon from './icons/bookmark.svg?component'
+import _BotIcon from './icons/bot.svg?component'
+import _BoxImportIcon from './icons/box-import.svg?component'
+import _BoxIcon from './icons/box.svg?component'
+import _BracesIcon from './icons/braces.svg?component'
+import _CalendarIcon from './icons/calendar.svg?component'
+import _CardIcon from './icons/card.svg?component'
+import _ChartIcon from './icons/chart.svg?component'
+import _CheckCheckIcon from './icons/check-check.svg?component'
+import _CheckCircleIcon from './icons/check-circle.svg?component'
+import _CheckIcon from './icons/check.svg?component'
+import _ChevronLeftIcon from './icons/chevron-left.svg?component'
+import _ChevronRightIcon from './icons/chevron-right.svg?component'
+import _ClearIcon from './icons/clear.svg?component'
+import _ClientIcon from './icons/client.svg?component'
+import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
+import _CloudIcon from './icons/cloud.svg?component'
+import _CodeIcon from './icons/code.svg?component'
+import _CoffeeIcon from './icons/coffee.svg?component'
+import _CogIcon from './icons/cog.svg?component'
+import _CoinsIcon from './icons/coins.svg?component'
+import _CollectionIcon from './icons/collection.svg?component'
+import _CompassIcon from './icons/compass.svg?component'
+import _ContractIcon from './icons/contract.svg?component'
+import _CopyIcon from './icons/copy.svg?component'
+import _CopyrightIcon from './icons/copyright.svg?component'
+import _CpuIcon from './icons/cpu.svg?component'
+import _CrownIcon from './icons/crown.svg?component'
+import _CubeIcon from './icons/cube.svg?component'
+import _CurrencyIcon from './icons/currency.svg?component'
+import _DashboardIcon from './icons/dashboard.svg?component'
+import _DatabaseIcon from './icons/database.svg?component'
+import _DownloadIcon from './icons/download.svg?component'
+import _DropdownIcon from './icons/dropdown.svg?component'
+import _EditIcon from './icons/edit.svg?component'
+import _ExpandIcon from './icons/expand.svg?component'
+import _ExternalIcon from './icons/external.svg?component'
+import _EyeOffIcon from './icons/eye-off.svg?component'
+import _EyeIcon from './icons/eye.svg?component'
+import _FileArchiveIcon from './icons/file-archive.svg?component'
+import _FileTextIcon from './icons/file-text.svg?component'
+import _FileIcon from './icons/file.svg?component'
+import _FilterXIcon from './icons/filter-x.svg?component'
+import _FilterIcon from './icons/filter.svg?component'
+import _FolderArchiveIcon from './icons/folder-archive.svg?component'
+import _FolderOpenIcon from './icons/folder-open.svg?component'
+import _FolderSearchIcon from './icons/folder-search.svg?component'
+import _GameIcon from './icons/game.svg?component'
+import _GapIcon from './icons/gap.svg?component'
+import _GaugeIcon from './icons/gauge.svg?component'
+import _GitGraphIcon from './icons/git-graph.svg?component'
+import _GlassesIcon from './icons/glasses.svg?component'
+import _GlobeIcon from './icons/globe.svg?component'
+import _GridIcon from './icons/grid.svg?component'
+import _HamburgerIcon from './icons/hamburger.svg?component'
+import _HammerIcon from './icons/hammer.svg?component'
+import _HashIcon from './icons/hash.svg?component'
+import _Heading1Icon from './icons/heading-1.svg?component'
+import _Heading2Icon from './icons/heading-2.svg?component'
+import _Heading3Icon from './icons/heading-3.svg?component'
+import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
+import _HeartIcon from './icons/heart.svg?component'
+import _HistoryIcon from './icons/history.svg?component'
+import _HomeIcon from './icons/home.svg?component'
+import _ImageIcon from './icons/image.svg?component'
+import _ImportIcon from './icons/import.svg?component'
+import _InProgressIcon from './icons/in-progress.svg?component'
+import _InfoIcon from './icons/info.svg?component'
+import _IssuesIcon from './icons/issues.svg?component'
+import _ItalicIcon from './icons/italic.svg?component'
+import _KeyIcon from './icons/key.svg?component'
+import _LanguagesIcon from './icons/languages.svg?component'
+import _LeftArrowIcon from './icons/left-arrow.svg?component'
+import _LibraryIcon from './icons/library.svg?component'
+import _LightBulbIcon from './icons/light-bulb.svg?component'
+import _LinkIcon from './icons/link.svg?component'
+import _ListBulletedIcon from './icons/list-bulleted.svg?component'
+import _ListEndIcon from './icons/list-end.svg?component'
+import _ListOrderedIcon from './icons/list-ordered.svg?component'
+import _ListIcon from './icons/list.svg?component'
+import _LoaderIcon from './icons/loader.svg?component'
+import _LockOpenIcon from './icons/lock-open.svg?component'
+import _LockIcon from './icons/lock.svg?component'
+import _LogInIcon from './icons/log-in.svg?component'
+import _LogOutIcon from './icons/log-out.svg?component'
+import _MailIcon from './icons/mail.svg?component'
+import _ManageIcon from './icons/manage.svg?component'
+import _MaximizeIcon from './icons/maximize.svg?component'
+import _MemoryStickIcon from './icons/memory-stick.svg?component'
+import _MessageIcon from './icons/message.svg?component'
+import _MicrophoneIcon from './icons/microphone.svg?component'
+import _MinimizeIcon from './icons/minimize.svg?component'
+import _MinusIcon from './icons/minus.svg?component'
+import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
+import _MonitorIcon from './icons/monitor.svg?component'
+import _MoonIcon from './icons/moon.svg?component'
+import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
+import _MoreVerticalIcon from './icons/more-vertical.svg?component'
+import _NewspaperIcon from './icons/newspaper.svg?component'
+import _NoSignalIcon from './icons/no-signal.svg?component'
+import _OmorphiaIcon from './icons/omorphia.svg?component'
+import _OrganizationIcon from './icons/organization.svg?component'
+import _PackageClosedIcon from './icons/package-closed.svg?component'
+import _PackageOpenIcon from './icons/package-open.svg?component'
+import _PackageIcon from './icons/package.svg?component'
+import _PaintbrushIcon from './icons/paintbrush.svg?component'
+import _PickaxeIcon from './icons/pickaxe.svg?component'
+import _PlayIcon from './icons/play.svg?component'
+import _PlugIcon from './icons/plug.svg?component'
+import _PlusIcon from './icons/plus.svg?component'
+import _RadioButtonCheckedIcon from './icons/radio-button-checked.svg?component'
+import _RadioButtonIcon from './icons/radio-button.svg?component'
+import _ReceiptTextIcon from './icons/receipt-text.svg?component'
+import _RedoIcon from './icons/redo.svg?component'
+import _ReplyIcon from './icons/reply.svg?component'
+import _ReportIcon from './icons/report.svg?component'
+import _RestoreIcon from './icons/restore.svg?component'
+import _RightArrowIcon from './icons/right-arrow.svg?component'
+import _RotateClockwiseIcon from './icons/rotate-clockwise.svg?component'
+import _RotateCounterClockwiseIcon from './icons/rotate-counter-clockwise.svg?component'
+import _RssIcon from './icons/rss.svg?component'
+import _SaveIcon from './icons/save.svg?component'
+import _ScaleIcon from './icons/scale.svg?component'
+import _ScanEyeIcon from './icons/scan-eye.svg?component'
+import _SearchIcon from './icons/search.svg?component'
+import _SendIcon from './icons/send.svg?component'
+import _ServerPlusIcon from './icons/server-plus.svg?component'
+import _ServerIcon from './icons/server.svg?component'
+import _SettingsIcon from './icons/settings.svg?component'
+import _ShareIcon from './icons/share.svg?component'
+import _ShieldIcon from './icons/shield.svg?component'
+import _SignalIcon from './icons/signal.svg?component'
+import _SkullIcon from './icons/skull.svg?component'
+import _SlashIcon from './icons/slash.svg?component'
+import _SortAscIcon from './icons/sort-asc.svg?component'
+import _SortDescIcon from './icons/sort-desc.svg?component'
+import _SparklesIcon from './icons/sparkles.svg?component'
+import _SpinnerIcon from './icons/spinner.svg?component'
+import _StarIcon from './icons/star.svg?component'
+import _StopCircleIcon from './icons/stop-circle.svg?component'
+import _StrikethroughIcon from './icons/strikethrough.svg?component'
+import _SunIcon from './icons/sun.svg?component'
+import _SunriseIcon from './icons/sunrise.svg?component'
+import _TagIcon from './icons/tag.svg?component'
+import _TagsIcon from './icons/tags.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'
+import _TimerIcon from './icons/timer.svg?component'
+import _TransferIcon from './icons/transfer.svg?component'
+import _TrashIcon from './icons/trash.svg?component'
+import _UnderlineIcon from './icons/underline.svg?component'
+import _UndoIcon from './icons/undo.svg?component'
+import _UnknownDonationIcon from './icons/unknown-donation.svg?component'
+import _UnknownIcon from './icons/unknown.svg?component'
+import _UnlinkIcon from './icons/unlink.svg?component'
+import _UnplugIcon from './icons/unplug.svg?component'
+import _UpdatedIcon from './icons/updated.svg?component'
+import _UploadIcon from './icons/upload.svg?component'
+import _UserPlusIcon from './icons/user-plus.svg?component'
+import _UserXIcon from './icons/user-x.svg?component'
+import _UserIcon from './icons/user.svg?component'
+import _UsersIcon from './icons/users.svg?component'
+import _VersionIcon from './icons/version.svg?component'
+import _WikiIcon from './icons/wiki.svg?component'
+import _WindowIcon from './icons/window.svg?component'
+import _WorldIcon from './icons/world.svg?component'
+import _WrenchIcon from './icons/wrench.svg?component'
+import _XCircleIcon from './icons/x-circle.svg?component'
+import _XIcon from './icons/x.svg?component'
+import _ZoomInIcon from './icons/zoom-in.svg?component'
+import _ZoomOutIcon from './icons/zoom-out.svg?component'
+
+export const AlignLeftIcon = _AlignLeftIcon
+export const ArchiveIcon = _ArchiveIcon
+export const ArrowBigRightDashIcon = _ArrowBigRightDashIcon
+export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
+export const AsteriskIcon = _AsteriskIcon
+export const BadgeCheckIcon = _BadgeCheckIcon
+export const BanIcon = _BanIcon
+export const BellRingIcon = _BellRingIcon
+export const BellIcon = _BellIcon
+export const BlocksIcon = _BlocksIcon
+export const BoldIcon = _BoldIcon
+export const BookTextIcon = _BookTextIcon
+export const BookIcon = _BookIcon
+export const BookmarkIcon = _BookmarkIcon
+export const BotIcon = _BotIcon
+export const BoxImportIcon = _BoxImportIcon
+export const BoxIcon = _BoxIcon
+export const BracesIcon = _BracesIcon
+export const CalendarIcon = _CalendarIcon
+export const CardIcon = _CardIcon
+export const ChartIcon = _ChartIcon
+export const CheckCheckIcon = _CheckCheckIcon
+export const CheckCircleIcon = _CheckCircleIcon
+export const CheckIcon = _CheckIcon
+export const ChevronLeftIcon = _ChevronLeftIcon
+export const ChevronRightIcon = _ChevronRightIcon
+export const ClearIcon = _ClearIcon
+export const ClientIcon = _ClientIcon
+export const ClipboardCopyIcon = _ClipboardCopyIcon
+export const CloudIcon = _CloudIcon
+export const CodeIcon = _CodeIcon
+export const CoffeeIcon = _CoffeeIcon
+export const CogIcon = _CogIcon
+export const CoinsIcon = _CoinsIcon
+export const CollectionIcon = _CollectionIcon
+export const CompassIcon = _CompassIcon
+export const ContractIcon = _ContractIcon
+export const CopyIcon = _CopyIcon
+export const CopyrightIcon = _CopyrightIcon
+export const CpuIcon = _CpuIcon
+export const CrownIcon = _CrownIcon
+export const CubeIcon = _CubeIcon
+export const CurrencyIcon = _CurrencyIcon
+export const DashboardIcon = _DashboardIcon
+export const DatabaseIcon = _DatabaseIcon
+export const DownloadIcon = _DownloadIcon
+export const DropdownIcon = _DropdownIcon
+export const EditIcon = _EditIcon
+export const ExpandIcon = _ExpandIcon
+export const ExternalIcon = _ExternalIcon
+export const EyeOffIcon = _EyeOffIcon
+export const EyeIcon = _EyeIcon
+export const FileArchiveIcon = _FileArchiveIcon
+export const FileTextIcon = _FileTextIcon
+export const FileIcon = _FileIcon
+export const FilterXIcon = _FilterXIcon
+export const FilterIcon = _FilterIcon
+export const FolderArchiveIcon = _FolderArchiveIcon
+export const FolderOpenIcon = _FolderOpenIcon
+export const FolderSearchIcon = _FolderSearchIcon
+export const GameIcon = _GameIcon
+export const GapIcon = _GapIcon
+export const GaugeIcon = _GaugeIcon
+export const GitGraphIcon = _GitGraphIcon
+export const GlassesIcon = _GlassesIcon
+export const GlobeIcon = _GlobeIcon
+export const GridIcon = _GridIcon
+export const HamburgerIcon = _HamburgerIcon
+export const HammerIcon = _HammerIcon
+export const HashIcon = _HashIcon
+export const Heading1Icon = _Heading1Icon
+export const Heading2Icon = _Heading2Icon
+export const Heading3Icon = _Heading3Icon
+export const HeartHandshakeIcon = _HeartHandshakeIcon
+export const HeartIcon = _HeartIcon
+export const HistoryIcon = _HistoryIcon
+export const HomeIcon = _HomeIcon
+export const ImageIcon = _ImageIcon
+export const ImportIcon = _ImportIcon
+export const InProgressIcon = _InProgressIcon
+export const InfoIcon = _InfoIcon
+export const IssuesIcon = _IssuesIcon
+export const ItalicIcon = _ItalicIcon
+export const KeyIcon = _KeyIcon
+export const LanguagesIcon = _LanguagesIcon
+export const LeftArrowIcon = _LeftArrowIcon
+export const LibraryIcon = _LibraryIcon
+export const LightBulbIcon = _LightBulbIcon
+export const LinkIcon = _LinkIcon
+export const ListBulletedIcon = _ListBulletedIcon
+export const ListEndIcon = _ListEndIcon
+export const ListOrderedIcon = _ListOrderedIcon
+export const ListIcon = _ListIcon
+export const LoaderIcon = _LoaderIcon
+export const LockOpenIcon = _LockOpenIcon
+export const LockIcon = _LockIcon
+export const LogInIcon = _LogInIcon
+export const LogOutIcon = _LogOutIcon
+export const MailIcon = _MailIcon
+export const ManageIcon = _ManageIcon
+export const MaximizeIcon = _MaximizeIcon
+export const MemoryStickIcon = _MemoryStickIcon
+export const MessageIcon = _MessageIcon
+export const MicrophoneIcon = _MicrophoneIcon
+export const MinimizeIcon = _MinimizeIcon
+export const MinusIcon = _MinusIcon
+export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
+export const MonitorIcon = _MonitorIcon
+export const MoonIcon = _MoonIcon
+export const MoreHorizontalIcon = _MoreHorizontalIcon
+export const MoreVerticalIcon = _MoreVerticalIcon
+export const NewspaperIcon = _NewspaperIcon
+export const NoSignalIcon = _NoSignalIcon
+export const OmorphiaIcon = _OmorphiaIcon
+export const OrganizationIcon = _OrganizationIcon
+export const PackageClosedIcon = _PackageClosedIcon
+export const PackageOpenIcon = _PackageOpenIcon
+export const PackageIcon = _PackageIcon
+export const PaintbrushIcon = _PaintbrushIcon
+export const PickaxeIcon = _PickaxeIcon
+export const PlayIcon = _PlayIcon
+export const PlugIcon = _PlugIcon
+export const PlusIcon = _PlusIcon
+export const RadioButtonCheckedIcon = _RadioButtonCheckedIcon
+export const RadioButtonIcon = _RadioButtonIcon
+export const ReceiptTextIcon = _ReceiptTextIcon
+export const RedoIcon = _RedoIcon
+export const ReplyIcon = _ReplyIcon
+export const ReportIcon = _ReportIcon
+export const RestoreIcon = _RestoreIcon
+export const RightArrowIcon = _RightArrowIcon
+export const RotateClockwiseIcon = _RotateClockwiseIcon
+export const RotateCounterClockwiseIcon = _RotateCounterClockwiseIcon
+export const RssIcon = _RssIcon
+export const SaveIcon = _SaveIcon
+export const ScaleIcon = _ScaleIcon
+export const ScanEyeIcon = _ScanEyeIcon
+export const SearchIcon = _SearchIcon
+export const SendIcon = _SendIcon
+export const ServerPlusIcon = _ServerPlusIcon
+export const ServerIcon = _ServerIcon
+export const SettingsIcon = _SettingsIcon
+export const ShareIcon = _ShareIcon
+export const ShieldIcon = _ShieldIcon
+export const SignalIcon = _SignalIcon
+export const SkullIcon = _SkullIcon
+export const SlashIcon = _SlashIcon
+export const SortAscIcon = _SortAscIcon
+export const SortDescIcon = _SortDescIcon
+export const SparklesIcon = _SparklesIcon
+export const SpinnerIcon = _SpinnerIcon
+export const StarIcon = _StarIcon
+export const StopCircleIcon = _StopCircleIcon
+export const StrikethroughIcon = _StrikethroughIcon
+export const SunIcon = _SunIcon
+export const SunriseIcon = _SunriseIcon
+export const TagIcon = _TagIcon
+export const TagsIcon = _TagsIcon
+export const TerminalSquareIcon = _TerminalSquareIcon
+export const TestIcon = _TestIcon
+export const TextQuoteIcon = _TextQuoteIcon
+export const TimerIcon = _TimerIcon
+export const TransferIcon = _TransferIcon
+export const TrashIcon = _TrashIcon
+export const UnderlineIcon = _UnderlineIcon
+export const UndoIcon = _UndoIcon
+export const UnknownDonationIcon = _UnknownDonationIcon
+export const UnknownIcon = _UnknownIcon
+export const UnlinkIcon = _UnlinkIcon
+export const UnplugIcon = _UnplugIcon
+export const UpdatedIcon = _UpdatedIcon
+export const UploadIcon = _UploadIcon
+export const UserPlusIcon = _UserPlusIcon
+export const UserXIcon = _UserXIcon
+export const UserIcon = _UserIcon
+export const UsersIcon = _UsersIcon
+export const VersionIcon = _VersionIcon
+export const WikiIcon = _WikiIcon
+export const WindowIcon = _WindowIcon
+export const WorldIcon = _WorldIcon
+export const WrenchIcon = _WrenchIcon
+export const XCircleIcon = _XCircleIcon
+export const XIcon = _XIcon
+export const ZoomInIcon = _ZoomInIcon
+export const ZoomOutIcon = _ZoomOutIcon
diff --git a/packages/assets/icons/github.svg b/packages/assets/icons/github.svg
deleted file mode 100644
index 90908bb3..00000000
--- a/packages/assets/icons/github.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve">
-	<path fill="currentColor" class="st0"
-		d="m12 1c-6.3 0-11.3 5-11.3 11.3 0 5 3.2 9.2 7.7 10.7 0.6 0.1 0.8-0.2 0.8-0.5v-1.9c-3.2 0.6-3.8-1.6-3.8-1.6-0.5-1.3-1.3-1.7-1.3-1.7-1-0.7 0.1-0.7 0.1-0.7 1.1 0.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.3 0.9 0.1-0.7 0.4-1.2 0.7-1.5-2.5-0.2-5.1-1.2-5.1-5.5 0-1.2 0.4-2.2 1.2-3-0.1-0.3-0.5-1.4 0.1-3 0 0 1-0.3 3.1 1.2 0.9-0.3 1.8-0.5 2.8-0.5s1.9 0.1 2.8 0.4c2.2-1.5 3.1-1.2 3.1-1.2 0.6 1.6 0.2 2.7 0.1 3 0.7 0.8 1.2 1.8 1.2 3 0 4.4-2.6 5.3-5.2 5.6 0.4 0.3 0.8 1 0.8 2.1v3.1c0 0.3 0.2 0.7 0.8 0.5 4.5-1.5 7.7-5.7 7.7-10.7 0-6.2-5-11.2-11.3-11.2z" />
-</svg>
diff --git a/packages/assets/icons/rotate-cw.svg b/packages/assets/icons/rotate-clockwise.svg
similarity index 100%
rename from packages/assets/icons/rotate-cw.svg
rename to packages/assets/icons/rotate-clockwise.svg
diff --git a/packages/assets/icons/rotate-ccw.svg b/packages/assets/icons/rotate-counter-clockwise.svg
similarity index 100%
rename from packages/assets/icons/rotate-ccw.svg
rename to packages/assets/icons/rotate-counter-clockwise.svg
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 1c53c2a5..3486c8f2 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -1,4 +1,12 @@
-// NOTE: re-export using consts to help TypeScript resolve the proper type
+/**
+ * NOTE: You should re-export any manually added icons
+ *       using consts to help TypeScript resolve the proper type
+ *
+ * NOTE: If an icon is part of the lucide icon set, it should be placed in the "icons" folder
+ *       and automatically generated through the "pnpm run fix" command.
+ */
+
+import './omorphia.scss'
 
 // Branding
 import _ModrinthIcon from './branding/logo.svg?component'
@@ -39,197 +47,6 @@ import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
 
-// Icons
-import _AlignLeftIcon from './icons/align-left.svg?component'
-import _ArchiveIcon from './icons/archive.svg?component'
-import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
-import _ArrowBigRightDashIcon from './icons/arrow-big-right-dash.svg?component'
-import _AsteriskIcon from './icons/asterisk.svg?component'
-import _BadgeCheckIcon from './icons/badge-check.svg?component'
-import _BanIcon from './icons/ban.svg?component'
-import _BellIcon from './icons/bell.svg?component'
-import _BellRingIcon from './icons/bell-ring.svg?component'
-import _BlocksIcon from './icons/blocks.svg?component'
-import _BookIcon from './icons/book.svg?component'
-import _BookTextIcon from './icons/book-text.svg?component'
-import _BookmarkIcon from './icons/bookmark.svg?component'
-import _BotIcon from './icons/bot.svg?component'
-import _BoxIcon from './icons/box.svg?component'
-import _BoxImportIcon from './icons/box-import.svg?component'
-import _BracesIcon from './icons/braces.svg?component'
-import _CalendarIcon from './icons/calendar.svg?component'
-import _CardIcon from './icons/card.svg?component'
-import _ChartIcon from './icons/chart.svg?component'
-import _CheckIcon from './icons/check.svg?component'
-import _CheckCheckIcon from './icons/check-check.svg?component'
-import _CheckCircleIcon from './icons/check-circle.svg?component'
-import _ChevronLeftIcon from './icons/chevron-left.svg?component'
-import _ChevronRightIcon from './icons/chevron-right.svg?component'
-import _ClearIcon from './icons/clear.svg?component'
-import _ClientIcon from './icons/client.svg?component'
-import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
-import _CodeIcon from './icons/code.svg?component'
-import _CoffeeIcon from './icons/coffee.svg?component'
-import _CoinsIcon from './icons/coins.svg?component'
-import _CollectionIcon from './icons/collection.svg?component'
-import _CompassIcon from './icons/compass.svg?component'
-import _ContractIcon from './icons/contract.svg?component'
-import _CopyIcon from './icons/copy.svg?component'
-import _CopyrightIcon from './icons/copyright.svg?component'
-import _CrownIcon from './icons/crown.svg?component'
-import _CurrencyIcon from './icons/currency.svg?component'
-import _DashboardIcon from './icons/dashboard.svg?component'
-import _DatabaseIcon from './icons/database.svg?component'
-import _DownloadIcon from './icons/download.svg?component'
-import _DropdownIcon from './icons/dropdown.svg?component'
-import _EditIcon from './icons/edit.svg?component'
-import _ExpandIcon from './icons/expand.svg?component'
-import _ExternalIcon from './icons/external.svg?component'
-import _EyeIcon from './icons/eye.svg?component'
-import _EyeOffIcon from './icons/eye-off.svg?component'
-import _FileIcon from './icons/file.svg?component'
-import _FileArchiveIcon from './icons/file-archive.svg?component'
-import _FileTextIcon from './icons/file-text.svg?component'
-import _FilterIcon from './icons/filter.svg?component'
-import _FilterXIcon from './icons/filter-x.svg?component'
-import _FolderArchiveIcon from './icons/folder-archive.svg?component'
-import _FolderOpenIcon from './icons/folder-open.svg?component'
-import _FolderSearchIcon from './icons/folder-search.svg?component'
-import _GapIcon from './icons/gap.svg?component'
-import _GaugeIcon from './icons/gauge.svg?component'
-import _GameIcon from './icons/game.svg?component'
-import _GitHubIcon from './icons/github.svg?component'
-import _GlassesIcon from './icons/glasses.svg?component'
-import _GlobeIcon from './icons/globe.svg?component'
-import _GridIcon from './icons/grid.svg?component'
-import _HamburgerIcon from './icons/hamburger.svg?component'
-import _HammerIcon from './icons/hammer.svg?component'
-import _HashIcon from './icons/hash.svg?component'
-import _HeartIcon from './icons/heart.svg?component'
-import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
-import _HistoryIcon from './icons/history.svg?component'
-import _HomeIcon from './icons/home.svg?component'
-import _ImageIcon from './icons/image.svg?component'
-import _InProgressIcon from './icons/in-progress.svg?component'
-import _InfoIcon from './icons/info.svg?component'
-import _IssuesIcon from './icons/issues.svg?component'
-import _KeyIcon from './icons/key.svg?component'
-import _LanguagesIcon from './icons/languages.svg?component'
-import _LeftArrowIcon from './icons/left-arrow.svg?component'
-import _LibraryIcon from './icons/library.svg?component'
-import _LightBulbIcon from './icons/light-bulb.svg?component'
-import _LinkIcon from './icons/link.svg?component'
-import _ListIcon from './icons/list.svg?component'
-import _ListEndIcon from './icons/list-end.svg?component'
-import _LockIcon from './icons/lock.svg?component'
-import _LockOpenIcon from './icons/lock-open.svg?component'
-import _LogInIcon from './icons/log-in.svg?component'
-import _LogOutIcon from './icons/log-out.svg?component'
-import _MailIcon from './icons/mail.svg?component'
-import _ManageIcon from './icons/manage.svg?component'
-import _MaximizeIcon from './icons/maximize.svg?component'
-import _MemoryStickIcon from './icons/memory-stick.svg?component'
-import _MessageIcon from './icons/message.svg?component'
-import _MicrophoneIcon from './icons/microphone.svg?component'
-import _MinimizeIcon from './icons/minimize.svg?component'
-import _MinusIcon from './icons/minus.svg?component'
-import _MonitorIcon from './icons/monitor.svg?component'
-import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
-import _MoonIcon from './icons/moon.svg?component'
-import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
-import _MoreVerticalIcon from './icons/more-vertical.svg?component'
-import _NewspaperIcon from './icons/newspaper.svg?component'
-import _NoSignalIcon from './icons/no-signal.svg?component'
-import _OmorphiaIcon from './icons/omorphia.svg?component'
-import _OrganizationIcon from './icons/organization.svg?component'
-import _PackageIcon from './icons/package.svg?component'
-import _PackageOpenIcon from './icons/package-open.svg?component'
-import _PackageClosedIcon from './icons/package-closed.svg?component'
-import _PaintBrushIcon from './icons/paintbrush.svg?component'
-import _PickaxeIcon from './icons/pickaxe.svg?component'
-import _PlayIcon from './icons/play.svg?component'
-import _PlugIcon from './icons/plug.svg?component'
-import _PlusIcon from './icons/plus.svg?component'
-import _RadioButtonIcon from './icons/radio-button.svg?component'
-import _RadioButtonCheckedIcon from './icons/radio-button-checked.svg?component'
-import _ReceiptTextIcon from './icons/receipt-text.svg?component'
-import _ReplyIcon from './icons/reply.svg?component'
-import _ReportIcon from './icons/report.svg?component'
-import _RestoreIcon from './icons/restore.svg?component'
-import _RightArrowIcon from './icons/right-arrow.svg?component'
-import _RotateCounterClockwiseIcon from './icons/rotate-ccw.svg?component'
-import _RotateClockwiseIcon from './icons/rotate-cw.svg?component'
-import _RssIcon from './icons/rss.svg?component'
-import _SaveIcon from './icons/save.svg?component'
-import _ScaleIcon from './icons/scale.svg?component'
-import _ScanEyeIcon from './icons/scan-eye.svg?component'
-import _SearchIcon from './icons/search.svg?component'
-import _SendIcon from './icons/send.svg?component'
-import _ServerIcon from './icons/server.svg?component'
-import _ServerPlusIcon from './icons/server-plus.svg?component'
-import _SettingsIcon from './icons/settings.svg?component'
-import _ShareIcon from './icons/share.svg?component'
-import _ShieldIcon from './icons/shield.svg?component'
-import _SignalIcon from './icons/signal.svg?component'
-import _SkullIcon from './icons/skull.svg?component'
-import _SlashIcon from './icons/slash.svg?component'
-import _SortAscendingIcon from './icons/sort-asc.svg?component'
-import _SortDescendingIcon from './icons/sort-desc.svg?component'
-import _SparklesIcon from './icons/sparkles.svg?component'
-import _SpinnerIcon from './icons/spinner.svg?component'
-import _StarIcon from './icons/star.svg?component'
-import _StopCircleIcon from './icons/stop-circle.svg?component'
-import _SunIcon from './icons/sun.svg?component'
-import _SunriseIcon from './icons/sunrise.svg?component'
-import _TagIcon from './icons/tag.svg?component'
-import _TagsIcon from './icons/tags.svg?component'
-import _TerminalSquareIcon from './icons/terminal-square.svg?component'
-import _TransferIcon from './icons/transfer.svg?component'
-import _TrashIcon from './icons/trash.svg?component'
-import _UndoIcon from './icons/undo.svg?component'
-import _RedoIcon from './icons/redo.svg?component'
-import _UnknownIcon from './icons/unknown.svg?component'
-import _UnknownDonationIcon from './icons/unknown-donation.svg?component'
-import _UpdatedIcon from './icons/updated.svg?component'
-import _UnlinkIcon from './icons/unlink.svg?component'
-import _UnplugIcon from './icons/unplug.svg?component'
-import _UploadIcon from './icons/upload.svg?component'
-import _UserIcon from './icons/user.svg?component'
-import _UserPlusIcon from './icons/user-plus.svg?component'
-import _UserXIcon from './icons/user-x.svg?component'
-import _UsersIcon from './icons/users.svg?component'
-import _VersionIcon from './icons/version.svg?component'
-import _WikiIcon from './icons/wiki.svg?component'
-import _WindowIcon from './icons/window.svg?component'
-import _WorldIcon from './icons/world.svg?component'
-import _WrenchIcon from './icons/wrench.svg?component'
-import _XIcon from './icons/x.svg?component'
-import _XCircleIcon from './icons/x-circle.svg?component'
-import _ZoomInIcon from './icons/zoom-in.svg?component'
-import _ZoomOutIcon from './icons/zoom-out.svg?component'
-import _CubeIcon from './icons/cube.svg?component'
-import _CloudIcon from './icons/cloud.svg?component'
-import _CogIcon from './icons/cog.svg?component'
-import _CPUIcon from './icons/cpu.svg?component'
-import _LoaderIcon from './icons/loader.svg?component'
-import _ImportIcon from './icons/import.svg?component'
-import _TimerIcon from './icons/timer.svg?component'
-import _GitGraphIcon from './icons/git-graph.svg?component'
-
-// Editor Icons
-import _BoldIcon from './icons/bold.svg?component'
-import _ItalicIcon from './icons/italic.svg?component'
-import _UnderlineIcon from './icons/underline.svg?component'
-import _StrikethroughIcon from './icons/strikethrough.svg?component'
-import _ListBulletedIcon from './icons/list-bulleted.svg?component'
-import _ListOrderedIcon from './icons/list-ordered.svg?component'
-import _TextQuoteIcon from './icons/text-quote.svg?component'
-import _Heading1Icon from './icons/heading-1.svg?component'
-import _Heading2Icon from './icons/heading-2.svg?component'
-import _Heading3Icon from './icons/heading-3.svg?component'
-
-import './omorphia.scss'
-
 export const ModrinthIcon = _ModrinthIcon
 export const FourOhFourNotFound = _FourOhFourNotFound
 export const ModrinthPlusIcon = _ModrinthPlusIcon
@@ -265,189 +82,5 @@ export const TumblrIcon = _TumblrIcon
 export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
-export const AlignLeftIcon = _AlignLeftIcon
-export const ArchiveIcon = _ArchiveIcon
-export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
-export const AsteriskIcon = _AsteriskIcon
-export const BadgeCheckIcon = _BadgeCheckIcon
-export const BanIcon = _BanIcon
-export const BellIcon = _BellIcon
-export const BellRingIcon = _BellRingIcon
-export const BlocksIcon = _BlocksIcon
-export const BookIcon = _BookIcon
-export const BookTextIcon = _BookTextIcon
-export const BookmarkIcon = _BookmarkIcon
-export const BotIcon = _BotIcon
-export const BoxIcon = _BoxIcon
-export const BoxImportIcon = _BoxImportIcon
-export const BracesIcon = _BracesIcon
-export const CalendarIcon = _CalendarIcon
-export const ChartIcon = _ChartIcon
-export const CheckIcon = _CheckIcon
-export const CheckCheckIcon = _CheckCheckIcon
-export const CheckCircleIcon = _CheckCircleIcon
-export const ChevronLeftIcon = _ChevronLeftIcon
-export const ChevronRightIcon = _ChevronRightIcon
-export const ClearIcon = _ClearIcon
-export const ClientIcon = _ClientIcon
-export const ClipboardCopyIcon = _ClipboardCopyIcon
-export const CodeIcon = _CodeIcon
-export const CoffeeIcon = _CoffeeIcon
-export const CoinsIcon = _CoinsIcon
-export const CollectionIcon = _CollectionIcon
-export const CompassIcon = _CompassIcon
-export const ContractIcon = _ContractIcon
-export const CopyIcon = _CopyIcon
-export const CopyrightIcon = _CopyrightIcon
-export const CrownIcon = _CrownIcon
-export const CurrencyIcon = _CurrencyIcon
-export const DashboardIcon = _DashboardIcon
-export const DatabaseIcon = _DatabaseIcon
-export const DownloadIcon = _DownloadIcon
-export const DropdownIcon = _DropdownIcon
-export const EditIcon = _EditIcon
-export const ExitIcon = _XIcon
-export const ExpandIcon = _ExpandIcon
-export const ExternalIcon = _ExternalIcon
-export const EyeIcon = _EyeIcon
-export const EyeOffIcon = _EyeOffIcon
-export const FileIcon = _FileIcon
-export const FileArchiveIcon = _FileArchiveIcon
-export const FileTextIcon = _FileTextIcon
-export const FilterIcon = _FilterIcon
-export const FilterXIcon = _FilterXIcon
-export const FolderArchiveIcon = _FolderArchiveIcon
-export const FolderOpenIcon = _FolderOpenIcon
-export const FolderSearchIcon = _FolderSearchIcon
-export const GapIcon = _GapIcon
-export const GaugeIcon = _GaugeIcon
-export const GameIcon = _GameIcon
-export const GitHubIcon = _GitHubIcon
-export const GlassesIcon = _GlassesIcon
-export const GlobeIcon = _GlobeIcon
-export const GridIcon = _GridIcon
-export const HamburgerIcon = _HamburgerIcon
-export const HammerIcon = _HammerIcon
-export const HashIcon = _HashIcon
-export const HeartIcon = _HeartIcon
-export const HeartHandshakeIcon = _HeartHandshakeIcon
-export const HistoryIcon = _HistoryIcon
-export const HomeIcon = _HomeIcon
-export const ImageIcon = _ImageIcon
-export const InProgressIcon = _InProgressIcon
-export const InfoIcon = _InfoIcon
-export const IssuesIcon = _IssuesIcon
-export const KeyIcon = _KeyIcon
-export const LanguagesIcon = _LanguagesIcon
-export const LeftArrowIcon = _LeftArrowIcon
-export const LibraryIcon = _LibraryIcon
-export const LightBulbIcon = _LightBulbIcon
-export const LinkIcon = _LinkIcon
-export const ListIcon = _ListIcon
-export const ListEndIcon = _ListEndIcon
-export const LockIcon = _LockIcon
-export const LockOpenIcon = _LockOpenIcon
-export const LogInIcon = _LogInIcon
-export const LogOutIcon = _LogOutIcon
-export const MailIcon = _MailIcon
-export const ManageIcon = _ManageIcon
-export const MaximizeIcon = _MaximizeIcon
-export const MemoryStickIcon = _MemoryStickIcon
-export const MessageIcon = _MessageIcon
-export const MicrophoneIcon = _MicrophoneIcon
-export const MinimizeIcon = _MinimizeIcon
-export const MinusIcon = _MinusIcon
-export const MonitorIcon = _MonitorIcon
-export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
-export const MoonIcon = _MoonIcon
-export const MoreHorizontalIcon = _MoreHorizontalIcon
-export const MoreVerticalIcon = _MoreVerticalIcon
-export const NewspaperIcon = _NewspaperIcon
-export const NoSignalIcon = _NoSignalIcon
-export const OmorphiaIcon = _OmorphiaIcon
-export const OrganizationIcon = _OrganizationIcon
-export const PackageIcon = _PackageIcon
-export const PackageOpenIcon = _PackageOpenIcon
-export const PackageClosedIcon = _PackageClosedIcon
-export const PaintBrushIcon = _PaintBrushIcon
-export const PickaxeIcon = _PickaxeIcon
-export const PlayIcon = _PlayIcon
-export const PlugIcon = _PlugIcon
-export const PlusIcon = _PlusIcon
-export const RadioButtonIcon = _RadioButtonIcon
-export const RadioButtonCheckedIcon = _RadioButtonCheckedIcon
-export const ReceiptTextIcon = _ReceiptTextIcon
-export const ReplyIcon = _ReplyIcon
-export const ReportIcon = _ReportIcon
-export const RestoreIcon = _RestoreIcon
-export const RightArrowIcon = _RightArrowIcon
-export const RotateCounterClockwiseIcon = _RotateCounterClockwiseIcon
-export const RotateClockwiseIcon = _RotateClockwiseIcon
-export const SaveIcon = _SaveIcon
-export const ScaleIcon = _ScaleIcon
-export const ScanEyeIcon = _ScanEyeIcon
-export const SearchIcon = _SearchIcon
-export const SendIcon = _SendIcon
-export const ServerIcon = _ServerIcon
-export const ServerPlusIcon = _ServerPlusIcon
-export const SettingsIcon = _SettingsIcon
-export const ShareIcon = _ShareIcon
-export const ShieldIcon = _ShieldIcon
-export const SignalIcon = _SignalIcon
-export const SkullIcon = _SkullIcon
-export const SlashIcon = _SlashIcon
-export const SortAscendingIcon = _SortAscendingIcon
-export const SortDescendingIcon = _SortDescendingIcon
-export const SparklesIcon = _SparklesIcon
-export const SpinnerIcon = _SpinnerIcon
-export const StarIcon = _StarIcon
-export const StopCircleIcon = _StopCircleIcon
-export const SunIcon = _SunIcon
-export const SunriseIcon = _SunriseIcon
-export const TagIcon = _TagIcon
-export const TagsIcon = _TagsIcon
-export const TerminalSquareIcon = _TerminalSquareIcon
-export const TransferIcon = _TransferIcon
-export const TrashIcon = _TrashIcon
-export const UndoIcon = _UndoIcon
-export const RedoIcon = _RedoIcon
-export const UnknownIcon = _UnknownIcon
-export const UnknownDonationIcon = _UnknownDonationIcon
-export const UpdatedIcon = _UpdatedIcon
-export const UnlinkIcon = _UnlinkIcon
-export const UnplugIcon = _UnplugIcon
-export const UploadIcon = _UploadIcon
-export const UserIcon = _UserIcon
-export const UserPlusIcon = _UserPlusIcon
-export const UserXIcon = _UserXIcon
-export const UsersIcon = _UsersIcon
-export const VersionIcon = _VersionIcon
-export const WikiIcon = _WikiIcon
-export const WindowIcon = _WindowIcon
-export const WorldIcon = _WorldIcon
-export const WrenchIcon = _WrenchIcon
-export const XIcon = _XIcon
-export const XCircleIcon = _XCircleIcon
-export const ZoomInIcon = _ZoomInIcon
-export const ZoomOutIcon = _ZoomOutIcon
-export const BoldIcon = _BoldIcon
-export const ItalicIcon = _ItalicIcon
-export const UnderlineIcon = _UnderlineIcon
-export const StrikethroughIcon = _StrikethroughIcon
-export const ListBulletedIcon = _ListBulletedIcon
-export const ListOrderedIcon = _ListOrderedIcon
-export const TextQuoteIcon = _TextQuoteIcon
-export const Heading1Icon = _Heading1Icon
-export const Heading2Icon = _Heading2Icon
-export const Heading3Icon = _Heading3Icon
-export const CubeIcon = _CubeIcon
-export const CloudIcon = _CloudIcon
-export const CogIcon = _CogIcon
-export const CPUIcon = _CPUIcon
-export const LoaderIcon = _LoaderIcon
-export const ImportIcon = _ImportIcon
-export const CardIcon = _CardIcon
-export const TimerIcon = _TimerIcon
-export const RssIcon = _RssIcon
-export const GitGraphIcon = _GitGraphIcon
-export const ArrowBigRightDashIcon = _ArrowBigRightDashIcon
+
+export * from './generated-icons'
diff --git a/packages/assets/package.json b/packages/assets/package.json
index 96b19404..3142a78e 100644
--- a/packages/assets/package.json
+++ b/packages/assets/package.json
@@ -5,12 +5,16 @@
   "main": "./index.ts",
   "types": "./index.ts",
   "scripts": {
-    "lint": "eslint . && prettier --check .",
-    "fix": "eslint . --fix && prettier --write ."
+    "lint": "pnpm run icons:validate && eslint . && prettier --check .",
+    "fix": "pnpm run icons:generate && eslint . --fix && prettier --write .",
+    "icons:test": "jiti build/generate-exports.ts --test",
+    "icons:validate": "jiti build/generate-exports.ts --validate",
+    "icons:generate": "jiti build/generate-exports.ts"
   },
   "devDependencies": {
     "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
+    "jiti": "^2.4.2",
     "tsconfig": "workspace:*",
     "vue": "^3.5.13"
   }
diff --git a/packages/ui/src/components/billing/ServersSpecs.vue b/packages/ui/src/components/billing/ServersSpecs.vue
index f9a58124..1b225f5e 100644
--- a/packages/ui/src/components/billing/ServersSpecs.vue
+++ b/packages/ui/src/components/billing/ServersSpecs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AutoLink from '../base/AutoLink.vue'
-import { MemoryStickIcon, DatabaseIcon, CPUIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
+import { MemoryStickIcon, DatabaseIcon, CpuIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
 
 const emit = defineEmits<{
   (e: 'click-bursting-link'): void
@@ -40,7 +40,7 @@ const sharedCpus = computed(() => {
       <DatabaseIcon class="h-5 w-5 shrink-0" /> {{ formattedStorage }} GB Storage
     </li>
     <li class="flex items-center gap-2">
-      <CPUIcon class="h-5 w-5 shrink-0" /> {{ sharedCpus }} Shared CPUs
+      <CpuIcon class="h-5 w-5 shrink-0" /> {{ sharedCpus }} Shared CPUs
     </li>
     <li class="flex items-center gap-2">
       <SparklesIcon class="h-5 w-5 shrink-0" /> Bursts up to {{ cpus }} CPUs
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c7aee77..e867c537 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -361,6 +361,9 @@ importers:
       eslint-config-custom:
         specifier: workspace:*
         version: link:../eslint-config-custom
+      jiti:
+        specifier: ^2.4.2
+        version: 2.4.2
       tsconfig:
         specifier: workspace:*
         version: link:../tsconfig