diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 026ad72de90ea..504c9c93797f0 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -23,6 +23,7 @@
 -   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
 -   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
 -   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)).
 -   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
 
 ### Experimental
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index e4f4c3664e1d9..a71c458c6bbc4 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -97,10 +97,11 @@ const disabledStyles = ( { disabled }: InputProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
+export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		compact: '13px',
 		'__unstable-large': '13px',
 	};
 
@@ -138,6 +139,13 @@ export const getSizeConfig = ( {
 			paddingLeft: space( 2 ),
 			paddingRight: space( 2 ),
 		},
+		compact: {
+			height: 32,
+			lineHeight: 1,
+			minHeight: 32,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
+		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
@@ -148,13 +156,7 @@ export const getSizeConfig = ( {
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		sizes.default = {
-			height: 32,
-			lineHeight: 1,
-			minHeight: 32,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
-		};
+		sizes.default = sizes.compact;
 	}
 
 	return sizes[ size as Size ] || sizes.default;
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index a804efadd89d3..2056b69ae3e3d 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -23,7 +23,7 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | '__unstable-large';
+export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
 
 interface BaseProps {
 	/**
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index d23c689e2901e..f4b5dc920c04c 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -11,6 +11,7 @@ import { COLORS, rtl } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
+import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
 
 interface SelectProps
 	extends Pick<
@@ -30,27 +31,6 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 	} );
 };
 
-const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
-	const sizes = {
-		default: '13px',
-		small: '11px',
-		'__unstable-large': '13px',
-	};
-
-	const fontSize = sizes[ selectSize ];
-	const fontSizeMobile = '16px';
-
-	if ( ! fontSize ) return '';
-
-	return css`
-		font-size: ${ fontSizeMobile };
-
-		@media ( min-width: 600px ) {
-			font-size: ${ fontSize };
-		}
-	`;
-};
-
 const sizeStyles = ( {
 	__next40pxDefaultSize,
 	multiple,
@@ -75,6 +55,12 @@ const sizeStyles = ( {
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
+		compact: {
+			height: 32,
+			minHeight: 32,
+			paddingTop: 0,
+			paddingBottom: 0,
+		},
 		'__unstable-large': {
 			height: 40,
 			minHeight: 40,
@@ -84,12 +70,7 @@ const sizeStyles = ( {
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		sizes.default = {
-			height: 32,
-			minHeight: 32,
-			paddingTop: 0,
-			paddingBottom: 0,
-		};
+		sizes.default = sizes.compact;
 	}
 
 	const style = sizes[ selectSize ] || sizes.default;
@@ -107,11 +88,12 @@ const sizePaddings = ( {
 	const padding = {
 		default: 16,
 		small: 8,
+		compact: 8,
 		'__unstable-large': 16,
 	};
 
 	if ( ! __next40pxDefaultSize ) {
-		padding.default = 8;
+		padding.default = padding.compact;
 	}
 
 	const selectedPadding = padding[ selectSize ] || padding.default;
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index cc657f5fd67f4..2b8b0528637e8 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -188,7 +188,7 @@ function UnforwardedUnitControl(
 			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
 			size={
-				size === 'small' ||
+				[ 'small', 'compact' ].includes( size ) ||
 				( size === 'default' && ! props.__next40pxDefaultSize )
 					? 'small'
 					: 'default'