diff --git a/docs/vercel/src/Index.svelte b/docs/vercel/src/Index.svelte
index 6ed42c9b4..e7c8a3ee2 100644
--- a/docs/vercel/src/Index.svelte
+++ b/docs/vercel/src/Index.svelte
@@ -10,11 +10,12 @@
   let showMenu: boolean;
 
   const languages: Language[] = Object.entries(data as Languages).map(
-    ([name, { type, ascii, colors }]) => ({
+    ([name, { type, ascii, colors, icon }]) => ({
       name,
       type,
       ascii,
       colors,
+      icon,
     })
   );
 
@@ -30,6 +31,15 @@
     return languages.filter(({ type }) => $filter.checkboxes.includes(type));
   });
 
+  function escapeToUnicode(unicodeEscape: string): string {
+    if (unicodeEscape) {
+      let codePoint = parseInt(unicodeEscape.slice(3, -1), 16); // extract the relevent portion of the escape
+      return String.fromCodePoint(codePoint);
+    } else {
+      return '\u{25CF}';
+    }
+  }
+
   onMount(async () => {
     const response = await fetch(
       'https://api.github.com/repos/o2sh/onefetch/releases/latest'
@@ -102,7 +112,8 @@
       ansi={language.colors.ansi}
       hex={language.colors.hex}
       ascii={language.ascii}
-      chip={language.colors.chip} />
+      chipColor={language.colors.chip}
+      chipIcon={escapeToUnicode(language.icon)} />
   {/each}
 </main>
 
diff --git a/docs/vercel/src/components/AsciiPreview.svelte b/docs/vercel/src/components/AsciiPreview.svelte
index 8f9c236ed..bc9618f58 100644
--- a/docs/vercel/src/components/AsciiPreview.svelte
+++ b/docs/vercel/src/components/AsciiPreview.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { mapToDefaultTerminalFgColor } from '../lib/utils';
-  import Chip from './Chip.svelte';
   import TitleLink from './TitleLink.svelte';
 
   export let name: string;
   export let ansi: string[];
   export let hex: string[] | null = null;
-  export let chip: string;
+  export let chipColor: string;
   export let ascii: string = '';
+  export let chipIcon: string;
 
   let dark = true;
   let trueColor = hex != null;
@@ -32,7 +32,7 @@
 
 <div class="title-row">
   <div class="language-name">
-    <Chip id={name} color={chip} width={24} height={24} />
+    <h3 class="nerd-font" style="color: {chipColor}">{chipIcon}</h3>
     <TitleLink {name} />
   </div>
   <div class="checkbox">
@@ -54,6 +54,8 @@
 </div>
 
 <style>
+  @import url('https://www.nerdfonts.com/assets/css/webfont.css');
+
   .logo-container {
     display: flex;
     justify-content: center;
diff --git a/docs/vercel/src/components/Chip.svelte b/docs/vercel/src/components/Chip.svelte
deleted file mode 100644
index 5d4caf5e1..000000000
--- a/docs/vercel/src/components/Chip.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-  export let id: string;
-  export let color: string;
-  export let width: number;
-  export let height: number;
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  class="chip"
-  viewBox="0 0 100 100"
-  {id}
-  {width}
-  {height}
-  fill={color}
-  stroke="black"
-  stroke-width="5">
-  <circle cx="50" cy="50" r="45" />
-</svg>
diff --git a/docs/vercel/src/yaml.d.ts b/docs/vercel/src/yaml.d.ts
index f9e7d7c57..cda6d3eb4 100644
--- a/docs/vercel/src/yaml.d.ts
+++ b/docs/vercel/src/yaml.d.ts
@@ -10,6 +10,7 @@ declare module '*/languages.yaml' {
     type: string;
     ascii: string;
     colors: LanguageColors;
+    icon: string;
   }
 
   export type Languages = Record<string, Language>;