diff --git a/website/.yarnrc.yml b/website/.yarnrc.yml
index 35307537963..b937666c095 100644
--- a/website/.yarnrc.yml
+++ b/website/.yarnrc.yml
@@ -10,6 +10,10 @@ plugins:
 # 7 days (in minutes)
 npmMinimalAgeGate: 10080
 
+# FontAwesome generates and hosts the package below for us
+npmPreapprovedPackages:
+  - "@awesome.me/kit-04be88f754"
+
 supportedArchitectures:
   cpu:
     - current
@@ -22,3 +26,13 @@ supportedArchitectures:
     - win32
 
 yarnPath: .yarn/releases/yarn-4.15.0.cjs
+
+npmScopes:
+  fortawesome:
+    npmAlwaysAuth: true
+    npmRegistryServer: "https://npm.fontawesome.com/"
+    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN:-}
+  awesome.me:
+    npmAlwaysAuth: true
+    npmRegistryServer: "https://npm.fontawesome.com/"
+    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN:-}
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
index ca9d442e159..e94c59aee3f 100644
--- a/website/app/layout.tsx
+++ b/website/app/layout.tsx
@@ -1,6 +1,3 @@
-import "./globals.css";
-import type { Metadata } from "next";
-import { Inter, Josefin_Sans } from "next/font/google";
 import { Analytics } from "@/src/components/Analytics";
 import { AnalyticsScripts } from "@/src/components/AnalyticsScripts";
 import { EnableSmoothScroll } from "@/src/components/EnableSmoothScroll";
@@ -14,6 +11,15 @@ import {
   TWITTER_HANDLE,
 } from "@/src/helpers/site";
 import { SITE_URL } from "@/src/helpers/siteUrl";
