diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index e4a8194e03529..fff28e42151ab 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -229,12 +229,16 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	svg {
-		fill: currentColor;
+	.wp-block-navigation-placeholder__preview-search-icon {
+		height: $icon-size;
+		svg {
+			fill: currentColor;
+		}
 	}
 
+
 	.wp-block-navigation-link.wp-block-navigation-link,
-	svg {
+	.wp-block-navigation-placeholder__preview-search-icon {
 		opacity: 0.3;
 	}
 
@@ -248,7 +252,12 @@ $color-control-label-height: 20px;
 		flex-wrap: nowrap;
 	}
 
-	// .. but hide entirely when the placeholder can still be toggled.
+	// Hide entirely when vertical.
+	.is-vertical.is-selected & {
+		display: none;
+	}
+
+	// Hide entirely when the placeholder can still be toggled.
 	.wp-block-navigation.is-selected .is-small & {
 		display: none;
 	}
diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js
index 4dced9ebe4066..fff5f80b39f06 100644
--- a/packages/block-library/src/navigation/placeholder-preview.js
+++ b/packages/block-library/src/navigation/placeholder-preview.js
@@ -9,7 +9,9 @@ const PlaceholderPreview = () => {
 			<li className="wp-block-navigation-link">&#8203;</li>
 			<li className="wp-block-navigation-link">&#8203;</li>
 			<li className="wp-block-navigation-link">&#8203;</li>
-			<Icon icon={ search } />
+			<li className="wp-block-navigation-placeholder__preview-search-icon">
+				<Icon icon={ search } />
+			</li>
 		</ul>
 	);
 };