diff --git a/docs/_includes/footer.htm b/docs/_includes/footer.htm
index 1417b17920..93991561cf 100644
--- a/docs/_includes/footer.htm
+++ b/docs/_includes/footer.htm
@@ -9,4 +9,26 @@
 				<li><a href="{{ "/" | prepend:site.baseurl }}">Home</a>
 			</ul>
 	</ul>
+
+	<script type="text/javascript">
+		document.addEventListener('DOMContentLoaded', () => {
+			const headers = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id]');
+
+			headers.forEach(header => {
+				const iconLink = document.createElement('a');
+				iconLink.href = `#${header.id}`;
+				iconLink.innerHTML = '#';
+				iconLink.className = 'header-link';
+
+				// Wrap the icon inside a span to control visibility with CSS
+				const wrapper = document.createElement('span');
+				wrapper.className = 'header-link-wrapper';
+				wrapper.appendChild(iconLink);
+
+				// Append the wrapper to the header
+				header.appendChild(wrapper);
+			});
+		});
+	</script>
+
 </footer>
diff --git a/docs/css/style.scss b/docs/css/style.scss
index 0e4d0f46f0..d51e90d98c 100644
--- a/docs/css/style.scss
+++ b/docs/css/style.scss
@@ -200,4 +200,21 @@ ul .side-nav-section{
 
 pre.highlight {
   overflow: auto;
-}
\ No newline at end of file
+}
+
+.header-link-wrapper{
+  visibility: hidden;
+  margin-left: 2px;
+  padding-left: 2px;
+}
+/* Show the icon link on hover */
+h1:hover .header-link-wrapper,
+h2:hover .header-link-wrapper,
+h3:hover .header-link-wrapper,
+h4:hover .header-link-wrapper {
+  visibility: visible;
+}
+.header-link{
+  color:#ccc !important
+}
+