+import type { Metadata } from "next";
+import { Inter, Josefin_Sans } from "next/font/google";
+import "./globals.css";
+
+// Set up the styling for fontawesome, including duotone icons
+// https://docs.fontawesome.com/web/use-with/react/use-with#getting-font-awesome-css-to-work
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
 
 const inter = Inter({
   subsets: ["latin"],
diff --git a/website/package.json b/website/package.json
index ea673c94a0d..d9f259f969d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -22,9 +22,10 @@
     "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer",
     "@docsearch/css": "^4.6.3",
     "@docsearch/react": "^4.6.3",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@fortawesome/fontawesome-svg-core": "^7.3.0",
+    "@fortawesome/free-solid-svg-icons": "^7.3.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.3.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@next/mdx": "^16.2.6",
diff --git a/website/src/components/MochaTopologyVisualizationInner.tsx b/website/src/components/MochaTopologyVisualizationInner.tsx
index 87450ca938a..e519f109853 100644
--- a/website/src/components/MochaTopologyVisualizationInner.tsx
+++ b/website/src/components/MochaTopologyVisualizationInner.tsx
@@ -1,43 +1,23 @@
 "use client";
 
-import React, {
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from "react";
-import {
-  ReactFlowProvider,
-  useReactFlow,
-  useStore,
-  type Node,
-  type Edge,
-} from "@xyflow/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import {
-  faEnvelope,
-  faArrowRightArrowLeft,
-  faGear,
-  faDiagramProject,
-  faRightLeft,
-  faLayerGroup,
-  faHashtag,
-  faCubes,
-  faRoute,
-  faLink,
-  faEllipsis,
-} from "@fortawesome/free-solid-svg-icons";
 import {
   TopologyFlow,
   type DiagramData,
-  type MessageTrace,
   type MessageActivity,
-  type TraceTopologyMapping,
+  type MessageTrace,
   type SidebarTab,
+  type TraceTopologyMapping,
 } from "@chillicream/mocha-visualizer";
+import type { IconName } from "@fortawesome/fontawesome-svg-core";
+import {
+  ReactFlowProvider,
+  useReactFlow,
+  useStore,
+  type Edge,
+  type Node,
+} from "@xyflow/react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IconElement } from "../icons/IconElement";
 
 /**
  * Minimal scoped styles for embedding the visualizer in the docs page.
@@ -230,7 +210,7 @@ const ts = {
 } as const;
 
 function getOperationIcon(activity: MessageActivity): {
-  icon: IconDefinition;
+  icon: IconName;
   color: string;
 } {
   switch (activity.operation) {
@@ -239,15 +219,15 @@ function getOperationIcon(activity: MessageActivity): {
     case "request":
     case "reply":
     case "subscribe":
-      return { icon: faEnvelope, color: "#d29922" };
+      return { icon: "envelope", color: "#d29922" };
     case "dispatch":
-      return { icon: faArrowRightArrowLeft, color: "#db61a2" };
+      return { icon: "arrow-right-arrow-left", color: "#db61a2" };
     case "receive":
-      return { icon: faArrowRightArrowLeft, color: "#58a6ff" };
+      return { icon: "arrow-right-arrow-left", color: "#58a6ff" };
     case "consume":
-      return { icon: faGear, color: "#3fb950" };
+      return { icon: "gear", color: "#3fb950" };
     case "saga-transition":
-      return { icon: faDiagramProject, color: "#a371f7" };
+      return { icon: "diagram-project", color: "#a371f7" };
   }
 }
 
@@ -275,7 +255,7 @@ function getOperationLabel(activity: MessageActivity): string {
 }
 
 function getNodeIcon(node: Node): {
-  icon: IconDefinition;
+  icon: IconName;
   color: string;
   label: string;
 } {
@@ -286,29 +266,29 @@ function getNodeIcon(node: Node): {
 
   if (nodeType === "entity") {
     if (entityKind === "exchange")
-      return { icon: faRightLeft, color: "#d29922", label };
+      return { icon: "right-left", color: "#d29922", label };
     if (entityKind === "queue")
-      return { icon: faLayerGroup, color: "#3fb950", label };
+      return { icon: "layer-group", color: "#3fb950", label };
     if (entityKind === "topic")
-      return { icon: faHashtag, color: "#58a6ff", label };
-    return { icon: faCubes, color: "#a371f7", label };
+      return { icon: "hashtag", color: "#58a6ff", label };
+    return { icon: "cubes", color: "#a371f7", label };
   }
-  if (nodeType === "route") return { icon: faRoute, color: "#6e7681", label };
-  if (nodeType === "binding") return { icon: faLink, color: "#6e7681", label };
+  if (nodeType === "route") return { icon: "route", color: "#6e7681", label };
+  if (nodeType === "binding") return { icon: "link", color: "#6e7681", label };
   if (nodeType === "endpoint") {
     const subType = data.subType as string | undefined;
     return {
-      icon: faArrowRightArrowLeft,
+      icon: "arrow-right-arrow-left",
       color: subType === "receive" ? "#58a6ff" : "#db61a2",
       label,
     };
   }
-  if (nodeType === "consumer") return { icon: faGear, color: "#3fb950", label };
+  if (nodeType === "consumer") return { icon: "gear", color: "#3fb950", label };
   if (nodeType === "message")
-    return { icon: faEnvelope, color: "#d29922", label };
+    return { icon: "envelope", color: "#d29922", label };
   if (nodeType === "saga")
-    return { icon: faDiagramProject, color: "#a371f7", label };
-  return { icon: faEllipsis, color: "#484f58", label };
+    return { icon: "diagram-project", color: "#a371f7", label };
+  return { icon: "ellipsis", color: "#484f58", label };
 }
 
 function formatDuration(ms: number): string {
@@ -453,7 +433,7 @@ function TraceStepList({
               >
                 <div style={ts.inferredDot(info.color)} />
                 <span style={ts.inferredIcon(info.color)}>
-                  <FontAwesomeIcon icon={info.icon} />
+                  <IconElement icon={info.icon} />
                 </span>
                 <span style={ts.inferredLabel} title={info.label}>
                   {info.label}
@@ -488,7 +468,7 @@ function TraceStepList({
             >
               <div style={ts.badge}>{index + 1}</div>
               <span style={ts.icon(color)}>
-                <FontAwesomeIcon icon={icon} />
+                <IconElement icon={icon} />
               </span>
               <div style={ts.content}>
                 <div style={ts.topRow}>
diff --git a/website/src/components/header/HeaderNav.tsx b/website/src/components/header/HeaderNav.tsx
index 6b7bc8b1f50..b28c0fac242 100644
--- a/website/src/components/header/HeaderNav.tsx
+++ b/website/src/components/header/HeaderNav.tsx
@@ -1,10 +1,10 @@
 "use client";
 
+import type { BlogPostSummary } from "@/src/helpers/blogPosts";
+import { formatDate } from "@/src/helpers/formatDate";
+import { IconElement } from "@/src/icons/IconElement";
 import Link from "next/link";
 import { type MouseEvent, type ReactNode, useState } from "react";
-import { formatDate } from "@/src/helpers/formatDate";
-import type { BlogPostSummary } from "@/src/helpers/blogPosts";
-import { ChevronDownIcon } from "@/src/icons/ChevronDown";
 import {
   NAV_ITEMS,
   type NavItem,
@@ -98,7 +98,7 @@ function NavWithSubmenu({
         className="text-cc-heading flex items-center gap-1.5 px-4 text-sm font-medium no-underline"
       >
         {item.label}
-        <ChevronDownIcon className="h-3 w-3 fill-current" />
+        <IconElement icon="chevron-down" widthAuto size="sm" />
       </Link>
 
       <SubmenuPanel
@@ -212,7 +212,8 @@ function SubLinkRow({
   const linkProps = isExternal
     ? { target: "_blank" as const, rel: "noopener noreferrer" as const }
     : {};
-  const Icon = link.icon;
+  // const Icon = link.icon;
+  const { icon } = link;
 
   return (
     <Link
@@ -222,9 +223,9 @@ function SubLinkRow({
       {...linkProps}
       className="group/link text-cc-ink-dim hover:bg-cc-hover flex items-start gap-3 rounded-md px-2 py-2 no-underline transition-colors"
     >
-      {Icon && (
+      {icon && (
         <span className="text-cc-ink-dim group-hover/link:text-cc-ink mt-0.5 flex h-5 w-5 flex-none items-center justify-center transition-colors">
-          <Icon className="h-4 w-4 fill-current" />
+          <SubLinkRowIcon link={link} />
         </span>
       )}
       <div>
@@ -239,6 +240,19 @@ function SubLinkRow({
   );
 }
 
+function SubLinkRowIcon({ link }: { link: SubLink }) {
+  const { icon } = link;
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === "string") {
+    return <IconElement icon={icon} />;
+  }
+
+  const IconComponent = icon;
+  return <IconComponent className="h-4 w-4 fill-current" />;
+}
+
 function LatestBlogPanel({
   post,
   image,
diff --git a/website/src/components/header/navData.tsx b/website/src/components/header/navData.tsx
index 25f15561da4..6b013f236c2 100644
--- a/website/src/components/header/navData.tsx
+++ b/website/src/components/header/navData.tsx
@@ -1,20 +1,10 @@
-import type { ComponentType, SVGProps } from "react";
-import { BlogIcon } from "@/src/icons/Blog";
 import { GitHubIcon } from "@/src/icons/GitHub";
 import { LinkedInIcon } from "@/src/icons/LinkedIn";
 import { SlackIcon } from "@/src/icons/Slack";
 import { XIcon } from "@/src/icons/X";
 import { YouTubeIcon } from "@/src/icons/YouTube";
-import {
-  BuildingIcon,
-  CloudIcon,
-  HandshakeAngleIcon,
-  NewspaperIcon,
-  RocketIcon,
-  ServerIcon,
-  SparklesIcon,
-  WavePulseIcon,
-} from "@/src/icons/NavIcons";
+import { IconName } from "@awesome.me/kit-04be88f754/icons";
+import type { ComponentType, SVGProps } from "react";
 
 export const TOOLS = {
   blog: "/blog",
@@ -38,7 +28,7 @@ export interface SubLink {
   href: string;
   label: string;
   description?: string;
-  icon?: Icon;
+  icon?: Icon | IconName;
 }
 
 export interface SubGroup {
@@ -68,19 +58,19 @@ export const NAV_ITEMS: NavItem[] = [
             href: "/platform/analytics",
             label: "Analytics",
             description: "Instant Insights. Enhanced Performance.",
-            icon: WavePulseIcon,
+            icon: "chart-line-up",
           },
           {
             href: "/platform/continuous-integration",
             label: "Continuous Integration",
             description: "Innovate with Confidence. Deliver with Quality.",
-            icon: SparklesIcon,
+            icon: "star",
           },
           {
             href: "/platform/ecosystem",
             label: "Ecosystem",
             description: "An Ecosystem You Trust and Love.",
-            icon: CloudIcon,
+            icon: "cloud",
           },
         ],
       },
@@ -91,7 +81,7 @@ export const NAV_ITEMS: NavItem[] = [
             href: "/products/nitro",
             label: "Nitro",
             description: "Observability, Governance, Delivery",
-            icon: RocketIcon,
+            icon: "rocket",
           },
         ],
       },
@@ -110,19 +100,19 @@ export const NAV_ITEMS: NavItem[] = [
             href: "/services/advisory",
             label: "Advisory",
             description: "Consulting / Contracting",
-            icon: HandshakeAngleIcon,
+            icon: "handshake-angle",
           },
           {
             href: "/services/support",
             label: "Support",
             description: "Get Help from Experts",
-            icon: ServerIcon,
+            icon: "server",
           },
           {
             href: "/services/training",
             label: "Training",
             description: "Increase Your Team's Productivity",
-            icon: BuildingIcon,
+            icon: "building",
           },
         ],
       },
@@ -140,23 +130,23 @@ export const NAV_ITEMS: NavItem[] = [
           {
             href: "/docs/hotchocolate",
             label: "Hot Chocolate",
-            icon: RocketIcon,
+            icon: "rocket",
           },
           {
             href: "/docs/strawberryshake",
             label: "Strawberry Shake",
-            icon: RocketIcon,
+            icon: "rocket",
           },
-          { href: "/docs/mocha", label: "Mocha", icon: RocketIcon },
-          { href: "/docs/fusion", label: "Fusion", icon: RocketIcon },
-          { href: "/docs/nitro", label: "Nitro", icon: RocketIcon },
-          { href: "/docs/skillz", label: "Skillz", icon: RocketIcon },
+          { href: "/docs/mocha", label: "Mocha", icon: "rocket" },
+          { href: "/docs/fusion", label: "Fusion", icon: "rocket" },
+          { href: "/docs/nitro", label: "Nitro", icon: "rocket" },
+          { href: "/docs/skillz", label: "Skillz", icon: "rocket" },
         ],
       },
       {
         title: "Additional Resources",
         links: [
-          { href: TOOLS.blog, label: "Blog", icon: BlogIcon },
+          { href: TOOLS.blog, label: "Blog", icon: "blog" },
           { href: TOOLS.github, label: "GitHub", icon: GitHubIcon },
           { href: TOOLS.slack, label: "Slack / Community", icon: SlackIcon },
           { href: TOOLS.youtube, label: "YouTube Channel", icon: YouTubeIcon },
@@ -178,33 +168,33 @@ export const NAV_ITEMS: NavItem[] = [
           {
             href: "/services/support/contact",
             label: "Contact",
-            icon: NewspaperIcon,
+            icon: "message",
           },
-          { href: TOOLS.shop, label: "Shop", icon: NewspaperIcon },
+          { href: TOOLS.shop, label: "Shop", icon: "shirt" },
           {
             href: "/legal/acceptable-use-policy",
             label: "Acceptable Use Policy",
-            icon: NewspaperIcon,
+            icon: "clipboard-check",
           },
           {
             href: "/legal/cookie-policy",
             label: "Cookie Policy",
-            icon: NewspaperIcon,
+            icon: "cookie-bite",
           },
           {
             href: "/legal/privacy-policy",
             label: "Privacy Policy",
-            icon: NewspaperIcon,
+            icon: "building-lock",
           },
           {
             href: "/legal/terms-of-service",
             label: "Terms of Service",
-            icon: NewspaperIcon,
+            icon: "file-contract",
           },
           {
             href: "/licensing/chillicream-license",
             label: "ChilliCream License",
-            icon: NewspaperIcon,
+            icon: "file-certificate",
           },
         ],
       },
diff --git a/website/src/components/help/SelfServeGrid.tsx b/website/src/components/help/SelfServeGrid.tsx
index 99eedf07cce..28267611d2e 100644
--- a/website/src/components/help/SelfServeGrid.tsx
+++ b/website/src/components/help/SelfServeGrid.tsx
@@ -4,11 +4,7 @@ import type { ReactElement } from "react";
 import { GITHUB, SLACK, YOUTUBE } from "@/src/components/help/helpLinks";
 import { IconFeatureCard } from "@/src/components/IconFeatureCard";
 import { SectionHeading } from "@/src/components/SectionHeading";
-import { ArticleIcon } from "@/src/icons/Article";
-import { BranchIcon } from "@/src/icons/BranchIcon";
-import { ChatIcon } from "@/src/icons/ChatIcon";
-import { DocsIcon } from "@/src/icons/Docs";
-import { PlayIcon } from "@/src/icons/Play";
+import { IconElement } from "@/src/icons/IconElement";
 
 interface Channel {
   readonly title: string;
@@ -24,35 +20,35 @@ const CHANNELS: readonly Channel[] = [
     copy: "Guides, recipes, and the full Hot Chocolate and Fusion reference.",
     href: "/docs",
     external: false,
-    icon: <DocsIcon />,
+    icon: <IconElement icon="file-lines" size="2x" />,
   },
   {
     title: "Blog",
     copy: "Release notes, deep dives, and patterns from the team.",
     href: "/blog",
     external: false,
-    icon: <ArticleIcon />,
+    icon: <IconElement icon="newspaper" size="2x" />,
   },
   {
     title: "Slack",
     copy: "Live conversation with maintainers and 7000+ developers.",
     href: SLACK,
     external: true,
-    icon: <ChatIcon />,
+    icon: <IconElement icon="message-question" size="2x" />,
   },
   {
     title: "YouTube",
     copy: "Workshops, talks, and walkthroughs from the ChilliCream team.",
     href: YOUTUBE,
     external: true,
-    icon: <PlayIcon />,
+    icon: <IconElement icon="circle-play" size="2x" />,
   },
   {
     title: "GitHub",
     copy: "Source, issues, and discussions for graphql-platform.",
     href: GITHUB,
     external: true,
-    icon: <BranchIcon />,
+    icon: <IconElement icon="code-branch" size="2x" />,
   },
 ];
 
diff --git a/website/src/icons/IconElement.tsx b/website/src/icons/IconElement.tsx
new file mode 100644
index 00000000000..ab38878bc5b
--- /dev/null
+++ b/website/src/icons/IconElement.tsx
@@ -0,0 +1,87 @@
+import type { IconName } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { ComponentProps, ReactNode } from "react";
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import {
+  faArrowRightArrowLeft,
+  faBlog,
+  faBuilding,
+  faBuildingLock,
+  faChartLineUp,
+  faChevronDown,
+  faCirclePlay,
+  faClipboardCheck,
+  faCloud,
+  faCodeBranch,
+  faCookieBite,
+  faCubes,
+  faDiagramProject,
+  faEllipsis,
+  faEnvelope,
+  faFileCertificate,
+  faFileContract,
+  faFileLines,
+  faGear,
+  faHandshakeAngle,
+  faHashtag,
+  faLayerGroup,
+  faLink,
+  faMessage,
+  faMessageQuestion,
+  faNewspaper,
+  faRightLeft,
+  faRocket,
+  faRoute,
+  faServer,
+  faShirt,
+  faStar,
+} from "@fortawesome/pro-solid-svg-icons";
+
+library.add(
+  faArrowRightArrowLeft,
+  faBlog,
+  faBuilding,
+  faBuildingLock,
+  faChartLineUp,
+  faChevronDown,
+  faCirclePlay,
+  faClipboardCheck,
+  faCloud,
+  faCodeBranch,
+  faCookieBite,
+  faCubes,
+  faDiagramProject,
+  faEllipsis,
+  faEnvelope,
+  faFileCertificate,
+  faFileContract,
+  faFileLines,
+  faGear,
+  faHandshakeAngle,
+  faHashtag,
+  faLayerGroup,
+  faLink,
+  faMessage,
+  faMessageQuestion,
+  faNewspaper,
+  faRightLeft,
+  faRocket,
+  faRocket,
+  faRoute,
+  faServer,
+  faShirt,
+  faStar,
+);
+
+interface IconElementProps extends Omit<
+  ComponentProps<typeof FontAwesomeIcon>,
+  "icon"
+> {
+  icon: IconName;
+}
+
+export function IconElement({ icon, ...rest }: IconElementProps): ReactNode {
+  return <FontAwesomeIcon icon={["fas", icon]} {...rest} />;
+}
diff --git a/website/yarn.lock b/website/yarn.lock
index cf794cc7fbc..767e01497dd 100644
--- a/website/yarn.lock
+++ b/website/yarn.lock
@@ -830,10 +830,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-common-types@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@fortawesome/fontawesome-common-types@npm:7.2.0"
-  checksum: 10c0/991ca1390c078d973e92034cf7dbae2fc3aa50cd7ff322b7b23e4c54ec84dae12979bada9a782bdaea11a1577ae74d802aa651c590f41d2e1b1126c17e6cd413
+"@fortawesome/fontawesome-common-types@npm:7.3.0":
+  version: 7.3.0
+  resolution: "@fortawesome/fontawesome-common-types@npm:7.3.0"
+  checksum: 10c0/2d7310609b520e68cbc8737d551f526e434eb4cd093a3f7d420998809fa21e23aa96123c7d23bacb451ff49bb4eda79272583463ca6cf29a4335f24fe6babcd9
   languageName: node
   linkType: hard
 
@@ -844,25 +844,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-svg-core@npm:^7.1.0":
-  version: 7.2.0
-  resolution: "@fortawesome/fontawesome-svg-core@npm:7.2.0"
+"@fortawesome/fontawesome-svg-core@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "@fortawesome/fontawesome-svg-core@npm:7.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:7.2.0"
-  checksum: 10c0/5c6655b030254804999eb87b96111cdcc42c0789e6e9ea13bc1e37d5ebf9fb982c79a618b68272cc59c23c4e1abf73d487e747a17a61499eac5f9f528fc54ad4
+    "@fortawesome/fontawesome-common-types": "npm:7.3.0"
+  checksum: 10c0/8d0d8a297a26fa05d407cb4c3c280b84af4b5991eb31d868a02392d9d1b9ad32f73be7e0703e2a1e98b2cdc356edca75f0f8e70ba140e0edb1cfe8739b2b86a4
   languageName: node
   linkType: hard
 
-"@fortawesome/free-solid-svg-icons@npm:^7.1.0":
-  version: 7.2.0
-  resolution: "@fortawesome/free-solid-svg-icons@npm:7.2.0"
+"@fortawesome/free-solid-svg-icons@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "@fortawesome/free-solid-svg-icons@npm:7.3.0"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": "npm:7.3.0"
+  checksum: 10c0/62d8978860a4838fc9b3f15eb433c09ccff7d6242c074dacde3ea816d807f5af83a6ba3ea8da9fea02bace7b361dd3acf79c12f95841e190e0d8f75e2f3c7232
+  languageName: node
+  linkType: hard
+
+"@fortawesome/pro-solid-svg-icons@npm:^7.3.0":
+  version: 7.3.0
+  resolution: "@fortawesome/pro-solid-svg-icons@npm:7.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:7.2.0"
-  checksum: 10c0/922ffe0f53b3cebcf36a4a6872958e7d6a0fbaa5c5c73cddbdea9301181fe8625331a0bf8aa09ca54c4d284805473e38d0eb9f06da05546f1914cec2c062343f
+    "@fortawesome/fontawesome-common-types": "npm:7.3.0"
+  checksum: 10c0/05d3e26de1bd4cc2ef2d0be63a7f514451f3fff0fa6c55e320bca10faec4fbcd0a1c4cec7422cc0627a653027f01662e9f787e7e5f49eaa7d08f5ff389758c95
   languageName: node
   linkType: hard
 
-"@fortawesome/react-fontawesome@npm:^3.1.1":
+"@fortawesome/react-fontawesome@npm:^3.3.1":
   version: 3.3.1
   resolution: "@fortawesome/react-fontawesome@npm:3.3.1"
   peerDependencies:
@@ -10303,9 +10312,10 @@ __metadata:
     "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer"
     "@docsearch/css": "npm:^4.6.3"
     "@docsearch/react": "npm:^4.6.3"
-    "@fortawesome/fontawesome-svg-core": "npm:^7.1.0"
-    "@fortawesome/free-solid-svg-icons": "npm:^7.1.0"
-    "@fortawesome/react-fontawesome": "npm:^3.1.1"
+    "@fortawesome/fontawesome-svg-core": "npm:^7.3.0"
+    "@fortawesome/free-solid-svg-icons": "npm:^7.3.0"
+    "@fortawesome/pro-solid-svg-icons": "npm:^7.3.0"
+    "@fortawesome/react-fontawesome": "npm:^3.3.1"
     "@mdx-js/loader": "npm:^3.1.1"
     "@mdx-js/react": "npm:^3.1.1"
     "@next/mdx": "npm:^16.2.6"