diff --git a/.github/instructions/general.instructions.md b/.github/instructions/general.instructions.md
index 7d8c91020..4f63ab973 100644
--- a/.github/instructions/general.instructions.md
+++ b/.github/instructions/general.instructions.md
@@ -23,6 +23,14 @@ applyTo: "**"
 - Preact exists only for the Markdown E2E harness under `src/lib/markdown/__tests__/e2e`; all production UI components must use Lit web components instead of Preact.
 - Z-index: never hard-code numeric z-index values (including Tailwind `z-*` utilities). Always use the CSS variables in `src/styles/index.css` (e.g., `z-index: var(--z-nav)` or `z-(--z-nav)`). If no existing token fits, ask the user what z-layer to use before adding/changing tokens.
 
+## Component Reuse Policy
+
+- Prefer existing `List`, `Icon`, and `Button` components whenever possible.
+- `List`: use an existing list layout first. If no layout fits, ask the user before adding a new layout.
+- `Icon`: use existing icons first. If a new icon is needed, ask the user first and describe the icon you plan to add.
+- `Button`: use the shared `Button` component when the current API supports the use case.
+- If a button would require adding `Button` props or forcing behavior that does not match the component, ask the user before using a raw HTML `<button>`/`<a>`, and explain why.
+
 ## Tailwind CSS variable shorthand
 
 - Our linting rules (Tailwind ESLint) require using Tailwind's custom property shorthand form: `fill-(--my-brand-color)`.
diff --git a/_TODO.md b/_TODO.md
index e8bf99538..ad5fb1024 100644
--- a/_TODO.md
+++ b/_TODO.md
@@ -175,6 +175,8 @@ Generate cover images for the skills and technologies tags pages
 
 - add "cel" language to code blocks
 
+- The code language is in teh tab order and getting focus-visible
+
 ## Callout Issues
 
 - When adding backticks in a callout, it gets the standard grey background for a code block in light theme. But it should get an offset of the callout color, like "info-offset".
@@ -233,6 +235,20 @@ Generate cover images for the skills and technologies tags pages
 
 - Need a secret token to bypass the waiting state for the Newsletter token page, so we can style it. Set it via env var.
 
+- Details dd / dt in Markdown need bottom margin
+
+- Highlighter component in Markdown needs better colors in dark theme. It's spotlight color with content text - and there's not much contrast in dark theme between the yellow and white text.
+
+- 'three-column-icon-list' List layout is broken in dark theme
+
+- 'two-column-icon-list' List layout looks bad on dark theme. The bgColor looks good on light theme, but awkward on dark theme.
+
+- Font size on GitHub Gist embed is too small
+
+- Task list checked variant Markdown in dark theme is awkward, it has a dark shadow
+
+- Contact Callout looks awkward in dark theme and needs redone generally
+
 ## Header
 
 - Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.
diff --git a/src/components/Animations/Terraform/index.astro b/src/components/Animations/Terraform/index.astro
index 3837a8740..06a1321c9 100644
--- a/src/components/Animations/Terraform/index.astro
+++ b/src/components/Animations/Terraform/index.astro
@@ -202,14 +202,14 @@ import Icon from '@components/Icon/index.astro'
         data-animation-icon="pause"
         class="flex h-12 w-12 items-center justify-center bg-transparent"
       >
-        <Icon icon="pause" size={20} color="primary-inverse" />
+        <Icon icon="pause" size={6} color="primary-inverse" />
       </span>
       <span
         data-animation-icon="play"
         class="flex h-12 w-12 items-center justify-center bg-transparent"
         style="display: none;"
       >
-        <Icon icon="play" size={20} color="primary-inverse" />
+        <Icon icon="play" size={6} color="primary-inverse" />
       </span>
     </button>
   </div>
diff --git a/src/components/Button/server/__tests__/index.spec.ts b/src/components/Button/server/__tests__/index.spec.ts
index 529c37b93..9782b0ca2 100644
--- a/src/components/Button/server/__tests__/index.spec.ts
+++ b/src/components/Button/server/__tests__/index.spec.ts
@@ -39,19 +39,6 @@ describe('Button server helpers', () => {
       expect(classList['custom']).toBe(true)
       expect(classList['extra-class']).toBe(true)
     })
