diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
index 391b72daccd23b..92d60146ca9ba3 100644
--- a/packages/block-editor/src/components/block-navigation/appender.js
+++ b/packages/block-editor/src/components/block-navigation/appender.js
@@ -15,7 +15,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockNavigationLeaf from './leaf';
-import Indentation from './indentation';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 
@@ -63,7 +62,6 @@ export default function BlockNavigationAppender( {
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-appender__container">
-						<Indentation level={ level } />
 						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalIsQuick
diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js
index a85efa58d99f37..60b0cf50300f1b 100644
--- a/packages/block-editor/src/components/block-navigation/block-select-button.js
+++ b/packages/block-editor/src/components/block-navigation/block-select-button.js
@@ -15,7 +15,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
-import Indentation from './indentation';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
@@ -62,7 +61,6 @@ function BlockNavigationBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 			>
-				<Indentation level={ level } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<BlockTitle clientId={ clientId } />
 				{ blockInformation?.anchor && (
diff --git a/packages/block-editor/src/components/block-navigation/indentation.js b/packages/block-editor/src/components/block-navigation/indentation.js
deleted file mode 100644
index 6ec4e5206134c8..00000000000000
--- a/packages/block-editor/src/components/block-navigation/indentation.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { times } from 'lodash';
-import classnames from 'classnames';
-
-const lineClassName = 'block-editor-block-navigator-indentation';
-
-export default function Indentation( { level } ) {
-	return times( level - 1, ( index ) => {
-		// The first 'level' that has an indentation is level 2.
-		// Add 2 to the zero-based index below to reflect that.
-		const currentLevel = index + 2;
-		const hasItem = currentLevel === level;
-		return (
-			<div
-				key={ index }
-				aria-hidden="true"
-				className={ classnames( lineClassName, {
-					'has-item': hasItem,
-				} ) }
-			/>
-		);
-	} );
-}
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 44d689fbdfc9ab..902c2a92dc91fa 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -274,7 +274,15 @@
 	}
 }
 
-.block-editor-block-navigator-indentation {
-	flex-shrink: 0;
-	width: $grid-unit-30 + $grid-unit-05; // Indent a full icon size, plus 4px which optically aligns child icons to the text label above.
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+.block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon {
+	margin-left: ( $grid-unit-30 + $grid-unit-05 ) * $block-navigation-max-indent;
 }
+@for $i from 0 through $block-navigation-max-indent {
+	.block-editor-block-navigation-leaf[aria-level="#{ $i + 1 }"] .block-editor-block-icon {
+		margin-left: ( $grid-unit-30 + $grid-unit-05 ) * $i;
+	}
+}
+