diff --git a/index.html b/index.html
index f9d2373..097de59 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,11 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css"
+      fetchpriority="low"
+    />
   </head>
   <body>
     <noscript>
diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts
index b51d1ee..0589909 100644
--- a/src/hooks/useMarkdown.hook.ts
+++ b/src/hooks/useMarkdown.hook.ts
@@ -9,6 +9,7 @@ import { Ref, toValue } from "vue"
 
 import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
 import { html5Media } from "@/utils/markdown/markdown-html5-media"
+import { markdownItTablerIcons } from "@/utils/markdown/markdown-it-tabler-icons"
 import mermaid from "mermaid"
 import type Token from "markdown-it/lib/token.mjs"
 import Renderer, { type RenderRuleRecord } from "markdown-it/lib/renderer.mjs"
@@ -62,6 +63,7 @@ const md = new MarkdownIt({
     width: "100%",
   })
   .use(MarkdownItGitHubAlerts)
+  .use(markdownItTablerIcons)
 
 let shikijiInitialized = false
 
diff --git a/src/utils/markdown/markdown-it-tabler-icons.ts b/src/utils/markdown/markdown-it-tabler-icons.ts
new file mode 100644
index 0000000..b6574cd
--- /dev/null
+++ b/src/utils/markdown/markdown-it-tabler-icons.ts
@@ -0,0 +1,10 @@
+import { markdownItPlugin } from "./markdown-it-regexp"
+
+// Matches :icon-name: where icon-name is letters, digits, hyphens
+export const markdownItTablerIcons = markdownItPlugin(
+  /:([\w-]+):/,
+  (match) => {
+    const name = match[0][1]
+    return `<i class="ti ti-${name}"></i>`
+  },
+)
