diff --git a/packages/webawesome/docs/_transformers/anchor-headings.js b/packages/webawesome/docs/_transformers/anchor-headings.js
index 5b17f6674..27547f97a 100644
--- a/packages/webawesome/docs/_transformers/anchor-headings.js
+++ b/packages/webawesome/docs/_transformers/anchor-headings.js
@@ -79,7 +79,7 @@ export function anchorHeadingsTransformer(options = {}) {
       const anchor = parse(`
         <a href="#${encodeURIComponent(id)}">
           <span class="wa-visually-hidden"></span>
-          <span aria-hidden="true">#</span>
+          <wa-icon variant="regular" name="hashtag" class="icon-shrink"></wa-icon>
         </a>
       `);
       anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index ce4f633ec..43b7e60ae 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -351,26 +351,6 @@ h1.title {
   }
 }
 
-/* Anchor headings */
-.anchor-heading a {
-  visibility: hidden;
-  text-decoration: none;
-}
-
-@media (hover: hover) {
-  .anchor-heading:hover a {
-    visibility: visible;
-    padding: 0 0.125em;
-  }
-}
-
-@media print {
-  /* Show URLs for printed links */
-  a:not(.anchor-heading)[href]::after {
-    content: ' (' attr(href) ')';
-  }
-}
-
 /* Callouts */
 .callout {
   display: flex;
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 52e56a948..2fe92fb0b 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -122,6 +122,29 @@
       --secondary-color: var(--wa-color-neutral-30);
     }
   }
+
+  /* anchor headings  */
+  .anchor-heading a {
+    opacity: 0;
+    visibility: hidden;
+    text-decoration: none;
+    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
+  }
+
+  @media (hover: hover) {
+    .anchor-heading:hover a {
+      opacity: 1;
+      visibility: visible;
+      padding: var(--wa-space-3xs);
+    }
+  }
+
+  @media print {
+    /* show URLs for printed links */
+    a:not(.anchor-heading)[href]::after {
+      content: ' (' attr(href) ')';
+    }
+  }
   /* #endregion */
 
   /* #region funsies + cosmetics */