diff --git a/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php
index ec81f28ce0..0d99bffd51 100644
--- a/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php
@@ -36,7 +36,7 @@ public function providerTestGenerate() {
     $data['empty'][] = [];
     $data['empty'][] = 'Empty';
     $data['empty'][] = <<<'EOD'
-<svg width="250" height="300"><title>Empty</title>
+<svg width="250" height="300" class="layout-icon"><title>Empty</title>
 </svg>
 
 EOD;
@@ -44,12 +44,12 @@ public function providerTestGenerate() {
     $data['two_column'][] = [['left', 'right']];
     $data['two_column'][] = 'Two Column';
     $data['two_column'][] = <<<'EOD'
-<svg width="250" height="300"><title>Two Column</title>
+<svg width="250" height="300" class="layout-icon"><title>Two Column</title>
 <g><title>left</title>
-<rect x="1" y="1" width="121" height="298" stroke-width="2" />
+<rect x="1" y="1" width="121" height="298" stroke-width="2" class="layout-icon__region layout-icon__region--left" />
 </g>
 <g><title>right</title>
-<rect x="128" y="1" width="121" height="298" stroke-width="2" />
+<rect x="128" y="1" width="121" height="298" stroke-width="2" class="layout-icon__region layout-icon__region--right" />
 </g>
 </svg>
 
@@ -58,12 +58,12 @@ public function providerTestGenerate() {
     $data['two_column_no_stroke'][] = [['left', 'right']];
     $data['two_column_no_stroke'][] = 'Two Column (no stroke)';
     $data['two_column_no_stroke'][] = <<<'EOD'
-<svg width="250" height="300"><title>Two Column (no stroke)</title>
+<svg width="250" height="300" class="layout-icon"><title>Two Column (no stroke)</title>
 <g><title>left</title>
-<rect x="0" y="0" width="123" height="300" />
+<rect x="0" y="0" width="123" height="300" class="layout-icon__region layout-icon__region--left" />
 </g>
 <g><title>right</title>
-<rect x="127" y="0" width="123" height="300" />
+<rect x="127" y="0" width="123" height="300" class="layout-icon__region layout-icon__region--right" />
 </g>
 </svg>
 
@@ -74,12 +74,12 @@ public function providerTestGenerate() {
     $data['two_column_border_collapse'][] = [['left', 'right']];
     $data['two_column_border_collapse'][] = 'Two Column (no padding)';
     $data['two_column_border_collapse'][] = <<<'EOD'
-<svg width="250" height="300"><title>Two Column (no padding)</title>
+<svg width="250" height="300" class="layout-icon"><title>Two Column (no padding)</title>
 <g><title>left</title>
-<rect x="1" y="1" width="124" height="298" stroke-width="2" />
+<rect x="1" y="1" width="124" height="298" stroke-width="2" class="layout-icon__region layout-icon__region--left" />
 </g>
 <g><title>right</title>
-<rect x="125" y="1" width="124" height="298" stroke-width="2" />
+<rect x="125" y="1" width="124" height="298" stroke-width="2" class="layout-icon__region layout-icon__region--right" />
 </g>
 </svg>
 
@@ -95,30 +95,30 @@ public function providerTestGenerate() {
     ];
     $data['stacked'][] = 'Stacked';
     $data['stacked'][] = <<<'EOD'
-<svg width="250" height="300"><title>Stacked</title>
+<svg width="250" height="300" class="layout-icon"><title>Stacked</title>
 <g><title>sidebar</title>
-<rect x="1" y="1" width="78.666666666667" height="176.4" stroke-width="2" />
+<rect x="1" y="1" width="78.666666666667" height="176.4" stroke-width="2" class="layout-icon__region layout-icon__region--sidebar" />
 </g>
 <g><title>top</title>
-<rect x="85.666666666667" y="1" width="163.33333333333" height="54.8" stroke-width="2" />
+<rect x="85.666666666667" y="1" width="163.33333333333" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--top" />
 </g>
 <g><title>left</title>
-<rect x="85.666666666667" y="61.8" width="78.666666666667" height="54.8" stroke-width="2" />
+<rect x="85.666666666667" y="61.8" width="78.666666666667" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--left" />
 </g>
 <g><title>right</title>
-<rect x="170.33333333333" y="61.8" width="78.666666666667" height="54.8" stroke-width="2" />
+<rect x="170.33333333333" y="61.8" width="78.666666666667" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--right" />
 </g>
 <g><title>middle</title>
-<rect x="85.666666666667" y="122.6" width="163.33333333333" height="54.8" stroke-width="2" />
+<rect x="85.666666666667" y="122.6" width="163.33333333333" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--middle" />
 </g>
 <g><title>footer_left</title>
-<rect x="1" y="183.4" width="121" height="54.8" stroke-width="2" />
+<rect x="1" y="183.4" width="121" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--footer_left" />
 </g>
 <g><title>footer_right</title>
-<rect x="128" y="183.4" width="121" height="54.8" stroke-width="2" />
+<rect x="128" y="183.4" width="121" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--footer_right" />
 </g>
 <g><title>footer_full</title>
-<rect x="1" y="244.2" width="248" height="54.8" stroke-width="2" />
+<rect x="1" y="244.2" width="248" height="54.8" stroke-width="2" class="layout-icon__region layout-icon__region--footer_full" />
 </g>
 </svg>