diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js
index a65d9f4a0ecb64..0625824a437840 100644
--- a/packages/block-library/src/heading/heading-level-icon.js
+++ b/packages/block-library/src/heading/heading-level-icon.js
@@ -3,7 +3,8 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default function HeadingLevelIcon( { level } ) {
+export default function HeadingLevelIcon( { level, __unstableActive } ) {
+
 	const levelToPath = {
 		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
 		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@@ -17,7 +18,7 @@ export default function HeadingLevelIcon( { level } ) {
 	}
 
 	return (
-		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" __unstableActive={ __unstableActive } >
 			<Path d={ levelToPath[ level ] } />
 		</SVG>
 	);
diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js
index f3a089a8fafefe..0b4ddbf05ec647 100644
--- a/packages/block-library/src/heading/heading-toolbar.js
+++ b/packages/block-library/src/heading/heading-toolbar.js
@@ -17,11 +17,12 @@ import HeadingLevelIcon from './heading-level-icon';
 
 class HeadingToolbar extends Component {
 	createLevelControl( targetLevel, selectedLevel, onChange ) {
+		const isActive = targetLevel === selectedLevel;
 		return {
-			icon: <HeadingLevelIcon level={ targetLevel } />,
+			icon: <HeadingLevelIcon level={ targetLevel } __unstableActive={ isActive }/>,
 			// translators: %s: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive: targetLevel === selectedLevel,
+			isActive,
 			onClick: () => onChange( targetLevel ),
 		};
 	}
diff --git a/packages/components/src/primitives/svg/index.js b/packages/components/src/primitives/svg/index.js
index abb15e121dc2b0..8a75464f6f07c9 100644
--- a/packages/components/src/primitives/svg/index.js
+++ b/packages/components/src/primitives/svg/index.js
@@ -19,5 +19,5 @@ export const SVG = ( props ) => {
 
 	// Disable reason: We need to have a way to render HTML tag for web.
 	// eslint-disable-next-line react/forbid-elements
-	return <svg { ...appliedProps } />;
+	return <svg { ...omit( appliedProps, '__unstableActive' ) } />;
 };
diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js
index 4ee8dbae9b798d..8d6d8da8bc8ea4 100644
--- a/packages/components/src/primitives/svg/index.native.js
+++ b/packages/components/src/primitives/svg/index.native.js
@@ -18,8 +18,8 @@ export {
 
 export const SVG = ( props ) => {
 	const stylesFromClasses = ( props.className || '' ).split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
-	const stylesFromAriaPressed = props.ariaPressed ? styles[ 'is-active' ] : styles[ 'components-toolbar__control' ];
-	const styleValues = Object.assign( {}, props.style, stylesFromAriaPressed, ...stylesFromClasses );
+	const defaultStyle = props.__unstableActive ? styles[ 'is-active' ] : styles[ 'components-toolbar__control' ];
+	const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
 
 	const safeProps = { ...props, style: styleValues };