diff --git a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
new file mode 100644
index 0000000000000..9466b2d2282ec
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Flex } from '@wordpress/components';
+
+function ColorIndicatorWrapper( { className, ...props } ) {
+	return (
+		<Flex
+			className={ classnames(
+				'edit-site-global-styles__color-indicator-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
+export default ColorIndicatorWrapper;
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 7530f497b0332..2feb03b3816e6 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -15,9 +15,7 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
+					<Icon icon={ icon } size={ 24 } />
 					<FlexItem>{ children }</FlexItem>
 				</HStack>
 			) }
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index d4298d09bcbb5..c4beef9c6430e 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -19,6 +18,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
 
@@ -64,16 +64,13 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack isLayered={ false } offset={ -8 }>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicatorWrapper key={ color }>
+									<ColorIndicator colorValue={ color } />
+								</ColorIndicatorWrapper>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index daab69f0fe9f4..ac50ce5f672ee 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -59,9 +59,7 @@ function BlockMenuItem( { block } ) {
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<BlockIcon icon={ block.icon } />
-				</FlexItem>
+				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
 		</NavigationButton>
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 77afba1ab514b..60c79ed85f11d 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -18,6 +18,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,11 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
 					/>
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -57,9 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,9 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 9305e957b096c..5e708d38c413e 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -46,13 +46,11 @@ function ScreenRoot() {
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
 								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
-								<FlexItem>
-									<Icon
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</FlexItem>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
 							</HStack>
 						</NavigationButton>
 					) }
@@ -75,13 +73,9 @@ function ScreenRoot() {
 					<NavigationButton path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<FlexItem>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</FlexItem>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
 						</HStack>
 					</NavigationButton>
 				</ItemGroup>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ebf09d5a82505..16070627a3584 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -93,3 +93,7 @@
 	}
 }
 
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+}