diff --git a/package-lock.json b/package-lock.json
index 8991795086e0a..e1679a2fa49cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54454,6 +54454,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/private-apis": "file:../private-apis",
+				"classnames": "^2.3.1",
 				"cmdk": "^0.2.0",
 				"rememo": "^4.0.2"
 			},
@@ -67153,6 +67154,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/private-apis": "file:../private-apis",
+				"classnames": "^2.3.1",
 				"cmdk": "^0.2.0",
 				"rememo": "^4.0.2"
 			}
diff --git a/packages/commands/package.json b/packages/commands/package.json
index bc12422b697f3..2116aebafb482 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -34,6 +34,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/private-apis": "file:../private-apis",
+		"classnames": "^2.3.1",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index f6fb7bd23ee31..cd0e5e1d5e760 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Command, useCommandState } from 'cmdk';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -53,9 +54,14 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 					>
 						<HStack
 							alignment="left"
-							className="commands-command-menu__item"
+							className={ classnames(
+								'commands-command-menu__item',
+								{
+									'has-icon': command.icon,
+								}
+							) }
 						>
-							<Icon icon={ command.icon } />
+							{ command.icon && <Icon icon={ command.icon } /> }
 							<span>
 								<TextHighlight
 									text={ command.label }
@@ -123,9 +129,11 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 				>
 					<HStack
 						alignment="left"
-						className="commands-command-menu__item"
+						className={ classnames( 'commands-command-menu__item', {
+							'has-icon': command.icon,
+						} ) }
 					>
-						<Icon icon={ command.icon } />
+						{ command.icon && <Icon icon={ command.icon } /> }
 						<span>
 							<TextHighlight
 								text={ command.label }
diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
index 6893a3c3d61d2..8466fabe9dd79 100644
--- a/packages/commands/src/components/style.scss
+++ b/packages/commands/src/components/style.scss
@@ -72,9 +72,9 @@
 		cursor: pointer;
 		display: flex;
 		align-items: center;
-		padding: $grid-unit;
 		color: $gray-900;
 		font-size: $default-font-size;
+		min-height: $button-size-next-default-40px;
 
 		&[aria-selected="true"],
 		&:active {
@@ -94,6 +94,15 @@
 		svg {
 			fill: $gray-900;
 		}
+
+		> div {
+			padding: $grid-unit;
+			padding-left: $grid-unit-50; // Account for commands without icons.
+		}
+
+		> .has-icon {
+			padding-left: $grid-unit;
+		}
 	}
 
 	[cmdk-root] > [cmdk-list] {
diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
index 13a85df7a364a..dfb7c82a1029c 100644
--- a/packages/edit-post/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-post/src/hooks/commands/use-common-commands.js
@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	code,
-	cog,
 	drawerLeft,
 	drawerRight,
 	blockDefault,
@@ -92,7 +91,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'distractionFree' );
 			close();
@@ -102,7 +100,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'focusMode' );
 			close();
@@ -132,7 +129,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'fixedToolbar' );
 			close();
@@ -152,7 +148,6 @@ export default function useCommonCommands() {
 	useCommand( {
 		name: 'core/open-preferences',
 		label: __( 'Editor preferences' ),
-		icon: cog,
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
 		},
@@ -172,7 +167,6 @@ export default function useCommonCommands() {
 		label: showBlockBreadcrumbs
 			? __( 'Hide block breadcrumbs' )
 			: __( 'Show block breadcrumbs' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'showBlockBreadcrumbs' );
 			close();
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 3d865375c3ea6..5b4f02eda8b4c 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -12,7 +12,6 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	cog,
 	code,
 	keyboard,
 } from '@wordpress/icons';
@@ -256,7 +255,6 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'focusMode' );
 			close();
@@ -266,7 +264,6 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/toggle-distraction-free',
 		label: __( 'Toggle distraction free' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			setPreference( 'core/edit-site', 'fixedToolbar', false );
 			setIsInserterOpened( false );
@@ -289,7 +286,6 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'fixedToolbar' );
 			close();
@@ -311,7 +307,6 @@ function useEditUICommands() {
 	commands.push( {
 		name: 'core/open-preferences',
 		label: __( 'Editor preferences' ),
-		icon: cog,
 		callback: () => {
 			openModal( PREFERENCES_MODAL_NAME );
 		},
@@ -331,7 +326,6 @@ function useEditUICommands() {
 		label: showBlockBreadcrumbs
 			? __( 'Hide block breadcrumbs' )
 			: __( 'Show block breadcrumbs' ),
-		icon: cog,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
 			close();