-
-    it('supports the spotlight variant', () => {
-      const classList = buildButtonClassList({
-        variant: 'spotlight',
-      })
-
-      expect(classList).toMatchObject<ClassList>({
-        'bg-spotlight': true,
-        'hover:bg-spotlight-offset': true,
-        'focus-visible:bg-spotlight-offset': true,
-        'active:bg-spotlight-offset': true,
-      })
-    })
   })
 
   describe('resolveAriaLabel', () => {
diff --git a/src/components/Button/server/index.ts b/src/components/Button/server/index.ts
index a6a1d9c43..28ad59a87 100644
--- a/src/components/Button/server/index.ts
+++ b/src/components/Button/server/index.ts
@@ -1,4 +1,13 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'twitter' | 'success' | 'warning' | 'spotlight' | 'icon'
+export type ButtonVariant =
+  | 'danger'
+  | 'note'
+  | 'primary'
+  | 'secondary'
+  | 'twitter'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'icon'
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type ButtonType = 'button' | 'submit' | 'reset'
 export type IconPosition = 'left' | 'right' | 'only'
@@ -34,15 +43,14 @@ function addClassNames(classList: ClassList, classNames: string) {
 
 const baseButtonClasses =
   'inline-flex items-center justify-center text-center align-middle whitespace-nowrap select-none ' +
-  'no-underline ' +
+  'no-underline hover:no-underline focus:no-underline focus-visible:no-underline decoration-transparent ' +
   'relative focus-visible:outline-none ' +
   "after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out " +
   'focus-visible:after:opacity-100 focus-visible:after:[inset:-6px] focus-visible:after:border-spotlight ' +
   'border-2 border-solid border-transparent rounded-md ' +
   'font-bold uppercase tracking-[0.08em] ' +
   'text-sm leading-5 ' +
-  '[box-shadow:var(--shadow-sm)] [text-shadow:var(--shadow-text)] ' +
-  'transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-in-out ' +
+  'transition-[color,background-color,border-color] duration-200 ease-in-out ' +
   'disabled:cursor-not-allowed disabled:opacity-[0.65] disabled:pointer-events-none ' +
   'aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.65] aria-disabled:pointer-events-none'
 
@@ -56,38 +64,52 @@ const sizeClasses: Record<ButtonSize, string> = {
 }
 
 const variantClasses: Record<ButtonVariant, string> = {
+  danger:
+    'bg-danger text-white ' +
+    'hover:bg-danger-offset ' +
+    'focus-visible:bg-danger-offset ' +
+    'active:bg-danger-offset',
+  icon:
+    'aspect-square bg-transparent text-white p-2 ' +
+    'hover:bg-page-offset hover:text-primary ' +
+    'focus-visible:bg-page-offset focus-visible:text-primary ' +
+    'active:bg-page-offset',
+  info:
+    'bg-info text-white ' +
+    'hover:bg-info-offset ' +
+    'focus-visible:bg-info-offset ' +
+    'active:bg-info-offset',
+  note:
+    'bg-note text-white ' +
+    'hover:bg-note-offset ' +
+    'focus-visible:bg-note-offset ' +
+    'active:bg-note-offset',
   primary:
-    'bg-primary text-content ' +
-    'hover:bg-primary-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-primary-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-primary-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'bg-primary text-primary-inverse ' +
+    'hover:bg-primary-offset ' +
+    'focus-visible:bg-primary-offset ' +
+    'active:bg-primary-offset',
   secondary:
-    'bg-secondary text-content ' +
-    'hover:bg-secondary-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-secondary-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-secondary-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
-  twitter: 'bg-x border-x text-content hover:bg-transparent hover:text-x focus-visible:bg-transparent focus-visible:text-x',
+    'bg-secondary text-secondary-inverse ' +
+    'hover:bg-secondary-offset ' +
+    'focus-visible:bg-secondary-offset ' +
+    'active:bg-secondary-offset',
   success:
     'bg-success text-white ' +
-    'hover:bg-success-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-success-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-success-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-success-offset ' +
+    'focus-visible:bg-success-offset ' +
+    'active:bg-success-offset',
+  twitter:
+    'bg-x border-x text-white ' +
+    'hover:bg-transparent hover:text-x ' +
+    'focus-visible:bg-transparent ' +
+    'focus-visible:text-x',
   warning:
-    'bg-warning text-content ' +
-    'hover:bg-warning-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-warning-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-warning-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
-  spotlight:
-    'bg-spotlight text-black ' +
-    'hover:bg-spotlight-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-spotlight-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-spotlight-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
-  icon:
-    'aspect-square bg-transparent text-content p-2 ![box-shadow:none] ' +
-    'hover:bg-page-offset hover:text-primary ' +
-    'focus-visible:bg-page-offset focus-visible:text-primary ' +
-    'active:bg-page-offset',
-}
+    'bg-warning-offset text-white ' +
+    'hover:bg-warning ' +
+    'focus-visible:bg-warning ' +
+    'active:bg-warning',
+  }
 
 export interface ButtonClassOptions {
   variant?: ButtonVariant
@@ -101,10 +123,15 @@ export function buildButtonClassList({
   additionalClasses,
 }: ButtonClassOptions) {
   const classList: ClassList = {}
+  const selectedVariant = variant as string
+
+  if (!(selectedVariant in variantClasses)) {
+    throw new Error(`Button: unsupported variant '${selectedVariant}'`)
+  }
 
   addClassNames(classList, baseButtonClasses)
   addClassNames(classList, sizeClasses[size])
-  addClassNames(classList, variantClasses[variant])
+  addClassNames(classList, variantClasses[selectedVariant as ButtonVariant])
 
   if (additionalClasses?.trim()) {
     addClassNames(classList, additionalClasses)
diff --git a/src/components/CallToAction/Download/index.astro b/src/components/CallToAction/Download/index.astro
index f0c96c2d2..8afe09c8a 100644
--- a/src/components/CallToAction/Download/index.astro
+++ b/src/components/CallToAction/Download/index.astro
@@ -4,6 +4,7 @@
  * download page, which is implemented by Forms/Download.
  */
 import { BuildError } from '@lib/errors/BuildError'
+import Button from '@components/Button/index.astro'
 import List from '@components/List/index.astro'
 import Icon from '@components/Icon/index.astro'
 
@@ -74,7 +75,7 @@ const downloadUrl = `/downloads/${normalizedResource}`
         </span>
       </div>
 
-      <h2 id={titleId} class="text-2xl md:text-3xl font-bold text-content mb-3">
+      <h2 id={titleId} class="text-2xl md:text-3xl font-bold text-primary-offset mb-3">
         {title}
       </h2>
       <p id={descriptionId} class="text-base text-content-offset mb-6 max-w-xl">
@@ -99,37 +100,38 @@ const downloadUrl = `/downloads/${normalizedResource}`
             <Icon
               icon={"document"}
               size={8}
-              color={"secondary"}
+              color={"primary-offset"}
             />
           </div>
-          <p class="text-xs text-content-offset">Free resource · Instant access</p>
+          <p class="text-xs text-content">Free resource · Instant access</p>
         </div>
 
         <div class="space-y-3">
-          <a
+          <Button
             href={downloadUrl}
-            class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-spotlight hover:bg-spotlight-offset text-white font-semibold rounded-lg text-sm transition-colors no-underline hover:no-underline focus:no-underline focus-visible:no-underline decoration-transparent hover:decoration-transparent focus:decoration-transparent focus-visible:decoration-transparent"
+            variant="success"
+            class="w-full gap-2 px-6 py-3 text-content-inverse"
           >
             <Icon
               icon={"download"}
               size={5}
-              color={"secondary"}
+              color={"content-inverse"}
             />
-            {buttonText}
-          </a>
+            <span class="mt-1">{buttonText}</span>
+          </Button>
           {
             secondaryLink && (
-              <a
+              <Button
                 href={secondaryLink.href}
-                class="w-full inline-flex items-center justify-center px-6 py-3 border border-trim text-content font-semibold rounded-lg text-sm hover:bg-page-offset transition-colors"
-              >
-                {secondaryLink.text}
-              </a>
+                variant="secondary"
+                class="w-full mt-2 px-6 py-3 bg-page-offset text-content-inverse hover:bg-page-offset focus-visible:bg-page-offset"
+                text={secondaryLink.text}
+              />
             )
           }
         </div>
 
-        <p class="text-xs text-content-offset text-center mt-4">No credit card required.</p>
+        <p class="text-xs text-content text-center mt-4">No credit card required.</p>
       </div>
     </div>
   </div>
diff --git a/src/components/CallToAction/Newsletter/layouts/article.astro b/src/components/CallToAction/Newsletter/layouts/article.astro
index 0b73c44f7..4de74884e 100644
--- a/src/components/CallToAction/Newsletter/layouts/article.astro
+++ b/src/components/CallToAction/Newsletter/layouts/article.astro
@@ -1,6 +1,7 @@
 ---
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
+import Icon from '@components/Icon/index.astro'
 import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
@@ -57,44 +58,18 @@ const {
               class="relative px-6 py-2 bg-primary hover:bg-primary-offset text-page-base font-semibold rounded text-sm transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
             >
               <span id="button-text">{buttonText}</span>
-              <svg
+              <Icon
+                icon="exit-right-thin"
+                size={4}
+                classes="inline-block ml-2"
                 id="button-arrow"
-                class="inline-block w-4 h-4 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                ></path>
-              </svg>
-              <svg
+              />
+              <Icon
+                icon="spinner"
+                size={4}
+                classes="hidden ml-2 animate-spin"
                 id="button-spinner"
-                class="hidden w-4 h-4 ml-2 animate-spin"
-                fill="none"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <circle
-                  class="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  stroke-width="4"
-                ></circle>
-                <path
-                  class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-              </svg>
+              />
             </button>
           </Confetti>
         </div>
diff --git a/src/components/CallToAction/Newsletter/layouts/home.astro b/src/components/CallToAction/Newsletter/layouts/home.astro
index af7d3d24d..cf440fd80 100644
--- a/src/components/CallToAction/Newsletter/layouts/home.astro
+++ b/src/components/CallToAction/Newsletter/layouts/home.astro
@@ -1,6 +1,7 @@
 ---
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
+import Icon from '@components/Icon/index.astro'
 import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
@@ -209,44 +210,18 @@ const {
                 class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-none text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 group-hover/form:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
               >
                 <span id="button-text">{buttonText}</span>
-                <svg
+                <Icon
+                  icon="exit-right-thin"
+                  size={4}
+                  classes="transition-transform group-hover/form:translate-x-1"
                   id="button-arrow"
-                  class="w-4 h-4 transition-transform group-hover/form:translate-x-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  focusable="false"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M17 8l4 4m0 0l-4 4m4-4H3"
-                  ></path>
-                </svg>
-                <svg
+                />
+                <Icon
+                  icon="spinner"
+                  size={4}
+                  classes="hidden animate-spin"
                   id="button-spinner"
-                  class="hidden w-4 h-4 animate-spin"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  focusable="false"
-                >
-                  <circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                  ></circle>
-                  <path
-                    class="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
+                />
               </button>
             </Confetti>
             <GDPRConsent
diff --git a/src/components/CallToAction/Newsletter/layouts/page.astro b/src/components/CallToAction/Newsletter/layouts/page.astro
index 4a5db8d41..49b53c4c1 100644
--- a/src/components/CallToAction/Newsletter/layouts/page.astro
+++ b/src/components/CallToAction/Newsletter/layouts/page.astro
@@ -8,6 +8,7 @@
 
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
+import Icon from '@components/Icon/index.astro'
 import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
@@ -68,44 +69,18 @@ const {
           class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-lg text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 hover:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
         >
           <span id="button-text">{buttonText}</span>
-          <svg
+          <Icon
+            icon="exit-right-thin"
+            size={4}
+            classes="transition-transform"
             id="button-arrow"
-            class="w-4 h-4 transition-transform"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 8l4 4m0 0l-4 4m4-4H3"
-            ></path>
-          </svg>
-          <svg
+          />
+          <Icon
+            icon="spinner"
+            size={4}
+            classes="hidden animate-spin"
             id="button-spinner"
-            class="hidden w-4 h-4 animate-spin"
-            fill="none"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            ></circle>
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
+          />
         </button>
       </Confetti>
 
diff --git a/src/components/Callout/index.astro b/src/components/Callout/index.astro
index d7267ab5a..fe1a20cb1 100644
--- a/src/components/Callout/index.astro
+++ b/src/components/Callout/index.astro
@@ -43,24 +43,32 @@ const typeAccentTextClassMap = {
   action: 'text-warning',
   info: 'text-info',
   tip: 'text-success',
-  note: 'text-note',
+  note: 'text-note-offset',
   success: 'text-success',
   danger: 'text-danger',
 } as const
 
+const typeBodyTextClassMap = {
+  warning: 'text-content',
+  action: 'text-content',
+  info: 'text-content',
+  tip: 'text-content',
+  note: 'text-note',
+  success: 'text-content',
+  danger: 'text-content',
+} as const
+
 const icon = iconMap[type] ?? iconMap.info
 const typeLabel = typeLabelMap[type] ?? typeLabelMap.info
 const typeLabelUpper = typeLabel.toUpperCase()
 
 const containerClasses = typeContainerClassMap[type] ?? typeContainerClassMap.info
 const accentTextClasses = typeAccentTextClassMap[type] ?? typeAccentTextClassMap.info
+const bodyTextClasses = typeBodyTextClassMap[type] ?? typeBodyTextClassMap.info
+const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slice(5) : 'inherit'
 ---
 
 <style>
-  .callout__icon :global(svg) {
-    fill: currentcolor;
-  }
-
   /* Spacing for nested elements */
   .callout__content > :not(.sr-only) + :not(.sr-only) {
     margin-top: 2rem;
@@ -90,7 +98,7 @@ const accentTextClasses = typeAccentTextClassMap[type] ?? typeAccentTextClassMap
         '-translate-y-0.5',
       ]}
     >
-      <Icon icon={icon} size={20} color="inherit" />
+      <Icon icon={icon} size={5} color={iconColor} />
     </div>
     <div
       class:list={[
@@ -106,7 +114,7 @@ const accentTextClasses = typeAccentTextClassMap[type] ?? typeAccentTextClassMap
     </div>
   </div>
 
-  <div class="callout__content">
+  <div class:list={[bodyTextClasses, 'callout__content']}>
     <span class="sr-only">{typeLabel} callout:</span>
     <slot />
   </div>
diff --git a/src/components/Carousel/index.astro b/src/components/Carousel/index.astro
index d24569100..6d4fdb984 100644
--- a/src/components/Carousel/index.astro
+++ b/src/components/Carousel/index.astro
@@ -4,7 +4,7 @@
  */
 import { Picture } from 'astro:assets'
 import { getCollection } from 'astro:content'
-
+import Icon from '@components/Icon/index.astro'
 import {
   type CarouselNavigationMode,
   type CarouselVariant,
@@ -133,21 +133,11 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
                         )}
                         <div class="mt-4 flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                           <span>Learn more</span>
-                          <svg
-                            class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                            focusable="false"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M17 8l4 4m0 0l-4 4m4-4H3"
-                            />
-                          </svg>
+                          <Icon
+                            icon="exit-right-thin"
+                            size={4}
+                            classes="ml-0.5 mb-0.5 transform group-hover:translate-x-1 transition-transform"
+                          />
                         </div>
                       </div>
                     </a>
@@ -160,48 +150,40 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
           {/* Navigation Buttons */}
           <button
             type="button"
-            class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+            class:list={[
+              "embla__button embla__button--prev",
+              "absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4",
+              "bg-content-inverse",
+              "rounded-full border-2 border-trim shadow-lg",
+              "hover:bg-content-inverse-active hover:border-gray-200",
+              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+            ]}
             aria-label="Previous slide"
             data-carousel-prev
           >
-            <svg
-              class="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-              focusable="false"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
+            <Icon icon="arrow-left" size={6} color="currentColor" />
           </button>
 
           <button
             type="button"
-            class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+            class:list={[
+              "embla__button embla__button--next",
+              "absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4",
+              "bg-content-inverse",
+              "rounded-full border-2 border-trim shadow-lg",
+              "hover:bg-content-inverse-active hover:border-gray-200",
+              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+            ]}
             aria-label="Next slide"
             data-carousel-next
           >
-            <svg
-              class="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-              focusable="false"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
+            <Icon icon="arrow-right" size={6} color="currentColor" />
           </button>
 
           {/* Dots Navigation */}
diff --git a/src/components/Code/CodeTabs/client/index.ts b/src/components/Code/CodeTabs/client/index.ts
index 7c8820200..c400c9756 100644
--- a/src/components/Code/CodeTabs/client/index.ts
+++ b/src/components/Code/CodeTabs/client/index.ts
@@ -2,21 +2,15 @@ import { LitElement } from 'lit'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { addButtonEventListeners } from '@components/scripts/elementListeners'
-import copyIcon from '../../../../icons/copy.svg?raw'
-import checkIcon from '../../../../icons/check.svg?raw'
 import {
+  queryCodeTabsIconMarkup,
   queryCheckIconElement,
   queryCodeBlocks,
   queryCodeElement,
   queryCopyIconElement,
 } from './selectors'
 
-function getIconMarkup(svgRaw: string): string {
-  // Ensure the icon inherits currentColor and sizing via Tailwind classes.
-  return svgRaw
-    .replace('<svg', '<svg class="h-5 w-5" fill="currentColor"')
-    .replace(/\s(width|height)="[^"]*"/g, '')
-}
+const ICON_BANK_ID = 'code-tabs-icon-bank'
 
 function getCodeText(pre: HTMLPreElement): string {
   const code = queryCodeElement(pre)
@@ -167,8 +161,16 @@ export class CodeTabsElement extends LitElement {
     button.setAttribute('aria-label', tooltip)
     button.title = tooltip
 
-    const copySvg = getIconMarkup(copyIcon)
-    const checkSvg = getIconMarkup(checkIcon)
+    const copySvg = queryCodeTabsIconMarkup({
+      iconBankId: ICON_BANK_ID,
+      iconName: 'copy',
+      root: document,
+    }) ?? ''
+    const checkSvg = queryCodeTabsIconMarkup({
+      iconBankId: ICON_BANK_ID,
+      iconName: 'check',
+      root: document,
+    }) ?? ''
 
     button.innerHTML = `
       <span data-code-tabs-copy-icon="copy">${copySvg}</span>
diff --git a/src/components/Code/CodeTabs/client/selectors.ts b/src/components/Code/CodeTabs/client/selectors.ts
index bc08e60dc..93a7e83ed 100644
--- a/src/components/Code/CodeTabs/client/selectors.ts
+++ b/src/components/Code/CodeTabs/client/selectors.ts
@@ -1,4 +1,4 @@
-import { isCodeElement, isPreElement, isSpanElement } from '@components/scripts/assertions/elements'
+import { isCodeElement, isDivElement, isPreElement, isSpanElement } from '@components/scripts/assertions/elements'
 
 const SELECTORS = {
   preBlocks: ':scope > pre',
@@ -30,6 +30,31 @@ export function queryCheckIconElement(scope: ParentNode): HTMLElement | null {
   return isSpanElement(element) ? element : null
 }
 
+export function queryCodeTabsIconMarkup(params: {
+  iconBankId: string
+  iconName: string
+  root?: Document
+}): string | null {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBankCandidate = root.getElementById(iconBankId)
+  if (!isDivElement(iconBankCandidate)) {
+    return null
+  }
+
+  const iconHostCandidate = iconBankCandidate.querySelector(`[data-code-tabs-icon="${iconName}"]`)
+  if (!isSpanElement(iconHostCandidate)) {
+    return null
+  }
+
+  const markup = iconHostCandidate.innerHTML.trim()
+  return markup ? markup : null
+}
+
 export function hasHighlighterElement(scope: ParentNode = document): boolean {
   return scope.querySelector('highlighter-element') !== null
 }
diff --git a/src/components/Code/CodeTabs/index.astro b/src/components/Code/CodeTabs/index.astro
index 8e6a3d9ec..a728b32cf 100644
--- a/src/components/Code/CodeTabs/index.astro
+++ b/src/components/Code/CodeTabs/index.astro
@@ -4,8 +4,16 @@
  *
  * The actual `<code-tabs>` markup is emitted by the markdown pipeline.
  */
+import Icon from '@components/Icon/index.astro'
+
+const iconBankId = 'code-tabs-icon-bank'
 ---
 
+<div id={iconBankId} hidden aria-hidden="true">
+  <span data-code-tabs-icon="copy"><Icon icon="copy" size={5} color="inherit" isListMarker={false} /></span>
+  <span data-code-tabs-icon="check"><Icon icon="check" size={5} color="inherit" isListMarker={false} /></span>
+</div>
+
 <script>
   import { registerCodeTabsWebComponent } from './client'
   import { hasHighlighterElement, hasMastodonModalElement } from './client/selectors'
diff --git a/src/components/Consent/Checkbox/index.astro b/src/components/Consent/Checkbox/index.astro
index f585e668f..7af66f1b9 100644
--- a/src/components/Consent/Checkbox/index.astro
+++ b/src/components/Consent/Checkbox/index.astro
@@ -16,10 +16,10 @@
 import type { ConsentCheckboxProps } from './@types'
 export type Props = ConsentCheckboxProps
 
-import DefaultCheckbox from './default.astro'
-import DownloadCheckbox from './download.astro'
-import NewsletterCtaArticleCheckbox from './newsletter-cta-article.astro'
-import NewsletterCtaHomeCheckbox from './newsletter-cta-home.astro'
+import DefaultCheckbox from './layouts/default.astro'
+import DownloadCheckbox from './layouts/download.astro'
+import NewsletterCtaArticleCheckbox from './layouts/newsletter-cta-article.astro'
+import NewsletterCtaHomeCheckbox from './layouts/newsletter-cta-home.astro'
 
 const {
   purpose,
diff --git a/src/components/Consent/Checkbox/default.astro b/src/components/Consent/Checkbox/layouts/default.astro
similarity index 67%
rename from src/components/Consent/Checkbox/default.astro
rename to src/components/Consent/Checkbox/layouts/default.astro
index 5fc852d14..3398f9510 100644
--- a/src/components/Consent/Checkbox/default.astro
+++ b/src/components/Consent/Checkbox/layouts/default.astro
@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
@@ -34,7 +34,7 @@ const {
       aria-labelledby={`${id}-label`}
       aria-describedby={`${id}-description`}
       aria-invalid="false"
-      class="border-2 border-trim rounded mt-0.5 h-5 w-5 shrink-0 cursor-pointer focus:outline-2 focus:outline-offset-2 focus:outline-primary checked:bg-spotlight checked:border-primary"
+      class="relative mt-1 h-5 w-5 shrink-0 appearance-none rounded border-2 border-content-active bg-transparent outline-none hover:border-primary hover:bg-primary-offset/10 focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 checked:border-primary checked:bg-spotlight checked:after:content-[''] checked:after:absolute checked:after:inset-1 checked:after:rounded-xs checked:after:bg-content-inverse after:pointer-events-none after:absolute after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight cursor-pointer"
     />
     <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
     <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed">
@@ -46,7 +46,7 @@ const {
             I consent to Webstack Builders processing my personal data for {purpose}. See our{' '}
             <a
               href={privacyPolicyUrl}
-              class="text-primary underline hover:text-primary-hover"
+              class="text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -55,7 +55,7 @@ const {
             and{' '}
             <a
               href={cookiePolicyUrl}
-              class="text-primary underline hover:text-primary-hover"
+              class="text-primary underline hover:text-secondary hover:decoration-secondary"
               target="_blank"
               rel="noopener noreferrer"
             >
diff --git a/src/components/Consent/Checkbox/download.astro b/src/components/Consent/Checkbox/layouts/download.astro
similarity index 96%
rename from src/components/Consent/Checkbox/download.astro
rename to src/components/Consent/Checkbox/layouts/download.astro
index 3c68ec299..a894a9539 100644
--- a/src/components/Consent/Checkbox/download.astro
+++ b/src/components/Consent/Checkbox/layouts/download.astro
@@ -3,7 +3,7 @@
  * GDPR Consent Component Download Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
diff --git a/src/components/Consent/Checkbox/newsletter-cta-article.astro b/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
similarity index 97%
rename from src/components/Consent/Checkbox/newsletter-cta-article.astro
rename to src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
index 86b34fbad..1de1e4443 100644
--- a/src/components/Consent/Checkbox/newsletter-cta-article.astro
+++ b/src/components/Consent/Checkbox/layouts/newsletter-cta-article.astro
@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
diff --git a/src/components/Consent/Checkbox/newsletter-cta-home.astro b/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
similarity index 96%
rename from src/components/Consent/Checkbox/newsletter-cta-home.astro
rename to src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
index ee4cfc3d7..8bfecb693 100644
--- a/src/components/Consent/Checkbox/newsletter-cta-home.astro
+++ b/src/components/Consent/Checkbox/layouts/newsletter-cta-home.astro
@@ -3,7 +3,7 @@
  * GDPR Consent Component Default Layout
  */
 
-import type { ConsentCheckboxProps } from './@types'
+import type { ConsentCheckboxProps } from '@components/Consent/Checkbox/@types'
 
 export type Props = Omit<ConsentCheckboxProps, 'variant'>
 
diff --git a/src/components/Copy/index.astro b/src/components/Copy/index.astro
index 347c2b8b4..826fd5783 100644
--- a/src/components/Copy/index.astro
+++ b/src/components/Copy/index.astro
@@ -68,10 +68,10 @@ const iconButtonColorClass = [
       type="button"
     >
       <span data-copy-to-clipboard-icon class="shrink-0">
-        <Icon icon="copy" color="inherit" classes={iconExtraClass ?? ''} />
+        <Icon icon="copy" size={4} color="inherit" classes={iconExtraClass ?? ''} />
       </span>
       <span data-copy-to-clipboard-success-icon hidden class="shrink-0">
-        <Icon icon="check" color="inherit" classes={successIconExtraClass ?? ''} />
+        <Icon icon="check" size={4} color="inherit" classes={successIconExtraClass ?? ''} />
       </span>
     </button>
   </span>
diff --git a/src/components/Home/Backstage/index.astro b/src/components/Home/Backstage/index.astro
index 999ad50d4..d7e60adb4 100644
--- a/src/components/Home/Backstage/index.astro
+++ b/src/components/Home/Backstage/index.astro
@@ -3,9 +3,9 @@
  * Backstage IDP Implementation section of the homepage
  */
 import { Image } from 'astro:assets'
+import Icon from '@components/Icon/index.astro'
 import backstageBackground from '@assets/images/backstage-background.jpg'
 
-type IconKey = keyof typeof svgPath
 export interface Props {
   pretitle: string
   description: string
@@ -16,19 +16,12 @@ export interface Props {
   features: {
     title: string
     description: string
-    icon: IconKey
+    icon: string
   }[]
 }
 
 const { pretitle, description, benefits, features } = Astro.props as Props
 
-const svgPath = {
-  'left-justified': 'M4 6h16M4 12h16M4 18h7',
-  'clipboard': 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
-  'lightning-bolt': 'M13 10V3L4 14h7v7l9-11h-7z',
-  'graph': 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
-} as const
-
 const visibleBenefits = benefits.slice(0, 3)
 const visibleFeatures = features.slice(0, 4)
 ---
@@ -69,20 +62,7 @@ const visibleFeatures = features.slice(0, 4)
         <div class="bg-page-offset p-6 rounded-xl border border-trim">
           <div class="flex items-center gap-3 mb-4">
             <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
-              <svg
-                class="w-5 h-5 text-primary"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d={svgPath[feature.icon]}
-                ></path>
-              </svg>
+              <Icon icon={feature.icon} size={5} color="primary" isListMarker={false} />
             </div>
             <span class="font-bold text-content-active">{feature.title}</span>
           </div>
@@ -99,7 +79,7 @@ const visibleFeatures = features.slice(0, 4)
         class="relative inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors whitespace-nowrap focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
       >
         Let's talk
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
+        <Icon icon="exit-right-thin" size={4} classes="mb-1" />
       </a>
     </div>
   </div>
diff --git a/src/components/Icon/icons/a.astro b/src/components/Icon/icons/a.astro
new file mode 100644
index 000000000..30c06b65b
--- /dev/null
+++ b/src/components/Icon/icons/a.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Example Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/alarm-clock.astro b/src/components/Icon/icons/alarm-clock.astro
index e4eef4ddd..421119a02 100644
--- a/src/components/Icon/icons/alarm-clock.astro
+++ b/src/components/Icon/icons/alarm-clock.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/apple.astro b/src/components/Icon/icons/apple.astro
index 3af291ecc..758b6369d 100644
--- a/src/components/Icon/icons/apple.astro
+++ b/src/components/Icon/icons/apple.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/arrow-down.astro b/src/components/Icon/icons/arrow-down.astro
index 73f29f688..ee5c9fc74 100644
--- a/src/components/Icon/icons/arrow-down.astro
+++ b/src/components/Icon/icons/arrow-down.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/arrow-left.astro b/src/components/Icon/icons/arrow-left.astro
new file mode 100644
index 000000000..a1b6e84d9
--- /dev/null
+++ b/src/components/Icon/icons/arrow-left.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>arrow-left icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M15 19l-7-7 7-7"
+  />
+</svg>
diff --git a/src/components/Icon/icons/arrow-right.astro b/src/components/Icon/icons/arrow-right.astro
index 63e95bd7a..632b14084 100644
--- a/src/components/Icon/icons/arrow-right.astro
+++ b/src/components/Icon/icons/arrow-right.astro
@@ -6,20 +6,27 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
-  fill="currentColor"
+  fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
   {accessible && <title>arrow-right icon</title>}
-  <path d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z" />
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 5l7 7-7 7"
+  />
 </svg>
diff --git a/src/components/Icon/icons/avatar.astro b/src/components/Icon/icons/avatar.astro
index 28ae8c313..9f1020e24 100644
--- a/src/components/Icon/icons/avatar.astro
+++ b/src/components/Icon/icons/avatar.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/award.astro b/src/components/Icon/icons/award.astro
index 6546326c7..c13e20c8e 100644
--- a/src/components/Icon/icons/award.astro
+++ b/src/components/Icon/icons/award.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/background-broken.astro b/src/components/Icon/icons/background-broken.astro
new file mode 100644
index 000000000..c2753318b
--- /dev/null
+++ b/src/components/Icon/icons/background-broken.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Example Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/bluesky.astro b/src/components/Icon/icons/bluesky.astro
index 364547d3b..79948ac6f 100644
--- a/src/components/Icon/icons/bluesky.astro
+++ b/src/components/Icon/icons/bluesky.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/book.astro b/src/components/Icon/icons/book.astro
index 6545e4efc..55cf9f379 100644
--- a/src/components/Icon/icons/book.astro
+++ b/src/components/Icon/icons/book.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/bug.astro b/src/components/Icon/icons/bug.astro
index 5895e18d3..eaea81ba3 100644
--- a/src/components/Icon/icons/bug.astro
+++ b/src/components/Icon/icons/bug.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/calendar-generic-ical.astro b/src/components/Icon/icons/calendar-generic-ical.astro
index eb0e798c5..1123a61b1 100644
--- a/src/components/Icon/icons/calendar-generic-ical.astro
+++ b/src/components/Icon/icons/calendar-generic-ical.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 610.398 610.398"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/calendar-google.astro b/src/components/Icon/icons/calendar-google.astro
index 72b20e906..dc10c3e72 100644
--- a/src/components/Icon/icons/calendar-google.astro
+++ b/src/components/Icon/icons/calendar-google.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/calendar-outlook.astro b/src/components/Icon/icons/calendar-outlook.astro
index dc9fcca5a..37b5d72b6 100644
--- a/src/components/Icon/icons/calendar-outlook.astro
+++ b/src/components/Icon/icons/calendar-outlook.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   viewBox="0 0 24 24"
diff --git a/src/components/Icon/icons/calendar_apple.astro b/src/components/Icon/icons/calendar_apple.astro
index 3eb306815..1a0ca1bc6 100644
--- a/src/components/Icon/icons/calendar_apple.astro
+++ b/src/components/Icon/icons/calendar_apple.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   viewBox="0 0 24 24"
diff --git a/src/components/Icon/icons/chart.astro b/src/components/Icon/icons/chart.astro
index ceba816a4..d1cec9e05 100644
--- a/src/components/Icon/icons/chart.astro
+++ b/src/components/Icon/icons/chart.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>chart icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/check-circled-open.astro b/src/components/Icon/icons/check-circled-open.astro
new file mode 100644
index 000000000..dfb8a9419
--- /dev/null
+++ b/src/components/Icon/icons/check-circled-open.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Check Circled Open Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/check-circled.astro b/src/components/Icon/icons/check-circled.astro
index 28ae8c313..1fb9a98c0 100644
--- a/src/components/Icon/icons/check-circled.astro
+++ b/src/components/Icon/icons/check-circled.astro
@@ -6,25 +6,23 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
-  fill="none"
+  fill="currentColor"
   stroke="currentColor"
-  viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {accessible && <title>User Avatar Icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-  ></path>
+  {accessible && <title>check mark circled icon</title>}
+  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
+  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
 </svg>
diff --git a/src/components/Icon/icons/check-stylized.astro b/src/components/Icon/icons/check-stylized.astro
index b44342e7a..d2751ba7c 100644
--- a/src/components/Icon/icons/check-stylized.astro
+++ b/src/components/Icon/icons/check-stylized.astro
@@ -6,26 +6,25 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
-  fill="none"
+  fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>stylized check mark icon</title>}
   <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M5 13l4 4L19 7"
-  ></path>
+    style="stroke-width:0.0492"
+    d="m 23.743628,0.07311325 c 0.14035,0.120299 0.195448,0.211651 0.255076,0.387223 0.02089,0.403815 -0.213789,0.66972995 -0.442541,0.98342495 -0.04921,0.06842 -0.09838,0.136862 -0.147514,0.205328 -0.108392,0.150678 -0.217238,0.301017 -0.326335,0.451185 -0.156196,0.215346 -0.31029,0.432105 -0.463478,0.649598 -0.02417,0.03431 -0.04834,0.06861 -0.07324,0.103961 -0.07294,0.103613 -0.145838,0.20726 -0.218714,0.310921 -0.29871,0.424898 -0.598582,0.848775 -0.903521,1.269233 -0.256273,0.353388 -0.507353,0.710157 -0.756945,1.068286 -0.215345,0.308459 -0.434731,0.613759 -0.655768,0.918155 -0.197915,0.273151 -0.392004,0.548805 -0.584869,0.825539 -0.246463,0.353605 -0.49651,0.704318 -0.749561,1.053232 -0.278241,0.383963 -0.551215,0.771569 -0.823919,1.159474 -0.29871,0.424898 -0.598582,0.8487738 -0.903521,1.2692328 -0.256273,0.353387 -0.507353,0.710157 -0.756944,1.068286 -0.215346,0.308459 -0.434732,0.613759 -0.655769,0.918155 -0.197914,0.27315 -0.392004,0.548805 -0.584869,0.825539 -0.246463,0.353605 -0.49651,0.704318 -0.749561,1.053232 -0.27824,0.383962 -0.551215,0.771569 -0.823919,1.159474 -0.29871,0.424898 -0.598582,0.848774 -0.903521,1.269232 -0.256273,0.353388 -0.507353,0.710157 -0.756944,1.068286 -0.215346,0.30846 -0.434732,0.613759 -0.655769,0.918156 -0.197914,0.27315 -0.392004,0.548804 -0.584869,0.825539 -0.220607,0.316508 -0.443466,0.631146 -0.6699584,0.943473 -0.208628,0.287701 -0.415822,0.576317 -0.620787,0.866643 -0.02429,0.03431 -0.04858,0.06862 -0.0736,0.103973 -0.113871,0.161355 -0.226308,0.323387 -0.335711,0.48781 -0.02959,0.04409 -0.02959,0.04409 -0.05978,0.08906 -0.05245,0.07843 -0.104303,0.157263 -0.156109,0.236121 -0.130605,0.162942 -0.250238,0.255649 -0.4581,0.291954 -0.036,-3.8e-4 -0.07201,-7.61e-4 -0.109098,-0.0012 -0.036,3.81e-4 -0.07201,7.61e-4 -0.109099,0.0012 -0.15839,-0.02766 -0.232683,-0.06272 -0.358028,-0.167106 -0.09039,-0.151861 -0.154907,-0.312827 -0.221271,-0.476346 -0.03115,-0.07409 -0.03115,-0.07409 -0.06293,-0.149686 -0.07018,-0.167904 -0.138991,-0.336319 -0.207514,-0.504906 -0.02514,-0.06172 -0.05029,-0.123441 -0.07544,-0.18516 -0.10695,-0.262739 -0.213555,-0.525617 -0.319841,-0.788625 -2.182027,-5.4289 -2.182027,-5.4289 -6.325815,-9.389054 -0.174355,-0.107756 -0.252046,-0.20339 -0.310394,-0.405663 -0.01349,-0.245798 0.01183,-0.396587 0.169026,-0.590054 0.258086,-0.2014328 0.490715,-0.150693 0.807052,-0.113661 1.421311,0.205997 2.675828,0.960635 3.744361,1.883825 0.0431,0.0367 0.0862,0.0734 0.130611,0.111212 0.533575,0.466878 1.051121,0.972331 1.489351,1.530455 0.107964,0.137315 0.220982,0.269343 0.334595,0.402013 0.636525,0.764612 1.177844,1.606802 1.733286,2.430903 0.165695,-0.134641 0.320298,-0.263252 0.457907,-0.427175 0.132019,-0.15475 0.266112,-0.307063 0.40259,-0.457907 0.132262,-0.146561 0.26371,-0.293673 0.39337,-0.442541 0.166874,-0.191597 0.3370344,-0.380126 0.5072704,-0.568735 0.09304,-0.103688 0.185015,-0.208132 0.276396,-0.313275 0.179567,-0.206231 0.364121,-0.407798 0.548375,-0.609838 0.126866,-0.140026 0.251372,-0.281879 0.375315,-0.424486 0.10183,-0.116154 0.205165,-0.230874 0.308665,-0.345543 0.132262,-0.146562 0.26371,-0.293673 0.39337,-0.442542 0.239534,-0.274857 0.484776,-0.544588 0.729117,-0.815167 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139842,-0.15913 0.282175,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187164,-0.210339 0.279661,-0.31654 0.239535,-0.2748568 0.484777,-0.5445878 0.729118,-0.8151668 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139902,-0.159198 0.282294,-0.316139 0.424294,-0.473465 0.09304,-0.103688 0.185014,-0.208132 0.276396,-0.313275 0.179567,-0.206231 0.364121,-0.407798 0.548375,-0.609838 0.126866,-0.140026 0.251372,-0.281879 0.375314,-0.424486 0.101831,-0.116154 0.205166,-0.230874 0.308665,-0.345543 0.132263,-0.146562 0.263711,-0.293673 0.39337,-0.442542 0.239534,-0.274857 0.484777,-0.544588 0.729117,-0.815167 0.196141,-0.217488 0.390792,-0.436051 0.583141,-0.656897 0.139842,-0.15913 0.282175,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187164,-0.210339 0.279661,-0.31654 0.239534,-0.274857 0.484777,-0.544588 0.729117,-0.815167 0.19614,-0.217488 0.390791,-0.436051 0.58314,-0.656897 0.139842,-0.15913 0.282176,-0.316003 0.424102,-0.473273 0.09407,-0.104817 0.187165,-0.210339 0.279662,-0.31654 0.241134,-0.276693 0.487759,-0.54848195 0.734303,-0.82035295 0.0579,-0.06399 0.0579,-0.06399 0.116974,-0.129266 0.0348,-0.03835 0.0696,-0.0767 0.105449,-0.116206 0.07092,-0.08068 0.139494,-0.163455 0.206289,-0.247585 0.211913,-0.262539 0.517395,-0.276303 0.8192,-0.15558 z"
+  />
 </svg>
\ No newline at end of file
diff --git a/src/components/Icon/icons/check.astro b/src/components/Icon/icons/check.astro
index 0031a3c38..0c9a14ab9 100644
--- a/src/components/Icon/icons/check.astro
+++ b/src/components/Icon/icons/check.astro
@@ -6,21 +6,27 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
-  fill="currentColor"
+  fill="none"
   stroke="currentColor"
+  viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
   {accessible && <title>check mark icon</title>}
-  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
-  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M5 13l4 4L19 7"
+  ></path>
 </svg>
diff --git a/src/components/Icon/icons/chevron.astro b/src/components/Icon/icons/chevron.astro
index 3a9d8cb10..d457da478 100644
--- a/src/components/Icon/icons/chevron.astro
+++ b/src/components/Icon/icons/chevron.astro
@@ -5,12 +5,14 @@ export type Props = {
   size: number
   accessible: boolean
   focusable: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable } = Astro.props
+const { color, classes, size, accessible, focusable, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes]}
   fill="none"
diff --git a/src/components/Icon/icons/chrome.astro b/src/components/Icon/icons/chrome.astro
index af2b1e1bd..8823042a9 100644
--- a/src/components/Icon/icons/chrome.astro
+++ b/src/components/Icon/icons/chrome.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/clipboard-checked.astro b/src/components/Icon/icons/clipboard-checked.astro
new file mode 100644
index 000000000..12bd9231c
--- /dev/null
+++ b/src/components/Icon/icons/clipboard-checked.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>checked clipboard icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/clipboard.astro b/src/components/Icon/icons/clipboard.astro
index 501926c47..6056ecd4a 100644
--- a/src/components/Icon/icons/clipboard.astro
+++ b/src/components/Icon/icons/clipboard.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,11 +22,11 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>clipboard icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/clock.astro b/src/components/Icon/icons/clock.astro
index 44a922ef1..415d12b83 100644
--- a/src/components/Icon/icons/clock.astro
+++ b/src/components/Icon/icons/clock.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/close.astro b/src/components/Icon/icons/close.astro
index 1aebb935e..6a55a75b9 100644
--- a/src/components/Icon/icons/close.astro
+++ b/src/components/Icon/icons/close.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/cloud.astro b/src/components/Icon/icons/cloud.astro
index d453c37a8..eb34426c2 100644
--- a/src/components/Icon/icons/cloud.astro
+++ b/src/components/Icon/icons/cloud.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/codepen.astro b/src/components/Icon/icons/codepen.astro
index b4074d05a..bb45940e7 100644
--- a/src/components/Icon/icons/codepen.astro
+++ b/src/components/Icon/icons/codepen.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/company.astro b/src/components/Icon/icons/company.astro
index 01d70de48..70970b529 100644
--- a/src/components/Icon/icons/company.astro
+++ b/src/components/Icon/icons/company.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/conversation.astro b/src/components/Icon/icons/conversation.astro
index 4211356c5..b51a23762 100644
--- a/src/components/Icon/icons/conversation.astro
+++ b/src/components/Icon/icons/conversation.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/copy.astro b/src/components/Icon/icons/copy.astro
index 91bd1d52c..bd1aa7652 100644
--- a/src/components/Icon/icons/copy.astro
+++ b/src/components/Icon/icons/copy.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/database.astro b/src/components/Icon/icons/database.astro
index bb34f4e29..bba1b1c98 100644
--- a/src/components/Icon/icons/database.astro
+++ b/src/components/Icon/icons/database.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/document.astro b/src/components/Icon/icons/document.astro
index 04244f8c4..69edc0764 100644
--- a/src/components/Icon/icons/document.astro
+++ b/src/components/Icon/icons/document.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>document icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/download-document.astro b/src/components/Icon/icons/download-document.astro
index 3df4bd42f..5af7299bd 100644
--- a/src/components/Icon/icons/download-document.astro
+++ b/src/components/Icon/icons/download-document.astro
@@ -5,13 +5,14 @@ export type Props = {
   size: number
   accessible: boolean
   focusable: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, title } = Astro.props
+const { color, classes, size, accessible, focusable, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={[`w-${size} h-${size}`, `text-${color}`, classes]}
   fill="none"
@@ -20,7 +21,7 @@ const { color, classes, size, accessible, focusable, title } = Astro.props
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>download document icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/download.astro b/src/components/Icon/icons/download.astro
index b8aff544c..7b3968a19 100644
--- a/src/components/Icon/icons/download.astro
+++ b/src/components/Icon/icons/download.astro
@@ -5,13 +5,14 @@ export type Props = {
   size: number
   accessible: boolean
   focusable: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, title } = Astro.props
+const { color, classes, size, accessible, focusable, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes]}
   fill="none"
@@ -20,7 +21,7 @@ const { color, classes, size, accessible, focusable, title } = Astro.props
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>download icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/email.astro b/src/components/Icon/icons/email.astro
index 3dc94022c..b78dfd54f 100644
--- a/src/components/Icon/icons/email.astro
+++ b/src/components/Icon/icons/email.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>email icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/error.astro b/src/components/Icon/icons/error.astro
index f3da56275..a6d395b2a 100644
--- a/src/components/Icon/icons/error.astro
+++ b/src/components/Icon/icons/error.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/exit-right-thin.astro b/src/components/Icon/icons/exit-right-thin.astro
new file mode 100644
index 000000000..201455993
--- /dev/null
+++ b/src/components/Icon/icons/exit-right-thin.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>exit right thin icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M17 8l4 4m0 0l-4 4m4-4H3"
+  />
+</svg>
diff --git a/src/components/Icon/icons/exit-right.astro b/src/components/Icon/icons/exit-right.astro
new file mode 100644
index 000000000..f5546fa90
--- /dev/null
+++ b/src/components/Icon/icons/exit-right.astro
@@ -0,0 +1,27 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>arrow-right icon</title>}
+  <path d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z" />
+</svg>
diff --git a/src/components/Icon/icons/external.astro b/src/components/Icon/icons/external.astro
index fb64d75ae..62cf1c358 100644
--- a/src/components/Icon/icons/external.astro
+++ b/src/components/Icon/icons/external.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/eye.astro b/src/components/Icon/icons/eye.astro
index 976301eaa..1906ecafd 100644
--- a/src/components/Icon/icons/eye.astro
+++ b/src/components/Icon/icons/eye.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>eye icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/facebook.astro b/src/components/Icon/icons/facebook.astro
index c89965e30..2e3ad4a6d 100644
--- a/src/components/Icon/icons/facebook.astro
+++ b/src/components/Icon/icons/facebook.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/feed.astro b/src/components/Icon/icons/feed.astro
index 21d4997b8..b380c4fdb 100644
--- a/src/components/Icon/icons/feed.astro
+++ b/src/components/Icon/icons/feed.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/file.astro b/src/components/Icon/icons/file.astro
index 25e34deea..77b5c9748 100644
--- a/src/components/Icon/icons/file.astro
+++ b/src/components/Icon/icons/file.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/firefox.astro b/src/components/Icon/icons/firefox.astro
index 849600814..2d9bcfb21 100644
--- a/src/components/Icon/icons/firefox.astro
+++ b/src/components/Icon/icons/firefox.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/folder-magnifying-glass.astro b/src/components/Icon/icons/folder-magnifying-glass.astro
index 2b023d59e..8d38bed9a 100644
--- a/src/components/Icon/icons/folder-magnifying-glass.astro
+++ b/src/components/Icon/icons/folder-magnifying-glass.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/gear.astro b/src/components/Icon/icons/gear.astro
index 75c19d74e..f56bddd51 100644
--- a/src/components/Icon/icons/gear.astro
+++ b/src/components/Icon/icons/gear.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/github.astro b/src/components/Icon/icons/github.astro
index ffac114b2..f869ce700 100644
--- a/src/components/Icon/icons/github.astro
+++ b/src/components/Icon/icons/github.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/globe.astro b/src/components/Icon/icons/globe.astro
index 77baec084..6eae94a28 100644
--- a/src/components/Icon/icons/globe.astro
+++ b/src/components/Icon/icons/globe.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>globe icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/graph.astro b/src/components/Icon/icons/graph.astro
new file mode 100644
index 000000000..ae30bf5f8
--- /dev/null
+++ b/src/components/Icon/icons/graph.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>User Avatar Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/heart-filled.astro b/src/components/Icon/icons/heart-filled.astro
new file mode 100644
index 000000000..7e10ed65d
--- /dev/null
+++ b/src/components/Icon/icons/heart-filled.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Heart Filled Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/heart.astro b/src/components/Icon/icons/heart.astro
index cf58745df..b4a860841 100644
--- a/src/components/Icon/icons/heart.astro
+++ b/src/components/Icon/icons/heart.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/info.astro b/src/components/Icon/icons/info.astro
index 92e4ee4ef..7e3172bfb 100644
--- a/src/components/Icon/icons/info.astro
+++ b/src/components/Icon/icons/info.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,11 +22,11 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>info circled icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/key.astro b/src/components/Icon/icons/key.astro
index ad68db4e4..fafd24e75 100644
--- a/src/components/Icon/icons/key.astro
+++ b/src/components/Icon/icons/key.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>key icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/keybase.astro b/src/components/Icon/icons/keybase.astro
index 16f3c3469..d33832564 100644
--- a/src/components/Icon/icons/keybase.astro
+++ b/src/components/Icon/icons/keybase.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/info-circled.astro b/src/components/Icon/icons/left-justified.astro
similarity index 81%
rename from src/components/Icon/icons/info-circled.astro
rename to src/components/Icon/icons/left-justified.astro
index d33d00280..9270b7b3f 100644
--- a/src/components/Icon/icons/info-circled.astro
+++ b/src/components/Icon/icons/left-justified.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,11 +22,11 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>Left Justified Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    d="M4 6h16M4 12h16M4 18h7"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/lightbulb.astro b/src/components/Icon/icons/lightbulb.astro
index 80e385cf2..324573b91 100644
--- a/src/components/Icon/icons/lightbulb.astro
+++ b/src/components/Icon/icons/lightbulb.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/lightning.astro b/src/components/Icon/icons/lightning.astro
index b7ece8f64..7e1492ab8 100644
--- a/src/components/Icon/icons/lightning.astro
+++ b/src/components/Icon/icons/lightning.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -25,6 +27,6 @@ const { color, classes, size, accessible, focusable, isListMarker } = Astro.prop
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    d="M13 10V3L4 14h7v7l9-11h-7z"
   ></path>
 </svg>
diff --git a/src/components/Icon/icons/link.astro b/src/components/Icon/icons/link.astro
index 4fc0cda76..3cbfdbd6e 100644
--- a/src/components/Icon/icons/link.astro
+++ b/src/components/Icon/icons/link.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/linkedin.astro b/src/components/Icon/icons/linkedin.astro
index 91747b7be..7a778db9e 100644
--- a/src/components/Icon/icons/linkedin.astro
+++ b/src/components/Icon/icons/linkedin.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/location.astro b/src/components/Icon/icons/location.astro
index 85be7a228..2d2bc3cd4 100644
--- a/src/components/Icon/icons/location.astro
+++ b/src/components/Icon/icons/location.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
@@ -21,6 +22,6 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>location icon</title>}
   <path style="stroke-width:0.375" d="M 9,0 C 4.02975,0 0,4.02975 0,9 0,10.957125 0.641625,12.753 1.708125,14.22375 1.72725,14.259 1.73025,14.298375 1.752,14.332125 l 6,9 C 8.03025,23.7495 8.499,24 9,24 c 0.501,0 0.96975,-0.2505 1.248,-0.667875 l 6,-9 c 0.02212,-0.03375 0.02475,-0.07312 0.04387,-0.108375 C 17.358375,12.753 18,10.957125 18,9 18,4.02975 13.97025,0 9,0 Z M 9,12 C 7.34325,12 6,10.65675 6,9 6,7.34325 7.34325,6 9,6 c 1.65675,0 3,1.34325 3,3 0,1.65675 -1.34325,3 -3,3 z" />
 </svg>
diff --git a/src/components/Icon/icons/lock.astro b/src/components/Icon/icons/lock.astro
index 16989aa2f..36268eddc 100644
--- a/src/components/Icon/icons/lock.astro
+++ b/src/components/Icon/icons/lock.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>lock icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/map.astro b/src/components/Icon/icons/map.astro
index 9d7765ac9..1feaaa175 100644
--- a/src/components/Icon/icons/map.astro
+++ b/src/components/Icon/icons/map.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/mastodon.astro b/src/components/Icon/icons/mastodon.astro
index 27ae60f94..2444260ca 100644
--- a/src/components/Icon/icons/mastodon.astro
+++ b/src/components/Icon/icons/mastodon.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/message.astro b/src/components/Icon/icons/message.astro
index 3014299ee..ee55002f8 100644
--- a/src/components/Icon/icons/message.astro
+++ b/src/components/Icon/icons/message.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
diff --git a/src/components/Icon/icons/microphone.astro b/src/components/Icon/icons/microphone.astro
index 1b90436d4..c782abc54 100644
--- a/src/components/Icon/icons/microphone.astro
+++ b/src/components/Icon/icons/microphone.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/moon.astro b/src/components/Icon/icons/moon.astro
index a6d9e17dc..233ca588b 100644
--- a/src/components/Icon/icons/moon.astro
+++ b/src/components/Icon/icons/moon.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/paper-and-pen.astro b/src/components/Icon/icons/paper-and-pen.astro
index 499689109..883e2b72a 100644
--- a/src/components/Icon/icons/paper-and-pen.astro
+++ b/src/components/Icon/icons/paper-and-pen.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>paper and pen icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/paper-clip.astro b/src/components/Icon/icons/paper-clip.astro
index afa6e7fa7..c7d6ecad9 100644
--- a/src/components/Icon/icons/paper-clip.astro
+++ b/src/components/Icon/icons/paper-clip.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/pause.astro b/src/components/Icon/icons/pause.astro
index c2cf190c9..d964278a6 100644
--- a/src/components/Icon/icons/pause.astro
+++ b/src/components/Icon/icons/pause.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}` , color, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/play.astro b/src/components/Icon/icons/play.astro
index 1706dfafb..2cd36bb9b 100644
--- a/src/components/Icon/icons/play.astro
+++ b/src/components/Icon/icons/play.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/power.astro b/src/components/Icon/icons/power.astro
index f0a31bae2..f0aa69649 100644
--- a/src/components/Icon/icons/power.astro
+++ b/src/components/Icon/icons/power.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/question.astro b/src/components/Icon/icons/question.astro
index d60e4c6af..b9d6f70c2 100644
--- a/src/components/Icon/icons/question.astro
+++ b/src/components/Icon/icons/question.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/quote.astro b/src/components/Icon/icons/quote.astro
new file mode 100644
index 000000000..1a40ba0db
--- /dev/null
+++ b/src/components/Icon/icons/quote.astro
@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Example Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/reddit.astro b/src/components/Icon/icons/reddit.astro
index e7acf013e..961c9f709 100644
--- a/src/components/Icon/icons/reddit.astro
+++ b/src/components/Icon/icons/reddit.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/reload.astro b/src/components/Icon/icons/reload.astro
index 10dd30d2d..acb49e31a 100644
--- a/src/components/Icon/icons/reload.astro
+++ b/src/components/Icon/icons/reload.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/repost.astro b/src/components/Icon/icons/repost.astro
index e5b2fac72..53b468ed3 100644
--- a/src/components/Icon/icons/repost.astro
+++ b/src/components/Icon/icons/repost.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/search.astro b/src/components/Icon/icons/search.astro
index 8f2891162..f225bb21c 100644
--- a/src/components/Icon/icons/search.astro
+++ b/src/components/Icon/icons/search.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/shield.astro b/src/components/Icon/icons/shield.astro
index 035f7247b..ac9a32870 100644
--- a/src/components/Icon/icons/shield.astro
+++ b/src/components/Icon/icons/shield.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/spinner.astro b/src/components/Icon/icons/spinner.astro
new file mode 100644
index 000000000..bb4945503
--- /dev/null
+++ b/src/components/Icon/icons/spinner.astro
@@ -0,0 +1,39 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Loading Spinner</title>}
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="4"
+  ></circle>
+  <path
+    class="opacity-75"
+    fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  ></path>
+</svg>
diff --git a/src/components/Icon/icons/sun.astro b/src/components/Icon/icons/sun.astro
index a19109c9e..1d657246a 100644
--- a/src/components/Icon/icons/sun.astro
+++ b/src/components/Icon/icons/sun.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/table-of-contents.astro b/src/components/Icon/icons/table-of-contents.astro
index 7f7bbf0d3..7b1159ec4 100644
--- a/src/components/Icon/icons/table-of-contents.astro
+++ b/src/components/Icon/icons/table-of-contents.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/trash.astro b/src/components/Icon/icons/trash.astro
index d29e13ed9..0ed1ee840 100644
--- a/src/components/Icon/icons/trash.astro
+++ b/src/components/Icon/icons/trash.astro
@@ -6,13 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
@@ -21,7 +22,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>trash icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/src/components/Icon/icons/upload.astro b/src/components/Icon/icons/upload.astro
index 3cfdf851c..4dc0099b5 100644
--- a/src/components/Icon/icons/upload.astro
+++ b/src/components/Icon/icons/upload.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"
diff --git a/src/components/Icon/icons/waiting.astro b/src/components/Icon/icons/waiting.astro
index 4a34aaa47..f207e765b 100644
--- a/src/components/Icon/icons/waiting.astro
+++ b/src/components/Icon/icons/waiting.astro
@@ -5,12 +5,14 @@ export type Props = {
   size: number
   accessible: boolean
   focusable: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable } = Astro.props
+const { color, classes, size, accessible, focusable, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={[`w-${size} h-${size}`, `text-${color}`, classes]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/warning.astro b/src/components/Icon/icons/warning.astro
index 2b19e5cd3..81cd17480 100644
--- a/src/components/Icon/icons/warning.astro
+++ b/src/components/Icon/icons/warning.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/wrench.astro b/src/components/Icon/icons/wrench.astro
index e237151be..daebf6d1c 100644
--- a/src/components/Icon/icons/wrench.astro
+++ b/src/components/Icon/icons/wrench.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/icons/x.astro b/src/components/Icon/icons/x.astro
index 0f8736037..40d09382b 100644
--- a/src/components/Icon/icons/x.astro
+++ b/src/components/Icon/icons/x.astro
@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"
diff --git a/src/components/Icon/index.astro b/src/components/Icon/index.astro
index 85f7f29c3..c0e42fb60 100644
--- a/src/components/Icon/index.astro
+++ b/src/components/Icon/index.astro
@@ -16,6 +16,8 @@ export type Props = {
   size?: number
   /** Any additional CSS classes to apply to the SVG element. */
   classes?: string
+  /** Optional id attribute to apply to the rendered SVG element. */
+  id?: string
   /**
    * Whether the icon has a <title> element and aria-hidden=false attribute (if true),
    * or aria-hidden=true without a <title> (if false). Defaults to false.
@@ -27,13 +29,17 @@ export type Props = {
   isListMarker?: boolean
 }
 
-const { icon, color = 'inherit', inverseColor, size = 14, classes, accessible = false, focusable = false, isListMarker = true }: Props = Astro.props
+const { icon, color = 'inherit', inverseColor, size = 14, classes, id, accessible = false, focusable = false, isListMarker = true }: Props = Astro.props
+const resolvedIcon = typeof icon === 'string' ? icon.trim() : ''
 
-const IconComponent = getIconComponent(icon) as unknown as (_props: {
+const IconComponent = resolvedIcon
+  ? getIconComponent(resolvedIcon)
+  : null as unknown as (_props: {
   color?: string
   inverseColor?: string
   size?: number
   classes?: string
+  id?: string
   accessible?: boolean
   focusable?: boolean
   isListMarker?: boolean
@@ -44,10 +50,11 @@ const markerProps = {
   ...(inverseColor ? { inverseColor } : {}),
   ...(size !== undefined ? { size } : {}),
   ...(classes ? { classes } : {}),
+  ...(id ? { id } : {}),
   ...(accessible ? { accessible } : {}),
   ...(focusable ? { focusable } : {}),
   ...(isListMarker ? { isListMarker } : {}),
 }
 ---
 
-<IconComponent {...markerProps} />
+{IconComponent && <IconComponent {...markerProps} />}
diff --git a/src/components/Icon/server/__tests__/index.spec.ts b/src/components/Icon/server/__tests__/index.spec.ts
index 74c99af66..54b26cea7 100644
--- a/src/components/Icon/server/__tests__/index.spec.ts
+++ b/src/components/Icon/server/__tests__/index.spec.ts
@@ -19,7 +19,7 @@ describe('getIconComponent', () => {
 
   it('throws a descriptive error when icon is missing', () => {
     expect(() => getIconComponent(undefined, {})).toThrowError(
-      'PlainIconList: missing icon value for list item. Expected an icon name that maps to src/components/List/markers/<icon>.astro'
+      'Icon: missing icon value. Expected an icon name that maps to src/components/Icon/icons/<icon>.astro'
     )
   })
 
@@ -30,7 +30,7 @@ describe('getIconComponent', () => {
     }
 
     expect(() => getIconComponent('download', markerComponents)).toThrowError(
-      'PlainIconList: marker file "download.astro" was not found in src/components/List/icons/. Requested icon path: "../icons/download.astro". Available markers: avatar.astro, company.astro'
+      'Icon: icon file "download.astro" was not found in src/components/Icon/icons/. Requested icon path: "../icons/download.astro". Available icons: avatar.astro, company.astro'
     )
   })
 })
diff --git a/src/components/Icon/server/index.ts b/src/components/Icon/server/index.ts
index 05fa3b365..3d24637ab 100644
--- a/src/components/Icon/server/index.ts
+++ b/src/components/Icon/server/index.ts
@@ -18,8 +18,8 @@ const formatAvailableIcons = (markerComponents: IconComponentMap): string => {
 }
 
 /**
- * Resolve marker component by icon name.
- * Throws a descriptive error when icon is missing or marker file is not found.
+ * Resolve icon component by icon name.
+ * Throws a descriptive error when icon is missing or icon file is not found.
  */
 export const getIconComponent = (
   icon?: string,
@@ -27,7 +27,7 @@ export const getIconComponent = (
 ): AstroComponentFactory => {
   if (!icon) {
     throw new Error(
-      'PlainIconList: missing icon value for list item. Expected an icon name that maps to src/components/List/markers/<icon>.astro'
+      'Icon: missing icon value. Expected an icon name that maps to src/components/Icon/icons/<icon>.astro'
     )
   }
 
@@ -39,8 +39,8 @@ export const getIconComponent = (
     const availableIcons = formatAvailableIcons(markerComponents)
 
     throw new Error(
-      `PlainIconList: marker file "${iconFileName}" was not found in src/components/List/icons/. ` +
-      `Requested icon path: "${iconPath}". Available markers: ${availableIcons || '(none)'}`
+      `Icon: icon file "${iconFileName}" was not found in src/components/Icon/icons/. ` +
+      `Requested icon path: "${iconPath}". Available icons: ${availableIcons || '(none)'}`
     )
   }
 
diff --git a/src/components/Layout/SubHeader/index.astro b/src/components/Layout/SubHeader/index.astro
index 6bd1f1958..e840721d4 100644
--- a/src/components/Layout/SubHeader/index.astro
+++ b/src/components/Layout/SubHeader/index.astro
@@ -10,12 +10,12 @@ export type Props = {
 const { title, description, icon, subtitle } = Astro.props
 ---
 
-<header class="text-center max-w-2xl mx-auto mb-8">
+<header class="text-center max-w-2xl mx-auto mt-6 mb-8">
   <div class="inline-flex items-center justify-center w-18 h-18 rounded-full bg-primary/10 mb-5">
     <Icon
       icon={icon}
       color="page-inverse"
-      size={12}
+      size={11}
     />
   </div>
   <h1 class="text-4xl md:text-5xl font-bold text-page-inverse mb-4">{title}</h1>
diff --git a/src/components/List/index.astro b/src/components/List/index.astro
index 84a23d309..5ba2a8aaf 100644
--- a/src/components/List/index.astro
+++ b/src/components/List/index.astro
@@ -5,7 +5,6 @@ import CardGridList from '@components/List/layouts/CardGridList.astro'
 import CheckIconsList from '@components/List/layouts/CheckIconsList.astro'
 import ChevronList from '@components/List/layouts/ChevronList.astro'
 import ColoredMarkerList from '@components/List/layouts/ColoredMarkerList.astro'
-import DownloadPageList from '@components/List/layouts/DownloadPageList.astro'
 import NumberedWithBackgroundList from '@components/List/layouts/NumberedWithBackgroundList.astro'
 import PlainIconList from '@components/List/layouts/PlainIconList.astro'
 import SideBySideList from '@components/List/layouts/SideBySideList.astro'
@@ -59,6 +58,9 @@ const itemsWithIconAndColor = items as Array<{
   inverseColor?: string
   bgColor?: string
 }>
+const plainIconItems = items.filter((item): item is Props['items'][number] & { icon: string } => {
+  return typeof item.icon === 'string' && item.icon.trim().length > 0
+})
 ---
 
 {variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} {...classesProps} />}
@@ -67,9 +69,8 @@ const itemsWithIconAndColor = items as Array<{
 {variant === 'check-icons-list' && <CheckIconsList items={items} {...classesProps} />}
 {variant === 'chevron-list' && <ChevronList items={items} {...classesProps} />}
 {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...sizeProps} />}
-{variant === 'download-page-list' && <DownloadPageList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
 {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} {...classesProps} />}
-{variant === 'plain-icon-list' && <PlainIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
+{variant === 'plain-icon-list' && <PlainIconList items={plainIconItems} {...classesProps} {...sizeProps} />}
 {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} />}
 {variant === 'timeline-list' && <TimelineList items={items} {...classesProps} />}
 {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} />}
diff --git a/src/components/List/layouts/CheckIconsList.astro b/src/components/List/layouts/CheckIconsList.astro
index 91cd54488..5cc1f5764 100644
--- a/src/components/List/layouts/CheckIconsList.astro
+++ b/src/components/List/layouts/CheckIconsList.astro
@@ -27,7 +27,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
       <li class:list={liClass}>
         <Icon
           icon="check-stylized"
-          color="text-success"
+          color="success"
           size={5}
           classes={"mt-1"}
         />
@@ -38,7 +38,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
               <span class="text-content-offset/60 mx-2">—</span>
             </>
           )}
-          <span class={`text-content-offset${item.lead ? " mx-6" : ""}`}>{item.text}</span>
+          <span class={`text-content-offset`}>{item.text}</span>
         </span>
       </li>
     ))
diff --git a/src/components/List/layouts/ColoredMarkerList.astro b/src/components/List/layouts/ColoredMarkerList.astro
index 438b266ea..a4e096f42 100644
--- a/src/components/List/layouts/ColoredMarkerList.astro
+++ b/src/components/List/layouts/ColoredMarkerList.astro
@@ -20,7 +20,9 @@ const { items, classes, size = 2 }: Props = Astro.props
 const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul]
 const liClass = ["flex items-start", classes?.li]
 const emClass = ["mr-2 not-italic font-bold", classes?.em]
-const iconClass = [`w-${size} h-${size}`, "rounded-full mt-3 mr-3 shrink-0", classes?.icon]
+const markerSizeInRem = `${size * 0.25}rem`
+const markerStyle = `width: ${markerSizeInRem}; height: ${markerSizeInRem};`
+const iconClass = ["rounded-full mt-2 mr-3 shrink-0", classes?.icon]
 const textClass = classes?.text ? [classes.text] : []
 ---
 
@@ -28,7 +30,7 @@ const textClass = classes?.text ? [classes.text] : []
   {
     items.map((item) => (
       <li class:list={liClass}>
-        <span class:list={[iconClass, item.color]} />
+        <span class:list={[iconClass, item.color]} style={markerStyle} />
         {item.lead && <em class:list={emClass}>{item.lead}</em>}
         <span class:list={textClass}>{item.text}</span>
       </li>
diff --git a/src/components/List/layouts/DownloadPageList.astro b/src/components/List/layouts/DownloadPageList.astro
deleted file mode 100644
index ccd50ccc3..000000000
--- a/src/components/List/layouts/DownloadPageList.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-import Icon from "@components/Icon/index.astro"
-
-export type Props = {
-  items: {
-    text: string
-  }[]
-}
-
-const { items } = Astro.props
-
-const ulClass = ["space-y-3 ml-4 mr-4 md:mr-20 my-4"]
-const liClass = ["flex items-start gap-3"]
----
-
-<ul class:list={ulClass}>
-  {
-    items.map(({ text }) => (
-      <li class:list={liClass}>
-        <Icon icon="check-stylized" size={6} color="success" />
-        <span>{text}</span>
-      </li>
-    ))
-  }
-</ul>
diff --git a/src/components/List/layouts/NumberedWithBackgroundList.astro b/src/components/List/layouts/NumberedWithBackgroundList.astro
index c18a04bff..a9d3428f4 100644
--- a/src/components/List/layouts/NumberedWithBackgroundList.astro
+++ b/src/components/List/layouts/NumberedWithBackgroundList.astro
@@ -20,9 +20,9 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
 
 <ol class:list={olClass}>
   {
-    items.map((item) => (
+    items.map((item, index) => (
       <li class:list={liClass}>
-        <span class="mt-2 shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">1</span>
+        <span class="mt-2 shrink-0 w-8 h-8 bg-primary text-content-inverse rounded-full flex items-center justify-center text-sm font-bold">{index + 1}</span>
         <div class="pt-1">
           <em class:list={emClass}>{item.lead}</em>
           <div>{item.text}</div>
diff --git a/src/components/List/layouts/PlainIconList.astro b/src/components/List/layouts/PlainIconList.astro
index 723065038..370dac415 100644
--- a/src/components/List/layouts/PlainIconList.astro
+++ b/src/components/List/layouts/PlainIconList.astro
@@ -5,7 +5,7 @@ export type Props = {
   items: {
     text: string
     icon: string
-    color: string
+    color?: string
   }[]
   classes?: {
     ul?: string
@@ -25,11 +25,15 @@ const markerClasses = props.classes?.svg
 
 <ul class:list={ulClass}>
   {
-    props.items.map(({ text, icon, color }: PlainIconListItem) => (
+    props.items.map(({ text, icon, color }: PlainIconListItem) => {
+      const resolvedColor = color?.trim() ? color : 'currentColor'
+
+      return (
       <li class:list={liClass}>
-        <Icon icon={icon} color={color} size={props.size ?? 5} {...(markerClasses ? { classes: markerClasses } : {})} />
+        <Icon icon={icon} color={resolvedColor} size={props.size ?? 5} {...(markerClasses ? { classes: markerClasses } : {})} />
         <span>{text}</span>
       </li>
-    ))
+      )
+    })
   }
 </ul>
diff --git a/src/components/List/layouts/TwoColumnCheckIconsList.astro b/src/components/List/layouts/TwoColumnCheckIconsList.astro
index 181657665..c26e5b905 100644
--- a/src/components/List/layouts/TwoColumnCheckIconsList.astro
+++ b/src/components/List/layouts/TwoColumnCheckIconsList.astro
@@ -16,7 +16,7 @@ export type Props = {
 
 const { items, classes, size }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content-offset mb-1", classes?.ul]
+const ulClass = ["grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content mb-1", classes?.ul]
 const liClass = ["flex items-center gap-2", classes?.li]
 ---
 
@@ -30,7 +30,7 @@ const liClass = ["flex items-center gap-2", classes?.li]
           size={size ?? 5}
         />
         <span>
-          <span class="text-content-offset">{item.text}</span>
+          <span class="text-content">{item.text}</span>
         </span>
       </li>
     ))
diff --git a/src/components/List/layouts/ZebraList.astro b/src/components/List/layouts/ZebraList.astro
index f566e6500..bfc08551a 100644
--- a/src/components/List/layouts/ZebraList.astro
+++ b/src/components/List/layouts/ZebraList.astro
@@ -31,7 +31,7 @@ const textClass = ["text-sm text-content-offset"]
           <span class:list={textClass}>{item.text}</span>
         </div>
         <Icon
-          icon={"info-circled"}
+          icon={"info"}
           color={"text-trim"}
           size={4}
           classes={`group-hover:${item.color ?? "text-primary"} transition-colors`}
diff --git a/src/components/Pages/Contact/index.astro b/src/components/Pages/Contact/index.astro
index edf857f74..e378715ae 100644
--- a/src/components/Pages/Contact/index.astro
+++ b/src/components/Pages/Contact/index.astro
@@ -98,12 +98,12 @@ const { content } = Astro.props
 ---
 
 <contact-form>
-  <div class="min-h-screen">
+  <div class="min-h-screen md:mb-16">
     {/** Google Maps embed */}
     {/* <Map /> */}
 
     {/** Contact Form Section */}
-    <section class="py-5 bg-page-offset" aria-label="Contact form">
+    <section class="pt-5 pb-8 bg-page-offset" aria-label="Contact form">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
           <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start">
             {/** Contact Form */}
@@ -133,13 +133,13 @@ const { content } = Astro.props
                 </div>
 
                 {/** Personal Information */}
-                <div class="pb-6 border-b border-trim">
+                <div class="border-b border-trim">
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.contact.header}
                   </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="name"
@@ -151,7 +151,7 @@ const { content } = Astro.props
                         type="text"
                         id="name"
                         name="name"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         required
                         placeholder={content.form.contact.fullNamePlaceholder}
                         minlength="2"
@@ -179,7 +179,7 @@ const { content } = Astro.props
                         type="email"
                         id="email"
                         name="email"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         required
                         placeholder={content.form.contact.emailPlaceholder}
                         aria-invalid="false"
@@ -195,7 +195,7 @@ const { content } = Astro.props
                     </div>
                   </div>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="company"
@@ -207,13 +207,13 @@ const { content } = Astro.props
                         type="text"
                         id="company"
                         name="company"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         placeholder={content.form.contact.companyPlaceholder}
                         maxlength="100"
                       />
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="space-y-2 mt-2 md:mt-0">
                       <label
                         for="phone"
                         class="block text-content-active text-sm font-medium"
@@ -224,7 +224,7 @@ const { content } = Astro.props
                         type="tel"
                         id="phone"
                         name="phone"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200"
                         placeholder={content.form.contact.phonePlaceholder}
                       />
                     </div>
@@ -232,13 +232,13 @@ const { content } = Astro.props
                 </div>
 
                 {/** Project Information */}
-                <div class="pb-6 border-b border-trim">
+                <div class="pb-2 border-b border-trim">
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-6">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.project.header}
                   </h3>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6 md:space-y-6">
                     <div class="space-y-2">
                       <label
                         for="project_type"
@@ -249,7 +249,7 @@ const { content } = Astro.props
                       <select
                         id="project_type"
                         name="project_type"
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                       >
                         {content.form.project.typeOptions.map((item) => (
                           <option value={item.value}>{item.text}</option>
@@ -257,7 +257,7 @@ const { content } = Astro.props
                       </select>
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="space-y-2 mt-2 md:mt-0">
                       <label
                         for="budget"
                         class="block text-content-active text-sm font-medium"
@@ -268,7 +268,7 @@ const { content } = Astro.props
                         id="budget"
                         name="budget"
                         required
-                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                       >
                         {content.form.project.budgetOptions.map((item) => (
                           <option value={item.value}>{item.text}</option>
@@ -277,22 +277,24 @@ const { content } = Astro.props
                     </div>
                   </div>
 
-                  <div class="space-y-2">
-                    <label
-                      for="timeline"
-                      class="block text-content-active text-sm font-medium"
-                    >
-                      {content.form.project.timeline}
-                    </label>
-                    <select
-                      id="timeline"
-                      name="timeline"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 cursor-pointer"
-                    >
-                      {content.form.project.timelineOptions.map((item) => (
-                        <option value={item.value}>{item.text}</option>
-                      ))}
-                    </select>
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
+                    <div class="space-y-2 mb-6">
+                      <label
+                        for="timeline"
+                        class="block text-content-active text-sm font-medium"
+                      >
+                        {content.form.project.timeline}
+                      </label>
+                      <select
+                        id="timeline"
+                        name="timeline"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
+                      >
+                        {content.form.project.timelineOptions.map((item) => (
+                          <option value={item.value}>{item.text}</option>
+                        ))}
+                      </select>
+                    </div>
                   </div>
 
                   <div class="space-y-2">
@@ -305,7 +307,7 @@ const { content } = Astro.props
                     <textarea
                       id="message"
                       name="message"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-content-inverse focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200 resize-vertical min-h-30"
+                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 resize-vertical min-h-30"
                       rows="6"
                       required
                       placeholder={content.form.project.descriptionPlaceholder}
@@ -327,16 +329,14 @@ const { content } = Astro.props
                 </div>
 
                 {/** File Upload Section */}
-                <div class="pb-6">
+                <div>
                   <h3 class="flex items-center text-page-inverse text-xl font-semibold mb-4">
                     <div class="w-1 h-5 bg-page-inverse rounded-full mr-3"></div>
                     {content.form.files.header}
                   </h3>
                   <p class="text-content-active text-sm mb-6">{content.form.files.subheader}</p>
 
-                  <div
-                    class="border-2 border-dashed border-trim rounded-xl p-8 text-center bg-page-offset hover:border-primary-hover transition-colors duration-200"
-                  >
+                  <div>
                     <div id="uppyContainer" hidden>
                       <div id="uppyDashboard"></div>
                     </div>
@@ -375,7 +375,7 @@ const { content } = Astro.props
                   <div class="flex justify-end">
                     <button
                       type="submit"
-                      class="inline-flex items-center justify-center px-8 py-4 bg-spotlight hover:bg-spotlight-offset text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
+                      class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
                       id="submitBtn"
                     >
                       <span class="btn-text">{content.form.submitButtonText}</span>
@@ -467,7 +467,9 @@ const { content } = Astro.props
                 </div>
 
                 <div>
-                  <h3 class="text-page-inverse text-xl font-semibold mb-4">{content.contact.expertise.header}</h3>
+                  <h3 class="text-page-inverse text-xl font-semibold mb-4">
+                    {content.contact.expertise.header}
+                  </h3>
                   <List
                     items={content.contact.expertise.areas}
                     variant="colored-marker-list"
@@ -478,7 +480,9 @@ const { content } = Astro.props
                 </div>
 
                 <div>
-                  <h3 class="text-page-inverse text-xl font-semibold mb-4">{content.contact.chooseUs.header}</h3>
+                  <h3 class="text-page-inverse text-xl font-semibold mb-4">
+                    {content.contact.chooseUs.header}
+                  </h3>
                   <List
                     items={content.contact.chooseUs.areas}
                     variant="colored-marker-list"
diff --git a/src/components/Pages/Contact/uppy-audio.css b/src/components/Pages/Contact/uppy-audio.css
index 629f9396d..9c9eb2508 100644
--- a/src/components/Pages/Contact/uppy-audio.css
+++ b/src/components/Pages/Contact/uppy-audio.css
@@ -128,15 +128,6 @@
   width: 60px;
 }
 
-[data-uppy-theme="dark"] .uppy-Audio-button:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-Audio-button::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Audio-button--submit {
   background-color: var(--color-secondary);
   margin: 0 12px;
@@ -194,7 +185,3 @@
   padding: 0 15px;
   text-align: center;
 }
-
-[data-uppy-theme="dark"] .uppy-Audio-title {
-  color: var(--color-content);
-}
diff --git a/src/components/Pages/Contact/uppy-core.css b/src/components/Pages/Contact/uppy-core.css
index de475605a..7820e92c9 100644
--- a/src/components/Pages/Contact/uppy-core.css
+++ b/src/components/Pages/Contact/uppy-core.css
@@ -69,17 +69,6 @@
   outline: none;
 }
 
-[data-uppy-theme="dark"] .uppy-c-textInput {
-  background-color: var(--color-content-inverse);
-  border-color: var(--color-gray-300);
-  color: var(--color-content);
-}
-
-[data-uppy-theme="dark"] .uppy-c-textInput:focus {
-  border-color: var(--color-gray-offset);
-  box-shadow: none;
-}
-
 .uppy-c-icon {
   display: inline-block;
   fill: currentcolor;
@@ -137,22 +126,6 @@
   padding: 13px 22px;
 }
 
-[data-uppy-theme="dark"] .uppy-c-btn-primary {
-  color: var(--color-white);
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-primary:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-primary::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-primary:focus {
-  box-shadow: none;
-}
-
 .uppy-c-btn-primary.uppy-c-btn--disabled {
   background-color: color-mix(in srgb, var(--color-secondary) 45%, var(--color-gray-300));
 }
@@ -179,24 +152,4 @@
   padding: 13px 18px;
 }
 
-[data-uppy-theme="dark"] .uppy-c-btn-link {
-  color: var(--color-content);
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-link:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-link::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-link:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-}
-
-[data-uppy-theme="dark"] .uppy-c-btn-link:hover {
-  color: var(--color-content-active);
-}
-
 /* stylelint-enable */
diff --git a/src/components/Pages/Contact/uppy-dashboard.css b/src/components/Pages/Contact/uppy-dashboard.css
index a1dfd6dd2..a96af32f0 100644
--- a/src/components/Pages/Contact/uppy-dashboard.css
+++ b/src/components/Pages/Contact/uppy-dashboard.css
@@ -58,11 +58,6 @@
   background-color: color-mix(in srgb, var(--color-gray-400) 20%, transparent);
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner,
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview .uppy-ProviderBrowserItem-inner {
-  background-color: color-mix(in srgb, var(--color-gray-200) 20%, transparent);
-}
-
 .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview svg,
 .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview svg {
   fill: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
@@ -70,11 +65,6 @@
   width: 30%;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--grid li.uppy-ProviderBrowserItem--noPreview svg,
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--unsplash li.uppy-ProviderBrowserItem--noPreview svg {
-  fill: color-mix(in srgb, var(--color-white) 80%, transparent);
-}
-
 .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner,
 .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner {
   border-radius: 4px;
@@ -93,11 +83,6 @@
   }
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner,
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 70%, transparent);
-}
-
 .uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-inner img,
 .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-inner img {
   border-radius: 4px;
@@ -171,19 +156,10 @@
   outline: none;
 }
 
-.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus + label::-moz-focus-inner,
-.uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus + label::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-ProviderBrowser-viewType--list {
   background-color: var(--color-white);
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--list {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem {
   align-items: center;
   display: flex;
@@ -191,10 +167,6 @@
   padding: 7px 15px;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem {
-  color: var(--color-content-inverse);
-}
-
 .uppy-ProviderBrowser-viewType--list li.uppy-ProviderBrowserItem--disabled {
   opacity: 0.6;
 }
@@ -222,11 +194,6 @@
   width: 9px;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem-checkbox:focus {
-  border-color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 20%, transparent);
-}
-
 .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox,
 .uppy-ProviderBrowser-viewType--list .uppy-ProviderBrowserItem--is-partial .uppy-ProviderBrowserItem-checkbox {
   background-color: var(--color-secondary);
@@ -289,15 +256,6 @@
   cursor: default;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowserItem-checkbox {
-  background-color: var(--color-gray-800);
-  border-color: var(--color-gray-400);
-}
-
-[data-uppy-theme="dark"] .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox::after {
   border-bottom: 2px solid var(--color-content-inverse);
   border-left: 2px solid var(--color-content-inverse);
@@ -328,10 +286,6 @@
   width: 100%;
 }
 
-[data-uppy-theme="dark"] .uppy-SearchProvider {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-SearchProvider-input {
   margin-bottom: 15px;
   max-width: 650px;
@@ -361,10 +315,6 @@
   justify-content: center;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-panelBody {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-Provider-auth,
 .uppy-Provider-error,
 .uppy-Provider-loading,
@@ -401,10 +351,6 @@
   font-size: 20px;
 }
 
-[data-uppy-theme="dark"] .uppy-Provider-authTitle {
-  color: var(--color-gray-300);
-}
-
 .uppy-Provider-btn-google {
   align-items: center;
   background: var(--color-google-blue);
@@ -412,10 +358,6 @@
   padding: 8px 12px !important;
 }
 
-.uppy-Provider-btn-google:hover {
-  background-color: var(--color-google-blue-dark);
-}
-
 .uppy-Provider-btn-google:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-google-blue) 40%, transparent);
   outline: none;
@@ -437,10 +379,6 @@
   margin-bottom: 0;
 }
 
-[data-uppy-theme="dark"] .uppy-Provider-breadcrumbs {
-  color: var(--color-content-inverse);
-}
-
 .uppy-Provider-breadcrumbsIcon {
   color: var(--color-gray-600);
   display: inline-block;
@@ -466,10 +404,6 @@
   outline: none;
 }
 
-.uppy-Provider-breadcrumbs button::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Provider-breadcrumbs button:hover {
   color: var(--color-secondary-offset);
 }
@@ -478,10 +412,6 @@
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-Provider-breadcrumbs button:focus {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-Provider-breadcrumbs button:not(:last-of-type) {
   text-decoration: underline;
 }
@@ -497,10 +427,6 @@
   cursor: pointer;
 }
 
-[data-uppy-theme="dark"] .uppy-Provider-breadcrumbs button {
-  color: var(--color-content-inverse);
-}
-
 .uppy-ProviderBrowser {
   display: flex;
   flex: 1;
@@ -516,10 +442,6 @@
   margin: 0 8px 0 0;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-user {
-  color: var(--color-content-inverse);
-}
-
 .uppy-ProviderBrowser-user::after {
   color: var(--color-gray-400);
   content: "·";
@@ -534,10 +456,6 @@
   z-index: calc(var(--uppy-z-base) + 2);
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-header {
-  border-bottom: 1px solid var(--color-gray-900);
-}
-
 .uppy-ProviderBrowser-headerBar {
   background-color: var(--color-gray-50);
   color: var(--color-gray-600);
@@ -552,10 +470,6 @@
   display: flex;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-headerBar {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-ProviderBrowser-headerBar--simple {
   display: block;
   justify-content: center;
@@ -599,20 +513,11 @@
   display: none;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-searchFilterInput {
-  background-color: var(--color-gray-800);
-  color: var(--color-content-inverse);
-}
-
 .uppy-ProviderBrowser-searchFilterInput:focus {
   background-color: var(--color-gray-300);
   border: 0;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-searchFilterInput:focus {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-ProviderBrowser-searchFilterIcon {
   color: var(--color-gray-600);
   height: 12px;
@@ -643,10 +548,6 @@
   outline: none;
 }
 
-.uppy-ProviderBrowser-searchFilterReset::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-ProviderBrowser-searchFilterReset:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
@@ -671,10 +572,6 @@
   outline: none;
 }
 
-.uppy-ProviderBrowser-userLogout::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-ProviderBrowser-userLogout:hover {
   color: var(--color-secondary-offset);
 }
@@ -683,18 +580,10 @@
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-userLogout:focus {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-ProviderBrowser-userLogout:hover {
   text-decoration: underline;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-userLogout {
-  color: var(--color-content-inverse);
-}
-
 .uppy-ProviderBrowser-body {
   flex: 1;
   position: relative;
@@ -716,10 +605,6 @@
   width: 100%;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-list {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-ProviderBrowser-list:focus {
   outline: none;
 }
@@ -743,11 +628,6 @@
   margin-inline-end: 8px;
 }
 
-[data-uppy-theme="dark"] .uppy-ProviderBrowser-footer {
-  background-color: var(--color-gray-800);
-  border-top: 1px solid var(--color-gray-900);
-}
-
 .uppy-ProviderBrowser-footer-buttons {
   flex-shrink: 0;
 }
@@ -817,10 +697,6 @@
   box-shadow: inset 0 0 0 3px var(--color-secondary);
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-previewLink:focus {
-  box-shadow: inset 0 0 0 3px var(--color-secondary);
-}
-
 .uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {
   border-radius: 3px;
   height: 100%;
@@ -871,10 +747,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus {
   outline: none;
 }
 
-button.uppy-Dashboard-Item-progressIndicator::-moz-focus-inner {
-  border: 0;
-}
-
 button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progressIcon--bg,
 button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progressIcon--retry {
   fill: var(--color-secondary);
@@ -974,10 +846,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   overflow-wrap: anywhere;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-name {
-  color: var(--color-content-inverse);
-}
-
 .uppy-size--md.uppy-Dashboard--singleFile .uppy-Dashboard-Item-name {
   font-size: 14px;
   line-height: 1.4;
@@ -1013,10 +881,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   line-height: 1;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-status {
-  color: var(--color-gray-400);
-}
-
 .uppy-Dashboard-Item-statusSize {
   display: inline-block;
   margin-bottom: 5px;
@@ -1085,10 +949,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-Dashboard-Item-action::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Dashboard-Item-action:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
@@ -1098,26 +958,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   opacity: 1;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action {
-  color: var(--color-gray-300);
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action:hover {
-  color: var(--color-content-inverse);
-}
-
 .uppy-Dashboard-Item-action--remove {
   color: var(--color-gray-900);
   opacity: 0.95;
@@ -1147,15 +987,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   position: absolute;
   top: 8px;
 }
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action--remove {
-  color: var(--color-gray-600);
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-Item-action--remove:hover {
-  color: var(--color-content);
-}
-
 .uppy-Dashboard:not(.uppy-size--md, .uppy-Dashboard--singleFile.uppy-size--height-md) .uppy-Dashboard-Item-actionWrapper {
   align-items: center;
   display: flex;
@@ -1195,10 +1026,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding-inline-end: 0;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-Item {
-  border-bottom: 1px solid var(--color-gray-900);
-}
-
 .uppy-size--md .uppy-Dashboard-Item {
   border-bottom: 0;
   display: block;
@@ -1403,11 +1230,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   position: relative;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-FileCard-preview {
-  background-color: var(--color-gray-900);
-  border-bottom: 0;
-}
-
 .uppy-Dashboard-FileCard-preview img.uppy-Dashboard-Item-previewImg {
   border-radius: 3px;
   box-shadow: 0 3px 20px color-mix(in srgb, var(--color-gray-900) 15%, transparent);
@@ -1432,10 +1254,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-Dashboard-FileCard-edit::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Dashboard-FileCard-edit:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
@@ -1453,10 +1271,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding: 30px 20px 20px;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-FileCard-info {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-Dashboard-FileCard-fieldset {
   border: 0;
   font-size: 0;
@@ -1478,10 +1292,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   font-size: 14px;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-FileCard-label {
-  color: var(--color-content-inverse);
-}
-
 .uppy-Dashboard-FileCard-input {
   display: inline-block;
   vertical-align: middle;
@@ -1503,11 +1313,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   height: 65px;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-FileCard-actions {
-  background-color: var(--color-gray-800);
-  border-top: 1px solid var(--color-gray-900);
-}
-
 .uppy-Dashboard-FileCard-actionsBtn {
   margin-inline-end: 10px;
 }
@@ -1553,10 +1358,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding: 10px 20px;
 }
 
-[data-uppy-theme="dark"] .uppy-Informer p {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-Informer p span {
   background-color: var(--color-white);
   border-radius: 50%;
@@ -1836,10 +1637,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   z-index: calc(var(--uppy-z-base) + 2);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-StatusBar::before {
   background-color: var(--color-gray-200);
   inset: 0;
@@ -1849,10 +1646,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   width: 100%;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar::before {
-  background-color: var(--color-gray-600);
-}
-
 .uppy-StatusBar[aria-hidden="true"] {
   height: 0;
   overflow-y: hidden;
@@ -1880,11 +1673,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   height: 65px;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar:not([aria-hidden="true"]).is-waiting {
-  background-color: var(--color-gray-800);
-  border-top: 1px solid var(--color-gray-900);
-}
-
 .uppy-StatusBar-progress {
   background-color: var(--color-secondary);
   height: 2px;
@@ -1934,10 +1722,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding-inline-start: 15px;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-content {
-  color: var(--color-content-inverse);
-}
-
 .uppy-StatusBar-status {
   display: flex;
   flex-direction: column;
@@ -1957,10 +1741,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   margin-left: 5px;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-statusPrimary {
-  color: var(--color-content-inverse);
-}
-
 .uppy-StatusBar-statusSecondary {
   color: var(--color-gray-600);
   display: inline-block;
@@ -1970,10 +1750,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   white-space: nowrap;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-statusSecondary {
-  color: var(--color-gray-400);
-}
-
 .uppy-StatusBar-statusSecondaryHint {
   display: inline-block;
   line-height: 1;
@@ -2014,10 +1790,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   width: 100%;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar.is-waiting .uppy-StatusBar-actions {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-StatusBar:not([aria-hidden="true"]).is-waiting.has-ghosts {
   flex-direction: column;
   height: 90px;
@@ -2049,26 +1821,10 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-StatusBar-actionCircleBtn::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-StatusBar-actionCircleBtn:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-actionCircleBtn:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionCircleBtn::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionCircleBtn:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-}
-
 .uppy-StatusBar-actionCircleBtn:hover {
   opacity: 1;
 }
@@ -2097,10 +1853,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   opacity: 0.4;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--disabled {
-  opacity: 0.7;
-}
-
 .uppy-StatusBar-actionBtn--retry {
   background-color: var(--color-danger);
   border-radius: 8px;
@@ -2116,26 +1868,10 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-StatusBar-actionBtn--retry::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-StatusBar-actionBtn--retry:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--retry:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--retry::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--retry:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-}
-
 .uppy-StatusBar-actionBtn--retry:hover {
   background-color: var(--color-danger-offset);
 }
@@ -2159,14 +1895,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   background-color: var(--color-green-700);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
-  background-color: var(--color-green-700);
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
-  background-color: var(--color-green-700);
-}
-
 .uppy-size--md .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
   padding: 13px 22px;
   width: auto;
@@ -2177,10 +1905,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   cursor: not-allowed;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload.uppy-StatusBar-actionBtn--disabled:hover {
-  background-color: var(--color-green-700);
-}
-
 .uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload {
   background-color: transparent;
   color: var(--color-secondary);
@@ -2196,26 +1920,10 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-StatusBar-actionBtn--uploadNewlyAdded::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-StatusBar-actionBtn--uploadNewlyAdded:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--uploadNewlyAdded:focus {
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--uploadNewlyAdded::-moz-focus-inner {
-  border: 0;
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--uploadNewlyAdded:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-}
-
 .uppy-StatusBar.is-preprocessing .uppy-StatusBar-actionBtn--uploadNewlyAdded, .uppy-StatusBar.is-postprocessing .uppy-StatusBar-actionBtn--uploadNewlyAdded {
   display: none;
 }
@@ -2230,10 +1938,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-StatusBar-actionBtn--done::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-StatusBar-actionBtn--done:hover {
   color: var(--color-secondary-offset);
 }
@@ -2242,14 +1946,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--done:focus {
-  background-color: var(--color-gray-900);
-}
-
-[data-uppy-theme="dark"] .uppy-StatusBar-actionBtn--done {
-  color: var(--color-secondary);
-}
-
 .uppy-size--md .uppy-StatusBar-actionBtn--done {
   font-size: 14px;
 }
@@ -2266,10 +1962,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding-left: 15px;
 }
 
-[data-uppy-theme="dark"] .uppy-StatusBar-serviceMsg {
-  color: var(--color-content-inverse);
-}
-
 .uppy-StatusBar-serviceMsg-ghostsIcon {
   left: 6px;
   opacity: 0.5;
@@ -2472,9 +2164,8 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
 }
 
 .uppy-Dashboard-inner {
-  background-color: var(--color-content-inverse);
-  border: 1px solid var(--color-gray-200);
-  border-radius: 5px;
+  background-color: color-mix(in srgb, var(--color-note-inverse) 25%, var(--color-content-inverse));
+  border-radius: 0.75rem;
   max-height: 100%;
   max-width: 100%;
   outline: none;
@@ -2485,27 +2176,16 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   min-height: auto;
 }
 
-@media only screen and (width >= 48em) {
-  .uppy-Dashboard-inner {
-    height: 500px;
-    width: 650px;
-  }
-}
-
 .uppy-Dashboard--modal .uppy-Dashboard-inner {
   z-index: calc(var(--uppy-z-base) + 3);
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-inner {
-  background-color: var(--color-gray-800);
-}
-
 .uppy-Dashboard--isDisabled .uppy-Dashboard-inner {
   cursor: not-allowed;
 }
 
 .uppy-Dashboard-innerWrap {
-  border-radius: 5px;
+  border-radius: 0.75rem;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -2566,10 +2246,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-Dashboard-close::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Dashboard-close:focus {
   color: var(--color-secondary);
 }
@@ -2600,13 +2276,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   line-height: 1.4;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-serviceMsg {
-  background-color: var(--color-gray-800);
-  border-bottom: 1px solid var(--color-gray-900);
-  border-top: 1px solid var(--color-gray-900);
-  color: var(--color-content-inverse);
-}
-
 .uppy-Dashboard-serviceMsg-title {
   display: block;
   line-height: 1;
@@ -2625,10 +2294,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   vertical-align: initial;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-serviceMsg-actionBtn {
-  color: var(--color-secondary);
-}
-
 .uppy-Dashboard-serviceMsg-icon {
   left: 15px;
   position: absolute;
@@ -2661,10 +2326,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   border-color: var(--color-gray-300);
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles {
-  border-color: var(--color-gray-600);
-}
-
 .uppy-Dashboard-AddFiles-info {
   display: none;
   margin-top: auto;
@@ -2690,28 +2351,25 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
 }
 
 .uppy-Dashboard-browse {
-  color: var(--color-secondary);
+  color: var(--color-primary-offset);
   cursor: pointer;
+  text-decoration-color: var(--color-primary-offset);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 
 .uppy-Dashboard-browse:focus {
   outline: none;
 }
-
-.uppy-Dashboard-browse::-moz-focus-inner {
-  border: 0;
+.uppy-Dashboard-browse:hover {
+  color: var(--color-content-active);
+  text-decoration-color: var(--color-content-active);
 }
 
-.uppy-Dashboard-browse:hover, .uppy-Dashboard-browse:focus {
-  border-bottom: 1px solid var(--color-secondary);
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-browse {
-  color: var(--color-secondary);
-}
-
-[data-uppy-theme="dark"] .uppy-Dashboard-browse:hover, [data-uppy-theme="dark"] .uppy-Dashboard-browse:focus {
-  border-bottom: 1px solid var(--color-secondary);
+.uppy-Dashboard-browse:focus-visible {
+  outline: 2px solid var(--color-spotlight);
+  outline-offset: 2px;
+  border-radius: 0;
 }
 
 .uppy-Dashboard-browseBtn {
@@ -2759,10 +2417,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   width: 100%;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab {
-  border-bottom: 1px solid var(--color-gray-900);
-}
-
 .uppy-size--md .uppy-DashboardTab {
   border-bottom: none;
   display: inline-block;
@@ -2775,7 +2429,7 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   appearance: none;
   appearance: none;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: var(--color-page-inverse);
   cursor: pointer;
   flex-direction: row;
   height: 100%;
@@ -2788,10 +2442,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-DashboardTab-btn::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-size--md .uppy-DashboardTab-btn {
   border-radius: 5px;
   flex-direction: column;
@@ -2800,20 +2450,8 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   width: 86px;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-btn {
-  color: var(--color-content-inverse);
-}
-
-.uppy-DashboardTab-btn::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-DashboardTab-btn:hover {
-  background-color: var(--color-gray-200);
-}
-
-[data-uppy-theme="dark"] .uppy-DashboardTab-btn:hover {
-  background-color: var(--color-gray-900);
+  background-color: var(--color-content-inverse-active);
 }
 
 .uppy-DashboardTab-btn:active,
@@ -2821,12 +2459,9 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-btn:active,
-[data-uppy-theme="dark"] .uppy-DashboardTab-btn:focus {
-  background-color: var(--color-gray-600);
-}
-
 .uppy-DashboardTab-btn svg {
+  fill: var(--color-content-inverse);
+  stroke: var(--color-content-inverse);
   display: inline-block;
   max-height: 100%;
   max-width: 100%;
@@ -2851,11 +2486,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   margin-inline-end: 0;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-inner {
-  background-color: var(--color-gray-900);
-  box-shadow: 0 1px 1px 0 color-mix(in srgb, var(--color-gray-900) 20%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--color-gray-900) 20%, transparent), 0 2px 3px 0 color-mix(in srgb, var(--color-gray-900) 8%, transparent);
-}
-
 .uppy-DashboardTab-name {
   font-size: 14px;
   font-weight: normal;
@@ -2872,56 +2502,46 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   color: var(--color-secondary);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconMyDevice {
-  color: var(--color-secondary);
-}
-
 .uppy-DashboardTab-iconBox {
   color: var(--color-secondary);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconBox {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardTab-iconDropbox {
   color: var(--color-secondary);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconDropbox {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardTab-iconUnsplash {
   color: var(--color-gray-900);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconUnsplash {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardTab-iconWebdav {
   color: var(--color-gray-900);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconWebdav {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardTab-iconScreenRec {
   color: var(--color-gray-800);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconScreenRec {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardTab-iconAudio {
   color: var(--color-secondary);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardTab-iconAudio {
-  color: var(--color-secondary);
+.uppy-DashboardTab-btn:focus-visible {
+  border-radius: 0;
+  outline: 2px solid var(--color-spotlight);
+  outline-offset: 2px;
+}
+
+.uppy-DashboardTab-btn svg {
+  color: var(--color-page-inverse);
+}
+
+.uppy-DashboardTab-btn:hover svg {
+  color: var(--color-content-active);
+}
+
+.uppy-DashboardTab-btn svg [fill]:not([fill='none']) {
+  fill: currentColor;
 }
 
 .uppy-Dashboard-input {
@@ -2952,11 +2572,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   padding: 0 15px;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-bar {
-  background-color: var(--color-gray-800);
-  border-bottom: 1px solid var(--color-gray-900);
-}
-
 .uppy-DashboardContent-title {
   font-size: 12px;
   font-weight: 500;
@@ -2980,10 +2595,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   max-width: 300px;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-title {
-  color: var(--color-content-inverse);
-}
-
 .uppy-DashboardContent-back,
 .uppy-DashboardContent-save {
   appearance: none;
@@ -3009,11 +2620,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-DashboardContent-back::-moz-focus-inner,
-.uppy-DashboardContent-save::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-DashboardContent-back:hover,
 .uppy-DashboardContent-save:hover {
   color: var(--color-secondary-offset);
@@ -3024,21 +2630,11 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-back:focus,
-[data-uppy-theme="dark"] .uppy-DashboardContent-save:focus {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-size--md .uppy-DashboardContent-back,
 .uppy-size--md .uppy-DashboardContent-save {
   font-size: 14px;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-back,
-[data-uppy-theme="dark"] .uppy-DashboardContent-save {
-  color: var(--color-secondary);
-}
-
 .uppy-DashboardContent-addMore {
   appearance: none;
   background: none;
@@ -3063,10 +2659,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   outline: none;
 }
 
-.uppy-DashboardContent-addMore::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-DashboardContent-addMore:hover {
   color: var(--color-secondary-offset);
 }
@@ -3075,10 +2667,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   background-color: var(--color-content-inverse-active);
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-addMore:focus {
-  background-color: var(--color-gray-900);
-}
-
 .uppy-size--md .uppy-DashboardContent-addMore {
   font-size: 14px;
   height: auto;
@@ -3086,10 +2674,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   width: auto;
 }
 
-[data-uppy-theme="dark"] .uppy-DashboardContent-addMore {
-  color: var(--color-secondary);
-}
-
 .uppy-DashboardContent-addMore svg {
   margin-inline-end: 4px;
   vertical-align: baseline;
@@ -3133,11 +2717,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   z-index: calc(var(--uppy-z-base) + 6);
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-AddFilesPanel {
-  background-color: var(--color-gray-900);
-  background-image: linear-gradient(0deg, var(--color-gray-800) 35%, color-mix(in srgb, var(--color-gray-800) 85%, transparent) 100%);
-}
-
 .uppy-Dashboard--isAddFilesPanelVisible .uppy-Dashboard-files {
   filter: blur(2px);
 }
@@ -3210,12 +2789,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   z-index: calc(var(--uppy-z-base) + 10);
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-dropFilesHereHint {
-  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%2302BAF2' fill-rule='nonzero'/%3E%3C/svg%3E");
-  border-color: var(--color-secondary);
-  color: var(--color-gray-300);
-}
-
 .uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-dropFilesHereHint {
   pointer-events: none;
   visibility: visible;
@@ -3257,10 +2830,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   text-align: center;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles-title {
-  color: var(--color-content-inverse);
-}
-
 .uppy-Dashboard-AddFiles-title button {
   font-weight: 500;
 }
@@ -3270,7 +2839,7 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
 }
 
 .uppy-Dashboard-note {
-  color: var(--color-gray-600);
+  color: var(--color-content-offset);
   font-size: 14px;
   line-height: 1.25;
   margin: auto;
@@ -3284,10 +2853,6 @@ button.uppy-Dashboard-Item-progressIndicator:focus .uppy-Dashboard-Item-progress
   max-width: 600px;
 }
 
-[data-uppy-theme="dark"] .uppy-Dashboard-note {
-  color: var(--color-gray-300);
-}
-
 a.uppy-Dashboard-poweredBy {
   color: var(--color-gray-500);
   display: inline-block;
diff --git a/src/components/Pages/Contact/uppy-webcam.css b/src/components/Pages/Contact/uppy-webcam.css
index 215528ce3..069cf6aa1 100644
--- a/src/components/Pages/Contact/uppy-webcam.css
+++ b/src/components/Pages/Contact/uppy-webcam.css
@@ -145,15 +145,6 @@
   width: 60px;
 }
 
-[data-uppy-theme="dark"] .uppy-Webcam-button:focus {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
-  outline: none;
-}
-
-[data-uppy-theme="dark"] .uppy-Webcam-button::-moz-focus-inner {
-  border: 0;
-}
-
 .uppy-Webcam-button--submit {
   background-color: var(--color-secondary);
   margin: 0 12px;
@@ -215,7 +206,3 @@
   padding: 0 15px;
   text-align: center;
 }
-
-[data-uppy-theme="dark"] .uppy-Webcam-title {
-  color: var(--color-content);
-}
diff --git a/src/components/Pages/MyData/index.astro b/src/components/Pages/MyData/index.astro
index 693aa14b8..0544b9f59 100644
--- a/src/components/Pages/MyData/index.astro
+++ b/src/components/Pages/MyData/index.astro
@@ -1,4 +1,5 @@
 ---
+import Button from '@components/Button/index.astro'
 import Icon from '@components/Icon/index.astro'
 import List from '@components/List/index.astro'
 
@@ -101,12 +102,12 @@ const { content } = Astro.props
             />
           </div>
 
-          <button
+          <Button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-spotlight-offset hover:bg-spotlight text-white font-semibold transition-colors mt-8 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-          >
-            {content.accessData.buttonText}
-          </button>
+            variant="info"
+            class="mt-8 px-6 py-3"
+            text={content.accessData.buttonText}
+          />
 
           <div
             id="access-message"
@@ -163,12 +164,12 @@ const { content } = Astro.props
             <span class="mt-0.5">{content.deleteData.confirmText}</span>
           </label>
 
-          <button
+          <Button
             type="submit"
-            class="inline-flex items-center justify-center rounded-xl px-6 py-3 bg-danger-offset text-white font-semibold hover:bg-danger transition-colors focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
-          >
-            {content.deleteData.buttonText}
-          </button>
+            variant="warning"
+            class="px-6 py-3"
+            text={content.deleteData.buttonText}
+          />
 
           <div
             id="delete-message"
@@ -183,7 +184,9 @@ const { content } = Astro.props
     </div>
 
     <section class="border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
-      <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">{content.next.heading}</h2>
+      <h2 id="my-data-next-title" class="text-page-inverse text-xl font-semibold mb-4">
+        {content.next.heading}
+      </h2>
       <List variant="numbered-with-background-list" items={content.next.items} />
     </section>
   </div>
diff --git a/src/components/Pages/NotFound/index.astro b/src/components/Pages/NotFound/index.astro
index 7ee513fc3..1ba23edb5 100644
--- a/src/components/Pages/NotFound/index.astro
+++ b/src/components/Pages/NotFound/index.astro
@@ -1,4 +1,6 @@
 ---
+import Button from '@components/Button/index.astro'
+
 export interface Props {
   content: {
     buttonText: string
@@ -9,15 +11,10 @@ const { content } = Astro.props
 ---
 
 <div class="max-w-4xl mx-auto w-full block py-2 md:py-4">
-  <div class="max-w-lg w-full">
+  <div class="max-w-lg w-full mx-auto">
     <div class="mb-8 text-center">
-      <div class="space-y-4">
-        <a
-          href={"/"}
-          class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-spotlight hover:bg-spotlight-offset focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200"
-        >
-          {content.buttonText}
-        </a>
+      <div class="flex flex-row justify-center items-center w-full">
+        <Button href="/" variant="secondary" class="text-content-inverse" text={content.buttonText} />
       </div>
     </div>
   </div>
diff --git a/src/components/Search/SearchBar/index.astro b/src/components/Search/SearchBar/index.astro
index 509209af2..7196479e0 100644
--- a/src/components/Search/SearchBar/index.astro
+++ b/src/components/Search/SearchBar/index.astro
@@ -1,6 +1,5 @@
 ---
-import closeSvg from '../../../icons/close.svg?raw'
-import microphoneSvg from '../../../icons/microphone.svg?raw'
+import Icon from '@components/Icon/index.astro'
 import styles from './index.module.css'
 
 export interface Props {
@@ -63,7 +62,7 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
             hidden
             class="relative inline-flex items-center justify-center w-(--header-icon-size) h-(--header-icon-size) shrink-0 rounded-full border-0 bg-transparent text-content-active hover:text-primary focus-visible:text-primary focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1.5 focus-visible:after:border-spotlight transition-colors duration-150 ease-linear"
           >
-            <span aria-hidden="true" set:html={microphoneSvg} />
+            <Icon icon="microphone" color="inherit" size={5} isListMarker={false} />
           </button>
 
           <button
@@ -73,7 +72,7 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
             hidden={!isExpandedOnLoad}
             class="relative inline-flex items-center justify-center w-(--header-icon-size) h-(--header-icon-size) shrink-0 rounded-full border-0 bg-transparent text-content-active hover:text-primary focus-visible:text-primary focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1.5 focus-visible:after:border-spotlight transition-colors duration-150 ease-linear"
           >
-            <span aria-hidden="true" set:html={closeSvg} />
+            <Icon icon="close" color="inherit" size={5} isListMarker={false} />
           </button>
 
           <button
diff --git a/src/components/Social/Highlighter/client/index.ts b/src/components/Social/Highlighter/client/index.ts
index 44fc29ea6..72adc81a5 100644
--- a/src/components/Social/Highlighter/client/index.ts
+++ b/src/components/Social/Highlighter/client/index.ts
@@ -14,46 +14,22 @@ import {
   addWrapperEventListeners,
 } from '@components/scripts/elementListeners'
 import { LitElement, html } from 'lit'
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import {
   queryHighlighterTrigger,
   queryHighlighterWrapper,
-  queryXIconGlyphPaths,
-  queryXIconTilePath,
+  queryHighlighterIconMarkup,
   queryShareDialogArrow,
   queryShareButtons,
   queryShareDialog,
   queryShareIcon,
 } from './selectors'
 
-import xIconRaw from '@icons/x.svg?raw'
-import linkedinIconRaw from '@icons/linkedin.svg?raw'
-import blueskyIconRaw from '@icons/bluesky.svg?raw'
-import redditIconRaw from '@icons/reddit.svg?raw'
-import mastodonIconRaw from '@icons/mastodon.svg?raw'
-
 const SCRIPT_NAME = 'Highlighter'
 const COMPONENT_TAG_NAME = 'highlighter-element'
-
-const stripSvgWrapper = (svg: string): string => {
-  const match = svg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i)
-  const innerMarkup = match?.[1] ?? svg
-  return innerMarkup.replace(/<title>[\s\S]*?<\/title>/gi, '').trim()
-}
-
-const platformIconMarkupById: Record<string, string> = {
-  x: stripSvgWrapper(xIconRaw),
-  linkedin: stripSvgWrapper(linkedinIconRaw),
-  bluesky: stripSvgWrapper(blueskyIconRaw),
-  reddit: stripSvgWrapper(redditIconRaw),
-  mastodon: stripSvgWrapper(mastodonIconRaw),
-}
-
-const getPlatformIconMarkup = (platformId: string): string => {
-  return platformIconMarkupById[platformId] ?? ''
-}
+const ICON_BANK_ID = 'highlighter-icon-bank'
 
 let highlighterInstanceCounter = 0
 
@@ -178,14 +154,7 @@ export class HighlighterElement extends LitElement {
                   aria-label="${platform.ariaLabel}"
                   title="${platform.ariaLabel}"
                 >
-                  <svg
-                    class="share-icon"
-                    aria-hidden="true"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    ${unsafeSVG(getPlatformIconMarkup(platform.id))}
-                  </svg>
+                  ${this.renderPlatformIcon(platform.id)}
                 </button>
               `
             )}
@@ -279,20 +248,7 @@ export class HighlighterElement extends LitElement {
     buttons.forEach(button => {
       const platformId = button.dataset['platform']
       const icon = queryShareIcon(button)
-      if (icon && platformId === 'x') {
-        const tilePath = queryXIconTilePath(icon)
-        const glyphPaths = queryXIconGlyphPaths(icon)
-
-        if (tilePath) {
-          tilePath.setAttribute('fill', 'var(--color-x)')
-          tilePath.setAttribute('stroke', 'none')
-        }
-
-        glyphPaths.forEach((path: SVGPathElement) => {
-          path.setAttribute('fill', 'var(--color-content-inverse)')
-          path.setAttribute('stroke', 'none')
-        })
-      } else if (icon) {
+      if (icon) {
         icon.style.fill = 'currentColor'
         icon.style.stroke = 'currentColor'
       }
@@ -302,12 +258,36 @@ export class HighlighterElement extends LitElement {
         return
       }
 
-      if (platformId !== 'x') {
-        button.style.color = `var(${token})`
-      }
+      button.style.color = `var(${token})`
     })
   }
 
+  private renderPlatformIcon(platformId: string) {
+    const iconMarkup = this.getIconMarkup(platformId)
+    return iconMarkup ? unsafeHTML(iconMarkup) : null
+  }
+
+  private getIconMarkup(iconName: string): string | null {
+    if (!iconName) {
+      return null
+    }
+
+    if (typeof document === 'undefined') {
+      return null
+    }
+
+    const markup = queryHighlighterIconMarkup({
+      iconBankId: ICON_BANK_ID,
+      iconName,
+      root: document,
+    })
+
+    if (!markup) {
+      return null
+    }
+    return markup
+  }
+
   private getPlatformColorToken(platformId: string | undefined): string | null {
     switch (platformId) {
       case 'x':
diff --git a/src/components/Social/Highlighter/client/selectors.ts b/src/components/Social/Highlighter/client/selectors.ts
index 33c23f29f..c3a361aff 100644
--- a/src/components/Social/Highlighter/client/selectors.ts
+++ b/src/components/Social/Highlighter/client/selectors.ts
@@ -13,8 +13,6 @@ export const SELECTORS = {
   dialogArrow: '.share-dialog__arrow',
   shareButton: '.share-button',
   shareIcon: 'svg.share-icon',
-  xIconTilePath: '.xTile',
-  xIconGlyphPath: '.xGlyph',
   status: '[data-highlighter-status]',
 } as const
 
@@ -49,29 +47,6 @@ export const queryShareIcon = (context: Element): SVGSVGElement | null => {
   return icon instanceof SVGSVGElement ? icon : null
 }
 
-export const queryXIconTilePath = (context: Element): SVGPathElement | null => {
-  const path = context.querySelector(SELECTORS.xIconTilePath)
-  if (!path) {
-    return null
-  }
-
-  const isSvgPath =
-    path instanceof Element &&
-    path.namespaceURI === 'http://www.w3.org/2000/svg' &&
-    path.tagName.toLowerCase() === 'path'
-
-  return isSvgPath ? (path as unknown as SVGPathElement) : null
-}
-
-export const queryXIconGlyphPaths = (context: Element): SVGPathElement[] => {
-  return Array.from(context.querySelectorAll(SELECTORS.xIconGlyphPath)).filter(
-    (node): node is SVGPathElement =>
-      node instanceof Element &&
-      node.namespaceURI === 'http://www.w3.org/2000/svg' &&
-      node.tagName.toLowerCase() === 'path'
-  )
-}
-
 export const queryHighlighterStatus = (context: Element): HTMLSpanElement | null => {
   const status = context.querySelector(SELECTORS.status)
   return isSpanElement(status) ? status : null
@@ -83,6 +58,31 @@ export const queryElementById = (context: Element, id: string): Element | null =
   return isType1Element(element) ? element : null
 }
 
+export const queryHighlighterIconMarkup = (params: {
+  iconBankId: string
+  iconName: string
+  root?: Document
+}): string | null => {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBankCandidate = root.getElementById(iconBankId)
+  if (!isDivElement(iconBankCandidate)) {
+    return null
+  }
+
+  const iconHostCandidate = iconBankCandidate.querySelector(`[data-highlighter-icon="${iconName}"]`)
+  if (!isSpanElement(iconHostCandidate)) {
+    return null
+  }
+
+  const markup = iconHostCandidate.innerHTML.trim()
+  return markup ? markup : null
+}
+
 export const getHighlighterRenderElements = (context: Element) => {
   const wrapper = queryHighlighterWrapper(context)
   if (!wrapper) {
diff --git a/src/components/Social/Highlighter/index.astro b/src/components/Social/Highlighter/index.astro
index 7df6f4c5a..ef15f4146 100644
--- a/src/components/Social/Highlighter/index.astro
+++ b/src/components/Social/Highlighter/index.astro
@@ -17,6 +17,7 @@
  * <Highlighter ariaLabel="Share this insight">important insight</Highlighter>
  * ```
  */
+import Icon from '@components/Icon/index.astro'
 import './index.css'
 
 export interface Props {
@@ -33,8 +34,17 @@ export interface Props {
 }
 
 const { ariaLabel, class: className } = Astro.props
+const iconBankId = 'highlighter-icon-bank'
 ---
 
+<div id={iconBankId} hidden aria-hidden="true">
+  <span data-highlighter-icon="x"><Icon icon="x" size={5} color="inherit" classes="share-icon" isListMarker={false} /></span>
+  <span data-highlighter-icon="linkedin"><Icon icon="linkedin" size={5} color="inherit" classes="share-icon" isListMarker={false} /></span>
+  <span data-highlighter-icon="bluesky"><Icon icon="bluesky" size={5} color="inherit" classes="share-icon" isListMarker={false} /></span>
+  <span data-highlighter-icon="reddit"><Icon icon="reddit" size={5} color="inherit" classes="share-icon" isListMarker={false} /></span>
+  <span data-highlighter-icon="mastodon"><Icon icon="mastodon" size={5} color="inherit" classes="share-icon" isListMarker={false} /></span>
+</div>
+
 <highlighter-element aria-label={ariaLabel}>
   <span class:list={['bg-spotlight', 'rounded', 'px-1', 'py-0.5', className]}>
     <slot />
diff --git a/src/components/Social/Mastodon/client/index.ts b/src/components/Social/Mastodon/client/index.ts
index 4ca918d1f..881872e12 100644
--- a/src/components/Social/Mastodon/client/index.ts
+++ b/src/components/Social/Mastodon/client/index.ts
@@ -1,4 +1,5 @@
 import { LitElement, html } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { createFocusTrap, type FocusTrap } from 'focus-trap'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
@@ -12,9 +13,14 @@ import {
 } from '@components/scripts/store/mastodonInstances'
 import { buildShareUrl } from './config'
 import { getUrlDomain, isMastodonInstance, normalizeURL } from './detector'
-import { getMastodonModalElement, queryMastodonInstanceInput } from './selectors'
+import {
+  getMastodonModalElement,
+  queryMastodonIconMarkup,
+  queryMastodonInstanceInput,
+} from './selectors'
 
 const COMPONENT_TAG_NAME = 'mastodon-modal-element'
+const ICON_BANK_ID = 'mastodon-modal-icon-bank'
 
 declare global {
   interface WindowEventMap {
@@ -310,6 +316,14 @@ export class MastodonModalElement extends LitElement {
   protected override render() {
     const modalTitleId = `${this.modalId}-title`
     const instanceHintId = `${this.modalId}-instance-hint`
+    const closeIconMarkup =
+      typeof document !== 'undefined'
+        ? queryMastodonIconMarkup({
+            iconBankId: ICON_BANK_ID,
+            iconName: 'close',
+            root: document,
+          })
+        : null
 
     return html`
       <div
@@ -335,18 +349,7 @@ export class MastodonModalElement extends LitElement {
               aria-label="Close modal"
               @click=${() => this.closeModal()}
             >
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <path d="M18 6L6 18M6 6l12 12"></path>
-              </svg>
+              ${closeIconMarkup ? unsafeHTML(closeIconMarkup) : null}
             </button>
           </div>
 
diff --git a/src/components/Social/Mastodon/client/selectors.ts b/src/components/Social/Mastodon/client/selectors.ts
index b5ceb8d45..20226cf67 100644
--- a/src/components/Social/Mastodon/client/selectors.ts
+++ b/src/components/Social/Mastodon/client/selectors.ts
@@ -35,3 +35,28 @@ export const queryMastodonInstanceInput = (context: Element): HTMLInputElement |
 
   return isInputElement(input) ? input : null
 }
+
+export const queryMastodonIconMarkup = (params: {
+  iconBankId: string
+  iconName: 'close'
+  root?: Document
+}): string | null => {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBankCandidate = root.getElementById(iconBankId)
+  if (!isDivElement(iconBankCandidate)) {
+    return null
+  }
+
+  const iconHostCandidate = iconBankCandidate.querySelector(`[data-mastodon-icon="${iconName}"]`)
+  if (!iconHostCandidate) {
+    return null
+  }
+
+  const markup = iconHostCandidate.innerHTML.trim()
+  return markup ? markup : null
+}
diff --git a/src/components/Social/Mastodon/index.astro b/src/components/Social/Mastodon/index.astro
index ea1cfa83d..76abed5c2 100644
--- a/src/components/Social/Mastodon/index.astro
+++ b/src/components/Social/Mastodon/index.astro
@@ -10,9 +10,18 @@ export interface Props {
   id?: string
 }
 
+import Icon from '@components/Icon/index.astro'
+
 const { id = 'mastodon-modal' } = Astro.props
+const iconBankId = 'mastodon-modal-icon-bank'
 ---
 
+<div id={iconBankId} hidden aria-hidden="true">
+  <span data-mastodon-icon="close">
+    <Icon icon="close" color="inherit" size={5} isListMarker={false} />
+  </span>
+</div>
+
 <mastodon-modal-element id={id} modal-id={id}></mastodon-modal-element>
 
 <script>
diff --git a/src/components/Testimonials/Card.astro b/src/components/Testimonials/Card.astro
index d3b02a7ae..711d4d66e 100644
--- a/src/components/Testimonials/Card.astro
+++ b/src/components/Testimonials/Card.astro
@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import Avatar from '@components/Avatar/index.astro'
+import Icon from '@components/Icon/index.astro'
 
 export interface Props {
   testimonial: CollectionEntry<'testimonials'>
@@ -11,15 +12,7 @@ const { testimonial } = Astro.props
 
 <article class="bg-page-offset rounded-xl p-8 shadow-lg border border-trim h-full flex flex-col">
   <div class="text-primary mb-4">
-    <svg
-      class="w-8 h-8"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z" />
-    </svg>
+    <Icon icon="quote" size={8} color="inherit" />
   </div>
 
   <div class="flex-1 mb-6">
diff --git a/src/components/Testimonials/index.astro b/src/components/Testimonials/index.astro
index 1217318d6..268697d66 100644
--- a/src/components/Testimonials/index.astro
+++ b/src/components/Testimonials/index.astro
@@ -112,46 +112,40 @@ const singleTestimonial = shouldRenderSingle ? testimonials.at(0) : undefined
               <>
                 <button
                   type="button"
-                  class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-                  aria-label="Previous testimonial"
+                  class:list={[
+                    "embla__button embla__button--prev",
+                    "absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4",
+                    "bg-content-inverse",
+                    "rounded-full border-2 border-trim shadow-lg",
+                    "hover:bg-content-inverse-active hover:border-gray-200",
+                    "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+                    "disabled:opacity-30 disabled:cursor-not-allowed",
+                    "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+                    "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+                  ]}
+                  aria-label="Previous slide"
+                  data-carousel-prev
                 >
-                  <svg
-                    class="w-6 h-6"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 19l-7-7 7-7"
-                    />
-                  </svg>
+                  <Icon icon="arrow-left" size={6} color="currentColor" />
                 </button>
 
                 <button
                   type="button"
-                  class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
-                  aria-label="Next testimonial"
+                  class:list={[
+                    "embla__button embla__button--next",
+                    "absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4",
+                    "bg-content-inverse",
+                    "rounded-full border-2 border-trim shadow-lg",
+                    "hover:bg-content-inverse-active hover:border-gray-200",
+                    "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+                    "disabled:opacity-30 disabled:cursor-not-allowed",
+                    "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+                    "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+                  ]}
+                  aria-label="Next slide"
+                  data-carousel-next
                 >
-                  <svg
-                    class="w-6 h-6"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
+                  <Icon icon="arrow-right" size={6} color="currentColor" />
                 </button>
 
                 {showControls && (
diff --git a/src/components/ThemePicker/__mocks__/IconMock.astro b/src/components/ThemePicker/__mocks__/IconMock.astro
index 15e4c85cd..6abd739eb 100644
--- a/src/components/ThemePicker/__mocks__/IconMock.astro
+++ b/src/components/ThemePicker/__mocks__/IconMock.astro
@@ -17,4 +17,5 @@ const { class: className, name } = Astro.props
   data-icon-name={name}
   class={className}
   aria-hidden="true"
-  focusable="false"></svg>
+  focusable="false"
+></svg>
diff --git a/src/components/ThemePicker/index.astro b/src/components/ThemePicker/index.astro
index 5f970144f..22ca827a0 100644
--- a/src/components/ThemePicker/index.astro
+++ b/src/components/ThemePicker/index.astro
@@ -135,17 +135,7 @@ const { closeComponent = 'close' } = Astro.props
         data-theme-embla-prev
         hidden
       >
-        <svg
-          class="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"
-          ></path>
-        </svg>
+        <Icon icon="arrow-left" size={5} color="content" />
       </button>
 
       <button
@@ -155,17 +145,7 @@ const { closeComponent = 'close' } = Astro.props
         data-theme-embla-next
         hidden
       >
-        <svg
-          class="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
-          ></path>
-        </svg>
+        <Icon icon="arrow-right" size={5} color="content" />
       </button>
     </div>
     <button
diff --git a/src/components/Toasts/NetworkStatus/client/index.ts b/src/components/Toasts/NetworkStatus/client/index.ts
index 80d32218e..e19ee7749 100644
--- a/src/components/Toasts/NetworkStatus/client/index.ts
+++ b/src/components/Toasts/NetworkStatus/client/index.ts
@@ -1,11 +1,13 @@
 import { LitElement, html } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
-import { queryConnectionStatusIndicator } from './selectors'
+import { queryConnectionStatusIndicator, queryNetworkStatusIconMarkup } from './selectors'
 
 type ToastType = 'success' | 'error'
 
 const TOAST_HIDE_TIMEOUT = 3000
+const ICON_BANK_ID = 'network-status-toast-icon-bank'
 
 export class NetworkStatusToastElement extends LitElement {
   static registeredName = 'network-status-toast'
@@ -118,6 +120,22 @@ export class NetworkStatusToastElement extends LitElement {
   }
 
   protected override render() {
+    const canUseDocument = typeof document !== 'undefined'
+    const successIconMarkup = canUseDocument
+      ? queryNetworkStatusIconMarkup({
+          iconBankId: ICON_BANK_ID,
+          iconName: 'success',
+          root: document,
+        })
+      : null
+    const errorIconMarkup = canUseDocument
+      ? queryNetworkStatusIconMarkup({
+          iconBankId: ICON_BANK_ID,
+          iconName: 'error',
+          root: document,
+        })
+      : null
+
     return html`
       <div
         data-network-status-toast
@@ -128,36 +146,8 @@ export class NetworkStatusToastElement extends LitElement {
         aria-atomic="true"
       >
         <div class="flex items-center space-x-2">
-          <svg
-            class="w-5 h-5 success-icon"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <svg
-            class="w-5 h-5 error-icon hidden"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
+          <span class="success-icon">${successIconMarkup ? unsafeHTML(successIconMarkup) : null}</span>
+          <span class="error-icon hidden">${errorIconMarkup ? unsafeHTML(errorIconMarkup) : null}</span>
           <span class="toast-message">${this.message}</span>
         </div>
       </div>
diff --git a/src/components/Toasts/NetworkStatus/client/selectors.ts b/src/components/Toasts/NetworkStatus/client/selectors.ts
index 228bf3ab6..b3d247f73 100644
--- a/src/components/Toasts/NetworkStatus/client/selectors.ts
+++ b/src/components/Toasts/NetworkStatus/client/selectors.ts
@@ -55,3 +55,28 @@ export function queryConnectionStatusIndicator(root: ParentNode = document): HTM
 
   return candidate
 }
+
+export function queryNetworkStatusIconMarkup(params: {
+  iconBankId: string
+  iconName: 'success' | 'error'
+  root?: Document
+}): string | null {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBankCandidate = root.getElementById(iconBankId)
+  if (!isDivElement(iconBankCandidate)) {
+    return null
+  }
+
+  const iconHostCandidate = iconBankCandidate.querySelector(`[data-network-status-icon="${iconName}"]`)
+  if (!isSpanElement(iconHostCandidate)) {
+    return null
+  }
+
+  const markup = iconHostCandidate.innerHTML.trim()
+  return markup ? markup : null
+}
diff --git a/src/components/Toasts/NetworkStatus/index.astro b/src/components/Toasts/NetworkStatus/index.astro
index d9fea43e1..ce384fd92 100644
--- a/src/components/Toasts/NetworkStatus/index.astro
+++ b/src/components/Toasts/NetworkStatus/index.astro
@@ -11,9 +11,21 @@
  * <NetworkStatus />
  * ```
  */
+import Icon from '@components/Icon/index.astro'
 import styles from './index.module.css'
+
+const iconBankId = 'network-status-toast-icon-bank'
 ---
 
+<div id={iconBankId} hidden aria-hidden="true">
+  <span data-network-status-icon="success">
+    <Icon icon="check-circled-open" color="inherit" size={5} isListMarker={false} />
+  </span>
+  <span data-network-status-icon="error">
+    <Icon icon="info" color="inherit" size={5} isListMarker={false} />
+  </span>
+</div>
+
 <network-status-toast
   class:list={['network-status-toast', styles.toastHost]}
   data-testid="network-status-toast"></network-status-toast>
diff --git a/src/components/WebMentions/index.astro b/src/components/WebMentions/index.astro
index 21503f0c1..7aa15039e 100644
--- a/src/components/WebMentions/index.astro
+++ b/src/components/WebMentions/index.astro
@@ -7,6 +7,7 @@
  * @see https://brid.gy/ for social media integration
  */
 import { Image } from 'astro:assets'
+import Icon from '@components/Icon/index.astro'
 import { fetchWebmentions } from '@components/WebMentions/server'
 import WebMentionItem from './item.astro'
 import { buildAvatarImageProps } from './server/avatarImage'
@@ -58,16 +59,7 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
                 title={`${likes.length} like${likes.length !== 1 ? 's' : ''}`}
                 aria-label={`${likes.length} like${likes.length !== 1 ? 's' : ''}`}
               >
-                <svg
-                  class="w-5 h-5 text-content-lighter"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  focusable="false"
-                >
-                  <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
-                </svg>
+                <Icon icon="heart-filled" size={5} color="content-active" />
                 {likes.length}
               </span>
             )}
@@ -77,16 +69,7 @@ const hasInteractions = likes.length > 0 || reposts.length > 0
                 title={`${reposts.length} repost${reposts.length !== 1 ? 's' : ''}`}
                 aria-label={`${reposts.length} repost${reposts.length !== 1 ? 's' : ''}`}
               >
-                <svg
-                  class="w-5 h-5 text-content-lighter"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  focusable="false"
-                >
-                  <path d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
-                </svg>
+                <Icon icon="background-broken" size={5} color="content-lighter" />
                 {reposts.length}
               </span>
             )}
diff --git a/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx
index f32f042dc..8d9fe42d7 100644
--- a/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx
+++ b/src/content/articles/alert-fatigue-reduction-triage-actionable-alerts/download.mdx
@@ -19,7 +19,7 @@ This complete guide walks you through the systematic process used to reduce a 20
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The quantifiable cost of alert fatigue (MTTA, action rate, burnout indicators)" },
     { text: "How to audit and inventory your alerts systematically" },
diff --git a/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx
index ce3d970ba..10aec6639 100644
--- a/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx
+++ b/src/content/articles/api-deprecation-sunset-headers-consumer-migration/download.mdx
@@ -19,7 +19,7 @@ This complete guide walks you through the full deprecation lifecycle and the org
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Realistic timeline guidance based on consumer type (internal, external, enterprise)" },
     { text: "RFC 8594 Sunset headers and Deprecation headers as technical foundations" },
diff --git a/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx
index dc9b549d2..2b1433afb 100644
--- a/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx
+++ b/src/content/articles/api-gateway-metrics-traces-logs-debugging/download.mdx
@@ -19,7 +19,7 @@ This complete guide shows you how to instrument API gateways so the data actuall
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Why gateway observability is fundamentally different from service observability" },
     { text: "The RED method applied correctly to gateways with meaningful label dimensions" },
diff --git a/src/content/articles/api-usage-metering-quotas-cost-attribution/download.mdx b/src/content/articles/api-usage-metering-quotas-cost-attribution/download.mdx
index 7ce685040..90d11c179 100644
--- a/src/content/articles/api-usage-metering-quotas-cost-attribution/download.mdx
+++ b/src/content/articles/api-usage-metering-quotas-cost-attribution/download.mdx
@@ -21,7 +21,7 @@ This complete guide walks you through building cost visibility into your API inf
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Metering architecture: synchronous vs. asynchronous tracking" },
     { text: "What dimensions to capture (request count, data transfer, compute time, storage, features)" },
diff --git a/src/content/articles/argocd-sync-failures-gitops-debugging-troubleshooting/download.mdx b/src/content/articles/argocd-sync-failures-gitops-debugging-troubleshooting/download.mdx
index bd955d0ae..fc51b4541 100644
--- a/src/content/articles/argocd-sync-failures-gitops-debugging-troubleshooting/download.mdx
+++ b/src/content/articles/argocd-sync-failures-gitops-debugging-troubleshooting/download.mdx
@@ -21,7 +21,7 @@ This complete guide breaks down the sync process and catalogs the failure modes
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The ArgoCD sync process phase by phase: detection, manifest generation, diff calculation, resource ordering, health checks" },
     { text: "Sync waves and resource ordering—explicit control over which resources deploy first" },
diff --git a/src/content/articles/availability-targets-five-nines-cost-benefit-analysis/download.mdx b/src/content/articles/availability-targets-five-nines-cost-benefit-analysis/download.mdx
index 68dcb31ad..80639a477 100644
--- a/src/content/articles/availability-targets-five-nines-cost-benefit-analysis/download.mdx
+++ b/src/content/articles/availability-targets-five-nines-cost-benefit-analysis/download.mdx
@@ -21,7 +21,7 @@ This complete guide provides the cost-benefit framework for making informed avai
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "What availability percentages mean: concrete downtime hours and composite availability math" },
     { text: "Cost scaling: why each additional nine costs roughly 10x more than the previous one" },
diff --git a/src/content/articles/backpressure-load-shedding-admission-control-overload/download.mdx b/src/content/articles/backpressure-load-shedding-admission-control-overload/download.mdx
index 804943478..446a14049 100644
--- a/src/content/articles/backpressure-load-shedding-admission-control-overload/download.mdx
+++ b/src/content/articles/backpressure-load-shedding-admission-control-overload/download.mdx
@@ -21,7 +21,7 @@ This complete guide teaches you how to implement backpressure patterns that keep
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Cascading failure anatomy: how overload feeds retries that compound the problem" },
     { text: "Little's Law and queue growth: why queue depth becomes unbounded when arrivals exceed capacity" },
diff --git a/src/content/articles/blameless-postmortem-incident-analysis-systemic-causes/download.mdx b/src/content/articles/blameless-postmortem-incident-analysis-systemic-causes/download.mdx
index e286e7b25..821162d87 100644
--- a/src/content/articles/blameless-postmortem-incident-analysis-systemic-causes/download.mdx
+++ b/src/content/articles/blameless-postmortem-incident-analysis-systemic-causes/download.mdx
@@ -23,7 +23,7 @@ This complete guide helps you build postmortem practices that actually improve y
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Why blame-focused investigations fail: hidden risks, concealment, and recurrence of the same failure modes" },
     { text: "The bad apple fallacy: how fatigue, time pressure, and confusing interfaces create errors in everyone" },
diff --git a/src/content/articles/blue-green-canary-deployment-strategy-comparison/download.mdx b/src/content/articles/blue-green-canary-deployment-strategy-comparison/download.mdx
index 5f22bb2df..de2c3a92b 100644
--- a/src/content/articles/blue-green-canary-deployment-strategy-comparison/download.mdx
+++ b/src/content/articles/blue-green-canary-deployment-strategy-comparison/download.mdx
@@ -21,7 +21,7 @@ This complete guide helps you choose the right deployment strategy instead of ad
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The deployment spectrum: recreate, rolling, blue/green, canary, progressive, and their tradeoffs" },
     { text: "Blue/green vs. canary: instant rollback and pre-production validation vs. gradual traffic shifting" },
diff --git a/src/content/articles/cdn-edge-caching-cache-keys-vary-headers/download.mdx b/src/content/articles/cdn-edge-caching-cache-keys-vary-headers/download.mdx
index 6f06da339..68bafc751 100644
--- a/src/content/articles/cdn-edge-caching-cache-keys-vary-headers/download.mdx
+++ b/src/content/articles/cdn-edge-caching-cache-keys-vary-headers/download.mdx
@@ -21,7 +21,7 @@ This complete guide teaches you how to design cache keys and responses that enab
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Cache key design and Vary headers: preventing content cross-contamination without destroying hit ratios" },
     { text: "HTTP cacheability: what methods, status codes, and headers control whether responses cache" },
diff --git a/src/content/articles/chaos-engineering-failure-injection-low-cost-experiments/download.mdx b/src/content/articles/chaos-engineering-failure-injection-low-cost-experiments/download.mdx
index 2e87b42fb..d8d31aed8 100644
--- a/src/content/articles/chaos-engineering-failure-injection-low-cost-experiments/download.mdx
+++ b/src/content/articles/chaos-engineering-failure-injection-low-cost-experiments/download.mdx
@@ -19,7 +19,7 @@ Chaos engineering doesn't require enterprise tools or dedicated teams. You can s
 Read this guide to learn:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The four starter experiments you can run this week: pod termination, dependency latency injection, network partitions, and resource exhaustion" },
     { text: "Comparison of free chaos tools: kubectl, tc/toxiproxy, Chaos Toolkit, and LitmusChaos" },
diff --git a/src/content/articles/ci-pipeline-caching-docker-layers-dependency-cache/download.mdx b/src/content/articles/ci-pipeline-caching-docker-layers-dependency-cache/download.mdx
index 02982b622..404d9e547 100644
--- a/src/content/articles/ci-pipeline-caching-docker-layers-dependency-cache/download.mdx
+++ b/src/content/articles/ci-pipeline-caching-docker-layers-dependency-cache/download.mdx
@@ -21,7 +21,7 @@ This complete guide teaches you how to implement caching that speeds up builds w
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Cache correctness principles: completeness, determinism, isolation to prevent serving stale artifacts" },
     { text: "Cache key design: static prefixes, dynamic components, restore key fallbacks across ecosystems" },
diff --git a/src/content/articles/circuit-breaker-retry-budget-cascade-failure-prevention/download.mdx b/src/content/articles/circuit-breaker-retry-budget-cascade-failure-prevention/download.mdx
index bb9517509..9412401c2 100644
--- a/src/content/articles/circuit-breaker-retry-budget-cascade-failure-prevention/download.mdx
+++ b/src/content/articles/circuit-breaker-retry-budget-cascade-failure-prevention/download.mdx
@@ -21,7 +21,7 @@ This complete guide teaches you how to implement circuit breakers and retry budg
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Retry amplification math: how exponential growth turns minor failures into catastrophic outages" },
     { text: "The three states of circuit breakers: closed, open, half-open, and when to transition" },
diff --git a/src/content/articles/consumer-driven-contract-testing-pact-internal-apis/download.mdx b/src/content/articles/consumer-driven-contract-testing-pact-internal-apis/download.mdx
index f29563ecb..28803d583 100644
--- a/src/content/articles/consumer-driven-contract-testing-pact-internal-apis/download.mdx
+++ b/src/content/articles/consumer-driven-contract-testing-pact-internal-apis/download.mdx
@@ -21,7 +21,7 @@ This complete guide teaches you how to implement consumer-driven contracts for i
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Why integration tests fail at scale and how contract testing solves it" },
     { text: "Consumer-driven contracts: flipping the provider/consumer relationship" },
diff --git a/src/content/articles/container-vulnerability-scanning-ci-shift-left-security/download.mdx b/src/content/articles/container-vulnerability-scanning-ci-shift-left-security/download.mdx
index 2dd639039..d656a1ef6 100644
--- a/src/content/articles/container-vulnerability-scanning-ci-shift-left-security/download.mdx
+++ b/src/content/articles/container-vulnerability-scanning-ci-shift-left-security/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to implement container scanning that develop
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Where vulnerabilities hide in container layers and why 60% exist outside application code" },
     { text: "CVSS scores vs. contextual priority: why a critical vulnerability might not matter for your use case" },
diff --git a/src/content/articles/database-schema-migrations-continuous-deployment-zero-downtime/download.mdx b/src/content/articles/database-schema-migrations-continuous-deployment-zero-downtime/download.mdx
index 6a6d404c0..bbaa7a0de 100644
--- a/src/content/articles/database-schema-migrations-continuous-deployment-zero-downtime/download.mdx
+++ b/src/content/articles/database-schema-migrations-continuous-deployment-zero-downtime/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to automate migrations with zero-downtime.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The lock problem: why DDL operations block all queries and cause cascading timeouts" },
     { text: "The compatibility window: why old and new code must coexist with the same schema during deployments" },
diff --git a/src/content/articles/dead-letter-queue-design-replay-debugging/download.mdx b/src/content/articles/dead-letter-queue-design-replay-debugging/download.mdx
index f303d4d80..283bdd55b 100644
--- a/src/content/articles/dead-letter-queue-design-replay-debugging/download.mdx
+++ b/src/content/articles/dead-letter-queue-design-replay-debugging/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to build DLQs that are actually useful.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Failure taxonomy: transient, permanent, poison, and ordering failures requiring different strategies" },
     { text: "Information capture: what context you need to debug failures (stack traces, correlation IDs, all attempts)" },
diff --git a/src/content/articles/demo/index.mdx b/src/content/articles/demo/index.mdx
index e69bc6b33..d7ffc10e8 100644
--- a/src/content/articles/demo/index.mdx
+++ b/src/content/articles/demo/index.mdx
@@ -277,9 +277,127 @@ Should compile to the following HTML:
 
 **This text is _extremely_ important**
 
-## Calendar
+## Buttons
+
+Each color variant is shown in an example below. Sizes are 'small', 'medium', 'large' with 'medium' the default. Types are 'button', 'submit', and 'reset' and are passed directly to the `<button>` element as its type prop.
+
+```markdown
+<Button
+  type="submit"
+  variant="danger"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="danger"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="button"
+  variant="info"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
 
-import Calendar from '@components/Calendar/index.astro'
+<Button
+  type="button"
+  variant="info"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="reset"
+  variant="note"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="reset"
+  variant="note"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="primary"
+  size="small"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="primary"
+  size="small"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="secondary"
+  size="large"
+  class="px-6 py-3" mb-4
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="secondary"
+  size="large"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="success"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="success"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+```markdown
+<Button
+  type="submit"
+  variant="warning"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+```
+
+<Button
+  type="submit"
+  variant="warning"
+  class="px-6 py-3 mb-4"
+  text="Go Home"
+/>
+
+## Calendar
 
 ```markdown
 <Calendar />
@@ -973,14 +1091,14 @@ _________________
 ## Icon Component
 
 ```markdown
-<Icon icon="check" size={36} classes="text-success" />
-<Icon icon="warning" size={36} classes="text-warning" />
-<Icon icon="info" size={36} classes="text-info" />
+<Icon icon="check" size={6} color="success" />
+<Icon icon="warning" size={6} color="warning" />
+<Icon icon="info" size={6} color="info" />
 ```
 
-<Icon icon="check" size={36} classes="text-success" />
-<Icon icon="warning" size={36} classes="text-warning" />
-<Icon icon="info" size={36} classes="text-info" />
+<Icon icon="check" size={6} color="success" />
+<Icon icon="warning" size={6} color="warning" />
+<Icon icon="info" size={6} color="info" />
 
 ## Images
 
@@ -1309,6 +1427,48 @@ Nested lists:
 
 <br />
 
+### Check Icons List without lead
+
+```markdown
+<List
+  variant="check-icons-list"
+  items={[
+    {
+      text: "Request rate, error rate, and latency percentiles answer this instantly.",
+    },
+    {
+      text: "Per-upstream metrics and circuit breaker state tell you.",
+    },
+    {
+      text: "Consumer-specific labels let you slice the data.",
+    },
+    {
+      text: "Trace ID and request ID correlation connect all the pieces.",
+    },
+  ]}
+/>
+```
+
+<List
+  variant="check-icons-list"
+  items={[
+    {
+      text: "Request rate, error rate, and latency percentiles answer this instantly.",
+    },
+    {
+      text: "Per-upstream metrics and circuit breaker state tell you.",
+    },
+    {
+      text: "Consumer-specific labels let you slice the data.",
+    },
+    {
+      text: "Trace ID and request ID correlation connect all the pieces.",
+    },
+  ]}
+/>
+
+<br />
+
 ### Chevron List
 
 ```markdown
@@ -1595,6 +1755,66 @@ Nested lists:
 
 <br />
 
+### Three Column Icon List
+
+```markdown
+<List
+  variant="three-column-icon-list"
+  items={[
+    {
+      title: "Query",
+      text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
+      icon: "chart",
+      color: "primary",
+      bgColor: "primary-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
+      icon: "warning",
+      color: "warning",
+      bgColor: "warning-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
+      icon: "info",
+      color: "info",
+      bgColor: "info-inverse",
+    },
+  ]}
+/>
+```
+
+<List
+  variant="three-column-icon-list"
+  items={[
+    {
+      title: "Query",
+      text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
+      icon: "chart",
+      color: "primary",
+      bgColor: "primary-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
+      icon: "warning",
+      color: "warning",
+      bgColor: "warning-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
+      icon: "info",
+      color: "info",
+      bgColor: "info-inverse",
+    },
+  ]}
+/>
+
+<br />
+
 ### Timeline List
 
 ```markdown
@@ -1691,6 +1911,80 @@ Nested lists:
 
 <br />
 
+### Two Column Icon List
+
+```markdown
+<List
+  variant="two-column-icon-list"
+  items={[
+    {
+      title: "Query",
+      text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
+      icon: "chart",
+      color: "primary",
+      bgColor: "primary-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
+      icon: "warning",
+      color: "warning",
+      bgColor: "warning-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
+      icon: "info",
+      color: "info",
+      bgColor: "info-inverse",
+    },
+    {
+      title: "Query",
+      text: "What happened to this specific request? Trace ID and request ID correlation connect all the pieces.",
+      icon: "conversation",
+      color: "secondary",
+      bgColor: "secondary-inverse",
+    },
+  ]}
+/>
+```
+
+<List
+  variant="two-column-icon-list"
+  items={[
+    {
+      title: "Query",
+      text: "Is the gateway healthy? Request rate, error rate, and latency percentiles answer this instantly.",
+      icon: "chart",
+      color: "primary",
+      bgColor: "primary-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific backend unhealthy? Per-upstream metrics and circuit breaker state tell you.",
+      icon: "warning",
+      color: "warning",
+      bgColor: "warning-inverse",
+    },
+    {
+      title: "Query",
+      text: "Is a specific consumer affected? Consumer-specific labels let you slice the data.",
+      icon: "info",
+      color: "info",
+      bgColor: "info-inverse",
+    },
+    {
+      title: "Query",
+      text: "What happened to this specific request? Trace ID and request ID correlation connect all the pieces.",
+      icon: "conversation",
+      color: "secondary",
+      bgColor: "secondary-inverse",
+    },
+  ]}
+/>
+
+<br />
+
 ### Zebra List
 
 ```markdown
@@ -2058,7 +2352,7 @@ Download PDF files
 
 ### Newsletter Signup Component
 
-Encourage readers to subscribe to the newsletter.
+Encourage readers to subscribe to the newsletter. The default layout is "article"
 
 ```markdown
 <Newsletter />
@@ -2066,6 +2360,26 @@ Encourage readers to subscribe to the newsletter.
 
 <Newsletter />
 
+```markdown
+<Newsletter
+  variant="home"
+/>
+```
+
+<Newsletter
+  variant="home"
+/>
+
+```markdown
+<Newsletter
+  variant="page"
+/>
+```
+
+<Newsletter
+  variant="page"
+/>
+
 ### Testimonials Component
 
 Display customer feedback and testimonials:
diff --git a/src/content/articles/distributed-tracing-sampling-strategies-head-tail/download.mdx b/src/content/articles/distributed-tracing-sampling-strategies-head-tail/download.mdx
index 4d0d55f49..6e58034d5 100644
--- a/src/content/articles/distributed-tracing-sampling-strategies-head-tail/download.mdx
+++ b/src/content/articles/distributed-tracing-sampling-strategies-head-tail/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to sample traces intelligently.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Why 100% sampling fails at scale: storage costs, query performance degradation, and signal-to-noise problems" },
     { text: "What sampling preserves and loses: representative traces and statistical estimates vs. specific trace lookup" },
diff --git a/src/content/articles/eol-runtime-upgrade-dependency-hell-migration/download.mdx b/src/content/articles/eol-runtime-upgrade-dependency-hell-migration/download.mdx
index e81c726d9..2ba00a7e7 100644
--- a/src/content/articles/eol-runtime-upgrade-dependency-hell-migration/download.mdx
+++ b/src/content/articles/eol-runtime-upgrade-dependency-hell-migration/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to escape dependency hell.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The hidden transitive dependency graph: why one incompatible package four levels deep blocks your upgrade" },
     { text: "Direct vs. transitive dependencies: tools to visualize the full tree and identify constraints" },
diff --git a/src/content/articles/ephemeral-preview-environments-cost-control-cleanup/download.mdx b/src/content/articles/ephemeral-preview-environments-cost-control-cleanup/download.mdx
index 65e3c51ca..09faa15a9 100644
--- a/src/content/articles/ephemeral-preview-environments-cost-control-cleanup/download.mdx
+++ b/src/content/articles/ephemeral-preview-environments-cost-control-cleanup/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to make preview environments sustainable.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Environment lifecycle states: when costs accumulate (the idle state) and what cleanup triggers matter most" },
     { text: "Resource cost and cleanup difficulty matrix: why databases and storage are highest risk, containers are easiest" },
diff --git a/src/content/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization/download.mdx b/src/content/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization/download.mdx
index ee0779a64..6fe980eac 100644
--- a/src/content/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization/download.mdx
+++ b/src/content/articles/flaky-test-diagnosis-race-conditions-e2e-stabilization/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to diagnose and fix flaky tests systematical
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The taxonomy of flakiness: race conditions (60%), environment issues (25%), test design (15%), and external dependencies" },
     { text: "Diagnosing race conditions: why tests pass locally but fail in CI, and how to wait for specific conditions" },
diff --git a/src/content/articles/golden-paths-developer-experience-standardization-autonomy/download.mdx b/src/content/articles/golden-paths-developer-experience-standardization-autonomy/download.mdx
index 4d788f77e..f707ce348 100644
--- a/src/content/articles/golden-paths-developer-experience-standardization-autonomy/download.mdx
+++ b/src/content/articles/golden-paths-developer-experience-standardization-autonomy/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to design golden paths that teams actually u
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "What makes a path \"golden\": opinionated defaults, active maintenance, and demonstrable advantages" },
     { text: "The autonomy spectrum: mandates for compliance, golden paths for common patterns, self-service for innovation" },
diff --git a/src/content/articles/grafana-dashboard-hygiene-pruning-actionable-metrics/download.mdx b/src/content/articles/grafana-dashboard-hygiene-pruning-actionable-metrics/download.mdx
index 4fbb8a48b..fae6c7126 100644
--- a/src/content/articles/grafana-dashboard-hygiene-pruning-actionable-metrics/download.mdx
+++ b/src/content/articles/grafana-dashboard-hygiene-pruning-actionable-metrics/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to audit and prune dashboards systematically
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "How dashboards proliferate: services, clones, incident artifacts, reorganization, and deletion friction" },
     { text: "Dashboard lifecycle: creation vs. maintenance cost asymmetry that guarantees accumulation" },
diff --git a/src/content/articles/helm-release-management-drift-detection-debugging/download.mdx b/src/content/articles/helm-release-management-drift-detection-debugging/download.mdx
index 5c02d02d9..9a64e8a77 100644
--- a/src/content/articles/helm-release-management-drift-detection-debugging/download.mdx
+++ b/src/content/articles/helm-release-management-drift-detection-debugging/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to detect and prevent drift in Helm deployme
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "How Helm tracks state: release secrets, version history, and when declared state diverges from cluster reality" },
     { text: "Drift patterns: manual kubectl edits, partial upgrade failures, secret corruption, and hook failures" },
diff --git a/src/content/articles/idempotent-message-handlers-deduplication-retries/download.mdx b/src/content/articles/idempotent-message-handlers-deduplication-retries/download.mdx
index bcf3a3c8c..8c14225a9 100644
--- a/src/content/articles/idempotent-message-handlers-deduplication-retries/download.mdx
+++ b/src/content/articles/idempotent-message-handlers-deduplication-retries/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to design handlers that survive retries.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "At-least-once delivery semantics: why duplicates are inevitable and losing messages is worse" },
     { text: "Idempotency key design: producer-supplied IDs, content hashes, business key composites, and when to use each" },
diff --git a/src/content/articles/internal-cli-kubectl-terraform-wrapper-abstraction/download.mdx b/src/content/articles/internal-cli-kubectl-terraform-wrapper-abstraction/download.mdx
index 74f13bfa3..2aa802c50 100644
--- a/src/content/articles/internal-cli-kubectl-terraform-wrapper-abstraction/download.mdx
+++ b/src/content/articles/internal-cli-kubectl-terraform-wrapper-abstraction/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you when wrappers add value and how to design them f
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "When wrappers add value: complexity hiding, guard rails, context injection, credential management, audit logging" },
     { text: "Decision framework: evaluating whether a wrapper is worth 3+ years of maintenance commitment" },
diff --git a/src/content/articles/internal-developer-portal-platform-self-service-actions/download.mdx b/src/content/articles/internal-developer-portal-platform-self-service-actions/download.mdx
index f173c37fb..884009815 100644
--- a/src/content/articles/internal-developer-portal-platform-self-service-actions/download.mdx
+++ b/src/content/articles/internal-developer-portal-platform-self-service-actions/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to transform your portal into an actual plat
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Portal maturity model: directory, search, insights, and platform—where most organizations get stuck" },
     { text: "Self-service actions that developers actually use: clear inputs, fast feedback, transparent workflows" },
diff --git a/src/content/articles/internal-platform-api-versioning-deprecation-breaking-changes/download.mdx b/src/content/articles/internal-platform-api-versioning-deprecation-breaking-changes/download.mdx
index 1819ace0e..2d0146ff3 100644
--- a/src/content/articles/internal-platform-api-versioning-deprecation-breaking-changes/download.mdx
+++ b/src/content/articles/internal-platform-api-versioning-deprecation-breaking-changes/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to version internal platform APIs responsibl
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Versioning strategies: URL path versioning, headers, query parameters, and date-based schemes" },
     { text: "Semantic versioning for APIs: major (breaking), minor (additive), patch (fixes) and what each bump means" },
diff --git a/src/content/articles/kubernetes-cluster-upgrade-playbook-risk-reduction/download.mdx b/src/content/articles/kubernetes-cluster-upgrade-playbook-risk-reduction/download.mdx
index 177ad5487..c0f99a0d7 100644
--- a/src/content/articles/kubernetes-cluster-upgrade-playbook-risk-reduction/download.mdx
+++ b/src/content/articles/kubernetes-cluster-upgrade-playbook-risk-reduction/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to upgrade Kubernetes safely and predictably
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Pre-upgrade readiness: release notes review, cluster health checks, backup and recovery procedures" },
     { text: "Deprecated API detection: finding which APIs are at risk before upgrades break them" },
diff --git a/src/content/articles/kubernetes-cost-optimization-resource-sizing-spot-instances/download.mdx b/src/content/articles/kubernetes-cost-optimization-resource-sizing-spot-instances/download.mdx
index 3d658f991..bf07374ad 100644
--- a/src/content/articles/kubernetes-cost-optimization-resource-sizing-spot-instances/download.mdx
+++ b/src/content/articles/kubernetes-cost-optimization-resource-sizing-spot-instances/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to eliminate Kubernetes waste and optimize s
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Requests vs. limits: why requests determine node count and limits control enforcement" },
     { text: "The over-provisioning problem: quantifying waste using P99 usage plus buffers" },
diff --git a/src/content/articles/kubernetes-decision-framework-when-not-to-use/download.mdx b/src/content/articles/kubernetes-decision-framework-when-not-to-use/download.mdx
index 9d8031777..3b9cc15c2 100644
--- a/src/content/articles/kubernetes-decision-framework-when-not-to-use/download.mdx
+++ b/src/content/articles/kubernetes-decision-framework-when-not-to-use/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you when to use Kubernetes and when simpler alternat
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The Kubernetes complexity tax: what you sign up for beyond orchestration (networking, storage, operations, upgrades)" },
     { text: "Hidden costs: human time for operations, debugging, learning, and the opportunity cost of infrastructure work" },
diff --git a/src/content/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting/download.mdx b/src/content/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting/download.mdx
index 76f63bc88..bbe099f62 100644
--- a/src/content/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting/download.mdx
+++ b/src/content/articles/kubernetes-dns-debugging-ndots-coredns-troubleshooting/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to debug Kubernetes DNS systematically.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "DNS architecture: the layered system of resolv.conf, CoreDNS, and upstream servers" },
     { text: "The ndots problem: why external lookups fail multiple times before succeeding" },
diff --git a/src/content/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency/download.mdx b/src/content/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency/download.mdx
index d7bde072c..f7f36fbcf 100644
--- a/src/content/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency/download.mdx
+++ b/src/content/articles/kubernetes-hpa-autoscaling-metrics-tuning-latency/download.mdx
@@ -19,7 +19,7 @@ This complete guide teaches you how to tune HPA for your workload.
 Read this e-book to understand:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "How HPA works: the 15-second loop, scaling formula, and why CPU targets need headroom" },
     { text: "The delay problem: metrics collection, controller sync, stabilization window, and pod startup together add 30-90 seconds" },
diff --git a/src/content/articles/kubernetes-ingress-gateway-api-comparison-migration/download.mdx b/src/content/articles/kubernetes-ingress-gateway-api-comparison-migration/download.mdx
index 16714e2eb..b5e550266 100644
--- a/src/content/articles/kubernetes-ingress-gateway-api-comparison-migration/download.mdx
+++ b/src/content/articles/kubernetes-ingress-gateway-api-comparison-migration/download.mdx
@@ -17,7 +17,7 @@ Kubernetes Ingress has dominated HTTP routing since 2015, but every controller i
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "The flat Ingress model versus layered Gateway API architecture" },
     { text: "Separation of concerns: infrastructure, platform, and application teams" },
diff --git a/src/content/articles/kubernetes-multi-cluster-fleet-management-configuration/download.mdx b/src/content/articles/kubernetes-multi-cluster-fleet-management-configuration/download.mdx
index 44aaff7a3..e1a9793d5 100644
--- a/src/content/articles/kubernetes-multi-cluster-fleet-management-configuration/download.mdx
+++ b/src/content/articles/kubernetes-multi-cluster-fleet-management-configuration/download.mdx
@@ -21,7 +21,7 @@ Kubernetes Federation promised unified multi-cluster management but failed becau
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Multi-cluster architectures: environment-based, regional, workload isolation, and hybrid cloud patterns" },
     { text: "Consistency versus flexibility spectrum: from fully identical to policy-governed configurations" },
diff --git a/src/content/articles/kubernetes-pod-resource-requests-limits-qos-classes/download.mdx b/src/content/articles/kubernetes-pod-resource-requests-limits-qos-classes/download.mdx
index c78bf0d05..7b6c8ee24 100644
--- a/src/content/articles/kubernetes-pod-resource-requests-limits-qos-classes/download.mdx
+++ b/src/content/articles/kubernetes-pod-resource-requests-limits-qos-classes/download.mdx
@@ -19,7 +19,7 @@ QoS class determines eviction order, but most teams don't realize what class the
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Requests vs limits: how they affect scheduling and runtime behavior" },
     { text: "CPU as a compressible resource: throttling symptoms and performance impact" },
diff --git a/src/content/articles/kubernetes-secrets-external-secrets-operator-csi-vault/download.mdx b/src/content/articles/kubernetes-secrets-external-secrets-operator-csi-vault/download.mdx
index dc78f1891..d5ee0afe4 100644
--- a/src/content/articles/kubernetes-secrets-external-secrets-operator-csi-vault/download.mdx
+++ b/src/content/articles/kubernetes-secrets-external-secrets-operator-csi-vault/download.mdx
@@ -19,7 +19,7 @@ Three secret injection patterns dominate: External Secrets Operator, Secrets Sto
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Native Kubernetes Secrets: how they work and why they're insufficient" },
     { text: "External Secrets Operator: scheduling, caching, and resilience" },
diff --git a/src/content/articles/legacy-code-testing-characterization-tests-seams/download.mdx b/src/content/articles/legacy-code-testing-characterization-tests-seams/download.mdx
index 1260c0831..8696fea0e 100644
--- a/src/content/articles/legacy-code-testing-characterization-tests-seams/download.mdx
+++ b/src/content/articles/legacy-code-testing-characterization-tests-seams/download.mdx
@@ -19,7 +19,7 @@ Focus on getting enough safety net to change the code you need to change, not co
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Characterization tests: capturing observed behavior without specifications" },
     { text: "Behavior discovery: using test failures to document what code actually does" },
diff --git a/src/content/articles/monorepo-affected-builds-remote-caching-ci-optimization/download.mdx b/src/content/articles/monorepo-affected-builds-remote-caching-ci-optimization/download.mdx
index 977a3c185..b8501f090 100644
--- a/src/content/articles/monorepo-affected-builds-remote-caching-ci-optimization/download.mdx
+++ b/src/content/articles/monorepo-affected-builds-remote-caching-ci-optimization/download.mdx
@@ -19,7 +19,7 @@ Cache hit rates reach 85%, build times drop dramatically, and developers iterate
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Dependency graphs: package dependencies, transitive relationships, and rebuild impact" },
     { text: "Affected calculation algorithm: mapping changed files and reverse graph traversal" },
diff --git a/src/content/articles/mtls-certificate-rotation-service-mesh-authentication/download.mdx b/src/content/articles/mtls-certificate-rotation-service-mesh-authentication/download.mdx
index 6a5662736..13f29593c 100644
--- a/src/content/articles/mtls-certificate-rotation-service-mesh-authentication/download.mdx
+++ b/src/content/articles/mtls-certificate-rotation-service-mesh-authentication/download.mdx
@@ -19,7 +19,7 @@ The mTLS system has multiple certificate layers (workload, issuing CA, intermedi
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "One-way versus mutual TLS: identity verification at the network layer" },
     { text: "Certificate anatomy: Subject, SANs, validity periods, and Extended Key Usage" },
diff --git a/src/content/articles/nginx-haproxy-reverse-proxy-production-tuning/download.mdx b/src/content/articles/nginx-haproxy-reverse-proxy-production-tuning/download.mdx
index 6d41a9502..c16d3a3a8 100644
--- a/src/content/articles/nginx-haproxy-reverse-proxy-production-tuning/download.mdx
+++ b/src/content/articles/nginx-haproxy-reverse-proxy-production-tuning/download.mdx
@@ -19,7 +19,7 @@ Production tuning isn't optional optimization—it's the difference between grac
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Proxy architecture: request flow through six phases and their timeout implications" },
     { text: "Connection multiplexing: event-driven workers, connection slots, and keep-alive pools" },
diff --git a/src/content/articles/on-call-rotation-small-teams-sustainable-coverage/download.mdx b/src/content/articles/on-call-rotation-small-teams-sustainable-coverage/download.mdx
index 3bdf02567..41ceb89b0 100644
--- a/src/content/articles/on-call-rotation-small-teams-sustainable-coverage/download.mdx
+++ b/src/content/articles/on-call-rotation-small-teams-sustainable-coverage/download.mdx
@@ -19,7 +19,7 @@ Small team on-call requires ruthless prioritization: not everything is a 3 AM pr
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Rotation design: weekly vs. daily vs. business-hours-only tradeoffs" },
     { text: "Coverage gaps: handling vacations, illness, and absences without burning out remaining team" },
diff --git a/src/content/articles/opa-conftest-policy-as-code-infrastructure-guardrails/download.mdx b/src/content/articles/opa-conftest-policy-as-code-infrastructure-guardrails/download.mdx
index e7eeb60b0..10c5fdfc2 100644
--- a/src/content/articles/opa-conftest-policy-as-code-infrastructure-guardrails/download.mdx
+++ b/src/content/articles/opa-conftest-policy-as-code-infrastructure-guardrails/download.mdx
@@ -19,7 +19,7 @@ The key paradox: comprehensive policies with slow feedback get disabled. Start w
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "OPA architecture: library mode, daemon mode, and CLI mode deployment" },
     { text: "Rego fundamentals: rules, conditions, iteration, and data querying" },
diff --git a/src/content/articles/openapi-spec-documentation-sdk-generation-validation/download.mdx b/src/content/articles/openapi-spec-documentation-sdk-generation-validation/download.mdx
index ccdbe39e1..0c7644c57 100644
--- a/src/content/articles/openapi-spec-documentation-sdk-generation-validation/download.mdx
+++ b/src/content/articles/openapi-spec-documentation-sdk-generation-validation/download.mdx
@@ -19,7 +19,7 @@ Time spent on API maintenance drops significantly when all three artifacts come
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "OpenAPI structure: info, servers, paths, and components" },
     { text: "Schema design: separate request/response schemas versus DRY anti-patterns" },
diff --git a/src/content/articles/opentelemetry-span-design-granularity-overhead/download.mdx b/src/content/articles/opentelemetry-span-design-granularity-overhead/download.mdx
index 3a97a8f3c..d7aa1b51d 100644
--- a/src/content/articles/opentelemetry-span-design-granularity-overhead/download.mdx
+++ b/src/content/articles/opentelemetry-span-design-granularity-overhead/download.mdx
@@ -19,7 +19,7 @@ Granularity without readability is noise, not observability.
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Span fundamentals: identity, naming, timing, status, attributes, and events" },
     { text: "Context propagation: automatic parent-child relationships and trace continuity" },
diff --git a/src/content/articles/performance-testing-load-models-benchmark-accuracy/download.mdx b/src/content/articles/performance-testing-load-models-benchmark-accuracy/download.mdx
index 34a0d2ad9..6c3b55c5d 100644
--- a/src/content/articles/performance-testing-load-models-benchmark-accuracy/download.mdx
+++ b/src/content/articles/performance-testing-load-models-benchmark-accuracy/download.mdx
@@ -19,7 +19,7 @@ A benchmark is a model of reality. If the model is wrong, the predictions are wo
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Load model components: throughput, distribution, workload mix, and user behavior" },
     { text: "Traffic patterns: ramping, stepped, bursty, and time-of-day curves" },
diff --git a/src/content/articles/platform-architecture-control-plane-data-plane-separation/download.mdx b/src/content/articles/platform-architecture-control-plane-data-plane-separation/download.mdx
index 0e7ea5f7e..7a7672b54 100644
--- a/src/content/articles/platform-architecture-control-plane-data-plane-separation/download.mdx
+++ b/src/content/articles/platform-architecture-control-plane-data-plane-separation/download.mdx
@@ -19,7 +19,7 @@ Design separation into abstractions from the start, even if you deploy together
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Control plane vs data plane: roles, failure modes, and scaling characteristics" },
     { text: "Platform layers: infrastructure, orchestration, and platform services" },
diff --git a/src/content/articles/platform-engineering-metrics-lead-time-developer-friction/download.mdx b/src/content/articles/platform-engineering-metrics-lead-time-developer-friction/download.mdx
index bd7c1ba0e..cb86bbdd3 100644
--- a/src/content/articles/platform-engineering-metrics-lead-time-developer-friction/download.mdx
+++ b/src/content/articles/platform-engineering-metrics-lead-time-developer-friction/download.mdx
@@ -19,7 +19,7 @@ Meaningful platform metrics answer one question: is the platform making develope
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Lead time metrics: time to first deployment, service creation, and deployment lead time" },
     { text: "Friction metrics: ticket volume, self-service rate, and cognitive load" },
diff --git a/src/content/articles/postgresql-connection-pooling-saturation-sizing/download.mdx b/src/content/articles/postgresql-connection-pooling-saturation-sizing/download.mdx
index fec23eab1..f6ea162bd 100644
--- a/src/content/articles/postgresql-connection-pooling-saturation-sizing/download.mdx
+++ b/src/content/articles/postgresql-connection-pooling-saturation-sizing/download.mdx
@@ -19,7 +19,7 @@ Connection limits enable graceful degradation under load, not just avoiding hard
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "PostgreSQL process-per-connection model and its overhead" },
     { text: "Connection establishment overhead: TCP, forking, authentication, TLS" },
diff --git a/src/content/articles/private-networking-dns-routing-tls-debugging/download.mdx b/src/content/articles/private-networking-dns-routing-tls-debugging/download.mdx
index 185d2a658..b947e0a7e 100644
--- a/src/content/articles/private-networking-dns-routing-tls-debugging/download.mdx
+++ b/src/content/articles/private-networking-dns-routing-tls-debugging/download.mdx
@@ -19,7 +19,7 @@ Private networking is a fundamentally different debugging domain where familiar
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Private DNS: resolution architectures, VPC resolvers, and hosted zones" },
     { text: "DNS failure modes: NXDOMAIN, split-horizon DNS, and caching issues" },
diff --git a/src/content/articles/prometheus-high-cardinality-metrics-label-design/download.mdx b/src/content/articles/prometheus-high-cardinality-metrics-label-design/download.mdx
index ab127f83e..70f65549d 100644
--- a/src/content/articles/prometheus-high-cardinality-metrics-label-design/download.mdx
+++ b/src/content/articles/prometheus-high-cardinality-metrics-label-design/download.mdx
@@ -19,7 +19,7 @@ Labels are multiplicative, not additive. A single unbounded label can destroy yo
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Time series math: how label combinations create cardinality explosions" },
     { text: "Cardinality limits: setting hard boundaries in Prometheus and scrape configs" },
diff --git a/src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/download.mdx b/src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/download.mdx
index ff7cfa504..f7e2f2d6b 100644
--- a/src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/download.mdx
+++ b/src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/download.mdx
@@ -19,7 +19,7 @@ Rate limiting isn't about saying "no." It's about saying "not yet" while maintai
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Rate limiting purposes: resource protection, fairness, abuse prevention, and cost control" },
     { text: "Fixed window, sliding window, token bucket, and leaky bucket algorithms" },
diff --git a/src/content/articles/release-quality-gates-automated-deployment-validation/download.mdx b/src/content/articles/release-quality-gates-automated-deployment-validation/download.mdx
index f9efedd65..af3009426 100644
--- a/src/content/articles/release-quality-gates-automated-deployment-validation/download.mdx
+++ b/src/content/articles/release-quality-gates-automated-deployment-validation/download.mdx
@@ -19,7 +19,7 @@ The measure of a good gate isn't deployments blocked—it's real incidents preve
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Gate design principles: actionability, determinism, speed, and proportionality" },
     { text: "Gate categories: required blocking, required advisory, and optional" },
diff --git a/src/content/articles/reverse-engineering-documentation-legacy-systems/download.mdx b/src/content/articles/reverse-engineering-documentation-legacy-systems/download.mdx
index 80265624a..6907c6c61 100644
--- a/src/content/articles/reverse-engineering-documentation-legacy-systems/download.mdx
+++ b/src/content/articles/reverse-engineering-documentation-legacy-systems/download.mdx
@@ -19,7 +19,7 @@ The approach isn't documenting everything from scratch—it's systematically ext
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Documentation decay lifecycle: tracking accuracy over time" },
     { text: "Categories of documentation debt: missing, outdated, wrong, and tribal knowledge" },
diff --git a/src/content/articles/service-catalog-metadata-schema-ownership-tracking/download.mdx b/src/content/articles/service-catalog-metadata-schema-ownership-tracking/download.mdx
index 5be4a9032..8d09090a1 100644
--- a/src/content/articles/service-catalog-metadata-schema-ownership-tracking/download.mdx
+++ b/src/content/articles/service-catalog-metadata-schema-ownership-tracking/download.mdx
@@ -19,7 +19,7 @@ A catalog with 80% accurate data is more dangerous than no catalog—it creates
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Catalog failure modes: stale ownership, missing services, and outdated metadata" },
     { text: "Schema design: what fields actually get used versus what creates friction" },
diff --git a/src/content/articles/service-decommissioning-scream-test-shutdown/download.mdx b/src/content/articles/service-decommissioning-scream-test-shutdown/download.mdx
index fbe968401..5e578d820 100644
--- a/src/content/articles/service-decommissioning-scream-test-shutdown/download.mdx
+++ b/src/content/articles/service-decommissioning-scream-test-shutdown/download.mdx
@@ -19,7 +19,7 @@ Understanding usage patterns and implementing controlled shutdown prevents phant
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Signs of decommissioning candidates: zero traffic, no deployments, deprecated dependencies" },
     { text: "The scream test: progressive degradation to surface dependencies safely" },
diff --git a/src/content/articles/slo-error-budget-practical-guide/download.mdx b/src/content/articles/slo-error-budget-practical-guide/download.mdx
index 87975e5ce..235ebbfc2 100644
--- a/src/content/articles/slo-error-budget-practical-guide/download.mdx
+++ b/src/content/articles/slo-error-budget-practical-guide/download.mdx
@@ -19,7 +19,7 @@ Engineering teams want to ship faster. Operations teams want stability. Without
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Service Level Indicators: choosing user-centric metrics that correlate with experience" },
     { text: "Service Level Objectives: setting targets that balance reliability and velocity" },
diff --git a/src/content/articles/slsa-build-provenance-artifact-signing-supply-chain/download.mdx b/src/content/articles/slsa-build-provenance-artifact-signing-supply-chain/download.mdx
index b6dfedc7a..b04894d51 100644
--- a/src/content/articles/slsa-build-provenance-artifact-signing-supply-chain/download.mdx
+++ b/src/content/articles/slsa-build-provenance-artifact-signing-supply-chain/download.mdx
@@ -19,7 +19,7 @@ Build provenance proves that an artifact matches the code and build process you
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Supply chain attack vectors: source compromise, build tampering, and artifact substitution" },
     { text: "SLSA levels: what each level requires and when to target which level" },
diff --git a/src/content/articles/strangler-fig-migration-complete-guide/download.mdx b/src/content/articles/strangler-fig-migration-complete-guide/download.mdx
index f5abce874..1c3db8c41 100644
--- a/src/content/articles/strangler-fig-migration-complete-guide/download.mdx
+++ b/src/content/articles/strangler-fig-migration-complete-guide/download.mdx
@@ -19,7 +19,7 @@ Auth extraction is the hardest extraction—if you can migrate auth, you can mig
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Migration unit selection: service boundaries and endpoint-level increments" },
     { text: "Instrumentation: collecting baseline metrics before cutting any traffic" },
diff --git a/src/content/articles/structured-logging-correlation-ids-log-schema-design/download.mdx b/src/content/articles/structured-logging-correlation-ids-log-schema-design/download.mdx
index 9ca1aeeef..d2ce04af3 100644
--- a/src/content/articles/structured-logging-correlation-ids-log-schema-design/download.mdx
+++ b/src/content/articles/structured-logging-correlation-ids-log-schema-design/download.mdx
@@ -17,7 +17,7 @@ At 3 AM tracing a user request through twelve services, you discover one logs `u
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Designing flat, namespaced field naming conventions that prevent collisions and scale" },
     { text: "Adopting Elastic Common Schema (ECS) to avoid reinventing the standard" },
diff --git a/src/content/articles/symptom-based-alerting-runbooks-alert-design/download.mdx b/src/content/articles/symptom-based-alerting-runbooks-alert-design/download.mdx
index dbc41dc2a..70c4b2597 100644
--- a/src/content/articles/symptom-based-alerting-runbooks-alert-design/download.mdx
+++ b/src/content/articles/symptom-based-alerting-runbooks-alert-design/download.mdx
@@ -17,7 +17,7 @@ Your on-call engineer gets paged at 2 AM for high CPU, investigates for 20 minut
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Distinguishing symptoms (actual user impact) from causes (potential problems) in alert design" },
     { text: "SLO-derived burn rate alerting to page on error budget exhaustion, not absolute metrics" },
diff --git a/src/content/articles/synthetic-test-data-pii-anonymization-fixtures/download.mdx b/src/content/articles/synthetic-test-data-pii-anonymization-fixtures/download.mdx
index a6b21d100..4d75b01d9 100644
--- a/src/content/articles/synthetic-test-data-pii-anonymization-fixtures/download.mdx
+++ b/src/content/articles/synthetic-test-data-pii-anonymization-fixtures/download.mdx
@@ -17,7 +17,7 @@ Three weeks into a new engagement, 47,000 real customer records—names, emails,
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Understanding the production data trap and why \"it's just staging\" is not a risk mitigation strategy" },
     { text: "Legal implications: GDPR purpose limitation, HIPAA PHI de-identification, PCI DSS non-production rules" },
diff --git a/src/content/articles/terraform-module-design-defaults-versioning-interfaces/download.mdx b/src/content/articles/terraform-module-design-defaults-versioning-interfaces/download.mdx
index 3ff9e7a3d..e715a4a4c 100644
--- a/src/content/articles/terraform-module-design-defaults-versioning-interfaces/download.mdx
+++ b/src/content/articles/terraform-module-design-defaults-versioning-interfaces/download.mdx
@@ -19,7 +19,7 @@ Modules need to evolve as requirements change and you learn better patterns. But
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Understanding module interfaces as five layers: inputs, outputs, resource behavior, provider requirements, and implicit contracts" },
     { text: "Breaking vs non-breaking changes: which modifications require major version bumps and migration paths" },
diff --git a/src/content/articles/terraform-state-locking-corruption-recovery-backend/download.mdx b/src/content/articles/terraform-state-locking-corruption-recovery-backend/download.mdx
index 27df0022e..a6119824e 100644
--- a/src/content/articles/terraform-state-locking-corruption-recovery-backend/download.mdx
+++ b/src/content/articles/terraform-state-locking-corruption-recovery-backend/download.mdx
@@ -19,7 +19,7 @@ The state file is Terraform's memory—it maps your configuration to actual clou
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "State file structure: version, serial, lineage, and the resource-to-cloud mapping that drives planning" },
     { text: "State locking mechanisms: how to prevent concurrent modifications that corrupt state" },
diff --git a/src/content/articles/workload-identity-federation-keyless-cloud-authentication/download.mdx b/src/content/articles/workload-identity-federation-keyless-cloud-authentication/download.mdx
index 2bab67b08..b2a514a94 100644
--- a/src/content/articles/workload-identity-federation-keyless-cloud-authentication/download.mdx
+++ b/src/content/articles/workload-identity-federation-keyless-cloud-authentication/download.mdx
@@ -17,7 +17,7 @@ Every inherited CI/CD pipeline contains service account keys created years ago b
 This complete guide teaches you:
 
 <List
-  variant="download-page-list"
+  variant="check-icons-list"
   items={[
     { text: "Long-lived key vulnerabilities: proliferation, git history exposure, and the lifecycle of credential compromise" },
     { text: "Workload identity federation architecture: inverting security from distributed secrets to cryptographic assertions" },
diff --git a/src/icons/alarm-clock.svg b/src/icons/alarm-clock.svg
deleted file mode 100644
index b010fab22..000000000
--- a/src/icons/alarm-clock.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>alarm clock icon</title>
-  <path d="M 21.611019,13.150051 C 21.610269,8.0616042 17.655798,3.9095113 12.652474,3.5725815 V 2.207472 H 11.347129 V 3.5726284 C 6.3446021,3.9099332 2.3899422,8.0623073 2.3891922,13.150051 c 7.5e-4,3.081492 1.4549199,5.815929 3.7094623,7.575108 L 4.8148713,22.90489 6.4448185,23.99935 8.040079,21.900195 c 1.2082224,0.548238 2.546754,0.861261 3.960097,0.861261 1.376313,0 2.682455,-0.294555 3.866021,-0.815747 l 1.559777,2.053641 1.632291,-1.09446 -1.246753,-2.112654 c 2.305214,-1.756039 3.798757,-4.520615 3.799507,-7.642185 z m -9.345583,6.513741 h -0.482708 -0.226682 v 0.836982 C 9.8146791,20.397089 8.2457618,19.694261 7.0352425,18.588974 L 7.651541,17.97291 7.3099238,17.631386 6.6875317,18.253966 C 5.5517764,17.070774 4.8092932,15.520653 4.6600467,13.791567 h 0.925057 v -0.98693 H 4.645047 C 4.7279201,11.023943 5.4355758,9.4182295 6.5614408,8.1853045 L 7.2764088,8.9004601 7.6179793,8.5588429 6.8964958,7.8375469 C 8.1019995,6.6806044 9.6890101,5.9342309 11.457376,5.8054681 v 1.0281797 h 0.277541 0.482707 0.226683 V 5.8004526 c 1.790725,0.1067781 3.400844,0.8454182 4.624488,2.0047043 l -0.720359,0.7201712 0.341618,0.3415702 0.717077,-0.7170774 c 1.123193,1.2147849 1.838162,2.7977171 1.943206,4.5560521 h -0.935041 v 0.986931 h 0.930072 c -0.127778,1.751819 -0.862011,3.324722 -2.000064,4.526006 l -0.621267,-0.621455 -0.341523,0.341195 0.618361,0.618361 c -1.192379,1.102944 -2.73875,1.813459 -4.457758,1.9388 v -0.831965 h -0.277681 z" />
-  <path d="M 3.8156129,0.53430708 C 1.921906,1.6306883 1.2757957,4.0544924 2.3730207,5.9485275 L 9.22988,1.9772742 C 8.134155,0.08361421 5.7100228,-0.56291793 3.8156129,0.53430708 Z" />
-  <path d="M 20.183849,0.53430708 C 18.290376,-0.56291793 15.866197,0.08361421 14.769769,1.9772742 l 6.857422,3.9712533 c 1.097225,-1.8940351 0.45027,-4.3178392 -1.443342,-5.41422042 z" />
-  <polygon points="283.943,190.245 251.719,269.859 199.501,250.803 192.214,270.78 259.499,295.23 259.717,294.731 260.791,295.166 300.541,196.964 " transform="matrix(0.04687393,0,0,0.04687393,2.6226654e-4,-1.0262536e-4)" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/arrow-down.svg b/src/icons/arrow-down.svg
deleted file mode 100644
index af39c0518..000000000
--- a/src/icons/arrow-down.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>arrow-down icon</title>
-  <path d="m 24.000000,6.9334385 c 0,-0.2389432 -0.0912,-0.4778864 -0.273345,-0.6600272 -0.364282,-0.3645484 -0.955506,-0.3645484 -1.319788,0 L 12.001361,16.680507 1.5942658,6.2734113 c -0.3645484,-0.3645484 -0.95550615,-0.3645484 -1.32005453,0 -0.36428169,0.3645484 -0.36428169,0.9555061 0,1.3200545 L 11.341335,18.660589 c 0.364281,0.364548 0.955506,0.364548 1.319787,0 L 23.728245,7.5934658 c 0.182408,-0.1821409 0.273612,-0.4210841 0.273612,-0.6600273 z"
-  stroke-width="0.266677"
-  stroke-linecap="round" />
-</svg>
diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg
deleted file mode 100644
index 1ca4778b5..000000000
--- a/src/icons/arrow-right.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title id="title2">arrow-right icon</title>
-  <path d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/award.svg b/src/icons/award.svg
deleted file mode 100644
index 2ad02d8f9..000000000
--- a/src/icons/award.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
-  <title>award icon</title>
-  <g>
-    <path d="M 12.932375,7.0526251 11.989975,4 11.067663,7.0315876 H 8.0000001 L 10.486225,8.9263001 9.5238251,12 12.010013,10.105275 14.49625,12 13.51375,8.9473751 16,7.0526251 Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M 4.469275,0 H 19.53075 V 1.4897625 H 24 v 5.2960876 c 0,1.4046 -0.558,2.7516875 -1.551125,3.7448999 C 21.639,11.340525 20.594,11.860988 19.474375,12.025613 19.30975,13.14525 18.789375,14.19025 17.9795,15 c -0.973875,0.973875 -2.288,1.529375 -3.662875,1.550625 v 2.15325 c 0,0.175875 0.06975,0.3445 0.194125,0.46875 0.124375,0.124375 0.293,0.19425 0.46875,0.19425 0.812,0 1.590625,0.3225 2.16475,0.896625 0.574125,0.574125 0.89675,1.352875 0.89675,2.16475 V 24 H 5.9590375 v -1.57175 c 0,-0.811875 0.3225626,-1.590625 0.8966876,-2.16475 0.574125,-0.574125 1.3528,-0.896625 2.1647625,-0.896625 0.175825,0 0.34445,-0.06987 0.4687625,-0.19425 0.124325,-0.12425 0.194175,-0.292875 0.194175,-0.46875 v -2.15325 C 8.3084626,16.529375 6.9943376,15.973875 6.0204625,15 5.210675,14.19025 4.690225,13.14525 4.5256,12.025613 3.4059625,11.860988 2.3609625,11.340525 1.5511875,10.53075 0.55797375,9.5375376 0,8.1904501 0,6.7858501 V 1.4897625 H 4.469275 Z M 6.1229,1.653625 v 9.6015 c 0,0.966038 0.3837626,1.8925 1.0668501,2.575625 0.6831,0.683125 1.609575,1.066875 2.5756125,1.066875 H 11.33705 v 3.80625 c 0,0.614375 -0.244062,1.203625 -0.6785,1.638125 -0.43445,0.434375 -1.0236749,0.6785 -1.6380624,0.6785 -0.3733625,0 -0.73145,0.14825 -0.995475,0.412375 -0.24465,0.244625 -0.38995,0.57 -0.4099625,0.9135 H 16.385 c -0.02,-0.3435 -0.165375,-0.668875 -0.41,-0.9135 C 15.711,21.16875 15.352875,21.0205 14.9795,21.0205 c -0.614375,0 -1.203625,-0.244125 -1.638,-0.6785 C 12.907,19.9075 12.663,19.31825 12.663,18.703875 v -3.80625 h 1.571625 c 0.966,0 1.8925,-0.38375 2.575625,-1.066875 0.683125,-0.683125 1.066875,-1.609587 1.066875,-2.575625 v -9.6015 z M 4.469275,3.1433875 h -2.81565 v 3.6424626 c 0,0.9660375 0.3837625,1.8925125 1.06685,2.5756125 0.484675,0.4846625 1.091875,0.8186504 1.7488,0.9717754 z M 19.53075,10.333238 V 3.1433875 h 2.815625 v 3.6424626 c 0,0.9660375 -0.38375,1.8925125 -1.066875,2.5756125 -0.484625,0.4846625 -1.091875,0.8186504 -1.74875,0.9717754 z" />
-  </g>
-</svg>
\ No newline at end of file
diff --git a/src/icons/bluesky.svg b/src/icons/bluesky.svg
deleted file mode 100644
index c6be2b50f..000000000
--- a/src/icons/bluesky.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>bluesky icon</title>
-  <path d="M10.503 12.643c-0.77 -1.498 -2.867 -4.289 -4.817 -5.665C3.818 5.66 3.106 5.888 2.639 6.1 2.098 6.343 2 7.173 2 7.661c0 0.489 0.268 4.004 0.442 4.591 0.578 1.939 2.631 2.593 4.523 2.384 0.096 -0.014 0.195 -0.027 0.295 -0.038 -1.672 0.118 -2.989 0.738 -2.619 1.83 0.361 1.068 1.996 1.914 3.751 1.912 2.32 -0.002 3.609 -1.205 3.609 -1.205s1.289 1.202 3.609 1.205c1.754 0.001 3.389 -0.845 3.751 -1.912 0.369 -1.093 -0.947 -1.713 -2.62 -1.83 0.099 0.011 0.198 0.024 0.294 0.038 1.892 0.21 3.945 -0.445 4.523 -2.384 0.174 -0.587 0.442 -4.103 0.442 -4.59 0 -0.489 -0.098 -1.319 -0.639 -1.563 -0.467 -0.211 -1.179 -0.439 -3.047 0.879C13.37 8.355 11.273 11.146 10.503 12.643z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/bug.svg b/src/icons/bug.svg
deleted file mode 100644
index 856642018..000000000
--- a/src/icons/bug.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>code bug icon</title>
-  <path fill="currentColor" d="M18.666 13.048l3.334 -1.915l-0.405 -0.783l-3.04 1.746l-2.418 -0.371c0.005 -0.214 -0.005 -0.427 -0.031 -0.635c0.531 -0.037 1.029 -0.243 1.409 -0.624c0.467 -0.467 0.67 -1.109 0.623 -1.771c1.441 -0.448 1.481 -1.47 1.48 -1.981c-0.002 -0.557 -0.518 -0.367 -0.573 -0.219c-0.326 0.823 -0.93 0.934 -1.411 0.77c-0.116 -0.173 -0.25 -0.339 -0.405 -0.493c-0.155 -0.154 -0.321 -0.289 -0.494 -0.405c-0.164 -0.48 -0.053 -1.084 0.771 -1.411c0.147 -0.055 0.338 -0.571 -0.219 -0.573c-0.512 -0.001 -1.534 0.039 -1.981 1.479c-0.662 -0.047 -1.304 0.156 -1.771 0.623c-0.381 0.381 -0.586 0.879 -0.624 1.41c-0.208 -0.026 -0.42 -0.036 -0.635 -0.031l-0.371 -2.417l1.746 -3.041L12.868 2l-1.915 3.335l0.407 2.646c-0.417 0.096 -0.831 0.25 -1.229 0.461l-1.439 -1.126l-3.728 -0.921l-0.285 0.887l3.553 0.878l1.064 0.833c-0.157 0.126 -0.31 0.261 -0.457 0.407c-0.205 0.205 -0.389 0.422 -0.553 0.647l-2.818 -0.158L2 11.754l0.38 0.797l3.226 -1.735l2.152 0.12c-0.762 1.638 -0.582 3.503 0.61 4.696c1.192 1.192 3.057 1.372 4.695 0.61l0.121 2.152l-1.735 3.226L12.246 22l1.864 -3.468l-0.158 -2.818c0.225 -0.164 0.442 -0.348 0.647 -0.553c0.146 -0.147 0.281 -0.3 0.407 -0.457l0.832 1.063l0.878 3.554l0.887 -0.285l-0.921 -3.728l-1.126 -1.439c0.211 -0.398 0.365 -0.812 0.461 -1.229L18.666 13.048z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/calendar-generic-ical.svg b/src/icons/calendar-generic-ical.svg
deleted file mode 100644
index 6b76002d3..000000000
--- a/src/icons/calendar-generic-ical.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 610.398 610.398" xml:space="preserve">
-
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052 c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553 V35.544V24.992C180.791,11.188,171.291,0,159.567,0z"/> <path d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992 h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z"/> <path d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117 V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818 c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764 V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z"/> <path d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z"/> <path d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017 c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z"/> <path d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z"/> <path d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z"/> <path d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z"/> <path d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032 c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z"/> <path d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z"/> <path d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z"/> </g> </g> </g>
-
</svg>
\ No newline at end of file
diff --git a/src/icons/calendar-google.svg b/src/icons/calendar-google.svg
deleted file mode 100644
index 325f0d7d4..000000000
--- a/src/icons/calendar-google.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>Google calendar icon</title>
-  <polygon fill="var(--color-white)" points="17.263,6.737 6.737,6.737 6.737,17.263 17.263,17.263" />
-  <polygon fill="var(--color-google-red)" points="17.263,22 22,17.263 19.632,16.859 17.263,17.263 16.831,19.43" />
-  <path d="M2 17.263L2 20.421C2 21.293 2.707 22 3.579 22L6.737 22L7.223 19.632L6.737 17.263L4.156 16.859L2 17.263Z" fill="var(--color-google-green-dark)" />
-  <path d="M22 6.737L22 3.579C22 2.707 21.293 2 20.421 2L17.263 2C16.975 3.175 16.831 4.039 16.831 4.593C16.831 5.148 16.975 5.862 17.263 6.737C18.311 7.037 19.1 7.187 19.632 7.187C20.163 7.187 20.952 7.037 22 6.737Z" fill="var(--color-google-blue-dark)" />
-  <polygon fill="var(--color-google-yellow)" points="22,6.737 17.263,6.737 17.263,17.263 22,17.263" />
-  <polygon fill="var(--color-google-green)" points="17.263,17.263 6.737,17.263 6.737,22 17.263,22" />
-  <path d="M17.263 2L3.579 2C2.707 2 2 2.707 2 3.579L2 17.263L6.737 17.263L6.737 6.737L17.263 6.737L17.263 2Z" fill="var(--color-google-blue)" />
-  <path d="M8.896 14.903C8.503 14.637 8.23 14.249 8.082 13.736L8.995 13.359C9.078 13.675 9.222 13.92 9.429 14.093C9.634 14.267 9.884 14.353 10.176 14.353C10.475 14.353 10.732 14.262 10.946 14.08C11.161 13.899 11.268 13.667 11.268 13.387C11.268 13.1 11.155 12.866 10.929 12.684C10.703 12.503 10.418 12.412 10.079 12.412L9.551 12.412L9.551 11.508L10.025 11.508C10.317 11.508 10.563 11.429 10.763 11.271C10.963 11.113 11.063 10.897 11.063 10.622C11.063 10.378 10.974 10.183 10.795 10.037C10.616 9.891 10.389 9.817 10.114 9.817C9.846 9.817 9.633 9.888 9.475 10.032C9.317 10.175 9.199 10.357 9.13 10.559L8.226 10.183C8.346 9.843 8.566 9.543 8.888 9.284C9.211 9.025 9.622 8.895 10.122 8.895C10.492 8.895 10.825 8.966 11.12 9.109C11.414 9.253 11.646 9.451 11.813 9.704C11.98 9.958 12.063 10.242 12.063 10.558C12.063 10.88 11.986 11.153 11.83 11.376C11.675 11.6 11.484 11.771 11.258 11.891L11.258 11.945C11.55 12.065 11.804 12.263 11.992 12.517C12.183 12.774 12.279 13.08 12.279 13.438C12.279 13.796 12.188 14.116 12.007 14.396C11.825 14.676 11.574 14.897 11.255 15.058C10.936 15.218 10.576 15.3 10.178 15.3C9.716 15.301 9.289 15.168 8.896 14.903L8.896 14.903ZM14.505 10.371L13.503 11.096L13.001 10.336L14.8 9.038L15.489 9.038L15.489 15.158L14.505 15.158L14.505 10.371Z" fill="var(--color-google-blue)" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/calendar-outlook.svg b/src/icons/calendar-outlook.svg
deleted file mode 100644
index b4ba955b2..000000000
--- a/src/icons/calendar-outlook.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>Outlook calendar icon</title>
-  <path fill="#1976d2" d="M14 6.5h7.266C21.672 6.5 22 6.829 22 7.234v9.533C22 17.172 21.672 17.5 21.267 17.5H14V6.5z" />
-  <rect width="7" height="7.771" x="14" y="8.979" fill="#fff" />
-  <polygon fill="#1976d2" points="13.5,22 2,19.75 2,4.25 13.5,2" /><path fill="#fff" d="M7.625 8.25c-1.588 0 -2.875 1.679 -2.875 3.75s1.287 3.75 2.875 3.75S10.5 14.071 10.5 12S9.213 8.25 7.625 8.25zM7.5 14.25c-0.829 0 -1.5 -1.008 -1.5 -2.25s0.671 -2.25 1.5 -2.25s1.5 1.008 1.5 2.25S8.329 14.25 7.5 14.25z" />
-  <rect width="1.35" height="1.45" x="14.024" y="14.868" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="15.724" y="14.868" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="17.424" y="14.868" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="14.024" y="13.079" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="15.724" y="13.079" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="17.424" y="13.079" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="19.125" y="13.079" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="14.024" y="11.353" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="15.724" y="11.353" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="17.424" y="11.353" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="19.125" y="11.353" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="15.724" y="9.556" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="17.424" y="9.556" fill="#1976d2" />
-  <rect width="1.35" height="1.45" x="19.125" y="9.556" fill="#1976d2" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/calendar_apple.svg b/src/icons/calendar_apple.svg
deleted file mode 100644
index 6300de235..000000000
--- a/src/icons/calendar_apple.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>apple calendar icon</title>
-  <path class="st0" d="M21.999 8.257c0 -0.239 0 -0.478 -0.001 -0.717c-0.001 -0.201 -0.004 -0.403 -0.009 -0.604c-0.012 -0.438 -0.038 -0.881 -0.116 -1.314c-0.079 -0.44 -0.208 -0.849 -0.412 -1.249c-0.2 -0.393 -0.461 -0.752 -0.772 -1.064c-0.312 -0.311 -0.67 -0.572 -1.064 -0.772c-0.399 -0.204 -0.808 -0.332 -1.248 -0.411c-0.433 -0.078 -0.876 -0.104 -1.314 -0.116c-0.201 -0.006 -0.403 -0.007 -0.604 -0.009C16.221 2 15.982 2 15.743 2H8.256c-0.239 0 -0.478 0 -0.717 0.001c-0.201 0.001 -0.403 0.004 -0.604 0.009C6.498 2.023 6.055 2.049 5.622 2.126c-0.44 0.079 -0.849 0.208 -1.248 0.411c-0.393 0.2 -0.753 0.461 -1.064 0.772c-0.312 0.312 -0.572 0.67 -0.772 1.064c-0.204 0.4 -0.332 0.809 -0.412 1.249C2.048 6.056 2.022 6.498 2.011 6.936c-0.006 0.201 -0.008 0.403 -0.009 0.604C2 7.779 2 8.018 2 8.257v7.487c0 0.239 0 0.478 0.002 0.717c0.001 0.201 0.004 0.403 0.009 0.604c0.012 0.438 0.038 0.881 0.116 1.314c0.079 0.44 0.208 0.85 0.412 1.249c0.2 0.393 0.461 0.752 0.772 1.063c0.311 0.312 0.67 0.573 1.064 0.773c0.399 0.204 0.808 0.332 1.248 0.411c0.433 0.078 0.876 0.104 1.314 0.116c0.201 0.006 0.403 0.007 0.604 0.009c0.239 0.001 0.478 0.001 0.717 0.001h7.487c0.239 0 0.478 0 0.717 -0.001c0.201 -0.001 0.403 -0.004 0.604 -0.009c0.438 -0.012 0.881 -0.038 1.314 -0.116c0.44 -0.079 0.849 -0.208 1.248 -0.411c0.393 -0.2 0.752 -0.461 1.064 -0.773c0.312 -0.311 0.572 -0.67 0.772 -1.063c0.204 -0.4 0.332 -0.809 0.412 -1.249c0.078 -0.433 0.104 -0.875 0.116 -1.314c0.006 -0.201 0.007 -0.403 0.009 -0.604c0.001 -0.239 0.001 -0.478 0.001 -0.717V8.257z" />
-  <g>
-    <path d="M9.464 18.362V9.058H9.074L6.703 10.627v0.397l2.343 -1.534h0.028v8.873H9.464L9.464 18.362z" />
-    <path d="M11.78 9.058v0.356h5.111v0.028l-4.104 8.921h0.439L17.296 9.434v-0.377L11.78 9.058L11.78 9.058z" />
-  </g>
-  <path class="st1" d="M5.634 7.233V5.221h0.007l0.795 1.806l0.264 0l0.793 -1.806h0.009v2.012h0.264V4.568h-0.28L6.574 6.703h-0.007l-0.916 -2.134h-0.28v2.664H5.634L5.634 7.233z" />
-  <path class="st1" d="M9.201 5.154c-0.556 0 -0.866 0.405 -0.866 0.953v0.201c0 0.551 0.306 0.957 0.866 0.957c0.558 0 0.863 -0.406 0.863 -0.957v-0.201C10.064 5.559 9.755 5.154 9.201 5.154L9.201 5.154zM9.201 5.406c0.363 0 0.576 0.271 0.576 0.715l0 0.172c0 0.445 -0.213 0.717 -0.576 0.717c-0.366 0 -0.578 -0.273 -0.578 -0.717V6.121C8.623 5.678 8.836 5.406 9.201 5.406L9.201 5.406z" />
-  <path class="st1" d="M10.601 7.233h0.287V5.98c0 -0.293 0.16 -0.563 0.535 -0.563c0.32 0 0.526 0.194 0.526 0.543v1.271h0.287v-1.315c0 -0.496 -0.315 -0.764 -0.736 -0.764c-0.336 0 -0.528 0.176 -0.604 0.313H10.888v-0.28h-0.287L10.601 7.233L10.601 7.233z" />
-  <path class="st1" d="M13.558 5.152c-0.508 0 -0.818 0.396 -0.818 0.951v0.209c0 0.565 0.287 0.951 0.818 0.951c0.294 0 0.504 -0.148 0.613 -0.35h0.007l0 0.319h0.271V4.425h-0.287v1.055h-0.007C14.056 5.303 13.845 5.152 13.558 5.152L13.558 5.152zM13.584 5.409c0.363 0 0.586 0.285 0.586 0.707v0.19c0 0.44 -0.217 0.703 -0.582 0.703c-0.324 0 -0.56 -0.236 -0.56 -0.705v-0.185C13.026 5.641 13.267 5.409 13.584 5.409L13.584 5.409z" />
-  <path class="st1" d="M16.226 6.967h0.007v0.266h0.28V5.81c0 -0.42 -0.308 -0.656 -0.734 -0.656c-0.474 0 -0.718 0.248 -0.743 0.604h0.271c0.023 -0.217 0.178 -0.356 0.459 -0.356c0.291 0 0.459 0.155 0.459 0.442v0.22h-0.556c-0.467 0.002 -0.713 0.229 -0.713 0.582c0 0.375 0.271 0.619 0.668 0.619C15.937 7.265 16.128 7.131 16.226 6.967L16.226 6.967zM15.693 7.018c-0.231 0 -0.44 -0.123 -0.44 -0.377c0 -0.199 0.127 -0.342 0.426 -0.342h0.547v0.252C16.226 6.826 15.998 7.018 15.693 7.018z" />
-  <path class="st1" d="M18.628 5.187h-0.306L17.737 6.898h-0.01l-0.584 -1.711H16.823l0.764 2.078l-0.039 0.125c-0.06 0.211 -0.164 0.334 -0.405 0.334c-0.044 0 -0.118 -0.006 -0.15 -0.012v0.244c0.051 0.007 0.127 0.016 0.195 0.016c0.398 0 0.535 -0.273 0.643 -0.568l0.058 -0.153L18.628 5.187L18.628 5.187z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/check.svg b/src/icons/check.svg
deleted file mode 100644
index c92b37be8..000000000
--- a/src/icons/check.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>check mark icon</title>
-  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
-  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
-</svg>
diff --git a/src/icons/close.svg b/src/icons/close.svg
deleted file mode 100644
index 0a042cc56..000000000
--- a/src/icons/close.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>close icon</title>
-  <path d="M6.707 18.707L12 13.414l5.293 5.293 1.414-1.414L13.414 12l5.293-5.293-1.414-1.414L12 10.586 6.707 5.293 5.293 6.707 10.586 12l-5.293 5.293z"/>
-</svg>
diff --git a/src/icons/codepen.svg b/src/icons/codepen.svg
deleted file mode 100644
index 812a85f17..000000000
--- a/src/icons/codepen.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>CodePen icon</title>
-  <path d="M 12 0 C 11.803571 -3.7007434e-17 11.611328 0.057756708 11.423828 0.17382812 L 0.45507812 7.4863281 C 0.15150672 7.6916853 -1.4802974e-16 7.9776786 0 8.34375 L 0 15.65625 C -3.7007434e-17 16.022321 0.15150672 16.308315 0.45507812 16.513672 L 11.423828 23.826172 C 11.611328 23.942243 11.803571 24 12 24 C 12.196429 24 12.388672 23.942243 12.576172 23.826172 L 23.544922 16.513672 C 23.848493 16.308315 24 16.022321 24 15.65625 L 24 8.34375 C 24 7.9776786 23.848493 7.6916853 23.544922 7.4863281 L 12.576172 0.17382812 C 12.388672 0.057756708 12.196429 -7.4014868e-17 12 0 z M 10.96875 2.9589844 L 10.96875 7.7675781 L 6.4960938 10.753906 L 2.8925781 8.34375 L 10.96875 2.9589844 z M 13.03125 2.9589844 L 21.107422 8.34375 L 17.503906 10.753906 L 13.03125 7.7675781 L 13.03125 2.9589844 z M 12 9.5625 L 15.642578 12 L 12 14.4375 L 8.3574219 12 L 12 9.5625 z M 2.0625 10.271484 L 4.6464844 12 L 2.0625 13.728516 L 2.0625 10.271484 z M 21.9375 10.271484 L 21.9375 13.728516 L 19.353516 12 L 21.9375 10.271484 z M 6.4960938 13.246094 L 10.96875 16.232422 L 10.96875 21.041016 L 2.8925781 15.65625 L 6.4960938 13.246094 z M 17.503906 13.246094 L 21.107422 15.65625 L 13.03125 21.041016 L 13.03125 16.232422 L 17.503906 13.246094 z " />
-</svg>
\ No newline at end of file
diff --git a/src/icons/copy.svg b/src/icons/copy.svg
deleted file mode 100644
index 26693b840..000000000
--- a/src/icons/copy.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>copy icon</title>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/external.svg b/src/icons/external.svg
deleted file mode 100644
index d408115ac..000000000
--- a/src/icons/external.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>external link icon</title>
-  <path d="M16.793 5.793l-6.5 6.5 1.414 1.414 6.5-6.5L21 10V3h-7z"/>
-  <path d="M19 19H5V5h8l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-6l-2-2v8z"/>
-</svg>
diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg
deleted file mode 100644
index 89591f7b8..000000000
--- a/src/icons/facebook.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>facebook icon</title>
-  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-</svg>
diff --git a/src/icons/feed.svg b/src/icons/feed.svg
deleted file mode 100644
index 385ca9153..000000000
--- a/src/icons/feed.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>RSS feed icon</title>
-  <circle cx="6.18" cy="17.82" r="2.18"/>
-  <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
-</svg>
\ No newline at end of file
diff --git a/src/icons/github.svg b/src/icons/github.svg
deleted file mode 100644
index 3a596b6fb..000000000
--- a/src/icons/github.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>GitHub icon</title>
-  <path d="M 12,0 C 5.37,0 0,5.5094531 0,12.304753 c 0,5.437163 3.438,10.048369 8.205,11.674134 0.6,0.115357 0.8205,-0.264552 0.8205,-0.592166 0,-0.292238 -0.0105,-1.065899 -0.015,-2.091808 C 5.6715,22.037812 4.968,19.644538 4.968,19.644538 4.422,18.223339 3.633,17.844968 3.633,17.844968 2.5455,17.082073 3.717,17.097454 3.717,17.097454 c 1.2045,0.08613 1.8375,1.26739 1.8375,1.26739 1.071,1.881089 2.8095,1.338142 3.495,1.022832 0.108,-0.795194 0.417,-1.338142 0.7605,-1.64576 -2.6655,-0.307619 -5.466,-1.365828 -5.466,-6.080086 0,-1.342757 0.465,-2.4409558 1.2345,-3.3022885 -0.135,-0.310695 -0.54,-1.5611655 0.105,-3.2561452 0,0 1.005,-0.3306903 3.3,1.2612371 0.96,-0.2737807 1.98,-0.409133 3,-0.4152854 1.02,0.00615 2.04,0.1415047 3,0.4152854 2.28,-1.5919274 3.285,-1.2612371 3.285,-1.2612371 0.645,1.6949797 0.24,2.9454502 0.12,3.2561452 0.765,0.8613327 1.23,1.9595315 1.23,3.3022885 0,4.726563 -2.805,5.767853 -5.475,6.070857 0.42,0.369143 0.81,1.122809 0.81,2.276379 0,1.645761 -0.015,2.968522 -0.015,3.368426 0,0.323 0.21,0.707524 0.825,0.584476 C 20.565,22.348507 24,17.734225 24,12.304753 24,5.5094531 18.627,0 12,0"/>
-</svg>
\ No newline at end of file
diff --git a/src/icons/heart.svg b/src/icons/heart.svg
deleted file mode 100644
index d58928b76..000000000
--- a/src/icons/heart.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>heart icon</title>
-  <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
-</svg>
diff --git a/src/icons/info.svg b/src/icons/info.svg
deleted file mode 100644
index 4791e9f7c..000000000
--- a/src/icons/info.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>information icon</title>
-  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
-  <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/>
-</svg>
diff --git a/src/icons/keybase.svg b/src/icons/keybase.svg
deleted file mode 100644
index 4915f10cd..000000000
--- a/src/icons/keybase.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>Keybase service icon</title>
-  <path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
-</svg>
diff --git a/src/icons/lightbulb.svg b/src/icons/lightbulb.svg
deleted file mode 100644
index 6ecf1452e..000000000
--- a/src/icons/lightbulb.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>light bulb icon</title>
-  <path d="M9 20h6v2H9zm7.906-6.288C17.936 12.506 19 11.259 19 9c0-3.859-3.141-7-7-7S5 5.141 5 9c0 2.285 1.067 3.528 2.101 4.73.358.418.729.851 1.084 1.349.144.206.38.996.591 1.921H8v2h8v-2h-.774c.213-.927.45-1.719.593-1.925.352-.503.726-.94 1.087-1.363zm-2.724.213c-.434.617-.796 2.075-1.006 3.075h-2.351c-.209-1.002-.572-2.463-1.011-3.08-.407-.572-.826-1.061-1.196-1.492C7.644 11.294 7 10.544 7 9c0-2.757 2.243-5 5-5s5 2.243 5 5c0 1.521-.643 2.274-1.615 3.413-.373.438-.796.933-1.203 1.512z"/>
-</svg>
diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg
deleted file mode 100644
index cd03044c5..000000000
--- a/src/icons/linkedin.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>linkedin icon</title>
-  <rect x="0.61849976" y="7.0660033" width="4.6762981" height="14.966028" />
-  <path d="M 2.85826,0 C 1.13393,0 0,1.11519 0,2.59586 0,4.04842 1.09645,5.19172 2.79266,5.19172 h 0.0375 c 1.76181,0 2.85825,-1.15267 2.84888,-2.59586 C 5.64154,1.11519 4.5826,0 2.85827,0 Z" />
-  <path d="m 18.06794,6.92542 c -2.6802,0 -4.35767,1.46193 -4.66692,2.49278 V 7.06599 H 8.14369 c 0.0656,1.24639 0,14.96603 0,14.96603 h 5.25733 v -8.08747 c 0,-0.45919 -0.0188,-0.90902 0.11245,-1.22764 0.35611,-0.89965 1.13393,-1.83678 2.53026,-1.83678 1.82741,0 2.65209,1.38695 2.65209,3.41116 v 7.74073 H 24 V 13.71027 C 24,9.08083 21.39477,6.92542 18.06794,6.92542 Z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/mastodon.svg b/src/icons/mastodon.svg
deleted file mode 100644
index fc1e87155..000000000
--- a/src/icons/mastodon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-  <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
-</svg>
diff --git a/src/icons/message.svg b/src/icons/message.svg
deleted file mode 100644
index 54b813e63..000000000
--- a/src/icons/message.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>message icon</title>
-  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
-</svg>
diff --git a/src/icons/microphone.svg b/src/icons/microphone.svg
deleted file mode 100644
index 9a4d8d473..000000000
--- a/src/icons/microphone.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>microphone icon</title>
-  <path d="M18.628 9.633v1.885a7.57 7.57 0 0 1-2.179 5.315 7.45 7.45 0 0 1-2.361 1.62 7.3 7.3 0 0 1-2.095.553v2.733h3.327a.797.797 0 0 1 0 1.594H7.07a.797.797 0 0 1 0-1.594h3.327v-2.733a7.3 7.3 0 0 1-2.095-.552 7.45 7.45 0 0 1-2.361-1.62 7.57 7.57 0 0 1-2.179-5.318V9.631a.798.798 0 1 1 1.596 0v1.885a5.95 5.95 0 0 0 1.72 4.198 5.74 5.74 0 0 0 8.233 0 5.95 5.95 0 0 0 1.72-4.198V9.631a.798.798 0 1 1 1.596 0zM7.267 13.165a4.1 4.1 0 0 1-.335-1.649V5.061a4.2 4.2 0 0 1 .335-1.666 4.32 4.32 0 0 1 2.288-2.288A4.2 4.2 0 0 1 11.221.77a4.1 4.1 0 0 1 1.658.336 4.28 4.28 0 0 1 2.58 3.954l-.017 6.457a4.26 4.26 0 0 1-1.232 3.007 4.4 4.4 0 0 1-1.348.913 4.1 4.1 0 0 1-1.658.335 4.2 4.2 0 0 1-1.666-.335 4.26 4.26 0 0 1-2.271-2.273"/>
-</svg>
\ No newline at end of file
diff --git a/src/icons/moon.svg b/src/icons/moon.svg
deleted file mode 100644
index e754ecfe4..000000000
--- a/src/icons/moon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title id="title2">moon icon</title>
-  <path d="M9.387 3.382a9 9 0 0 0 7.338 11.529A9 9 0 0 0 18 15a9 9 0 0 0 2.618-.385 9.07 9.07 0 0 1-7.473 6.315A10 10 0 0 1 12 21 9 9 0 0 1 9.387 3.382M12 0a12 12 0 0 0-1.659.112A12 12 0 0 0 12 24a12 12 0 0 0 1.507-.092 12.03 12.03 0 0 0 10.38-10.249A12 12 0 0 0 24 11.958a1.47 1.47 0 0 0-1.5-1.458 1.54 1.54 0 0 0-.922.31A5.96 5.96 0 0 1 18 12a6 6 0 0 1-.862-.06 5.996 5.996 0 0 1-3.949-9.525A1.548 1.548 0 0 0 12.042 0Z"/>
-</svg>
\ No newline at end of file
diff --git a/src/icons/paper-and-pencil.svg b/src/icons/paper-and-pencil.svg
deleted file mode 100644
index ae97d7de9..000000000
--- a/src/icons/paper-and-pencil.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="m 23.500128,7.8843848 -1.772032,-1.772062 c -2.4e-4,-2.402e-4 -3.6e-4,-4.804e-4 -6e-4,-6.606e-4 -2.41e-4,-1.801e-4 -4.81e-4,-3.603e-4 -6.61e-4,-5.404e-4 L 19.954742,4.3389998 C 19.814044,4.1982436 19.623143,4.1191584 19.423955,4.1191584 c -0.199188,0 -0.390028,0.079085 -0.530787,0.2198414 L 18.01703,5.2151226 V 0.75061927 C 18.01703,0.33609729 17.680867,0 17.266398,0 H 0.75063205 C 0.33610301,0 0,0.33609729 0,0.75061927 V 23.249381 C 0,23.663903 0.33610301,24 0.75063205,24 H 17.266458 c 0.414469,0 0.750632,-0.336097 0.750632,-0.750619 v -8.820737 l 5.483038,-5.4827635 c 0.293166,-0.2931018 0.293166,-0.7683339 0,-1.0614957 z M 16.515826,22.498762 H 1.5012641 V 1.5012385 H 16.515826 v 5.2151226 l -6.202862,6.2026369 c -0.103648,0.103766 -0.174627,0.235515 -0.204292,0.379033 l -0.9223171,4.467686 c -0.051102,0.247464 0.025761,0.503996 0.2043522,0.682523 0.1421993,0.142197 0.333761,0.219842 0.5307869,0.219842 0.050502,0 0.101366,-0.0051 0.151747,-0.01549 l 4.467522,-0.922481 c 0.143701,-0.02961 0.275392,-0.100703 0.37904,-0.204349 l 1.595963,-1.595877 v 6.56888 z m -5.218334,-7.533816 1.576448,1.576481 -1.986593,0.410198 z m 3.091584,0.968539 -2.483692,-2.483649 7.518631,-7.5185025 0.711119,0.7111667 -4.585461,4.5855028 c -0.293227,0.293162 -0.293227,0.768394 0,1.061556 0.146463,0.146461 0.338685,0.219841 0.530787,0.219841 0.192102,0 0.384143,-0.07338 0.530787,-0.219841 l 4.585521,-4.585443 0.711118,0.7111067 z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/paper-clip.svg b/src/icons/paper-clip.svg
deleted file mode 100644
index 7493d78b8..000000000
--- a/src/icons/paper-clip.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>paper clip icon</title>
-  <path d="m 5.2 21.37 c -0.042 0 -0.084 -0.001 -0.126 -0.003 C 4.292 21.335 3.545 21.001 2.972 20.428 2.399 19.855 2.066 19.109 2.033 18.326 2 17.53 2.281 16.792 2.825 16.248 L 15.389 3.684 C 16.084 2.989 17.029 2.63 18.047 2.672 19.053 2.714 20.012 3.143 20.75 3.88 21.487 4.618 21.916 5.577 21.958 6.583 22 7.602 21.641 8.546 20.946 9.241 L 11.478 18.709 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.64 L 20.307 8.601 C 20.82 8.088 21.086 7.384 21.054 6.62 21.022 5.842 20.686 5.096 20.11 4.52 19.534 3.943 18.788 3.608 18.01 3.576 17.246 3.544 16.542 3.81 16.028 4.323 L 3.464 16.888 C 2.705 17.647 2.771 18.948 3.612 19.789 4.024 20.201 4.556 20.441 5.112 20.464 5.653 20.485 6.15 20.299 6.513 19.936 L 16.728 9.721 C 17.176 9.274 17.131 8.502 16.63 8 16.382 7.752 16.062 7.608 15.73 7.594 15.411 7.581 15.12 7.69 14.909 7.902 L 7.79 15.021 c -0.177 0.176 -0.463 0.177 -0.639 0 -0.177 -0.177 -0.177 -0.463 0 -0.639 L 14.269 7.262 C 14.662 6.87 15.193 6.666 15.768 6.691 16.327 6.714 16.861 6.952 17.269 7.361 18.124 8.215 18.168 9.561 17.368 10.361 L 7.152 20.576 C 6.637 21.091 5.948 21.37 5.2 21.37 Z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/pause.svg b/src/icons/pause.svg
deleted file mode 100644
index 8ee3f2cfa..000000000
--- a/src/icons/pause.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>pause</title>
-  <path d="M6 5h4v14H6zm8 0h4v14h-4z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/play.svg b/src/icons/play.svg
deleted file mode 100644
index c44f1e466..000000000
--- a/src/icons/play.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>play</title>
-  <path d="M8 5v14l11-7z" />
-</svg>
\ No newline at end of file
diff --git a/src/icons/question.svg b/src/icons/question.svg
deleted file mode 100644
index c49bb4f0e..000000000
--- a/src/icons/question.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>question mark icon</title>
-  <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
-</svg>
diff --git a/src/icons/reddit.svg b/src/icons/reddit.svg
deleted file mode 100644
index ab3ce1b3a..000000000
--- a/src/icons/reddit.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>reddit icon</title>
-  <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
-</svg>
diff --git a/src/icons/repost.svg b/src/icons/repost.svg
deleted file mode 100644
index a8864b614..000000000
--- a/src/icons/repost.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>repost icon</title>
-  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
-</svg>
diff --git a/src/icons/search.svg b/src/icons/search.svg
deleted file mode 100644
index 8915b00a5..000000000
--- a/src/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>x.com</title><path d="M5.718 14.25a6.02 6.02 0 0 0 7.964.494l3.989 3.989a.75.75 0 0 0 1.06-1.06l-3.988-3.99a6.03 6.03 0 0 0-9.025-7.965 6.03 6.03 0 0 0 0 8.532m1.06-7.47a4.532 4.532 0 1 1-1.327 3.205A4.5 4.5 0 0 1 6.779 6.78Z"/></svg>
\ No newline at end of file
diff --git a/src/icons/sun.svg b/src/icons/sun.svg
deleted file mode 100644
index 78b1e186e..000000000
--- a/src/icons/sun.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title id="title2">sun icon</title>
-  <g transform="matrix(.66667 0 0 .66667 1.333 1.333)">
-    <path d="M32 14h-4.967c-2 1.769-.779 4 .967 4h4.967c1.999-1.769.779-4-.967-4"/>
-    <g fill="none" stroke-miterlimit="10">
-      <path d="M17.172 10.111a6 6 0 1 0 4.715 4.715 6.01 6.01 0 0 0-4.715-4.715"/>
-      <path fill="#040505" d="M15.999 14c-.599 0-1.161.265-1.544.726-.274.331-.568.896-.415 1.706.139.731.796 1.388 1.528 1.527q.219.04.43.041c.598 0 1.16-.265 1.542-.726.275-.331.57-.896.417-1.703-.139-.734-.796-1.391-1.529-1.53a2.3 2.3 0 0 0-.43-.041m0-4q.577 0 1.174.111c2.349.445 4.27 2.366 4.715 4.715A6.006 6.006 0 0 1 15.997 22q-.576 0-1.173-.111c-2.348-.445-4.27-2.366-4.714-4.714A6.005 6.005 0 0 1 15.999 10"/>
-    </g>
-    <rect width="8" height="4" fill="#040505" data-name="Rectangle 26" rx="1.993" transform="translate(26 14)"/>
-    <rect width="8" height="4" fill="#040505" data-name="Rectangle 27" rx="1.993" transform="rotate(90 -4 22)"/>
-    <rect width="8" height="4" fill="#040505" data-name="Rectangle 28" rx="1.993" transform="rotate(90 10 8)"/>
-    <rect width="8" height="4" fill="#040505" data-name="Rectangle 29" rx="1.993" transform="translate(-2 14)"/>
-    <rect width="6.925" height="3.766" fill="#040505" data-name="Rectangle 30" rx="1.883" transform="rotate(-45 18.994 -24.97)"/>
-    <rect width="3.766" height="6.925" fill="#040505" data-name="Rectangle 31" rx="1.883" transform="rotate(-45 42.86 -15.08)"/>
-    <rect width="3.766" height="6.925" fill="#040505" data-name="Rectangle 32" rx="1.883" transform="rotate(-45 5.297 .469)"/>
-    <rect width="6.925" height="3.766" fill="#040505" data-name="Rectangle 33" rx="1.883" transform="rotate(-45 34.55 12.586)"/>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/src/icons/table-of-contents.svg b/src/icons/table-of-contents.svg
deleted file mode 100644
index 5e07f6cc5..000000000
--- a/src/icons/table-of-contents.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>table of contents</title>
-  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12H3m13 6H3M16 6H3m18 6h.01M21 18h.01M21 6h.01"/>
-</svg>
\ No newline at end of file
diff --git a/src/icons/warning.svg b/src/icons/warning.svg
deleted file mode 100644
index b74904438..000000000
--- a/src/icons/warning.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>warning icon</title>
-  <path d="M12.884 2.532c-.346-.654-1.422-.654-1.768 0l-9 17c-.164.31-.154.684.027.983.181.301.506.485.857.485h18c.351 0 .676-.184.856-.484.182-.3.191-.674.027-.983L12.884 2.532zM13 18h-2v-2h2v2zm-2-4V9h2l.001 5H11z"/>
-</svg>
diff --git a/src/icons/x.svg b/src/icons/x.svg
deleted file mode 100644
index 373d69b42..000000000
--- a/src/icons/x.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <title>x.com</title>
-  <path class="xTile" d="M 5.5 2 C 3.567 2 2 3.567 2 5.5 L 2 19.5 C 2 21.433 3.567 23 5.5 23 L 19.5 23 C 21.433 23 23 21.433 23 19.5 L 23 5.5 C 23 3.567 21.433 2 19.5 2 L 5.5 2 z"/>
-  <path class="xGlyph" d="M 6.543 6.5 L 10.512 6.5 L 13.33 10.505 L 16.75 6.5 L 18 6.5 L 13.895 11.307 L 18.957 18.5 L 14.989 18.5 L 11.719 13.854 L 7.75 18.5 L 6.5 18.5 L 11.154 13.052 L 6.543 6.5 z"/>
-  <path class="xGlyph" d="M 8.457 7.5 L 15.511 17.5 L 17.043 17.5 L 9.989 7.5 L 8.457 7.5 z"/>
-</svg>
\ No newline at end of file
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index 182fe2b38..9994b8a43 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -15,6 +15,8 @@ import Toc from '@components/Toc/index.astro'
 
 /** Components made available for use in MDX */
 import Avatar from '@components/Avatar/index.astro'
+import Button from '@components/Button/index.astro'
+import Calendar from '@components/Calendar/index.astro'
 import Callout from '@components/Callout/index.astro'
 import Carousel from '@components/Carousel/index.astro'
 import Contact from '@components/CallToAction/Contact/index.astro'
@@ -34,6 +36,8 @@ import CodeTabs from '@components/Code/CodeTabs/index.astro'
 /** Export components for use in MDX */
 const Components = {
   Avatar,
+  Button,
+  Calendar,
   Callout,
   Carousel,
   Contact,
diff --git a/src/pages/contact/index.astro b/src/pages/contact/index.astro
index 13c76a79b..db525227b 100644
--- a/src/pages/contact/index.astro
+++ b/src/pages/contact/index.astro
@@ -65,7 +65,7 @@ const pageDescription = 'Connect with Webstack Builders to discuss your infrastr
     },
     form: {
       header: "Tell us about your infrastructure needs",
-      description: "We'll get back to you within 24 hours to discuss the right engagement for your situation.",
+      description: "I'll get back to you within 24 hours to discuss the right engagement for your situation.",
       formErrorMssg: "Please fix the errors in your message and hit the submit button again.",
       contact: {
         header: "Contact Information",
@@ -80,7 +80,7 @@ const pageDescription = 'Connect with Webstack Builders to discuss your infrastr
       },
       project: {
         header: "Engagement Details",
-        budget: "Monthly Budget Range *",
+        budget: "Monthly Budget Range",
         budgetOptions: [
           {
             text: "Select budget range",
@@ -112,9 +112,9 @@ const pageDescription = 'Connect with Webstack Builders to discuss your infrastr
           },
         ],
         budgetPlaceholder: "Your budget",
-        description: "Description *",
+        description: "Description*",
         descriptionPlaceholder: "Describe your infrastructure challenges, current stack, team size, and what you're hoping to accomplish...",
-        timeline: "Timeline *",
+        timeline: "Timeline",
         timelineOptions: [
           {
             text: "Select timeline",
diff --git a/src/pages/deepDives/[...slug].astro b/src/pages/deep-dive/[...slug].astro
similarity index 100%
rename from src/pages/deepDives/[...slug].astro
rename to src/pages/deep-dive/[...slug].astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1e21576d0..c5e007fc4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -84,12 +84,12 @@ const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:p
         {
           title: "Software Templates",
           description: "Scaffold new projects with CI/CD, tests, and cloud infra baked in from day one.",
-          icon: "clipboard",
+          icon: "clipboard-checked",
         },
         {
           title: "CI/CD & Cloud Migration",
           description: "Lift-and-shift or re-architect—either way, your pipelines will be rock solid.",
-          icon: "lightning-bolt",
+          icon: "lightning",
         },
         {
           title: "Observability Plug-ins",
diff --git a/src/pages/offline/index.astro b/src/pages/offline/index.astro
index d072ecbe8..9f7bc4bfc 100644
--- a/src/pages/offline/index.astro
+++ b/src/pages/offline/index.astro
@@ -34,7 +34,7 @@ const path = 'offline'
             {
               title: "Define Your Requirements",
               description: "Document your reliability targets, CI/CD pipeline needs, and developer enablement goals.",
-              icon: "clipboard",
+              icon: "clipboard-checked",
               color: "success",
               inverseColor: "success-inverse",
             },
diff --git a/src/pages/privacy/index.astro b/src/pages/privacy/index.astro
index 1324ef602..86af42535 100644
--- a/src/pages/privacy/index.astro
+++ b/src/pages/privacy/index.astro
@@ -98,7 +98,7 @@ const path = '/privacy'
               },
               {
                 text: "Project details and requirements you share with us",
-                icon: "clipboard",
+                icon: "clipboard-checked",
                 color: "text-green-600",
               },
               {
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index e524ff266..b853a8374 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -80,7 +80,7 @@
    */
 
    /** A color for use in page borders */
-  --theme-color-trim: #222;
+  --theme-color-trim: #f0f4ff;
 
   /** A color for use in primary page accent elements */
   --theme-color-spotlight: #facc15;
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 8f4a03b3c..f8aa0f9a1 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -80,7 +80,7 @@
    */
 
    /** A color for use in page borders */
-  --theme-color-trim: #f0f4ff;
+  --theme-color-trim: #4b5563;
 
   /** A color for use in primary page accent elements */
   --theme-color-spotlight: #facc15;