diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 98ad223457..b787877a34 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -75,11 +75,11 @@
 		h2,
 		h3 {
 			max-width: 100%;
-			padding: 0 1em 0 0;
+			padding: 0 2.4rem 0 0;
 
 			@media (min-width: 768px) {
-				margin: 0 0 0 -2em;
-				padding: 0 1em 0 2em;
+				margin: 0 0 0 -4.8rem;
+				padding: 0 2.4rem 0 4.8rem;
 			}
 
 			/* we can't use `text-overflow` on the heading itself,
@@ -335,19 +335,23 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(../icons/link.svg) 50% 50% no-repeat;
-			background-size: 1em 1em;
-			width: 1.2em;
-			height: 0.8em;
-			top: 0.2em;
+			background: url(../icons/hash-light.svg) 50% 50% no-repeat;
+			background-size: 2.4rem 2.4rem;
+			width: 2.6rem;
+			height: 2.2rem;
+			top: calc(50% - 1rem);
 
 			@media (max-width: 767px) {
 				right: 0;
 				scale: 0.8;
 			}
 
+			:root.dark & {
+				background-image: url(../icons/hash-dark.svg);
+			}
+
 			@media (min-width: 768px) {
-				left: 0.7em;
+				left: 1.6rem;
 				opacity: 0;
 				transition: opacity 0.2s;