diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 8ffdd4327de27c..961b23c9065695 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -36,6 +36,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		size: 'compact',
 		showTooltip: ! showIconLabels,
 	};
 	const menuProps = {
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 9c650f8660da18..9c007da8e115f0 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -105,6 +105,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 				variant={ showIconLabels ? 'tertiary' : undefined }
 				aria-expanded={ isListViewOpen }
 				ref={ setListViewToggleElement }
+				size="compact"
 			/>
 		</>
 	);
@@ -159,17 +160,20 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								disabled={ isTextModeEnabled }
+								size="compact"
 							/>
 						) }
 						<ToolbarItem
 							as={ EditorHistoryUndo }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						<ToolbarItem
 							as={ EditorHistoryRedo }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						{ overflowItems }
 					</>
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 960199a1564516..029a0bdcfeca1d 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -39,9 +39,12 @@
 	// here to the original button styles
 	.edit-post-header-toolbar__left > .components-button.has-icon,
 	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -49,7 +52,7 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
+			outline: $border-width solid transparent;
 		}
 
 		&::before {
@@ -97,9 +100,9 @@
 .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
 	margin-right: $grid-unit-10;
 	// Special dimensions for this button.
-	min-width: 32px;
-	width: 32px;
-	height: 32px;
+	min-width: $button-size-compact;
+	width: $button-size-compact;
+	height: $button-size-compact;
 	padding: 0;
 
 	.show-icon-labels & {
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 6085ce65e51e5e..3ac1178b8815a9 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -26,6 +26,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				size: 'compact',
 			} }
 		>
 			{ ( { onClose } ) => (
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 132dbcb249ffb3..801226200f20da 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -184,6 +184,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			<Button
 				className="edit-site-document-actions__command"
 				onClick={ () => openCommandCenter() }
+				size="compact"
 			>
 				<HStack
 					className="edit-site-document-actions__title"
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index be34a9696a3fde..84abf543dda289 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -1,7 +1,7 @@
 .edit-site-document-actions {
 	display: flex;
 	align-items: center;
-	height: $button-size;
+	height: $button-size-compact;
 	justify-content: space-between;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
index dda761c983d31d..f0231e1e621169 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -130,6 +130,7 @@ export default function DocumentTools( {
 						label={ showIconLabels ? shortLabel : longLabel }
 						showTooltip={ ! showIconLabels }
 						aria-expanded={ isInserterOpen }
+						size="compact"
 					/>
 				) }
 				{ isLargeViewport && (
@@ -142,17 +143,20 @@ export default function DocumentTools( {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								disabled={ ! isVisualMode }
+								size="compact"
 							/>
 						) }
 						<ToolbarItem
 							as={ UndoButton }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						<ToolbarItem
 							as={ RedoButton }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						{ ! isDistractionFree && (
 							<ToolbarItem
@@ -171,6 +175,7 @@ export default function DocumentTools( {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								aria-expanded={ isListViewOpen }
+								size="compact"
 							/>
 						) }
 						{ isZoomedOutViewExperimentEnabled &&
@@ -191,6 +196,7 @@ export default function DocumentTools( {
 												: 'zoom-out'
 										);
 									} }
+									size="compact"
 								/>
 							) }
 					</>
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 78a988b2716ae0..8df4690c8fca22 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -122,9 +122,12 @@ $header-toolbar-min-width: 335px;
 	// here to the original button styles
 	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
 	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -132,7 +135,7 @@ $header-toolbar-min-width: 335px;
 
 		&:focus:not(:disabled) {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
+			outline: $border-width solid transparent;
 		}
 
 		&::before {
@@ -143,9 +146,9 @@ $header-toolbar-min-width: 335px;
 	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
 		margin-right: $grid-unit-10;
 		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
+		min-width: $button-size-compact;
+		width: $button-size-compact;
+		height: $button-size-compact;
 		padding: 0;
 	}
 
diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
index c2a213cc3e364b..d4c2969920c52a 100644
--- a/packages/edit-site/src/components/save-button/index.js
+++ b/packages/edit-site/src/components/save-button/index.js
@@ -103,6 +103,7 @@ export default function SaveButton( {
 			showTooltip={ showTooltip }
 			icon={ icon }
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			size="compact"
 		>
 			{ label }
 		</Button>
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index b9140b733c9d30..a81709607e1931 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -176,6 +176,7 @@ export class PostPublishButton extends Component {
 			className: 'editor-post-publish-panel__toggle',
 			isBusy: isSaving && isPublished,
 			variant: 'primary',
+			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
 		};
 
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index 7b2c19d6eabe5d..9cccb4fcb120ec 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -168,6 +168,7 @@ export default function PostSavedState( {
 				}
 				onClick={ isDisabled ? undefined : () => savePost() }
 				variant="tertiary"
+				size="compact"
 				icon={ isLargeViewport ? undefined : cloudUpload }
 				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
 				aria-label={ buttonAccessibleLabel }
diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
index 16fdd70e065734..95ea3db54b511e 100644
--- a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button is-tertiary has-icon"
+  class="components-button is-compact is-tertiary has-icon"
   type="button"
 >
   <svg
@@ -26,7 +26,7 @@ exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"
   aria-label="Save draft"
-  class="components-button editor-post-save-draft is-tertiary"
+  class="components-button editor-post-save-draft is-compact is-tertiary"
   type="button"
 >
   Save draft
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 887c447d9291e4..af6456bec09663 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -182,6 +182,7 @@ function ComplementaryArea( {
 							icon={ showIconLabels ? check : icon }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 					) }
 				</PinnedItems>
diff --git a/packages/interface/src/components/more-menu-dropdown/index.js b/packages/interface/src/components/more-menu-dropdown/index.js
index d6a32d57b05f86..dafa4b2e4b3b41 100644
--- a/packages/interface/src/components/more-menu-dropdown/index.js
+++ b/packages/interface/src/components/more-menu-dropdown/index.js
@@ -38,6 +38,7 @@ export default function MoreMenuDropdown( {
 			toggleProps={ {
 				tooltipPosition: 'bottom',
 				...toggleProps,
+				size: 'compact',
 			} }
 		>
 			{ ( onClose ) => children( onClose ) }