From 3f0a82fdc292c40495c026db93a3c78a42efff6c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 16 Dec 2025 19:41:38 -0800
Subject: [PATCH] Switch from xlink:href to href on SVG use

---
 site/src/assets/examples/badges/index.astro   | 22 ++++----
 site/src/assets/examples/blog-rtl/index.astro |  4 +-
 site/src/assets/examples/blog/index.astro     |  4 +-
 .../assets/examples/breadcrumbs/index.astro   |  6 +--
 site/src/assets/examples/buttons/index.astro  | 12 ++---
 .../assets/examples/dashboard-rtl/index.astro | 32 +++++------
 .../src/assets/examples/dashboard/index.astro | 32 +++++------
 site/src/assets/examples/dialogs/index.astro  | 12 ++---
 .../src/assets/examples/dropdowns/index.astro | 44 +++++++--------
 site/src/assets/examples/features/index.astro | 54 +++++++++----------
 site/src/assets/examples/footers/index.astro  | 14 ++---
 site/src/assets/examples/headers/index.astro  | 24 ++++-----
 .../assets/examples/jumbotrons/index.astro    |  6 +--
 .../assets/examples/list-groups/index.astro   |  8 +--
 site/src/assets/examples/pricing/index.astro  | 26 ++++-----
 site/src/assets/examples/product/index.astro  | 10 ++--
 site/src/assets/examples/sidebars/index.astro | 40 +++++++-------
 .../examples/starter-template/index.astro     | 20 +++----
 site/src/components/DocsSidebar.astro         |  2 +-
 site/src/components/header/Navigation.astro   |  2 +-
 site/src/components/header/Versions.astro     |  2 +-
 site/src/components/home/CSSVariables.astro   |  4 +-
 .../components/home/ComponentUtilities.astro  | 10 ++--
 site/src/components/home/Customize.astro      |  4 +-
 site/src/components/home/GetStarted.astro     |  8 +--
 site/src/components/home/Icons.astro          |  2 +-
 site/src/components/home/MastHead.astro       |  4 +-
 site/src/components/home/Plugins.astro        |  4 +-
 .../shortcodes/ButtonPlayground.astro         | 12 ++---
 site/src/components/shortcodes/Code.astro     |  6 +--
 site/src/components/shortcodes/JsDocs.astro   |  2 +-
 site/src/components/shortcodes/ScssDocs.astro |  2 +-
 site/src/content/docs/components/alerts.mdx   |  8 +--
 site/src/layouts/DocsLayout.astro             |  2 +-
 site/src/layouts/partials/ExamplesMain.astro  |  4 +-
 .../pages/docs/[version]/examples/index.astro |  2 +-
 36 files changed, 225 insertions(+), 225 deletions(-)
diff --git a/site/src/assets/examples/badges/index.astro b/site/src/assets/examples/badges/index.astro
index 7e778066d4..182e3cdcf3 100644
--- a/site/src/assets/examples/badges/index.astro
+++ b/site/src/assets/examples/badges/index.astro
@@ -80,15 +80,15 @@ export const extra_css = ['badges.css']
 <div class="d-flex gap-2 justify-content-center py-5">
   <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
     <span class="px-1">Primary 1</span>
-    <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
     <span class="px-1">Primary 2</span>
-    <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
     <span class="px-1">Primary 3</span>
-    <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
 </div>
 
@@ -99,48 +99,48 @@ export const extra_css = ['badges.css']
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Primary
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Secondary
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Success
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Danger
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Warning
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Info
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Light
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
   <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
     <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
     Dark
     <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
   </span>
 </div>
diff --git a/site/src/assets/examples/blog-rtl/index.astro b/site/src/assets/examples/blog-rtl/index.astro
index 8553c0f2c9..2d01be019e 100644
--- a/site/src/assets/examples/blog-rtl/index.astro
+++ b/site/src/assets/examples/blog-rtl/index.astro
@@ -73,7 +73,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <p class="card-text mb-auto">ÙØ°Ù Ø¨Ø·Ø§ÙØ© Ø£ÙØ³Ø¹ ÙØ¹ ÙØµ Ø¯Ø§Ø¹Ù Ø£Ø¯ÙØ§Ù ÙÙÙØ¯ÙØ© Ø·Ø¨ÙØ¹ÙØ© ÙÙØ­ØªÙÙ Ø¥Ø¶Ø§ÙÙ.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Ø£ÙÙÙ Ø§ÙÙØ±Ø§Ø¡Ø©
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
@@ -90,7 +90,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <p class="mb-auto">ÙØ°Ù Ø¨Ø·Ø§ÙØ© Ø£ÙØ³Ø¹ ÙØ¹ ÙØµ Ø¯Ø§Ø¹Ù Ø£Ø¯ÙØ§Ù ÙÙÙØ¯ÙØ© Ø·Ø¨ÙØ¹ÙØ© ÙÙØ­ØªÙÙ Ø¥Ø¶Ø§ÙÙ.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Ø£ÙÙÙ Ø§ÙÙØ±Ø§Ø¡Ø©
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index 35894b5286..0ed4da0109 100644
--- a/site/src/assets/examples/blog/index.astro
+++ b/site/src/assets/examples/blog/index.astro
@@ -72,7 +72,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
@@ -89,7 +89,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
             Continue reading
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
           </a>
         </div>
         <div class="col-auto d-none d-lg-block">
diff --git a/site/src/assets/examples/breadcrumbs/index.astro b/site/src/assets/examples/breadcrumbs/index.astro
index 78a5d73b91..3978e8fdbf 100644
--- a/site/src/assets/examples/breadcrumbs/index.astro
+++ b/site/src/assets/examples/breadcrumbs/index.astro
@@ -26,7 +26,7 @@ export const extra_css = ['breadcrumbs.css']
     <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
