diff --git a/core/lib/Drupal/Core/Layout/Annotation/Layout.php b/core/lib/Drupal/Core/Layout/Annotation/Layout.php
index d2072c2..ccaf548 100644
--- a/core/lib/Drupal/Core/Layout/Annotation/Layout.php
+++ b/core/lib/Drupal/Core/Layout/Annotation/Layout.php
@@ -112,6 +112,15 @@ class Layout extends Plugin {
   public $icon;
 
   /**
+   * The icon map.
+   *
+   * @var array optional
+   *
+   * @see \Drupal\Core\Layout\IconGeneratorInterface::generateSvgFromIconMap()
+   */
+  public $icon_map;
+
+  /**
    * An associative array of regions in this layout.
    *
    * The key of the array is the machine name of the region, and the value is
diff --git a/core/lib/Drupal/Core/Layout/IconGenerator.php b/core/lib/Drupal/Core/Layout/IconGenerator.php
new file mode 100644
index 0000000..eb1f86b
--- /dev/null
+++ b/core/lib/Drupal/Core/Layout/IconGenerator.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace Drupal\Core\Layout;
+
+/**
+ * Generates layout icons from well-formed config.
+ */
+class IconGenerator implements IconGeneratorInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function generateSvgFromIconMap(array $icon_map, $label, $width, $height, $stroke_width, $padding, $fill, $stroke) {
+    $regions = $this->calculateSvgValues($icon_map, $width, $height, $stroke_width, $padding);
+    return $this->generateSvg($regions, $label, $width, $height, $stroke_width, $fill, $stroke);
+  }
+
+  /**
+   * Generates an SVG.
+   *
+   * @param mixed[] $regions
+   *   An array keyed by region name, with each element containing the 'height',
+   *   'width', and 'x' and 'y' offsets of each region.
+   * @param string $label
+   *   The label of the layout.
+   * @param int $width
+   *   The width of the generated SVG.
+   * @param int $height
+   *   The height of the generated SVG.
+   * @param int $stroke_width
+   *   The width of region borders.
+   * @param string $fill
+   *   The fill color of regions.
+   * @param string $stroke
+   *   The color of region borders.
+   *
+   * @return array
+   *   A render array representing a SVG icon.
+   */
+  protected function generateSvg(array $regions, $label, $width, $height, $stroke_width, $fill, $stroke) {
+    $build = [
+      '#type' => 'html_tag',
+      '#tag' => 'svg',
+      '#attributes' => [
+        'width' => $width,
+        'height' => $height,
+      ],
+      'title' => [
+        '#type' => 'html_tag',
+        '#tag' => 'title',
+        '#value' => $label,
+      ],
+    ];
+
+    // Append each polygon to the SVG.
+    foreach ($regions as $region => $attributes) {
+      // Group our regions allows for metadata, nested elements, and tooltips.
+      $build['region'][$region] = [
+        '#type' => 'html_tag',
+        '#tag' => 'g',
+      ];
+
+      $build['region'][$region]['title'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'title',
+        '#value' => $region,
+      ];
+
+      // Assemble the rectangle SVG element.
+      $build['region'][$region]['rect'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'rect',
+        '#attributes' => [
+          'x' => $attributes['x'],
+          'y' => $attributes['y'],
+          'width' => $attributes['width'],
+          'height' => $attributes['height'],
+          'fill' => $fill,
+          'stroke' => $stroke,
+          'stroke-width' => $stroke_width,
+        ],
+      ];
+    }
+
+    return $build;
+  }
+
+  /**
+   * Calculates the dimensions and offsets of all regions.
+   *
+   * @param array $rows
+   *   A two dimensional array representing the visual output of the layout.
+   *   See \Drupal\Core\Layout\IconGeneratorInterface::generateSvgFromIconMap().
+   * @param int $width
+   *   The width of the generated SVG.
+   * @param int $height
+   *   The height of the generated SVG.
+   * @param int $stroke_width
+   *   The width of region borders.
+   * @param int $padding
+   *   The padding between regions. Any value above 0 is valid.
+   *
+   * @return mixed[]
+   *   An array keyed by region name, with each element containing the 'height',
+   *   'width', and 'x' and 'y' offsets of each region.
+   */
+  protected function calculateSvgValues(array $rows, $width, $height, $stroke_width, $padding) {
+    $region_rects = [];
+
+    $num_rows = count($rows);
+    $row_height = $this->getLength($num_rows, $height, $stroke_width, $padding);
+    foreach ($rows as $row => $cols) {
+      $num_cols = count($cols);
+      $column_width = $this->getLength($num_cols, $width, $stroke_width, $padding);
+      $vertical_offset = $this->getOffset($row, $row_height, $stroke_width, $padding);
+      foreach ($cols as $col => $region) {
+        if (!isset($region_rects[$region])) {
+          $region_rects[$region] = [
+            'x' => $this->getOffset($col, $column_width, $stroke_width, $padding),
+            'y' => $vertical_offset,
+            'width' => $column_width,
+            'height' => $row_height,
+            // Store the original values.
+            'original_width' => $column_width,
+            'original_height' => $row_height,
+          ];
+        }
+        else {
+          $region_rects[$region]['width'] = $this->getOffset($col, $column_width, $stroke_width, $padding) - $region_rects[$region]['x'] + $region_rects[$region]['original_width'];
+          $region_rects[$region]['height'] = $this->getOffset($row, $row_height, $stroke_width, $padding) - $region_rects[$region]['y'] + $region_rects[$region]['original_height'];
+        }
+      }
+    }
+    return $region_rects;
+  }
+
+  /**
+   * Gets the offset for this region.
+   *
+   * @param int $delta
+   *   The zero-based delta of the region.
+   * @param int $length
+   *   The height or width of the region.
+   * @param int $stroke_width
+   *   The width of the region borders.
+   * @param int $padding
+   *   The padding between regions.
+   *
+   * @return int
+   *   The offset for this region.
+   */
+  protected function getOffset($delta, $length, $stroke_width, $padding) {
+    // Half of the stroke width is drawn outside the dimensions.
+    $stroke_width /= 2;
+    // For every region in front of this add two strokes, as well as one
+    // directly in front.
+    $num_of_strokes = 2 * $delta + 1;
+    return ($num_of_strokes * $stroke_width) + ($delta * ($length + $padding));
+  }
+
+  /**
+   * Gets the height or width of a region.
+   *
+   * @param int $number_of_regions
+   *   The total number of regions.
+   * @param int $length
+   *   The total height or width of the icon.
+   * @param int $stroke_width
+   *   The width of the region borders.
+   * @param int $padding
+   *   The padding between regions.
+   *
+   * @return float|int
+   *   The height or width of a region.
+   */
+  protected function getLength($number_of_regions, $length, $stroke_width, $padding) {
+    if ($number_of_regions === 0) {
+      return 0;
+    }
+
+    $total_stroke = $number_of_regions * $stroke_width;
+    $total_padding = ($number_of_regions - 1) * $padding;
+    return ($length - $total_padding - $total_stroke) / $number_of_regions;
+  }
+
+}
diff --git a/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php b/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php
new file mode 100644
index 0000000..a738ed7
--- /dev/null
+++ b/core/lib/Drupal/Core/Layout/IconGeneratorInterface.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace Drupal\Core\Layout;
+
+/**
+ * Provides an interface for generating layout icons from well-formed config.
+ */
+interface IconGeneratorInterface {
+
+  /**
+   * Generates an SVG based on an icon map.
+   *
+   * @param array $icon_map
+   *   A two dimensional array representing the visual output of the layout.
+   *   For the following shape:
+   *   |------------------------------|
+   *   |                              |
+   *   |             100%             |
+   *   |                              |
+   *   |-------|--------------|-------|
+   *   |       |              |       |
+   *   |       |      50%     |  25%  |
+   *   |       |              |       |
+   *   |  25%  |--------------|-------|
+   *   |       |                      |
+   *   |       |         75%          |
+   *   |       |                      |
+   *   |------------------------------|
+   *   The corresponding array would be:
+   *   - [top]
+   *   - [first, second, second, third]
+   *   - [first, bottom, bottom, bottom].
+   * @param string $label
+   *   The label of the layout.
+   * @param int $width
+   *   The width of the generated SVG.
+   * @param int $height
+   *   The height of the generated SVG.
+   * @param int $stroke_width
+   *   The width of region borders.
+   * @param int $padding
+   *   The padding between regions.
+   * @param string $fill
+   *   The fill color of regions.
+   * @param string $stroke
+   *   The color of region borders.
+   *
+   * @return array
+   *   A render array representing a SVG icon.
+   */
+  public function generateSvgFromIconMap(array $icon_map, $label, $width, $height, $stroke_width, $padding, $fill, $stroke);
+
+}
diff --git a/core/lib/Drupal/Core/Layout/LayoutDefinition.php b/core/lib/Drupal/Core/Layout/LayoutDefinition.php
index c804776..4bbc24b 100644
--- a/core/lib/Drupal/Core/Layout/LayoutDefinition.php
+++ b/core/lib/Drupal/Core/Layout/LayoutDefinition.php
@@ -86,6 +86,15 @@ class LayoutDefinition extends PluginDefinition implements PluginDefinitionInter
   protected $icon;
 
   /**
+   * An array defining the regions of a layout.
+   *
+   * @var array|null
+   *
+   * @see \Drupal\Core\Layout\IconGeneratorInterface::generateSvgFromIconMap()
+   */
+  protected $icon_map;
+
+  /**
    * An associative array of regions in this layout.
    *
    * The key of the array is the machine name of the region, and the value is
@@ -372,6 +381,81 @@ public function setIconPath($icon) {
   }
 
   /**
+   * Gets the icon map for this layout definition.
+   *
+   * This should not be used if an icon path is specified. See ::getIcon().
+   *
+   * @return array|null
+   *   The icon map, if it exists.
+   */
+  public function getIconMap() {
+    return $this->icon_map;
+  }
+
+  /**
+   * Sets the icon map for this layout definition.
+   *
+   * @param array|null $icon_map
+   *   The icon map.
+   *
+   * @return $this
+   */
+  public function setIconMap($icon_map) {
+    $this->icon_map = $icon_map;
+    return $this;
+  }
+
+  /**
+   * Builds a render array for an icon representing the layout.
+   *
+   * @param int $width
+   *   (optional) The width of the icon. Defaults to 250.
+   * @param int $height
+   *   (optional) The height of the icon. Defaults to 300.
+   * @param int $stroke_width
+   *   (optional) If a generated SVG is used, the width of region borders.
+   *   Defaults to 2.
+   * @param int $padding
+   *   (optional) If a generated SVG is used, the padding between regions. Any
+   *   value above 0 is valid. Defaults to 5.
+   * @param string $fill
+   *   (optional) If a generated SVG is used, the fill color of regions.
+   *   Defaults to 'lightgray'.
+   * @param string $stroke
+   *   (optional) If a generated SVG is used, the color of region borders.
+   *   Defaults to 'black'.
+   *
+   * @return array
+   *   A render array for the icon.
+   */
+  public function getIcon($width = 125, $height = 150, $stroke_width = 1, $padding = 4, $fill = '#f5f5f2', $stroke = '#666') {
+    $icon = [];
+    if ($icon_path = $this->getIconPath()) {
+      $icon = [
+        '#theme' => 'image',
+        '#uri' => $icon_path,
+        '#width' => $width,
+        '#height' => $height,
+        '#alt' => $this->getLabel(),
+      ];
+    }
+    elseif ($icon_map = $this->getIconMap()) {
+      $icon = $this->getIconGenerator()->generateSvgFromIconMap($icon_map, $this->getLabel(), $width, $height, $stroke_width, $padding, $fill, $stroke);
+    }
+    return $icon;
+  }
+
+  /**
+   * Wraps the icon generator.
+   *
+   * @return \Drupal\Core\Layout\IconGeneratorInterface
+   *   The icon generator.
+   */
+  protected function getIconGenerator() {
+    return \Drupal::service('layout.icon_generator');
+  }
+
+  /**
    * Gets the regions for this layout definition.
    *
    * @return array[]
diff --git a/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php b/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php
index 043e5c7..170bcd0 100644
--- a/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php
+++ b/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php
@@ -87,6 +87,8 @@ public function form(array $form, FormStateInterface $form_state) {
       '#tree' => TRUE,
     ];
 
+    $form['field_layouts']['settings_wrapper']['icon'] = $layout_plugin->getPluginDefinition()->getIcon();
+
     if ($layout_plugin instanceof PluginFormInterface) {
       $form['field_layouts']['settings_wrapper']['layout_settings'] = [];
       $subform_state = SubformState::createForSubform($form['field_layouts']['settings_wrapper']['layout_settings'], $form, $form_state);
diff --git a/core/modules/layout_discovery/layout_discovery.layouts.yml b/core/modules/layout_discovery/layout_discovery.layouts.yml
index d1b0e5a..755a96b 100644
--- a/core/modules/layout_discovery/layout_discovery.layouts.yml
+++ b/core/modules/layout_discovery/layout_discovery.layouts.yml
@@ -5,6 +5,8 @@ layout_onecol:
   library: layout_discovery/onecol
   category: 'Columns: 1'
   default_region: content
+  icon_map:
+    - [content]
   regions:
     content:
       label: Content
@@ -16,6 +18,10 @@ layout_twocol:
   library: layout_discovery/twocol
   category: 'Columns: 2'
   default_region: first
+  icon_map:
+    - [top]
+    - [first, second]
+    - [bottom]
   regions:
     top:
       label: Top
@@ -33,6 +39,12 @@ layout_twocol_bricks:
   library: layout_discovery/twocol_bricks
   category: 'Columns: 2'
   default_region: middle
+  icon_map:
+    - [top]
+    - [first_above, second_above]
+    - [middle]
+    - [first_below, second_below]
+    - [bottom]
   regions:
     top:
       label: Top
@@ -56,6 +68,10 @@ layout_threecol_25_50_25:
   library: layout_discovery/threecol_25_50_25
   category: 'Columns: 3'
   default_region: second
+  icon_map:
+    - [top]
+    - [first, second, second, third]
+    - [bottom]
   regions:
     top:
       label: Top
@@ -75,6 +91,10 @@ layout_threecol_33_34_33:
   library: layout_discovery/threecol_33_34_33
   category: 'Columns: 3'
   default_region: first
+  icon_map:
+    - [top]
+    - [first, second, third]
+    - [bottom]
   regions:
     top:
       label: Top
diff --git a/core/modules/layout_discovery/layout_discovery.services.yml b/core/modules/layout_discovery/layout_discovery.services.yml
index 1e24db4..6bb4073 100644
--- a/core/modules/layout_discovery/layout_discovery.services.yml
+++ b/core/modules/layout_discovery/layout_discovery.services.yml
@@ -2,3 +2,5 @@ services:
   plugin.manager.core.layout:
     class: Drupal\Core\Layout\LayoutPluginManager
     arguments: ['@container.namespaces', '@cache.discovery', '@module_handler', '@theme_handler']
+  layout.icon_generator:
+    class: Drupal\Core\Layout\IconGenerator
diff --git a/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php
new file mode 100644
index 0000000..ca2e1d9
--- /dev/null
+++ b/core/tests/Drupal/KernelTests/Core/Layout/IconGeneratorTest.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace Drupal\KernelTests\Core\Layout;
+
+use Drupal\Core\Layout\IconGenerator;
+use Drupal\Core\Render\RenderContext;
+use Drupal\KernelTests\KernelTestBase;
+
+/**
+ * @coversDefaultClass \Drupal\Core\Layout\IconGenerator
+ * @group Layout
+ */
+class IconGeneratorTest extends KernelTestBase {
+
+  /**
+   * @covers ::generateSvg
+   * @covers ::generateSvgFromIconMap
+   * @covers ::calculateSvgValues
+   * @covers ::getLength
+   * @covers ::getOffset
+   *
+   * @dataProvider providerTestGenerateSvgFromIconMap
+   */
+  public function testGenerateSvgFromIconMap($icon_map, $label, $expected, $stroke_width = 2) {
+    $renderer = $this->container->get('renderer');
+    $icon_generator = new IconGenerator();
+    $build = $icon_generator->generateSvgFromIconMap($icon_map, $label, 250, 300, $stroke_width, 4, 'lightgray', 'black');
+    $output = (string) $renderer->executeInRenderContext(new RenderContext(), function () use ($build, $renderer) {
+      return $renderer->render($build);
+    });
+    $this->assertSame($expected, $output);
+  }
+
+  public function providerTestGenerateSvgFromIconMap() {
+    $data = [];
+    $data['empty'][] = [];
+    $data['empty'][] = 'Empty';
+    $data['empty'][] = <<<'EOD'
+<svg width="250" height="300"><title>Empty</title>
+</svg>
+
+EOD;
+
+    $data['two_column'][] = [['left', 'right']];
+    $data['two_column'][] = 'Two Column';
+    $data['two_column'][] = <<<'EOD'
+<svg width="250" height="300"><title>Two Column</title>
+<g><title>left</title>
+<rect x="1" y="1" width="121" height="298" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>right</title>
+<rect x="128" y="1" width="121" height="298" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+</svg>
+
+EOD;
+
+    $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>
+<g><title>left</title>
+<rect x="0" y="0" width="123" height="300" fill="lightgray" stroke="black" stroke-width="0" />
+</g>
+<g><title>right</title>
+<rect x="127" y="0" width="123" height="300" fill="lightgray" stroke="black" stroke-width="0" />
+</g>
+</svg>
+
+EOD;
+    $data['two_column_no_stroke'][] = 0;
+
+    $data['stacked'][] = [
+      ['sidebar', 'top', 'top'],
+      ['sidebar', 'left', 'right'],
+      ['sidebar', 'middle', 'middle'],
+      ['footer_left', 'footer_right'],
+      ['footer_full'],
+    ];
+    $data['stacked'][] = 'Stacked';
+    $data['stacked'][] = <<<'EOD'
+<svg width="250" height="300"><title>Stacked</title>
+<g><title>sidebar</title>
+<rect x="1" y="1" width="78.666666666667" height="176.4" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>top</title>
+<rect x="85.666666666667" y="1" width="163.33333333333" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>left</title>
+<rect x="85.666666666667" y="61.8" width="78.666666666667" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>right</title>
+<rect x="170.33333333333" y="61.8" width="78.666666666667" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>middle</title>
+<rect x="85.666666666667" y="122.6" width="163.33333333333" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>footer_left</title>
+<rect x="1" y="183.4" width="121" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>footer_right</title>
+<rect x="128" y="183.4" width="121" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+<g><title>footer_full</title>
+<rect x="1" y="244.2" width="248" height="54.8" fill="lightgray" stroke="black" stroke-width="2" />
+</g>
+</svg>
+
+EOD;
+
+    return $data;
+  }
+
+}