diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 8f7f9410b894f3..0e82a868217d8a 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -1,3 +1,8 @@
+.wp-social-link {
+	--social-link-size: 36px;
+	--social-link-logo-size: 24px;
+}
+
 .wp-block-social-links {
 	display: flex;
 	flex-wrap: wrap;
@@ -20,9 +25,10 @@
 
 .wp-social-link {
 	display: block;
-	width: 36px;
-	height: 36px;
-	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	width: var(--social-link-size);
+	height: var(--social-link-size);
+	// This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	border-radius: var(--social-link-size);
 	margin: 0 8px 8px 0;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
@@ -41,6 +47,8 @@
 	svg {
 		color: currentColor;
 		fill: currentColor;
+		width: var(--social-link-logo-size);
+		height: var(--social-link-logo-size);
 	}
 
 	&:hover {
@@ -69,10 +77,6 @@
 
 		// Make these bigger.
 		padding: 4px;
-		svg {
-			width: 28px;
-			height: 28px;
-		}
 	}
 
 	@import "../social-link/socials-without-bg.scss";