@@ -47,7 +47,7 @@ export const extra_css = ['breadcrumbs.css']
     <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
@@ -68,7 +68,7 @@ export const extra_css = ['breadcrumbs.css']
     <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
       <li class="breadcrumb-item">
         <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           Home
         </a>
       </li>
diff --git a/site/src/assets/examples/buttons/index.astro b/site/src/assets/examples/buttons/index.astro
index f99b7b53bd..a1dbfc6d74 100644
--- a/site/src/assets/examples/buttons/index.astro
+++ b/site/src/assets/examples/buttons/index.astro
@@ -38,11 +38,11 @@ export const title = 'Buttons'
 <div class="d-flex gap-2 justify-content-center py-5">
   <button class="btn btn-primary d-inline-flex align-items-center" type="button">
     Primary icon
-    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
   </button>
   <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
     Secondary icon
-    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
   </button>
 </div>
 
@@ -63,22 +63,22 @@ export const title = 'Buttons'
 
 <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
   <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
   <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
 </div>
 
 <div class="d-flex gap-2 justify-content-center pb-5">
   <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
   <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#x-lg"/></svg>
     <span class="visually-hidden">Dismiss</span>
   </button>
 </div>
diff --git a/site/src/assets/examples/dashboard-rtl/index.astro b/site/src/assets/examples/dashboard-rtl/index.astro
index 5557e7b4d7..e87d95c304 100644
--- a/site/src/assets/examples/dashboard-rtl/index.astro
+++ b/site/src/assets/examples/dashboard-rtl/index.astro
@@ -64,12 +64,12 @@ export const extra_js = [
   <ul class="navbar-nav flex-row d-md-none">
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="ØªØ¨Ø¯ÙÙ Ø§ÙØ¨Ø­Ø«">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
+        <svg class="bi" aria-hidden="true"><use href="#search"/></svg>
       </button>
     </li>
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="ØªØ¨Ø¯ÙÙ Ø§ÙØªÙÙÙ">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
+        <svg class="bi" aria-hidden="true"><use href="#list"/></svg>
       </button>
     </li>
   </ul>
@@ -91,37 +91,37 @@ export const extra_js = [
           <ul class="nav flex-column">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#house-fill"/></svg>
                 ÙÙØ­Ø© Ø§ÙÙÙØ§Ø¯Ø©
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark"/></svg>
                 Ø§ÙØ·ÙØ¨Ø§Øª
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#cart"/></svg>
                 Ø§ÙÙÙØªØ¬Ø§Øª
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#people"/></svg>
                 Ø§ÙØ²Ø¨Ø§Ø¦Ù
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#graph-up"/></svg>
                 Ø§ÙØªÙØ§Ø±ÙØ±
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#puzzle"/></svg>
                 Ø§ÙØªÙØ§ÙÙØ§Øª
               </a>
             </li>
@@ -130,31 +130,31 @@ export const extra_js = [
           <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
             <span>Ø§ÙØªÙØ§Ø±ÙØ± Ø§ÙÙØ­ÙÙØ¸Ø©</span>
             <a class="link-secondary" href="#" aria-label="Ø¥Ø¶Ø§ÙØ© ØªÙØ±ÙØ± Ø¬Ø¯ÙØ¯">
-              <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+              <svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
             </a>
           </h6>
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Ø§ÙØ´ÙØ± Ø§ÙØ­Ø§ÙÙ
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Ø§ÙØ±Ø¨Ø¹ Ø§ÙØ£Ø®ÙØ±
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Ø§ÙØªÙØ§Ø¹Ù Ø§ÙØ¥Ø¬ØªÙØ§Ø¹Ù
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 ÙØ¨ÙØ¹Ø§Øª ÙÙØ§ÙØ© Ø§ÙØ¹Ø§Ù
               </a>
             </li>
@@ -165,13 +165,13 @@ export const extra_js = [
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#gear-wide-connected"/></svg>
                 Ø¥Ø¹Ø¯Ø§Ø¯Ø§Øª
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#door-closed"/></svg>
                 Ø®Ø±ÙØ¬
               </a>
             </li>
@@ -189,7 +189,7 @@ export const extra_js = [
             <button type="button" class="btn btn-sm btn-outline-secondary">ØªØµØ¯ÙØ±</button>
           </div>
           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
-            <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#calendar3"/></svg>
             ÙØ°Ø§ Ø§ÙØ£Ø³Ø¨ÙØ¹
           </button>
         </div>
diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 4d33c7fb83..d0f531659a 100644
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -63,12 +63,12 @@ export const extra_js = [
   <ul class="navbar-nav flex-row d-md-none">
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
+        <svg class="bi" aria-hidden="true"><use href="#search"/></svg>
       </button>
     </li>
     <li class="nav-item text-nowrap">
       <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
+        <svg class="bi" aria-hidden="true"><use href="#list"/></svg>
       </button>
     </li>
   </ul>
@@ -90,37 +90,37 @@ export const extra_js = [
           <ul class="nav flex-column">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#house-fill"/></svg>
                 Dashboard
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark"/></svg>
                 Orders
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#cart"/></svg>
                 Products
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#people"/></svg>
                 Customers
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#graph-up"/></svg>
                 Reports
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#puzzle"/></svg>
                 Integrations
               </a>
             </li>
@@ -129,31 +129,31 @@ export const extra_js = [
           <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
             <span>Saved reports</span>
             <a class="link-secondary" href="#" aria-label="Add a new report">
-              <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+              <svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
             </a>
           </h6>
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Current month
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Last quarter
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Social engagement
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#file-earmark-text"/></svg>
                 Year-end sale
               </a>
             </li>
@@ -164,13 +164,13 @@ export const extra_js = [
           <ul class="nav flex-column mb-auto">
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#gear-wide-connected"/></svg>
                 Settings
               </a>
             </li>
             <li class="nav-item">
               <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+                <svg class="bi" aria-hidden="true"><use href="#door-closed"/></svg>
                 Sign out
               </a>
             </li>
@@ -188,7 +188,7 @@ export const extra_js = [
             <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
           </div>
           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
-            <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+            <svg class="bi" aria-hidden="true"><use href="#calendar3"/></svg>
             This week
           </button>
         </div>
diff --git a/site/src/assets/examples/dialogs/index.astro b/site/src/assets/examples/dialogs/index.astro
index cd88884a96..245dfe57d0 100644
--- a/site/src/assets/examples/dialogs/index.astro
+++ b/site/src/assets/examples/dialogs/index.astro
@@ -69,21 +69,21 @@ export const extra_css = ['dialogs.css']
     <div class="dialog-body">
       <ul class="list-unstyled mb-0">
         <li class="d-flex gap-3 mb-3">
-          <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
+          <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use href="#grid-fill"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Grid view</h6>
             <p class="mb-0 text-body-secondary">Not into lists? Try the new grid view.</p>
           </div>
         </li>
         <li class="d-flex gap-3 mb-3">
-          <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
+          <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use href="#bookmark-star"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Bookmarks</h6>
             <p class="mb-0 text-body-secondary">Save items you love for easy access later.</p>
           </div>
         </li>
         <li class="d-flex gap-3">
-          <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
+          <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use href="#film"/></svg>
           <div>
             <h6 class="mb-1 fw-bold">Video embeds</h6>
             <p class="mb-0 text-body-secondary">Share videos wherever you go.</p>
@@ -121,15 +121,15 @@ export const extra_css = ['dialogs.css']
         <hr class="my-4">
         <h6 class="fw-bold mb-3">Or use a third-party</h6>
         <button type="button" class="btn btn-outline theme-inverse w-100 py-2 mb-2">
-          <svg class="bi" width="16" height="16"><use xlink:href="#google"/></svg>
+          <svg class="bi" width="16" height="16"><use href="#google"/></svg>
           Sign up with Google
         </button>
         <button type="button" class="btn btn-outline theme-facebook w-100 py-2 mb-2">
-          <svg class="bi" width="16" height="16" fill="currentColor"><use xlink:href="#facebook"/></svg>
+          <svg class="bi" width="16" height="16" fill="currentColor"><use href="#facebook"/></svg>
           Sign up with Facebook
         </button>
         <button type="button" class="btn btn-outline theme-success w-100 py-2">
-          <svg class="bi" width="16" height="16"><use xlink:href="#github"/></svg>
+          <svg class="bi" width="16" height="16"><use href="#github"/></svg>
           Sign up with GitHub
         </button>
       </form>
diff --git a/site/src/assets/examples/dropdowns/index.astro b/site/src/assets/examples/dropdowns/index.astro
index 812109e416..a3e5ff4290 100644
--- a/site/src/assets/examples/dropdowns/index.astro
+++ b/site/src/assets/examples/dropdowns/index.astro
@@ -121,38 +121,38 @@ export const extra_css = ['dropdowns.css']
   <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#files"/></svg>
         Documents
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#image-fill"/></svg>
         Photos
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#film"/></svg>
         Movies
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#music-note-beamed"/></svg>
         Music
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#joystick"/></svg>
         Games
       </a>
     </li>
     <li><hr class="dropdown-divider"></li>
     <li>
       <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#trash"/></svg>
         Trash
       </a>
     </li>
@@ -160,38 +160,38 @@ export const extra_css = ['dropdowns.css']
   <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#files"/></svg>
         Documents
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#image-fill"/></svg>
         Photos
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#film"/></svg>
         Movies
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#music-note-beamed"/></svg>
         Music
       </a>
     </li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#joystick"/></svg>
         Games
       </a>
     </li>
     <li><hr class="dropdown-divider"></li>
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
+        <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#trash"/></svg>
         Trash
       </a>
     </li>
@@ -206,7 +206,7 @@ export const extra_css = ['dropdowns.css']
       <div class="cal">
         <div class="cal-month">
           <button class="btn cal-btn" type="button" aria-label="previous month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
           <select class="form-select cal-month-name d-none">
@@ -224,7 +224,7 @@ export const extra_css = ['dropdowns.css']
             <option value="December">December</option>
           </select>
           <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
           </button>
         </div>
         <div class="cal-weekdays text-body-secondary">
@@ -285,7 +285,7 @@ export const extra_css = ['dropdowns.css']
       <div class="cal">
         <div class="cal-month">
           <button class="btn cal-btn" type="button" aria-label="previous month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
           <select class="form-select cal-month-name d-none">
@@ -303,7 +303,7 @@ export const extra_css = ['dropdowns.css']
             <option value="December">December</option>
           </select>
           <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+            <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
           </button>
         </div>
         <div class="cal-weekdays text-body-secondary">
@@ -368,7 +368,7 @@ export const extra_css = ['dropdowns.css']
       <ul class="list-unstyled d-flex flex-column gap-2">
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#image-fill"/></svg>
             <div>
               <strong class="d-block">Main product</strong>
               <small>Take a tour through the product</small>
@@ -377,7 +377,7 @@ export const extra_css = ['dropdowns.css']
         </li>
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#music-note-beamed"/></svg>
             <div>
               <strong class="d-block">Another product</strong>
               <small>Explore this other product we offer</small>
@@ -386,7 +386,7 @@ export const extra_css = ['dropdowns.css']
         </li>
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#question-circle"/></svg>
             <div>
               <strong class="d-block">Support</strong>
               <small>Get help from our support crew</small>
@@ -415,7 +415,7 @@ export const extra_css = ['dropdowns.css']
       <ul class="list-unstyled d-flex flex-column gap-2">
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#image-fill"/></svg>
             <div>
               <strong class="d-block">Main product</strong>
               <small>Take a tour through the product</small>
@@ -424,7 +424,7 @@ export const extra_css = ['dropdowns.css']
         </li>
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#music-note-beamed"/></svg>
             <div>
               <strong class="d-block">Another product</strong>
               <small>Explore this other product we offer</small>
@@ -433,7 +433,7 @@ export const extra_css = ['dropdowns.css']
         </li>
         <li>
           <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#question-circle"/></svg>
             <div>
               <strong class="d-block">Support</strong>
               <small>Get help from our support crew</small>
diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro
index 7a3a7640d6..5eecc49b45 100644
--- a/site/src/assets/examples/features/index.astro
+++ b/site/src/assets/examples/features/index.astro
@@ -63,35 +63,35 @@ export const extra_css = ['features.css']
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="feature col">
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
         <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="icon-link">
           Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
         </a>
       </div>
     </div>
@@ -104,7 +104,7 @@ export const extra_css = ['features.css']
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="col d-flex align-items-start">
         <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
         <div>
           <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -116,7 +116,7 @@ export const extra_css = ['features.css']
       </div>
       <div class="col d-flex align-items-start">
         <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         </div>
         <div>
           <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -128,7 +128,7 @@ export const extra_css = ['features.css']
       </div>
       <div class="col d-flex align-items-start">
         <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
+          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#tools"/></svg>
         </div>
         <div>
           <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -156,11 +156,11 @@ export const extra_css = ['features.css']
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
               </li>
               <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
                 <small>Earth</small>
               </li>
               <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use href="#calendar3"/></svg>
                 <small>3d</small>
               </li>
             </ul>
@@ -177,11 +177,11 @@ export const extra_css = ['features.css']
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
               </li>
               <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
                 <small>Pakistan</small>
               </li>
               <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use href="#calendar3"/></svg>
                 <small>4d</small>
               </li>
             </ul>
@@ -198,11 +198,11 @@ export const extra_css = ['features.css']
                 <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
               </li>
               <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use href="#geo-fill"/></svg>
                 <small>California</small>
               </li>
               <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use href="#calendar3"/></svg>
                 <small>5d</small>
               </li>
             </ul>
@@ -219,56 +219,56 @@ export const extra_css = ['features.css']
 
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
         <div>
           <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
           <p>Paragraph of text beneath the heading to explain the heading.</p>
@@ -294,7 +294,7 @@ export const extra_css = ['features.css']
           <div class="col d-flex flex-column gap-2">
             <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
-                <use xlink:href="#collection" />
+                <use href="#collection" />
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
@@ -304,7 +304,7 @@ export const extra_css = ['features.css']
           <div class="col d-flex flex-column gap-2">
             <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
-                <use xlink:href="#gear-fill" />
+                <use href="#gear-fill" />
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
@@ -314,7 +314,7 @@ export const extra_css = ['features.css']
           <div class="col d-flex flex-column gap-2">
             <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
-                <use xlink:href="#speedometer" />
+                <use href="#speedometer" />
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
@@ -324,7 +324,7 @@ export const extra_css = ['features.css']
           <div class="col d-flex flex-column gap-2">
             <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
-                <use xlink:href="#table" />
+                <use href="#table" />
               </svg>
             </div>
             <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
diff --git a/site/src/assets/examples/footers/index.astro b/site/src/assets/examples/footers/index.astro
index 9aaaa9f688..aed5b1773a 100644
--- a/site/src/assets/examples/footers/index.astro
+++ b/site/src/assets/examples/footers/index.astro
@@ -20,7 +20,7 @@ export const title = 'Footers'
     <p class="col-md-4 mb-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</p>
 
     <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
-      <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
     </a>
 
     <ul class="nav col-md-4 justify-content-end">
@@ -39,14 +39,14 @@ export const title = 'Footers'
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <div class="col-md-4 d-flex align-items-center">
       <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
-        <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       </a>
       <span class="mb-3 mb-md-0 text-body-secondary">&copy; {new Date().getFullYear()} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use href="#facebook"/></svg></a></li>
     </ul>
   </footer>
 </div>
@@ -72,7 +72,7 @@ export const title = 'Footers'
   <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
     <div class="col mb-3">
       <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       </a>
       <p class="text-body-secondary">&copy; {new Date().getFullYear()}</p>
     </div>
@@ -171,8 +171,8 @@ export const title = 'Footers'
     <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#facebook"/></svg></a></li>
       </ul>
     </div>
   </footer>
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index a233ae9039..a34f2b0262 100644
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -33,7 +33,7 @@ export const extra_css = ['headers.css']
   <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         <span class="fs-4">Simple header</span>
       </a>
 
@@ -67,7 +67,7 @@ export const extra_css = ['headers.css']
     <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
       <div class="col-md-3 mb-2 mb-md-0">
         <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
-          <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
       </div>
 
@@ -92,7 +92,7 @@ export const extra_css = ['headers.css']
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
-          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@@ -121,7 +121,7 @@ export const extra_css = ['headers.css']
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
-          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@@ -157,7 +157,7 @@ export const extra_css = ['headers.css']
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div class="dropdown">
         <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
-          <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+          <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         </a>
         <ul class="dropdown-menu text-small shadow">
           <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
@@ -222,7 +222,7 @@ export const extra_css = ['headers.css']
   <header class="py-3 mb-4 border-bottom">
     <div class="container d-flex flex-wrap justify-content-center">
       <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         <span class="fs-4">Double header</span>
       </a>
       <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
@@ -238,37 +238,37 @@ export const extra_css = ['headers.css']
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
           <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
-            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
           </a>
 
           <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
             <li>
               <a href="#" class="nav-link text-secondary">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#home"/></svg>
                 Home
               </a>
             </li>
             <li>
               <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
                 Dashboard
               </a>
             </li>
             <li>
               <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
                 Orders
               </a>
             </li>
             <li>
               <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
                 Products
               </a>
             </li>
             <li>
               <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
                 Customers
               </a>
             </li>
diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro
index 587e793024..2f7781d49b 100644
--- a/site/src/assets/examples/jumbotrons/index.astro
+++ b/site/src/assets/examples/jumbotrons/index.astro
@@ -19,7 +19,7 @@ export const extra_css = ['jumbotrons.css']
 
 <div class="container my-5">
   <div class="p-5 text-center bg-body-tertiary rounded-3">
-    <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+    <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use href="#bootstrap"/></svg>
     <h1 class="text-body-emphasis">Jumbotron with icon</h1>
     <p class="col-lg-8 mx-auto fs-5 text-muted">
       This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
@@ -27,7 +27,7 @@ export const extra_css = ['jumbotrons.css']
     <div class="d-inline-flex gap-2 mb-5">
       <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
         Call to action
-        <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+        <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use href="#arrow-right-short"/></svg>
       </button>
       <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
         Secondary link
@@ -41,7 +41,7 @@ export const extra_css = ['jumbotrons.css']
 <div class="container my-5">
   <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
     <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
-    <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
+    <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use href="#check2-circle"/></svg>
     <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
     <p class="col-lg-6 mx-auto mb-4">
       This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
diff --git a/site/src/assets/examples/list-groups/index.astro b/site/src/assets/examples/list-groups/index.astro
index 220678f07e..420a0e0466 100644
--- a/site/src/assets/examples/list-groups/index.astro
+++ b/site/src/assets/examples/list-groups/index.astro
@@ -115,7 +115,7 @@ export const extra_css = ['list-groups.css']
       <span class="pt-1 form-checked-content">
         <strong>Finish sales report</strong>
         <small class="d-block text-body-secondary">
-          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
+          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
           1:00â2:00pm
         </small>
       </span>
@@ -125,7 +125,7 @@ export const extra_css = ['list-groups.css']
       <span class="pt-1 form-checked-content">
         <strong>Weekly All Hands</strong>
         <small class="d-block text-body-secondary">
-          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
+          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
           2:00â2:30pm
         </small>
       </span>
@@ -135,7 +135,7 @@ export const extra_css = ['list-groups.css']
       <span class="pt-1 form-checked-content">
         <strong>Out of office</strong>
         <small class="d-block text-body-secondary">
-          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
+          <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use href="#alarm"/></svg>
           Tomorrow
         </small>
       </span>
@@ -145,7 +145,7 @@ export const extra_css = ['list-groups.css']
       <span class="pt-1 form-checked-content">
         <span contenteditable="true" class="w-100">Add new task...</span>
         <small class="d-block text-body-secondary">
-          <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
+          <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use href="#list-check"/></svg>
           Choose list...
         </small>
       </span>
diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index e51668fceb..be7326b77f 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -104,42 +104,42 @@ export const extra_css = ['pricing.css']
         <tbody>
           <tr>
             <th scope="row" class="text-start">Public</th>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
           <tr>
             <th scope="row" class="text-start">Private</th>
             <td></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
         </tbody>
 
         <tbody>
           <tr>
             <th scope="row" class="text-start">Permissions</th>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
           <tr>
             <th scope="row" class="text-start">Sharing</th>
             <td></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
           <tr>
             <th scope="row" class="text-start">Unlimited members</th>
             <td></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
           <tr>
             <th scope="row" class="text-start">Extra security</th>
             <td></td>
             <td></td>
-            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use href="#check"/></svg></td>
           </tr>
         </tbody>
       </table>
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index 7c98d11a18..8fbf4a0c33 100644
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -19,7 +19,7 @@ export const extra_css = ['product.css']
 <nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
   <div class="container">
     <a class="navbar-brand d-md-none" href="#">
-      <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
+      <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#aperture"/></svg>
       Aperture
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
@@ -33,7 +33,7 @@ export const extra_css = ['product.css']
       <div class="offcanvas-body">
         <ul class="navbar-nav flex-grow-1 justify-content-between">
           <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#aperture"/></svg>
           </a></li>
           <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
@@ -42,7 +42,7 @@ export const extra_css = ['product.css']
           <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
           <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
           <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
+            <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#cart"/></svg>
           </a></li>
         </ul>
       </div>
@@ -58,11 +58,11 @@ export const extra_css = ['product.css']
       <div class="d-flex gap-3 justify-content-center lead fw-normal">
         <a class="icon-link" href="#">
           Learn more
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
         </a>
         <a class="icon-link" href="#">
           Buy
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi" aria-hidden="true"><use href="#chevron-right"/></svg>
         </a>
       </div>
     </div>
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index de67a80b68..1e493634aa 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -33,38 +33,38 @@ export const extra_js = [{src: 'sidebars.js'}]
 
   <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
-      <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
           Home
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
           Customers
         </a>
       </li>
@@ -89,38 +89,38 @@ export const extra_js = [{src: 'sidebars.js'}]
 
   <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-      <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
           Home
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-body-emphasis">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-body-emphasis">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-body-emphasis">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-body-emphasis">
-          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
           Customers
         </a>
       </li>
@@ -145,33 +145,33 @@ export const extra_js = [{src: 'sidebars.js'}]
 
   <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
     <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
-      <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
         <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use href="#home"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use href="#speedometer2"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use href="#table"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use href="#grid"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use href="#people-circle"/></svg>
         </a>
       </li>
     </ul>
@@ -193,7 +193,7 @@ export const extra_js = [{src: 'sidebars.js'}]
 
   <div class="flex-shrink-0 p-3" style="width: 280px;">
     <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
-      <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">Collapsible</span>
     </a>
     <ul class="list-unstyled ps-0">
@@ -256,7 +256,7 @@ export const extra_js = [{src: 'sidebars.js'}]
 
   <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
-      <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
     </a>
     <div class="list-group list-group-flush border-bottom scrollarea">
diff --git a/site/src/assets/examples/starter-template/index.astro b/site/src/assets/examples/starter-template/index.astro
index af09274d0a..8b2ef1045f 100644
--- a/site/src/assets/examples/starter-template/index.astro
+++ b/site/src/assets/examples/starter-template/index.astro
@@ -17,7 +17,7 @@ export const title = 'Starter Template'
 <div class="col-lg-8 mx-auto p-4 py-md-5">
   <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
     <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
-      <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
       <span class="fs-4">Starter template</span>
     </a>
   </header>
@@ -39,25 +39,25 @@ export const title = 'Starter Template'
         <ul class="list-unstyled ps-0">
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap npm starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Parcel starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Vite starter
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Webpack starter
             </a>
           </li>
@@ -70,31 +70,31 @@ export const title = 'Starter Template'
         <ul class="list-unstyled ps-0">
           <li>
             <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/introduction')}>
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap quick start guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/webpack')}>
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Webpack guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/parcel')}>
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Parcel guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/vite')}>
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Bootstrap Vite guide
             </a>
           </li>
           <li>
             <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/contribute')}>
-              <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
+              <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-circle"/></svg>
               Contributing to Bootstrap
             </a>
           </li>
diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index f3ea5fa460..1a9fdade33 100644
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -23,7 +23,7 @@ const sidebar = getData('sidebar')
                     style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`}
                     aria-hidden="true"
                   >
-                    <use xlink:href={`#${group.icon}`} />
+                    <use href={`#${group.icon}`} />
                   </svg>
                 )}
                 {group.title}
diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro
index 6c6df6b19a..cec0a744e6 100644
--- a/site/src/components/header/Navigation.astro
+++ b/site/src/components/header/Navigation.astro
@@ -57,7 +57,7 @@ const { addedIn, layout, title } = Astro.props
         aria-controls="bdNavbar"
         aria-label="Toggle navigation"
       >
-        <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#three-dots"></use></svg>
       </button>
     </div>
 
diff --git a/site/src/components/header/Versions.astro b/site/src/components/header/Versions.astro
index df06eaa0a2..b93bfa8f4f 100644
--- a/site/src/components/header/Versions.astro
+++ b/site/src/components/header/Versions.astro
@@ -50,7 +50,7 @@ const addedIn53 = addedIn?.version === '5.3'
         href={isHome ? '/' : `/docs/${getConfig().docs_version}/${versionsLink}`}
       >
         Latest ({getConfig().docs_version}.x)
-        <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#check2"></use></svg>
       </a>
     </li>
     <li>
diff --git a/site/src/components/home/CSSVariables.astro b/site/src/components/home/CSSVariables.astro
index 92dad9dd2e..39bce95d3e 100644
--- a/site/src/components/home/CSSVariables.astro
+++ b/site/src/components/home/CSSVariables.astro
@@ -6,7 +6,7 @@ import Code from '@shortcodes/Code.astro'
 <section class="row g-md-5 pb-md-5 mb-5 align-items-center">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use href="#braces"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-normal">
@@ -19,7 +19,7 @@ import Code from '@shortcodes/Code.astro'
     <p class="d-flex flex-column lead fw-normal mb-0">
       <a href={getVersionedDocsPath('customize/css-variables')} class="icon-link icon-link-hover fw-semibold mb-3">
         Learn more about CSS variables
-        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/src/components/home/ComponentUtilities.astro b/site/src/components/home/ComponentUtilities.astro
index 8571627f03..8bf43b428f 100644
--- a/site/src/components/home/ComponentUtilities.astro
+++ b/site/src/components/home/ComponentUtilities.astro
@@ -6,11 +6,11 @@ import Code from '@shortcodes/Code.astro'
 <section class="pb-md-5 mb-5">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use href="#menu-button-wide-fill"></use></svg>
     </div>
-    <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
+    <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use href="#plus"></use></svg>
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use href="#braces-asterisk"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
     <p class="lead fw-normal">
@@ -121,7 +121,7 @@ import Code from '@shortcodes/Code.astro'
       <p class="d-flex mb-md-0">
         <a href={getVersionedDocsPath('examples/#snippets')} class="icon-link icon-link-hover fw-semibold">
           Explore customized components
-          <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+          <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
         </a>
       </p>
     </div>
@@ -150,7 +150,7 @@ $utilities: map-merge(
       <p class="d-flex mb-md-0">
         <a href={getVersionedDocsPath('utilities/api/')} class="icon-link icon-link-hover fw-semibold mb-3">
           Explore the utility API
-          <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+          <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
         </a>
       </p>
     </div>
diff --git a/site/src/components/home/Customize.astro b/site/src/components/home/Customize.astro
index 7422c517c6..ca5d0598fd 100644
--- a/site/src/components/home/Customize.astro
+++ b/site/src/components/home/Customize.astro
@@ -5,7 +5,7 @@ import Code from '@shortcodes/Code.astro'
 
 <section class="col-lg-7 mb-5">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
-    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
+    <svg class="bi fs-1" aria-hidden="true"><use href="#palette2"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
@@ -15,7 +15,7 @@ import Code from '@shortcodes/Code.astro'
   <p class="d-flex lead fw-normal">
     <a href={getVersionedDocsPath('customize/overview/')} class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
-      <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+      <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
     </a>
   </p>
 </section>
diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro
index 9ad30dfba8..00eb1d0779 100644
--- a/site/src/components/home/GetStarted.astro
+++ b/site/src/components/home/GetStarted.astro
@@ -6,7 +6,7 @@ import Code from '@shortcodes/Code.astro'
 
 <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
   <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
-    <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
+    <svg class="bi fs-1" aria-hidden="true"><use href="#code"></use></svg>
   </div>
   <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
   <p class="lead fw-normal">
@@ -15,14 +15,14 @@ import Code from '@shortcodes/Code.astro'
   <p class="d-flex justify-content-md-center lead fw-normal">
     <a href={getVersionedDocsPath('getting-started/download/')} class="icon-link icon-link-hover fw-semibold ps-md-4">
       Read installation docs
-      <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+      <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
     </a>
   </p>
 </div>
 
 <section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
   <div class="col-lg-6 py-lg-4 pe-lg-5">
-    <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+    <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#box-seam"></use></svg>
     <h3 class="fw-semibold">Install via package manager</h3>
     <p class="pe-lg-5">
       Install Bootstrapâs source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed
@@ -38,7 +38,7 @@ import Code from '@shortcodes/Code.astro'
     </p>
   </div>
   <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
-    <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
+    <svg class="bi mb-2 fs-2 fg-3" aria-hidden="true"><use href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
     <p class="pe-lg-5">
       When you only need to include Bootstrapâs compiled CSS or JS, you can use <a
diff --git a/site/src/components/home/Icons.astro b/site/src/components/home/Icons.astro
index 4991dab599..bf227bb8c8 100644
--- a/site/src/components/home/Icons.astro
+++ b/site/src/components/home/Icons.astro
@@ -18,7 +18,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
     <p class="d-flex lead fw-normal mb-md-0">
       <a href={getConfig().icons} class="icon-link icon-link-hover fw-semibold">
         Get Bootstrap Icons
-        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index 35ec2136b7..7918579172 100644
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -18,7 +18,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
         <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
           Get Security Updates for Bootstrap 3 &amp; 4
           <svg class="bi" style="width: 20px; height: 20px; margin-block: -2px;" aria-hidden="true"
-            ><use xlink:href="#arrow-right-short"></use></svg
+            ><use href="#arrow-right-short"></use></svg
           >
         </span>
       </a>
@@ -43,7 +43,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
           href={getVersionedDocsPath('getting-started/install')}
           class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
         >
-          <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
+          <svg class="bi me-2" aria-hidden="true"><use href="#book-half"></use></svg>
           Read the docs
         </a>
       </div>
diff --git a/site/src/components/home/Plugins.astro b/site/src/components/home/Plugins.astro
index e8afcbbb8f..716cc91f2e 100644
--- a/site/src/components/home/Plugins.astro
+++ b/site/src/components/home/Plugins.astro
@@ -9,7 +9,7 @@ const plugins = getData('plugins')
 <section class="pb-md-5 mb-5">
   <div class="col-lg-8 mb-5">
     <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
-      <svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
+      <svg class="bi fs-1" aria-hidden="true"><use href="#plugin"></use></svg>
     </div>
     <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
     <p class="lead fw-normal">
@@ -20,7 +20,7 @@ const plugins = getData('plugins')
     <p class="d-flex lead fw-normal mb-md-0">
       <a href={getVersionedDocsPath('getting-started/javascript')} class="icon-link icon-link-hover fw-semibold">
         Learn more about Bootstrap JavaScript
-        <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
diff --git a/site/src/components/shortcodes/ButtonPlayground.astro b/site/src/components/shortcodes/ButtonPlayground.astro
index 3bb36d9884..8a73faf806 100644
--- a/site/src/components/shortcodes/ButtonPlayground.astro
+++ b/site/src/components/shortcodes/ButtonPlayground.astro
@@ -130,19 +130,19 @@ const rounded = ['default', 'pill', 'square']
   code={`<button type="button" class="btn btn-solid theme-primary" data-button-type="text">Button</button>
 <button type="button" class="btn btn-solid theme-primary" data-button-type="left-icon">
   <svg class="bi me-1" width="16" height="16" aria-hidden="true">
-    <use xlink:href="#arrow-left" />
+    <use href="#arrow-left" />
   </svg>
   Left icon
 </button>
 <button type="button" class="btn btn-solid theme-primary" data-button-type="right-icon">
   Right icon
   <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
-    <use xlink:href="#arrow-right" />
+    <use href="#arrow-right" />
   </svg>
 </button>
 <button type="button" class="btn btn-solid btn-icon theme-primary" data-button-type="icon-only" aria-label="Icon only">
   <svg class="bi" width="16" height="16" aria-hidden="true">
-    <use xlink:href="#plus-lg" />
+    <use href="#plus-lg" />
   </svg>
 </button>`}
   id="button-preview"
@@ -178,11 +178,11 @@ const rounded = ['default', 'pill', 'square']
     if (buttonType === 'text') {
       html += 'Click me'
     } else if (buttonType === 'left-icon') {
-      html += '\n  <svg class="bi me-1" width="16" height="16" aria-hidden="true">\n    <use xlink:href="#arrow-left" />\n  </svg>\n  With left icon'
+      html += '\n  <svg class="bi me-1" width="16" height="16" aria-hidden="true">\n    <use href="#arrow-left" />\n  </svg>\n  With left icon'
     } else if (buttonType === 'right-icon') {
-      html += 'With right icon\n  <svg class="bi ms-1" width="16" height="16" aria-hidden="true">\n    <use xlink:href="#arrow-right" />\n  </svg>'
+      html += 'With right icon\n  <svg class="bi ms-1" width="16" height="16" aria-hidden="true">\n    <use href="#arrow-right" />\n  </svg>'
     } else if (buttonType === 'icon-only') {
-      html += '\n  <svg class="bi" width="16" height="16" aria-hidden="true">\n    <use xlink:href="#plus-lg" />\n  </svg>'
+      html += '\n  <svg class="bi" width="16" height="16" aria-hidden="true">\n    <use href="#plus-lg" />\n  </svg>'
     }
 
     html += '\n</button>'
diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro
index 83152e766e..287843279d 100644
--- a/site/src/components/shortcodes/Code.astro
+++ b/site/src/components/shortcodes/Code.astro
@@ -357,13 +357,13 @@ if (highlightedCode) {
           {addStackblitzJs && (
             <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
               <svg class="bi" aria-hidden="true">
-                <use xlink:href="#lightning-charge-fill" />
+                <use href="#lightning-charge-fill" />
               </svg>
             </button>
           )}
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
             <svg class="bi" aria-hidden="true">
-              <use xlink:href="#clipboard" />
+              <use href="#clipboard" />
             </svg>
           </button>
         </div>
@@ -404,7 +404,7 @@ if (highlightedCode) {
         <div class="d-flex ms-auto">
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
             <svg class="bi" aria-hidden="true">
-              <use xlink:href="#clipboard" />
+              <use href="#clipboard" />
             </svg>
           </button>
         </div>
diff --git a/site/src/components/shortcodes/JsDocs.astro b/site/src/components/shortcodes/JsDocs.astro
index 3fdae5f050..fc9a331316 100644
--- a/site/src/components/shortcodes/JsDocs.astro
+++ b/site/src/components/shortcodes/JsDocs.astro
@@ -64,7 +64,7 @@ try {
     </a>
     <div class="d-flex ms-auto">
       <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#clipboard"></use></svg>
       </button>
     </div>
   </div>
diff --git a/site/src/components/shortcodes/ScssDocs.astro b/site/src/components/shortcodes/ScssDocs.astro
index 04bea40a50..59cad872f6 100644
--- a/site/src/components/shortcodes/ScssDocs.astro
+++ b/site/src/components/shortcodes/ScssDocs.astro
@@ -66,7 +66,7 @@ try {
     </a>
     <div class="d-flex ms-auto">
       <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+        <svg class="bi" aria-hidden="true"><use href="#clipboard"></use></svg>
       </button>
     </div>
   </div>
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index b5326d33a9..4b36492137 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -74,25 +74,25 @@ Need more than one icon for your alerts? Consider using more Bootstrap Icons and
   </svg>
 
   <div class="alert alert-primary d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
+    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use href="#info-fill"/></svg>
     <div>
       An example alert with an icon
     </div>
   </div>
   <div class="alert alert-success d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
+    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use href="#check-circle-fill"/></svg>
     <div>
       An example success alert with an icon
     </div>
   </div>
   <div class="alert alert-warning d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill"/></svg>
     <div>
       An example warning alert with an icon
     </div>
   </div>
   <div class="alert alert-danger d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill"/></svg>
     <div>
       An example danger alert with an icon
     </div>
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index edad987693..c80bdecd91 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -178,7 +178,7 @@ if (currentPageIndex < allPages.length - 1) {
             >
               On this page
               <svg class="bi d-md-none ms-2" aria-hidden="true">
-                <use xlink:href="#chevron-expand" />
+                <use href="#chevron-expand" />
               </svg>
             </button>
             <div class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</div>
diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro
index c548732f91..4455f34f6b 100644
--- a/site/src/layouts/partials/ExamplesMain.astro
+++ b/site/src/layouts/partials/ExamplesMain.astro
@@ -28,7 +28,7 @@ import { getSlug } from '@libs/utils'
               return (
                 <article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
                   <svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true">
-                    <use xlink:href="#box-seam" />
+                    <use href="#box-seam" />
                   </svg>
                   <div>
                     <h3 class="h5 mb-1">
@@ -54,7 +54,7 @@ import { getSlug } from '@libs/utils'
                         aria-labelledby={`edit-${index} starter-${index}`}
                       >
                         <svg class="bi flex-shrink-0" aria-hidden="true">
-                          <use xlink:href="#lightning-charge-fill" />
+                          <use href="#lightning-charge-fill" />
                         </svg>
                         <span id={`edit-${index}`}>Edit in StackBlitz</span>
                       </a>
diff --git a/site/src/pages/docs/[version]/examples/index.astro b/site/src/pages/docs/[version]/examples/index.astro
index 03ab5af419..68ab714053 100644
--- a/site/src/pages/docs/[version]/examples/index.astro
+++ b/site/src/pages/docs/[version]/examples/index.astro
@@ -20,7 +20,7 @@ export function getStaticPaths() {
       href={getConfig().download.dist_examples}
       class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
     >
-      <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+      <svg class="bi me-2" aria-hidden="true"><use href="#box-seam"></use></svg>
       Download examples
     </a>
     <a href={getConfig().download.source} class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a>
-- 
2.47.3

