diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx
index ba13e6ee0581..e78e9e3eabc9 100644
--- a/frontend/__tests__/components/Button.spec.tsx
+++ b/frontend/__tests__/components/Button.spec.tsx
@@ -1,3 +1,4 @@
+import { faKeyboard } from "@fortawesome/free-solid-svg-icons";
 import { render, cleanup } from "@solidjs/testing-library";
 import { describe, it, expect, vi, afterEach } from "vitest";
 
@@ -52,7 +53,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
       />
     ));
@@ -70,7 +71,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
           fixedWidth: true,
         }}
       />
@@ -88,7 +89,7 @@ describe("Button component", () => {
         }}
         fa={{
           fixedWidth: true,
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
         text="Hello"
       />
@@ -105,7 +106,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
         text="Hello"
       />
diff --git a/frontend/package.json b/frontend/package.json
index bac5f695da18..bd6f507f52b5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,10 @@
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
+    "@fortawesome/fontawesome-svg-core": "7.1.0",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/schemas": "workspace:*",
@@ -60,7 +64,7 @@
   },
   "devDependencies": {
     "@eslint/json": "0.14.0",
-    "@fortawesome/fontawesome-free": "5.15.4",
+    "@fortawesome/fontawesome-common-types": "0.2.36",
     "@monkeytype/oxlint-config": "workspace:*",
     "@monkeytype/typescript-config": "workspace:*",
     "@solidjs/testing-library": "0.8.10",
@@ -83,7 +87,6 @@
     "eslint-plugin-compat": "6.0.2",
     "eslint-plugin-solid": "0.14.5",
     "firebase-tools": "13.15.1",
-    "fontawesome-subset": "4.4.0",
     "happy-dom": "20.0.10",
     "jsdom": "27.4.0",
     "madge": "8.0.0",
diff --git a/frontend/src/html/pages/test-result.html b/frontend/src/html/pages/test-result.html
index f40f5a3a80f8..88416a6324ed 100644
--- a/frontend/src/html/pages/test-result.html
+++ b/frontend/src/html/pages/test-result.html
@@ -6,6 +6,7 @@
       <div class="group wpm">
         <div class="top">
           <div class="text">wpm</div>
+          <i class="fas fa-user"></i>
           <div
             class="crown hidden"
             aria-label=""
diff --git a/frontend/src/styles/account.scss b/frontend/src/styles/account.scss
index 71eedce8ff24..7fd80340cec5 100644
--- a/frontend/src/styles/account.scss
+++ b/frontend/src/styles/account.scss
@@ -254,7 +254,7 @@
           align-items: center;
         }
 
-        .fas,
+        .fa,
         .punc {
           margin-right: 0.25rem;
         }
@@ -337,7 +337,7 @@
       &.loading {
         pointer-events: none;
       }
-      &.disabled .fas {
+      &.disabled .fa {
         opacity: 0.5;
         color: var(--sub-color);
       }
@@ -374,9 +374,9 @@
       .title {
         display: flex;
         align-items: baseline;
-        .fab,
-        .fas,
-        .far {
+        .fa,
+        .fa,
+        .fa {
           margin-right: 0.5em;
         }
       }
diff --git a/frontend/src/styles/buttons.scss b/frontend/src/styles/buttons.scss
index b14263e1ae91..190b7ab6bde9 100644
--- a/frontend/src/styles/buttons.scss
+++ b/frontend/src/styles/buttons.scss
@@ -6,9 +6,9 @@ a.textButton {
 button,
 .button,
 .textButton {
-  .fas,
-  .far,
-  .fab,
+  .fa,
+  .fa,
+  .fa,
   .icon {
     line-height: 1.25;
     pointer-events: none;
@@ -127,7 +127,7 @@ button.text,
   font-size: 1em;
   display: inline-flex;
   gap: 0.5em;
-  align-items: baseline;
+  align-items: center;
   justify-content: center;
 
   &.danger {
diff --git a/frontend/src/styles/commandline.scss b/frontend/src/styles/commandline.scss
index 5af927d771e2..a78d0e6755c4 100644
--- a/frontend/src/styles/commandline.scss
+++ b/frontend/src/styles/commandline.scss
@@ -96,8 +96,14 @@
           color: var(--sub-color);
         }
 
-        .fas,
-        .far {
+        i.iconPlaceholder {
+          display: inline-block;
+          margin-right: 0.5rem;
+          width: 1.25em;
+        }
+
+        .fa,
+        .fa {
           margin-right: 0.5rem;
           color: var(--sub-color);
         }
@@ -109,9 +115,9 @@
         &.active {
           color: var(--bg-color) !important;
           background: var(--text-color) !important;
-          .fas,
-          .far,
-          .fab {
+          .fa,
+          .fa,
+          .fa {
             color: var(--bg-color);
           }
         }
diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index 0789286106ea..c56dfb9f11d1 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -346,8 +346,8 @@ kbd {
   align-items: baseline;
   --spacing: 0.5em;
   --horizontalScale: 1.25;
-  .fas,
-  .far {
+  .fa,
+  .fa {
     margin-right: calc(var(--spacing) * var(--horizontalScale));
     margin-left: calc(var(--spacing) * var(--horizontalScale));
     margin-top: var(--spacing);
diff --git a/frontend/src/styles/fontawesome-5.scss b/frontend/src/styles/fontawesome-5.scss
deleted file mode 100644
index 933587471119..000000000000
--- a/frontend/src/styles/fontawesome-5.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "@fortawesome/fontawesome-free/scss/_variables.scss";
-@import "@fortawesome/fontawesome-free/scss/_mixins.scss";
-@import "@fortawesome/fontawesome-free/scss/_core.scss";
-
-/** fixed-with **/
-@import "@fortawesome/fontawesome-free/scss/_fixed-width.scss"; //fa-fw
-/** animated **/
-@import "@fortawesome/fontawesome-free/scss/_animated.scss"; //fa-spin
-/** rotated **/
-@import "@fortawesome/fontawesome-free/scss/_rotated-flipped.scss"; //fa-rotate-90
-
-@font-face {
-  font-family: "Font Awesome";
-  font-display: block;
-  font-weight: 900;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-solid-900.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-solid-900.woff2") format("woff2");
-  }
-}
-
-@font-face {
-  font-family: "Font Awesome";
-  font-display: block;
-  font-weight: 400;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-regular-400.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-regular-400.woff2") format("woff2");
-  }
-}
-
-.fa,
-.fas {
-  font-family: "Font Awesome";
-  font-weight: 900;
-}
-
-.far {
-  font-family: "Font Awesome";
-  font-weight: 400;
-}
-
-.fab {
-  font-family: "Font Awesome Brands";
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Font Awesome Brands";
-  font-display: block;
-  font-weight: 400;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-brands-400.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-brands-400.woff2") format("woff2");
-  }
-}
-
-@import "@fortawesome/fontawesome-free/scss/_icons.scss";
diff --git a/frontend/src/styles/fontawesome-6.scss b/frontend/src/styles/fontawesome-6.scss
deleted file mode 100644
index 55f8f582025d..000000000000
--- a/frontend/src/styles/fontawesome-6.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@import "@fortawesome/fontawesome-free/scss/_functions.scss";
-
-@import "@fortawesome/fontawesome-free/scss/_variables.scss";
-@import "@fortawesome/fontawesome-free/scss/_mixins.scss";
-@import "@fortawesome/fontawesome-free/scss/_core.scss";
-
-/** fixed-with **/
-@import "@fortawesome/fontawesome-free/scss/_fixed-width.scss"; //fa-fw
-/** animated **/
-@import "@fortawesome/fontawesome-free/scss/_animated.scss"; //fa-spin
-/** rotated **/
-@import "@fortawesome/fontawesome-free/scss/_rotated-flipped.scss"; //fa-rotate-90
-
-@font-face {
-  font-family: "Font Awesome";
-  font-display: block;
-  font-weight: 900;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-solid-900.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-solid-900.woff2") format("woff2");
-  }
-}
-
-@font-face {
-  font-family: "Font Awesome";
-  font-display: block;
-  font-weight: 400;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-regular-400.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-regular-400.woff2") format("woff2");
-  }
-}
-
-.fa,
-.fas {
-  font-family: "Font Awesome";
-  font-weight: 900;
-}
-
-.far {
-  font-family: "Font Awesome";
-  font-weight: 400;
-}
-
-.fab {
-  font-family: "Font Awesome Brands";
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Font Awesome Brands";
-  font-display: block;
-  font-weight: 400;
-  @if variable-exists(fontAwesomeOverride) {
-    src: url("#{$fontAwesomeOverride}/fa-brands-400.woff2") format("woff2");
-  } @else {
-    src: url("/webfonts-generated/fa-brands-400.woff2") format("woff2");
-  }
-}
-
-@each $name in $fontawesomeSolid {
-  $icon: map.get($fa-icons, $name);
-  .#{$fa-css-prefix}-#{$name}::before {
-    content: unquote('"#{ $icon }"');
-  }
-}
-
-@each $name in $fontawesomeBrands {
-  $icon: map.get($fa-brand-icons, $name);
-  .#{$fa-css-prefix}-#{$name}:before {
-    content: unquote('"#{ $icon }"');
-  }
-}
diff --git a/frontend/src/styles/inputs.scss b/frontend/src/styles/inputs.scss
index 2e3533bde952..e817c235984d 100644
--- a/frontend/src/styles/inputs.scss
+++ b/frontend/src/styles/inputs.scss
@@ -115,42 +115,39 @@ input[type="checkbox"] {
   transition: background 0.125s;
   flex-shrink: 0;
   &:after {
-    font-family: "Font Awesome";
-    content: "\f00c";
+    content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: block;
     border-radius: calc((var(--roundness) / 2) - 0.1em);
-    font-weight: 900;
     position: absolute;
-    display: grid;
-    justify-content: center;
-    align-content: center;
-    font-size: 0.75em;
-    transition: color 0.125s;
-    color: transparent;
+    // Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.
+    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>')
+      center / 75% no-repeat;
+    background: transparent;
+    transition: background 0.125s;
   }
 
   &:checked:after {
-    color: var(--main-color);
+    background: var(--main-color);
   }
   &:hover:after {
-    color: var(--bg-color);
+    background: var(--bg-color);
   }
   &:hover:checked:after {
-    color: var(--text-color);
+    background: var(--text-color);
   }
 
   &[disabled] {
     opacity: 0.33;
     pointer-events: none;
     &:hover:after {
-      color: var(--sub-alt-color);
+      background: var(--sub-alt-color);
     }
     &:hover:checked:after {
-      color: var(--main-color);
+      background: var(--main-color);
     }
   }
 }
diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index 91c58ceb8ceb..5b414b1f5975 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -19,7 +19,7 @@ nav {
     .text {
       font-size: 0.75em;
       align-self: center;
-      .fas {
+      .fa {
         margin-left: 0.33em;
       }
     }
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 5418f2f68af1..20d24b8d32b8 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -340,7 +340,7 @@ body.darkMode {
         display: grid;
         gap: 0.5rem;
         grid-template-columns: 2fr 3rem;
-        .button .fas {
+        .button .fa {
           pointer-events: none;
         }
       }
@@ -365,7 +365,7 @@ body.darkMode {
         display: grid;
         gap: 0.5rem;
         grid-template-columns: 2fr auto auto;
-        .button .fas {
+        .button .fa {
           pointer-events: none;
         }
       }
@@ -1299,7 +1299,7 @@ body.darkMode {
           .length.red {
             color: var(--error-color);
           }
-          i.fas {
+          .fa {
             margin-right: 0.5em;
           }
         }
@@ -1618,7 +1618,7 @@ body.darkMode {
       font-size: 0.75em;
       margin-bottom: 1rem;
       width: 100%;
-      .fas {
+      .fa {
         margin-right: 0.25em;
       }
     }
diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 6aa5b86db954..a7418e16aadb 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -34,11 +34,11 @@
     margin: -0.25em;
     padding: 0.25em;
 
-    .fas {
+    .fa {
       transition: transform 0.25s;
     }
 
-    &.rotateIcon .fas {
+    &.rotateIcon .fa {
       transform: rotate(-90deg);
     }
   }
@@ -117,7 +117,7 @@
       .button {
         height: auto;
 
-        .fas {
+        .fa {
           margin-right: 0rem;
         }
       }
@@ -268,7 +268,7 @@
         grid-template-columns: 1fr 1fr 1fr;
         gap: 1rem;
       }
-      .fas {
+      .fa {
         margin-right: 0rem;
       }
     }
@@ -287,18 +287,18 @@
       font-weight: 300;
       display: flex;
       align-items: baseline;
-      .fab,
-      .fas,
-      .far,
+      .fa,
+      .fa,
+      .fa,
       .textIcon {
         margin-right: 0.5em;
       }
     }
 
     &.themes .groupTitle {
-      .fab,
-      .fas,
-      .far {
+      .fa,
+      .fa,
+      .fa {
         margin-bottom: 0;
       }
     }
@@ -431,8 +431,8 @@
           width: 1.25rem;
           transition: 0.25s;
           opacity: 0;
-          .far,
-          .fas {
+          .fa,
+          .fa {
             margin: 0;
             pointer-events: none;
           }
@@ -460,8 +460,8 @@
           width: 1.25rem;
           transition: 0.25s;
           opacity: 0;
-          .far,
-          .fas {
+          .fa,
+          .fa {
             margin: 0;
             pointer-events: none;
           }
@@ -502,7 +502,7 @@
           transition: 0.25s;
           opacity: 0;
           color: inherit;
-          .far {
+          .fa {
             margin: 0;
           }
           &.active {
@@ -597,7 +597,7 @@
       margin-left: 0.5em;
       align-self: center;
       opacity: 0;
-      .fas {
+      .fa {
         margin-right: 0;
       }
     }
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index d0064f2c7c24..0f313410b0a3 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -109,7 +109,7 @@
     gap: 0 1em;
     flex-wrap: wrap;
 
-    .fas {
+    .fa {
       margin-left: 0.33em;
     }
   }
@@ -895,7 +895,7 @@
             }
           }
 
-          .fas {
+          .fa {
             color: var(--color);
             line-height: 0;
           }
@@ -1078,7 +1078,7 @@
         max-width: 30rem;
       }
 
-      .tags .bottom .fas {
+      .tags .bottom .fa {
         margin-left: 0.5rem;
       }
 
@@ -1175,7 +1175,7 @@
         .bottom {
           font-size: 1rem;
           line-height: 1.25;
-          .lbChange .fas {
+          .lbChange .fa {
             margin-right: 0.15rem;
           }
         }
@@ -1469,7 +1469,7 @@
       }
     }
 
-    .fas {
+    .fa {
       margin-right: 0.5rem;
     }
   }
diff --git a/frontend/src/styles/vendor.scss b/frontend/src/styles/vendor.scss
index 0b716f23a71d..a3ce6dbb3f29 100644
--- a/frontend/src/styles/vendor.scss
+++ b/frontend/src/styles/vendor.scss
@@ -1,25 +1,3 @@
-@import "fontawesome-5"; // the screenshotting library has some issues with css layers
-
-/* fontawesome icon styles do not respect the hidden class from the hidden layer.
-* By having these rules outside any layer we make sure that the display none is
-* correctly applied when an element possesses both a .fa* class and the hidden class */
-.fas.hidden,
-.fab.hidden,
-.fa.hidden,
-.far.hidden {
-  display: none;
-}
-
-// same for invisible
-.fas.invisible,
-.fab.invisible,
-.fa.invisible,
-.far.invisible {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
 @import "normalize.css" layer(normalize);
 @layer vendor {
   @import "slim-select/styles";
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index bce663b31544..f016a63250ed 100644
--- a/frontend/src/ts/commandline/commandline.ts
+++ b/frontend/src/ts/commandline/commandline.ts
@@ -417,7 +417,7 @@ function getCommandIconsHtml(command: Command & { isActive: boolean }): {
     }
   }
 
-  let configIconHtml = `<i class="fas fa-fw"></i>`;
+  let configIconHtml = `<i class="iconPlaceholder"></i>`;
   if (command.isActive) {
     configIconHtml = `<i class="fas fa-fw fa-check"></i>`;
   }
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index a36f82caa3fb..e2d4c29189a5 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -1,3 +1,4 @@
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { ErrorBoundary, JSXElement, Resource, Show, Suspense } from "solid-js";
 
 import * as Notifications from "../../elements/notifications";
@@ -52,7 +53,7 @@ export default function AsyncContent<T>(
           <>
             <Show when={p.showLoader && props.resource.loading}>
               <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="circle-notch" fixedWidth spin />
+                <Fa icon={faCircleNotch} fixedWidth spin />
               </div>
             </Show>
             {p.children(value())}
@@ -66,7 +67,7 @@ export default function AsyncContent<T>(
           <Suspense
             fallback={
               <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="circle-notch" fixedWidth spin />
+                <Fa icon={faCircleNotch} fixedWidth spin />
               </div>
             }
           >
diff --git a/frontend/src/ts/components/common/Fa.module.css b/frontend/src/ts/components/common/Fa.module.css
new file mode 100644
index 000000000000..8b2fc65429b7
--- /dev/null
+++ b/frontend/src/ts/components/common/Fa.module.css
@@ -0,0 +1,12 @@
+.spin {
+  animation: spin 2s 0s infinite linear;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx
index aa994ac26dfd..cd829726130d 100644
--- a/frontend/src/ts/components/common/Fa.tsx
+++ b/frontend/src/ts/components/common/Fa.tsx
@@ -1,28 +1,68 @@
-import { JSXElement } from "solid-js";
+import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { createMemo, JSXElement, Show } from "solid-js";
 
-import { FaObject } from "../../types/font-awesome";
+import style from "./Fa.module.css";
 
 export type FaProps = {
   fixedWidth?: boolean;
   spin?: boolean;
   size?: number;
-} & FaObject;
+  icon: IconDefinition;
+};
 
 export function Fa(props: FaProps): JSXElement {
-  const variant = (): string => props.variant ?? "solid";
+  const i = createMemo(() => props.icon?.icon);
+
   return (
-    <i
-      class={`fa-${props.icon}`}
+    // <div
+    // class="flex items-center justify-center"
+    //   style={{
+    //     "font-size": props.size !== undefined ? `${props.size}em` : undefined,
+    //   }}
+    // >
+    <svg
       classList={{
-        ["fas"]: variant() === "solid",
-        ["far"]: variant() === "regular",
-        ["fab"]: variant() === "brand",
-        ["fa-fw"]: props.fixedWidth === true,
-        ["fa-spin"]: props.spin === true,
+        [style["spin"] as string]: props.spin === true,
       }}
       style={{
+        display: "inline",
+        height: "1em",
+        "vertical-align": "-0.125em",
+        "transform-origin": "center center",
         "font-size": props.size !== undefined ? `${props.size}em` : undefined,
+        overflow: "visible",
+        width: props.fixedWidth === true ? "1.25em" : undefined,
       }}
-    ></i>
+      viewBox={`0 0 ${i()[0]} ${i()[1]}`}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        {/* <g transform={`translate(${i()[0] / 2} ${i()[1] / 2})`}> */}
+        <Show
+          when={typeof i()[4] === "string"}
+          fallback={
+            <>
+              <path
+                d={i()[4][0]}
+                // transform={`translate(${i()[0] / -2} ${i()[1] / -2})`}
+              ></path>
+              <path
+                d={i()[4][1]}
+                fill={"currentColor"}
+                // transform={`translate(${i()[0] / -2} ${i()[1] / -2})`}
+              ></path>
+            </>
+          }
+        >
+          <path
+            d={i()[4] as string}
+            fill={"currentColor"}
+            // transform={`translate(${i()[0] / -2} ${i()[1] / -2})`}
+          ></path>
+        </Show>
+      </g>
+    </svg>
+    // </div>
   );
 }
diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index fd6dbe21c6ba..847768108bc7 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -1,3 +1,12 @@
+import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
+import {
+  faCode,
+  faDonate,
+  faEnvelope,
+  faFileContract,
+  faLock,
+  faShieldAlt,
+} from "@fortawesome/free-solid-svg-icons";
 import { JSXElement } from "solid-js";
 
 import { getFocus, getIsScreenshotting } from "../../../signals/core";
@@ -17,7 +26,6 @@ export function Footer(): JSXElement {
       })}
     >
       <Keytips />
-
       <div
         class="-m-2 flex justify-between gap-8 transition-opacity"
         classList={{
@@ -29,7 +37,7 @@ export function Footer(): JSXElement {
             type="text"
             text="contact"
             fa={{
-              icon: "envelope",
+              icon: faEnvelope,
               fixedWidth: true,
             }}
             onClick={() => showModal("Contact")}
@@ -38,7 +46,7 @@ export function Footer(): JSXElement {
             type="text"
             text="support"
             fa={{
-              icon: "donate",
+              icon: faDonate,
               fixedWidth: true,
             }}
             onClick={() => showModal("Support")}
@@ -47,7 +55,7 @@ export function Footer(): JSXElement {
             type="text"
             text="github"
             fa={{
-              icon: "code",
+              icon: faCode,
               fixedWidth: true,
             }}
             href="https://github.com/monkeytypegame/monkeytype"
@@ -56,8 +64,7 @@ export function Footer(): JSXElement {
             type="text"
             text="discord"
             fa={{
-              icon: "discord",
-              variant: "brand",
+              icon: faDiscord,
               fixedWidth: true,
             }}
             href="https://www.discord.gg/monkeytype"
@@ -66,8 +73,7 @@ export function Footer(): JSXElement {
             type="text"
             text="twitter"
             fa={{
-              icon: "twitter",
-              variant: "brand",
+              icon: faTwitter,
               fixedWidth: true,
             }}
             href="https://x.com/monkeytype"
@@ -76,7 +82,7 @@ export function Footer(): JSXElement {
             type="text"
             text="terms"
             fa={{
-              icon: "file-contract",
+              icon: faFileContract,
               fixedWidth: true,
             }}
             href="/terms-of-service.html"
@@ -86,7 +92,7 @@ export function Footer(): JSXElement {
             type="text"
             text="security"
             fa={{
-              icon: "shield-alt",
+              icon: faShieldAlt,
               fixedWidth: true,
             }}
           />
@@ -95,7 +101,7 @@ export function Footer(): JSXElement {
             type="text"
             text="privacy"
             fa={{
-              icon: "lock",
+              icon: faLock,
               fixedWidth: true,
             }}
           />
diff --git a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
index 7c6238a0bb2f..db67d006ecb2 100644
--- a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
+++ b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
@@ -1,3 +1,4 @@
+import { faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { JSXElement, createSignal, onMount, onCleanup } from "solid-js";
 
 import { getActivePage } from "../../../signals/core";
@@ -43,7 +44,7 @@ export function ScrollToTop(): JSXElement {
           });
         }}
       >
-        <Fa icon="angle-double-up" />
+        <Fa icon={faAngleDoubleUp} />
       </button>
     </div>
   );
diff --git a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
index ed4d13ff6098..d661098adbb7 100644
--- a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
+++ b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx
@@ -1,3 +1,4 @@
+import { faPalette, faStar } from "@fortawesome/free-solid-svg-icons";
 import { JSXElement, Show } from "solid-js";
 
 import * as Commandline from "../../../commandline/commandline";
@@ -43,10 +44,10 @@ export function ThemeIndicator(): JSXElement {
       <div class="relative">
         <Show when={getThemeIndicator().isFavorite}>
           <div class="bg-bg absolute top-[-0.5em] right-[-0.5em] flex rounded-full p-[0.25em]">
-            <Fa icon="star" size={0.5} />
+            <Fa icon={faStar} size={0.5} />
           </div>
         </Show>
-        <Fa icon="palette" fixedWidth />
+        <Fa icon={faPalette} fixedWidth />
       </div>
       <div class="text">{getThemeIndicator().text}</div>
     </button>
diff --git a/frontend/src/ts/components/layout/footer/VersionButton.tsx b/frontend/src/ts/components/layout/footer/VersionButton.tsx
index a335878452e0..db013fea6264 100644
--- a/frontend/src/ts/components/layout/footer/VersionButton.tsx
+++ b/frontend/src/ts/components/layout/footer/VersionButton.tsx
@@ -1,3 +1,4 @@
+import { faCodeBranch } from "@fortawesome/free-solid-svg-icons";
 import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
 import { JSXElement, Show, createSignal } from "solid-js";
 import { envConfig } from "virtual:env-config";
@@ -46,7 +47,7 @@ export function VersionButton(): JSXElement {
 
   return (
     <button type="button" class="textButton flex" onClick={handleClick}>
-      <Fa icon="code-branch" fixedWidth />
+      <Fa icon={faCodeBranch} fixedWidth />
       <div class="text">{getVersionText()}</div>
       <Show when={showNewIndicator()}>
         <div
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index a8479c1be44d..76caf3a481f8 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -1,3 +1,4 @@
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { For, JSXElement, onCleanup, onMount } from "solid-js";
 import { debounce } from "throttle-debounce";
 
@@ -66,7 +67,7 @@ function Banner(props: BannerType): JSXElement {
                 remove();
               }}
             >
-              <Fa icon="times" fixedWidth />
+              <Fa icon={faTimes} fixedWidth />
             </button>
           }
         />
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
index 0c66dd4f836b..18541c1abeac 100644
--- a/frontend/src/ts/components/layout/overlays/Overlays.tsx
+++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -1,3 +1,4 @@
+import { faTerminal } from "@fortawesome/free-solid-svg-icons";
 import { JSXElement } from "solid-js";
 
 import { getIsScreenshotting } from "../../../signals/core";
@@ -29,7 +30,7 @@ export function Overlays(): JSXElement {
         }}
         tabIndex="-1"
       >
-        <Fa icon="terminal" />
+        <Fa icon={faTerminal} />
       </button>
       <Banners />
       <MediaQueryDebugger />
diff --git a/frontend/src/ts/components/modals/ContactModal.tsx b/frontend/src/ts/components/modals/ContactModal.tsx
index 6df442935430..7d9a848bb792 100644
--- a/frontend/src/ts/components/modals/ContactModal.tsx
+++ b/frontend/src/ts/components/modals/ContactModal.tsx
@@ -1,3 +1,11 @@
+import {
+  faQuestionCircle,
+  faCommentDots,
+  faBug,
+  faUserCircle,
+  faBriefcase,
+  faEllipsisH,
+} from "@fortawesome/free-solid-svg-icons";
 import { JSXElement } from "solid-js";
 
 import { AnimatedModal } from "../common/AnimatedModal";
@@ -25,7 +33,7 @@ export function ContactModal(): JSXElement {
           text="Question"
           class={buttonClass}
           fa={{
-            icon: "question-circle",
+            icon: faQuestionCircle,
             fixedWidth: true,
           }}
         />
@@ -33,7 +41,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:contact@monkeytype.com?subject=[Feedback] "
           fa={{
-            icon: "comment-dots",
+            icon: faCommentDots,
             fixedWidth: true,
           }}
           text="Feedback"
@@ -43,7 +51,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:support@monkeytype.com?subject=[Bug] "
           fa={{
-            icon: "bug",
+            icon: faBug,
             fixedWidth: true,
           }}
           text="Bug Report"
@@ -53,7 +61,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:support@monkeytype.com?subject=[Account] "
           fa={{
-            icon: "user-circle",
+            icon: faUserCircle,
             fixedWidth: true,
           }}
           text="Account Help"
@@ -63,7 +71,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:jack@monkeytype.com?subject=[Business] "
           fa={{
-            icon: "briefcase",
+            icon: faBriefcase,
             fixedWidth: true,
           }}
           text="Business Inquiry"
@@ -73,7 +81,7 @@ export function ContactModal(): JSXElement {
           type="button"
           href="mailto:contact@monkeytype.com?subject=[Other] "
           fa={{
-            icon: "ellipsis-h",
+            icon: faEllipsisH,
             fixedWidth: true,
           }}
           text="Other"
diff --git a/frontend/src/ts/components/modals/SupportModal.tsx b/frontend/src/ts/components/modals/SupportModal.tsx
index c60b3b33710e..f0a00cffaf75 100644
--- a/frontend/src/ts/components/modals/SupportModal.tsx
+++ b/frontend/src/ts/components/modals/SupportModal.tsx
@@ -1,3 +1,10 @@
+import { faPatreon } from "@fortawesome/free-brands-svg-icons";
+import {
+  faAd,
+  faDonate,
+  faHeart,
+  faTshirt,
+} from "@fortawesome/free-solid-svg-icons";
 import { JSXElement } from "solid-js";
 
 import { setCommandlineSubgroup } from "../../signals/core";
@@ -19,7 +26,7 @@ export function SupportModal(): JSXElement {
       <div>
         Thank you so much for thinking about supporting this project. It would
         not be possible without you and your continued support.{" "}
-        <Fa icon="heart" />
+        <Fa icon={faHeart} />
       </div>
       <div class="xs:grid-cols-2 grid grid-cols-1 gap-4 md:grid-cols-4">
         <Button
@@ -29,7 +36,7 @@ export function SupportModal(): JSXElement {
             showModal("Commandline");
           }}
           fa={{
-            icon: "ad",
+            icon: faAd,
             fixedWidth: true,
             size: iconScale,
           }}
@@ -40,7 +47,7 @@ export function SupportModal(): JSXElement {
           type="button"
           href="https://ko-fi.com/monkeytype"
           fa={{
-            icon: "donate",
+            icon: faDonate,
             fixedWidth: true,
             size: iconScale,
           }}
@@ -51,8 +58,7 @@ export function SupportModal(): JSXElement {
           type="button"
           href="https://www.patreon.com/monkeytype"
           fa={{
-            variant: "brand",
-            icon: "patreon",
+            icon: faPatreon,
             fixedWidth: true,
             size: iconScale,
           }}
@@ -63,7 +69,7 @@ export function SupportModal(): JSXElement {
           type="button"
           href="https://monkeytype.store"
           fa={{
-            icon: "tshirt",
+            icon: faTshirt,
             fixedWidth: true,
             size: iconScale,
           }}
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index f555bb22249b..a6ee11d1285a 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -1,3 +1,23 @@
+import {
+  faDiscord,
+  faGithub,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import {
+  faAd,
+  faAlignLeft,
+  faBug,
+  faChartArea,
+  faCodeBranch,
+  faDonate,
+  faEnvelope,
+  faHandHoldingUsd,
+  faInfoCircle,
+  faKeyboard,
+  faLifeRing,
+  faListOl,
+  faUsers,
+} from "@fortawesome/free-solid-svg-icons";
 import { intervalToDuration } from "date-fns";
 import { createResource, For, JSXElement, Show } from "solid-js";
 
@@ -159,7 +179,7 @@ export function AboutPage(): JSXElement {
           </div>
         </section>
         <section>
-          <H2 fa={{ icon: "info-circle" }} text="about" />
+          <H2 fa={{ icon: faInfoCircle }} text="about" />
           <p>
             Monkeytype is a minimalistic and customizable typing test. It
             features many test modes, an account system to save your typing
@@ -176,7 +196,7 @@ export function AboutPage(): JSXElement {
           </p>
         </section>
         <section>
-          <H3 fa={{ icon: "align-left" }} text="word set" />
+          <H3 fa={{ icon: faAlignLeft }} text="word set" />
           <p>
             By default, this website uses the most common 200 words in the
             English language to generate its tests. You can change to an
@@ -185,7 +205,7 @@ export function AboutPage(): JSXElement {
           </p>
         </section>
         <section>
-          <H3 fa={{ icon: "keyboard" }} text="keybinds" />
+          <H3 fa={{ icon: faKeyboard }} text="keybinds" />
           <p>
             You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
             <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
@@ -195,7 +215,7 @@ export function AboutPage(): JSXElement {
           </p>
         </section>
         <section>
-          <H3 fa={{ icon: "list-ol" }} text="stats" />
+          <H3 fa={{ icon: faListOl }} text="stats" />
           <dl class="grid">
             <dt class="col-1 mr-4">wpm</dt>
             <dd class="col-2">
@@ -232,7 +252,7 @@ export function AboutPage(): JSXElement {
             class="ad full-width advertisement ad-h place-self-center"
           >
             <div class="icon">
-              <Fa icon="ad" />
+              <Fa icon={faAd} />
             </div>
             <div id="ad-about-1"></div>
           </div>
@@ -241,13 +261,13 @@ export function AboutPage(): JSXElement {
             class="ad advertisement ad-h-s place-self-center"
           >
             <div class="icon small">
-              <Fa icon="ad" />
+              <Fa icon={faAd} />
             </div>
             <div id="ad-about-1-small"></div>
           </div>
         </Show>
         <section>
-          <H3 fa={{ icon: "chart-area" }} text="results screen" />
+          <H3 fa={{ icon: faChartArea }} text="results screen" />
           <p>
             After completing a test you will be able to see your wpm, raw wpm,
             accuracy, character stats, test length, leaderboards info and test
@@ -259,7 +279,7 @@ export function AboutPage(): JSXElement {
           </p>
         </section>
         <section>
-          <H3 fa={{ icon: "bug" }} text="bug report or feature request" />
+          <H3 fa={{ icon: faBug }} text="bug report or feature request" />
           <p>
             If you encounter a bug, or have a feature request - join the Discord
             server, send me an email, a direct message on Twitter or create an
@@ -268,7 +288,7 @@ export function AboutPage(): JSXElement {
         </section>
         <div></div>
         <section>
-          <H2 fa={{ icon: "life-ring" }} text="support" />
+          <H2 fa={{ icon: faLifeRing }} text="support" />
           <p>
             Thanks to everyone who has supported this project. It would not be
             possible without you and your continued support.
@@ -276,7 +296,7 @@ export function AboutPage(): JSXElement {
           <div class="mt-4 text-xl">
             <Button
               fa={{
-                icon: "donate",
+                icon: faDonate,
               }}
               onClick={() => showModal("Support")}
               text="support"
@@ -286,7 +306,7 @@ export function AboutPage(): JSXElement {
         </section>
         <div></div>
         <section>
-          <H2 fa={{ icon: "envelope" }} text="contact" />
+          <H2 fa={{ icon: faEnvelope }} text="contact" />
           <p>
             If you encounter a bug, have a feature request or just want to say
             hi - here are the different ways you can contact me directly.
@@ -294,25 +314,25 @@ export function AboutPage(): JSXElement {
           <div class="mt-4 grid w-full grid-cols-1 gap-4 text-xl sm:grid-cols-2 lg:grid-cols-4">
             <Button
               text="mail"
-              fa={{ icon: "envelope" }}
+              fa={{ icon: faEnvelope }}
               onClick={() => showModal("Contact")}
               class="w-full p-8"
             />
             <Button
               text="twitter"
-              fa={{ icon: "twitter", variant: "brand" }}
+              fa={{ icon: faTwitter }}
               href="https://x.com/monkeytype"
               class="w-full p-8"
             />
             <Button
               text="discord"
-              fa={{ icon: "discord", variant: "brand" }}
+              fa={{ icon: faDiscord }}
               href="https://discord.gg/monkeytype"
               class="w-full p-8"
             />
             <Button
               text="github"
-              fa={{ icon: "github", variant: "brand" }}
+              fa={{ icon: faGithub }}
               href="https://github.com/monkeytypegame/monkeytype"
               class="w-full p-8"
             />
@@ -320,7 +340,7 @@ export function AboutPage(): JSXElement {
         </section>
         <div></div>
         <section>
-          <H2 fa={{ icon: "users" }} text="credits" />
+          <H2 fa={{ icon: faUsers }} text="credits" />
           <p>
             <Button
               type="text"
@@ -367,7 +387,7 @@ export function AboutPage(): JSXElement {
             class="ad full-width advertisement ad-h place-self-center"
           >
             <div class="icon">
-              <Fa icon="ad" />
+              <Fa icon={faAd} />
             </div>
             <div id="ad-about-2"></div>
           </div>
@@ -376,14 +396,14 @@ export function AboutPage(): JSXElement {
             class="ad advertisement ad-h-s place-self-center"
           >
             <div class="icon small">
-              <Fa icon="ad" />
+              <Fa icon={faAd} />
             </div>
             <div id="ad-about-2-small"></div>
           </div>
         </Show>
         <div></div>
         <section>
-          <H2 fa={{ icon: "hand-holding-usd" }} text="top supporters" />
+          <H2 fa={{ icon: faHandHoldingUsd }} text="top supporters" />
           <AsyncContent
             resource={supporters}
             errorMessage="Failed to get supporters"
@@ -403,7 +423,7 @@ export function AboutPage(): JSXElement {
         </section>
         <div></div>
         <section>
-          <H2 fa={{ icon: "code-branch" }} text="contributors" />
+          <H2 fa={{ icon: faCodeBranch }} text="contributors" />
           <AsyncContent
             resource={contributors}
             errorMessage="Failed to get contributors"
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 7c5fe24ac154..92c29fe7dc8b 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -11,6 +11,7 @@ import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
 import { onDOMReady, qs } from "./utils/dom";
+import { initFontawesome } from "./utils/fontawesome";
 
 onDOMReady(async () => {
   await configLoadPromise;
@@ -77,4 +78,5 @@ onDOMReady(async () => {
       });
     }
   }
+  initFontawesome();
 });
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index d30d136573c1..def1d4405c56 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -726,7 +726,7 @@ async function updateTags(dontSave: boolean): Promise<void> {
           result.rawWpm,
           result.consistency,
         );
-        qs(`#result .stats .tags .bottom div[tagid="${tag._id}"] .fas`)?.show();
+        qs(`#result .stats .tags .bottom div[tagid="${tag._id}"] .fa`)?.show();
         qs(
           `#result .stats .tags .bottom div[tagid="${tag._id}"]`,
         )?.setAttribute("aria-label", "+" + Numbers.roundTo2(result.wpm - tpb));
diff --git a/frontend/src/ts/types/virtual-fa-icons.d.ts b/frontend/src/ts/types/virtual-fa-icons.d.ts
new file mode 100644
index 000000000000..30dbe34e8331
--- /dev/null
+++ b/frontend/src/ts/types/virtual-fa-icons.d.ts
@@ -0,0 +1,3 @@
+declare module "virtual:fa-icons" {
+  export function initIcons(): void;
+}
diff --git a/frontend/src/ts/utils/fontawesome.ts b/frontend/src/ts/utils/fontawesome.ts
new file mode 100644
index 000000000000..247dcb9e45d1
--- /dev/null
+++ b/frontend/src/ts/utils/fontawesome.ts
@@ -0,0 +1,14 @@
+import { initIcons } from "virtual:fa-icons";
+import { dom, config } from "@fortawesome/fontawesome-svg-core";
+
+export function initFontawesome(): void {
+  initIcons();
+
+  //configure fontawesome to keep i tags and add the svg within
+  //hopefully this will not break any existing css or js selectors
+  config.autoReplaceSvg = "nest";
+  config.observeMutations = true;
+  config.replacementClass = "fa";
+
+  dom.watch();
+}
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index 9f8eb838c9ef..7883e776b07e 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -80,12 +80,12 @@ header.focus #logo:after {
   direction: ltr;
 }
 
-footer .leftright .right .current-theme .fas.fa-fw.fa-palette {
+footer .leftright .right .current-theme .fa.fa-fw.fa-palette {
   transform: rotateY(0deg);
   transition: 0.5s;
 }
 
-footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
+footer .leftright .right .current-theme:hover .fa.fa-fw.fa-palette {
   transform: rotateY(180deg);
   transition: 0.5s;
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 467adc1eec01..4910d0d842d9 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -14,7 +14,8 @@
       "virtual:language-hashes": [
         "./src/ts/types/virtual-language-hashes.d.ts"
       ],
-      "virtual:env-config": ["./src/ts/types/virtual-env-config.d.ts"]
+      "virtual:env-config": ["./src/ts/types/virtual-env-config.d.ts"],
+      "virtual:fa-icons": ["./src/ts/types/virtual-fa-icons.d.ts"]
     }
   },
   "include": [
diff --git a/frontend/vite-plugins/fontawesome-subset.ts b/frontend/vite-plugins/fontawesome-icons.ts
similarity index 54%
rename from frontend/vite-plugins/fontawesome-subset.ts
rename to frontend/vite-plugins/fontawesome-icons.ts
index 49b0e1f2cbec..7a2a7ac4b778 100644
--- a/frontend/vite-plugins/fontawesome-subset.ts
+++ b/frontend/vite-plugins/fontawesome-icons.ts
@@ -1,38 +1,12 @@
-import { Plugin } from "vite";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
 import * as fs from "fs";
-import { createRequire } from "module";
 import * as path from "path";
-import { fontawesomeSubset as createFontawesomeSubset } from "fontawesome-subset";
+import { Plugin } from "vite";
 
-/**
- * Detect fontawesome icons used by the application and creates subset font files only containing the used icons.
- * @param options
- * @returns
- */
-export function fontawesomeSubset(): Plugin {
-  return {
-    name: "vite-plugin-fontawesome-subset",
-    apply: "build",
-    async buildStart() {
-      const start = performance.now();
-      console.log("\nCreating fontawesome subset...");
-
-      const fontawesomeClasses = getFontawesomeConfig();
-      await createFontawesomeSubset(
-        fontawesomeClasses,
-        "src/webfonts-generated",
-        {
-          targetFormats: ["woff2"],
-        },
-      );
-
-      const end = performance.now();
-      console.log(
-        `Creating fontawesome subset took ${Math.round(end - start)} ms`,
-      );
-    },
-  };
-}
+const virtualModuleId = "virtual:fa-icons";
+const resolvedVirtualModuleId = "\0" + virtualModuleId;
 
 type FontawesomeConfig = {
   /* used regular icons without `fa-` prefix*/
@@ -46,10 +20,11 @@ type FontawesomeConfig = {
 type FileObject = { name: string; isDirectory: boolean };
 
 const iconSet = {
-  solid: parseIcons("solid"),
-  regular: parseIcons("regular"),
-  brands: parseIcons("brands"),
+  solid: Object.keys(fas),
+  regular: Object.keys(far),
+  brands: Object.keys(fab),
 };
+
 /**
  * Map containing reserved classes by module
  */
@@ -83,6 +58,87 @@ const modules2 = {
   stacked: ["stack", "stack-1x", "stack-2x", "inverse"],
 };
 
+export function fontawesomeIcons(options: { isDevelopment: boolean }): Plugin {
+  return {
+    name: "virtual-fontawesome-icons",
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+      return;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        if (options.isDevelopment) {
+          //make all icons available on dev
+          return `
+          import { library } from "@fortawesome/fontawesome-svg-core";
+          import { fas } from "@fortawesome/free-solid-svg-icons";
+          import { far } from "@fortawesome/free-regular-svg-icons";
+          import { fab } from "@fortawesome/free-brands-svg-icons";
+          export function initIcons(){
+             library.add(fas, far, fab);
+          };
+          `;
+        } else {
+          //only include icons we actually use on prod
+          return generateFontAwesomeCode();
+        }
+      }
+      return;
+    },
+  };
+}
+
+export function generateFontAwesomeCode(): string {
+  const source = getFontawesomeConfig();
+  const importStatements = [];
+
+  // Regular icons
+  const regularImports = source.regular.map((icon) => `${icon} as far${icon}`);
+  importStatements.push(
+    `import { ${regularImports.join(", ")} } from "@fortawesome/free-regular-svg-icons";`,
+  );
+
+  // Solid icons
+  const solidImports = source.solid.map((icon) => `${icon} as fas${icon}`);
+  importStatements.push(
+    `import { ${solidImports.join(", ")} } from "@fortawesome/free-solid-svg-icons";`,
+  );
+
+  // Brands icons
+  const brandImports = source.brands.map((icon) => `${icon} as fab${icon}`);
+  importStatements.push(
+    `import { ${brandImports.join(", ")} } from "@fortawesome/free-brands-svg-icons";`,
+  );
+
+  // Common imports
+  importStatements.push(
+    `import { library } from "@fortawesome/fontawesome-svg-core";`,
+  );
+
+  const code = [];
+  code.push("export function initIcons(){");
+
+  code.push(
+    `  library.add(${source.solid.map((icon) => `fas${icon}`).join(", ")});`,
+  );
+
+  code.push(
+    `  library.add(${source.regular.map((icon) => `far${icon}`).join(", ")});`,
+  );
+
+  code.push(
+    `  library.add(${source.brands.map((icon) => `fab${icon}`).join(", ")});`,
+  );
+
+  code.push("}");
+
+  return [...importStatements, "", ...code].join("\n");
+}
+function toCamelCase(str: string): string {
+  const cc = str.replace(/-./g, (match) => match.charAt(1).toUpperCase());
+  return cc.charAt(0).toUpperCase() + cc.slice(1);
+}
+
 /**
  * Detect used fontawesome icons in the directories `src/**` and `static/**{.html|.css}`
  * @param {boolean} debug - Enable debug output
@@ -113,13 +169,18 @@ function getFontawesomeConfig(debug = false): FontawesomeConfig {
     if (matches) {
       matches.forEach((match) => {
         const [icon] = match.split(" ");
-        usedClassesSet.add((icon as string).substring(3));
+        const name = "fa" + toCamelCase((icon as string).substring(3));
+        usedClassesSet.add(name);
       });
     }
   }
 
   const usedClasses = [...usedClassesSet].sort();
-  const allModuleClasses = new Set(Object.values(modules2).flatMap((it) => it));
+  const allModuleClasses = new Set(
+    Object.values(modules2).flatMap((it) =>
+      it.map((name) => "fa" + toCamelCase(name)),
+    ),
+  );
   const icons = usedClasses.filter((it) => !allModuleClasses.has(it));
 
   const solid = icons.filter((it) => iconSet.solid.includes(it));
@@ -137,15 +198,6 @@ function getFontawesomeConfig(debug = false): FontawesomeConfig {
   }
 
   if (debug) {
-    console.debug(
-      "Make sure fontawesome modules are active: ",
-      Object.entries(modules2)
-        .filter((it) => usedClasses.filter((c) => it[1].includes(c)).length > 0)
-        .map((it) => it[0])
-        .filter((it) => it !== "brands")
-        .join(", "),
-    );
-
     console.debug(
       "Here is your config: \n",
       JSON.stringify({
@@ -164,11 +216,6 @@ function getFontawesomeConfig(debug = false): FontawesomeConfig {
   };
 }
 
-//detect if we run this as a main
-if (import.meta.url.endsWith(process.argv[1] as string)) {
-  getFontawesomeConfig(true);
-}
-
 function toFileAndDir(dir: string, file: string): FileObject {
   const name = path.join(dir, file);
   return { name, isDirectory: fs.statSync(name).isDirectory() };
@@ -194,14 +241,7 @@ function findAllFiles(
   return out;
 }
 
-function parseIcons(iconSet: string): string[] {
-  const require = createRequire(import.meta.url);
-  const path = require.resolve(
-    `@fortawesome/fontawesome-free/js/${iconSet}.js`,
-  );
-  const file: string | null = fs.readFileSync(path).toString();
-
-  return file
-    ?.match(/"(.*)": \[.*\],/g)
-    ?.map((it) => it.substring(1, it.indexOf(":") - 1)) as string[];
+//detect if we run this as a main
+if (import.meta.url.endsWith(process.argv[1] as string)) {
+  console.log(generateFontAwesomeCode());
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d56546ce1808..59d9ab5156f8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -12,7 +12,6 @@ import injectHTML from "vite-plugin-html-inject";
 import childProcess from "child_process";
 import autoprefixer from "autoprefixer";
 import { Fonts } from "./src/ts/constants/fonts";
-import { fontawesomeSubset } from "./vite-plugins/fontawesome-subset";
 import { fontPreview } from "./vite-plugins/font-preview";
 import { envConfig } from "./vite-plugins/env-config";
 import { languageHashes } from "./vite-plugins/language-hashes";
@@ -29,6 +28,7 @@ import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
 import solidPlugin from "vite-plugin-solid";
 import tailwindcss from "@tailwindcss/vite";
+import { fontawesomeIcons } from "./vite-plugins/fontawesome-icons";
 
 export default defineConfig(({ mode }): UserConfig => {
   const env = loadEnv(mode, process.cwd(), "");
@@ -61,9 +61,7 @@ export default defineConfig(({ mode }): UserConfig => {
     clearScreen: false,
     root: "src",
     publicDir: "../static",
-    optimizeDeps: {
-      exclude: ["@fortawesome/fontawesome-free"],
-    },
+    optimizeDeps: {},
   };
 });
 
@@ -81,6 +79,7 @@ function getPlugins({
   const plugins: PluginOption[] = [
     envConfig({ isDevelopment, clientVersion, env }),
     languageHashes({ skip: isDevelopment }),
+    fontawesomeIcons({ isDevelopment }),
     oxlintChecker({
       debounceDelay: 125,
       typeAware: true,
@@ -95,7 +94,6 @@ function getPlugins({
 
   const prodPlugins: PluginOption[] = [
     fontPreview(),
-    fontawesomeSubset(),
     versionFile({ clientVersion }),
     ViteMinifyPlugin(),
     VitePWA({
@@ -256,6 +254,9 @@ function getBuildOptions({
         chunkFileNames: "js/[name].[hash].js",
         entryFileNames: "js/[name].[hash].js",
         manualChunks: (id) => {
+          if (id.includes("@fortawesome")) {
+            return "vendor-fontawesome";
+          }
           if (id.includes("@sentry")) {
             return "vendor-sentry";
           }
@@ -292,20 +293,8 @@ function getCssOptions({
       scss: {
         additionalData(source, fp) {
           if (isDevelopment || fp.endsWith("index.scss")) {
-            /** Enable for font awesome v6 */
-            /*
-                const fontawesomeClasses = getFontawesomeConfig();
-
-                //inject variables into sass context
-                $fontawesomeBrands: ${sassList(
-                  fontawesomeClasses.brands
-                )};             
-                $fontawesomeSolid: ${sassList(fontawesomeClasses.solid)};
-              */
-
             const bypassFonts = isDevelopment
               ? `
-                $fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";
                 $previewFontsPath:"webfonts";`
               : "";
             const fonts = `
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25366c8d830d..e21d40ebed4a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,6 +261,18 @@ importers:
       '@date-fns/utc':
         specifier: 1.2.0
         version: 1.2.0
+      '@fortawesome/fontawesome-svg-core':
+        specifier: 7.1.0
+        version: 7.1.0
+      '@fortawesome/free-brands-svg-icons':
+        specifier: 5.15.4
+        version: 5.15.4
+      '@fortawesome/free-regular-svg-icons':
+        specifier: 5.15.4
+        version: 5.15.4
+      '@fortawesome/free-solid-svg-icons':
+        specifier: 5.15.4
+        version: 5.15.4
       '@monkeytype/contracts':
         specifier: workspace:*
         version: link:../packages/contracts
@@ -367,9 +379,9 @@ importers:
       '@eslint/json':
         specifier: 0.14.0
         version: 0.14.0
-      '@fortawesome/fontawesome-free':
-        specifier: 5.15.4
-        version: 5.15.4
+      '@fortawesome/fontawesome-common-types':
+        specifier: 0.2.36
+        version: 0.2.36
       '@monkeytype/oxlint-config':
         specifier: workspace:*
         version: link:../packages/oxlint-config
@@ -417,7 +429,7 @@ importers:
         version: 5.0.2
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20(postcss@8.4.31)
@@ -436,9 +448,6 @@ importers:
       firebase-tools:
         specifier: 13.15.1
         version: 13.15.1(encoding@0.1.13)
-      fontawesome-subset:
-        specifier: 4.4.0
-        version: 4.4.0(@fortawesome/fontawesome-free@5.15.4)
       happy-dom:
         specifier: 20.0.10
         version: 20.0.10
@@ -510,7 +519,7 @@ importers:
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
 
   packages/contracts:
     dependencies:
@@ -705,7 +714,7 @@ packages:
     resolution: {integrity: sha512-q0qHfnuNYVKu0Swrnnvfj9971AEyW7c8v9jCOZGCl5ZbyGMNG4RPyJkRcMi/JC8CRfdOe0IDfNm1nNsi2avprg==}
     peerDependencies:
       openapi3-ts: ^2.0.0 || ^3.0.0
-      zod: 3.23.8
+      zod: ^3.20.0
 
   '@apideck/better-ajv-errors@0.3.6':
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
@@ -2254,8 +2263,28 @@ packages:
   '@firebase/webchannel-wrapper@1.0.4':
     resolution: {integrity: sha512-6m8+P+dE/RPl4OPzjTxcTbQ0rGeRyeTvAi9KwIffBVCiAMKrfXfLZaqD1F+m8t4B5/Q5aHsMozOgirkH1F5oMQ==}
 
-  '@fortawesome/fontawesome-free@5.15.4':
-    resolution: {integrity: sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==}
+  '@fortawesome/fontawesome-common-types@0.2.36':
+    resolution: {integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-common-types@7.1.0':
+    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-brands-svg-icons@5.15.4':
+    resolution: {integrity: sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-regular-svg-icons@5.15.4':
+    resolution: {integrity: sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@5.15.4':
+    resolution: {integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==}
     engines: {node: '>=6'}
 
   '@google-cloud/cloud-sql-connector@1.3.3':
@@ -5611,17 +5640,6 @@ packages:
       debug:
         optional: true
 
-  fontawesome-subset@4.4.0:
-    resolution: {integrity: sha512-kcK1ELa/Gq4R2+gKxzeFbLl0uzSJBeWsjtZPLLf5mCJEfTY9gt/lAOgW7opGaG1ZaFMa88Qu1ghuRsLUkmobYg==}
-    peerDependencies:
-      '@fortawesome/fontawesome-free': '>=5.12.0'
-      '@fortawesome/fontawesome-pro': '>=5.12.0'
-    peerDependenciesMeta:
-      '@fortawesome/fontawesome-free':
-        optional: true
-      '@fortawesome/fontawesome-pro':
-        optional: true
-
   fontverter@2.0.0:
     resolution: {integrity: sha512-DFVX5hvXuhi1Jven1tbpebYTCT9XYnvx6/Z+HFUPb7ZRMCW+pj2clU9VMhoTPgWKPhAs7JJDSk3CW1jNUvKCZQ==}
 
@@ -7325,11 +7343,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mkdirp@2.1.6:
-    resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   mobx-react-lite@4.0.7:
     resolution: {integrity: sha512-RjwdseshK9Mg8On5tyJZHtGD+J78ZnCnRaxeQDSiciKVQDUbfZcXhmld0VMxAwvcTnPEHZySGGewm467Fcpreg==}
     peerDependencies:
@@ -11895,7 +11908,25 @@ snapshots:
 
   '@firebase/webchannel-wrapper@1.0.4': {}
 
-  '@fortawesome/fontawesome-free@5.15.4': {}
+  '@fortawesome/fontawesome-common-types@0.2.36': {}
+
+  '@fortawesome/fontawesome-common-types@7.1.0': {}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/free-brands-svg-icons@5.15.4':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 0.2.36
+
+  '@fortawesome/free-regular-svg-icons@5.15.4':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 0.2.36
+
+  '@fortawesome/free-solid-svg-icons@5.15.4':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 0.2.36
 
   '@google-cloud/cloud-sql-connector@1.3.3(encoding@0.1.13)':
     dependencies:
@@ -13497,23 +13528,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))':
-    dependencies:
-      '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.0.15
-      ast-v8-to-istanbul: 0.3.8
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6
-      istanbul-reports: 3.2.0
-      magicast: 0.5.1
-      obug: 2.1.1
-      std-env: 3.10.0
-      tinyrainbow: 3.0.3
-      vitest: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitest/expect@4.0.15':
     dependencies:
       '@standard-schema/spec': 1.0.0
@@ -15872,15 +15886,6 @@ snapshots:
     optionalDependencies:
       debug: 4.3.6(supports-color@5.5.0)
 
-  fontawesome-subset@4.4.0(@fortawesome/fontawesome-free@5.15.4):
-    dependencies:
-      lodash: 4.17.21
-      mkdirp: 2.1.6
-      subset-font: 2.3.0
-      yaml: 2.5.0
-    optionalDependencies:
-      '@fortawesome/fontawesome-free': 5.15.4
-
   fontverter@2.0.0:
     dependencies:
       wawoff2: 2.0.1
@@ -17881,8 +17886,6 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mkdirp@2.1.6: {}
-
   mobx-react-lite@4.0.7(mobx@6.13.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       mobx: 6.13.1
@@ -20694,45 +20697,6 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1):
-    dependencies:
-      '@vitest/expect': 4.0.15
-      '@vitest/mocker': 4.0.15(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))
-      '@vitest/pretty-format': 4.0.15
-      '@vitest/runner': 4.0.15
-      '@vitest/snapshot': 4.0.15
-      '@vitest/spy': 4.0.15
-      '@vitest/utils': 4.0.15
-      es-module-lexer: 1.7.0
-      expect-type: 1.2.2
-      magic-string: 0.30.21
-      obug: 2.1.1
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      std-env: 3.10.0
-      tinybench: 2.9.0
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 24.9.1
-      happy-dom: 20.0.10
-      jsdom: 27.4.0
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - terser
-      - tsx
-      - yaml
-
   vlq@0.2.3: {}
 
   w3c-xmlserializer@5.0.0: