diff --git a/.changeset/social-icon-button-height.md b/.changeset/social-icon-button-height.md
new file mode 100644
index 00000000000..8231a9148a8
--- /dev/null
+++ b/.changeset/social-icon-button-height.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix icon-only social buttons rendering taller than the ones with text. They now size to the same height as the text (block) buttons across all appearance spacing and font-size settings, keeping every social button in a row consistent.
diff --git a/packages/ui/src/elements/SocialButtons.tsx b/packages/ui/src/elements/SocialButtons.tsx
index 7b3d8b76186..9730e072198 100644
--- a/packages/ui/src/elements/SocialButtons.tsx
+++ b/packages/ui/src/elements/SocialButtons.tsx
@@ -249,13 +249,19 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       variant='outline'
       colorScheme='neutral'
       hoverAsFocus
-      sx={t => ({
-        minHeight: t.sizes.$8,
-        width: '100%',
-      })}
+      sx={{ width: '100%' }}
       {...rest}
     >
-      {icon}
+      {/* Reserve one line of button text so the icon button matches the height of the
+          block button (and its siblings) across any theme spacing/font size, instead of
+          pinning to a static minHeight that stops tracking the text-based controls. */}
+      <Flex
+        as='span'
+        center
+        sx={{ minHeight: '1lh' }}
+      >
+        {icon}
+      </Flex>
     </Button>
   );
 });