diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 1d5d1651c8afcd..73c69b8e4e78ef 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `Button.Icon`: Preserve icon view boxes so icons with non-standard `viewBox` values are not clipped ([#78614](https://github.com/WordPress/gutenberg/pull/78614)).
+
 ### Enhancements
 
 -   `Tooltip.Provider`: Widen the types to accept all props of the equivalent `Tooltip.Provider` from `@base-ui/react` (types-only change) ([#78642](https://github.com/WordPress/gutenberg/pull/78642)).
diff --git a/packages/ui/src/button/icon.tsx b/packages/ui/src/button/icon.tsx
index 45da9dc1dc03c5..9a491d85299932 100644
--- a/packages/ui/src/button/icon.tsx
+++ b/packages/ui/src/button/icon.tsx
@@ -1,15 +1,17 @@
+import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { type ButtonIconProps } from './types';
 import { Icon } from '../icon';
+import styles from './style.module.css';
 
 export const ButtonIcon = forwardRef< SVGSVGElement, ButtonIconProps >(
-	function ButtonIcon( { icon, ...props }, ref ) {
+	function ButtonIcon( { className, icon, ...props }, ref ) {
 		return (
 			<Icon
 				ref={ ref }
 				icon={ icon }
-				viewBox="4 4 16 16"
-				size={ 16 }
+				className={ clsx( styles.icon, className ) }
+				size={ 24 }
 				{ ...props }
 			/>
 		);
diff --git a/packages/ui/src/button/stories/index.story.tsx b/packages/ui/src/button/stories/index.story.tsx
index 1d7cd1e78cba9f..b9b7c8476eadc5 100644
--- a/packages/ui/src/button/stories/index.story.tsx
+++ b/packages/ui/src/button/stories/index.story.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from '@wordpress/element';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { cog } from '@wordpress/icons';
+import { wordpress } from '@wordpress/icons';
 import { Button } from '../index';
 
 const meta: Meta< typeof Button > = {
@@ -158,7 +158,7 @@ export const WithIcon: Story = {
 		...Default.args,
 		children: (
 			<>
-				<Button.Icon icon={ cog } />
+				<Button.Icon icon={ wordpress } />
 				Button
 			</>
 		),
diff --git a/packages/ui/src/button/style.module.css b/packages/ui/src/button/style.module.css
index c098782a123ad8..a4c1e510c2c74c 100644
--- a/packages/ui/src/button/style.module.css
+++ b/packages/ui/src/button/style.module.css
@@ -23,6 +23,9 @@
 		--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
 		--wp-ui-button-font-size: var(--wpds-typography-font-size-md);
 		--wp-ui-button-min-width: calc(4ch + 2 * var(--wp-ui-button-padding-inline));
+		/* Icons are rendered as 24px but need to occupy a 16px footprint */
+		/* TODO: replace hardcoded values with DS size tokens once available */
+		--wp-ui-button-icon-margin: calc((16px - 24px) / 2);
 
 		/* by default, borders have the same color as the background */
 		--wp-ui-button-border-color: var(--wp-ui-button-background-color);
@@ -142,6 +145,10 @@
 		--wp-ui-button-height: 24px;
 	}
 
+	.icon {
+		margin: var(--wp-ui-button-icon-margin);
+	}
+
 	/* Variants (`tone` + `variant`) overrides compared to default styles */
 
 	/* All outline buttons have a border */