diff --git a/site/assets/scss/_styles_project.scss b/site/assets/scss/_styles_project.scss
index 4886d18663..3f653f7d7e 100644
--- a/site/assets/scss/_styles_project.scss
+++ b/site/assets/scss/_styles_project.scss
@@ -43,3 +43,20 @@ img[alt*="Screenshot"] {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
   margin: 1rem 0;
 }
+
+.heading-anchor {
+  text-decoration: none;
+  margin-left: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  font-size: 1.5rem;
+}
+
+h1:hover .heading-anchor,
+h2:hover .heading-anchor,
+h3:hover .heading-anchor,
+h4:hover .heading-anchor,
+h5:hover .heading-anchor,
+h6:hover .heading-anchor {
+  opacity: 1;
+}
diff --git a/site/layouts/_default/_markup/render-heading.html b/site/layouts/_default/_markup/render-heading.html
index 2ac7ee72e6..94e52e70e8 100644
--- a/site/layouts/_default/_markup/render-heading.html
+++ b/site/layouts/_default/_markup/render-heading.html
@@ -4,5 +4,5 @@
 */ -}}
 <h{{ .Level }} id="{{ .Anchor | safeURL }}"{{ with .Attributes }} {{ range $k, $v := . }} {{ $k }}="{{ $v }}"{{ end }}{{ end }}>
   {{- .Text | safeHTML -}}
-  <a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">#</a>
+  <a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">🔗</a>
 </h{{ .Level }}>