diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index d47f6e95b6265e..f6f685da79fbdb 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -45,7 +45,7 @@ $grid-unit-80: 8 * $grid-unit;		// 64px
  */
 
 $icon-size: 24px;
-$button-size: 36px;
+$button-size: 32px;
 $button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
 $button-size-compact: 32px;
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 8dc5a70a91397d..1ff5dc7d1faef6 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -35,6 +35,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		size: 'compact',
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),
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 e814f7a49072ff..b29444d2b067ae 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -109,6 +109,7 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 				variant={ showIconLabels ? 'tertiary' : undefined }
 				aria-expanded={ isListViewOpen }
 				ref={ setListViewToggleElement }
+				size="compact"
 			/>
 		</>
 	);
@@ -162,17 +163,20 @@ function HeaderToolbar( { 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 4a53be477e0258..3adc2f7c3c6897 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -42,7 +42,7 @@
 	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
 		height: $button-size;
 		min-width: $button-size;
-		padding: 6px;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -50,7 +50,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 {
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/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/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>