diff --git a/assets/icons/link.svg b/assets/icons/link.svg
new file mode 100644
index 000000000..5beeeff6a
--- /dev/null
+++ b/assets/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.188 8.719c.439-.439.926-.801 1.444-1.087 2.887-1.591 6.589-.745 8.445 2.069l-2.246 2.245c-.644-1.469-2.243-2.305-3.834-1.949-.599.134-1.168.433-1.633.898l-4.304 4.306c-1.307 1.307-1.307 3.433 0 4.74 1.307 1.307 3.433 1.307 4.74 0l1.327-1.327c1.207.479 2.501.67 3.779.575l-2.929 2.929c-2.511 2.511-6.582 2.511-9.093 0s-2.511-6.582 0-9.093l4.304-4.306zm6.836-6.836l-2.929 2.929c1.277-.096 2.572.096 3.779.574l1.326-1.326c1.307-1.307 3.433-1.307 4.74 0 1.307 1.307 1.307 3.433 0 4.74l-4.305 4.305c-1.311 1.311-3.44 1.3-4.74 0-.303-.303-.564-.68-.727-1.051l-2.246 2.245c.236.358.481.667.796.982.812.812 1.846 1.417 3.036 1.704 1.542.371 3.194.166 4.613-.617.518-.286 1.005-.648 1.444-1.087l4.304-4.305c2.512-2.511 2.512-6.582.001-9.093-2.511-2.51-6.581-2.51-9.092 0z"/></svg>
\ No newline at end of file
diff --git a/assets/styles/framework.scss b/assets/styles/framework.scss
index 37b18178e..7be9ae406 100644
--- a/assets/styles/framework.scss
+++ b/assets/styles/framework.scss
@@ -176,20 +176,38 @@ h2 {
 }
 
 .sub-heading {
-    h2 {
-        display: inline-block;
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        display: inline;
         width: fit-content;
     }
 
+    display: inline-block;
+    margin-top: 1em;
+    width: 100%;
+
     .heading-anchor-link {
-        display: none;
-        font-size: 1.4em;
+        @extend %sr-only;
+        font-size: 15px;
+        color: $accent-color;
+        width: 20px;
+        text-align: center;
+        padding-right: 5px;
+
+        &:hover,
+        &:focus {
+            color: color('teal', 900);
+        }
     }
 
     &:hover,
     &:focus {
-        .heading-anchor-link {
-            display: inline-block;
+        a.heading-anchor-link {
+            @extend %remove-sr-only;
+            display: inline;
         }
     }
 }
diff --git a/assets/styles/icons.scss b/assets/styles/icons.scss
index 3fbdb962a..52843e07d 100644
--- a/assets/styles/icons.scss
+++ b/assets/styles/icons.scss
@@ -273,3 +273,9 @@
     font-icon: url('gavel.svg');
     vertical-align: -2px;
 }
+
+.icon-link:before {
+    @extend %icon;
+    font-icon: url('link.svg');
+    vertical-align: -1px;
+}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index ae0f4c0ca..e83a064b0 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,6 +1,6 @@
 <!-- Adapted after: https://gohugo.io/getting-started/configuration-markup#heading-link-example -->
 <div class="sub-heading">
     <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
-    <a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link" aria-label="Link to this heading"
-        aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading">#</a>
+    <a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link no-link-decoration" aria-label="Link to this heading"
+    aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading"><span class="icon-link"></span></a>
 </div>