[Maps] Improve icons for all layer types (#83503) (#83555)

* Improve icons for all layer types * EMS boundaries icon * Adding tracks layer icon
elastic · Nov 17, 2020 · 5e51b8e · 5e51b8e
1 parent 69e869a
commit 5e51b8e
Show file tree

Hide file tree

Showing 21 changed files with 180 additions and 13 deletions.
diff --git a/x-pack/plugins/maps/public/classes/layers/_layers.scss b/x-pack/plugins/maps/public/classes/layers/_layers.scss
@@ -6,6 +6,10 @@
   }
 
   &__background {
-    fill: $euiColorLightShade;
+    fill: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade);
+  }
+
+  &__backgroundDarker {
+    fill: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
   }
 }
diff --git a/...ck/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx b/...ck/plugins/maps/public/classes/layers/choropleth_layer_wizard/choropleth_layer_wizard.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../layer_wizard_registry';
 import { LayerTemplate } from './layer_template';
-import { ChoroplethLayerIcon } from './cloropleth_layer_icon';
+import { ChoroplethLayerIcon } from '../icons/cloropleth_layer_icon';
 
 export const choroplethLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],

diff --git a/...th_layer_wizard/cloropleth_layer_icon.tsx → ...es/layers/icons/cloropleth_layer_icon.tsx b/...th_layer_wizard/cloropleth_layer_icon.tsx → ...es/layers/icons/cloropleth_layer_icon.tsx
diff --git a/...s_geo_grid_source/clusters_layer_icon.tsx → ...sses/layers/icons/clusters_layer_icon.tsx b/...s_geo_grid_source/clusters_layer_icon.tsx → ...sses/layers/icons/clusters_layer_icon.tsx
diff --git a/...search_source/es_documents_layer_icon.tsx → ...ses/layers/icons/documents_layer_icon.tsx b/...search_source/es_documents_layer_icon.tsx → ...ses/layers/icons/documents_layer_icon.tsx
@@ -6,7 +6,7 @@
 
 import React, { FunctionComponent } from 'react';
 
-export const EsDocumentsLayerIcon: FunctionComponent = () => (
+export const DocumentsLayerIcon: FunctionComponent = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="49"

diff --git a/x-pack/plugins/maps/public/classes/layers/icons/ems_boundaries_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/ems_boundaries_layer_icon.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+export const EMSBoundariesLayerIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__backgroundDarker"
+      d="M30.766 14.01l1.602-12.954-1.389.237c-.744.253-1.768.38-2.702.45a43.28 43.28 0 01-1.259.07l-.092.004c-.312.014-.57.026-.72.042a1.895 1.895 0 00-.558.168c-.156.07-.316.156-.47.238l-.057.03c-.356.191-.687.358-1.025.4l-1.308.339v5.863c0 .698.142 2.17 0 3.443l-.204 1.67h8.182zM20.871 2.748c-.656.039-1.247.282-2.06.4l-.702.102c-.583.086-1.16.172-1.693.238-.75.093-1.389.145-1.82.113-.592-.044-1.124.341-1.61.843-.453.467-.926 1.1-1.429 1.777l-.144.193c-1.132 1.517-2.452 3.218-4.22 4.101-.214.108-.346.313-.432.528-.087.22-.14.489-.172.78-.064.587-.047 1.325.007 2.083.071 1.01.211 2.102.32 2.956.054.42.1.783.128 1.05.08.78-.128 1.769-.37 2.653-.088.319-.178.616-.258.882-.03.1-.06.195-.086.285a9.67 9.67 0 00-.12.434 1.518 1.518 0 00-.054.334c0 .279.11.577.283.842.175.268.426.52.735.708l.067.04.079-.001c4.133-.068 10.22-.554 10.972-.638a.582.582 0 00.334-.17c.083-.08.157-.182.224-.293.134-.223.264-.524.388-.867.249-.69.495-1.6.72-2.52.162-.654.545-1.41.683-2.01l.784-2.796c.066-.379.198-1.13.272-1.705.146-1.148-.01-2.54.097-3.999.107-1.458.171-2.917.146-4.052a10.13 10.13 0 00-.112-1.438 2.469 2.469 0 00-.131-.495c-.053-.128-.276-.358-.276-.358h-.55zm10.931 12.621s-1.169-.652-1.548-.642c-.757.019-1.298-.026-2.352 0h-5.489l-2.863 8.915c.2.066 1.938.444 2.242.447.62.005 1.478-.08 2.393-.197.88-.113 1.824-.258 2.678-.389l.113-.017a49.753 49.753 0 012.166-.305c.347-.034.996-.024 1.858-.007l.127.003c.827.017 1.819.037 2.869.023 2.198-.029 4.694-.204 6.5-.887 1.42-.538 2.099-.87 2.513-1.34.414-.468.575-1.576.575-1.576s-2.907.868-4.807.784c-.927-.04-1.508.045-2.352-.34-1.429-.652-1.206-2.221-2.43-3.205-.77-.62-2.193-1.267-2.193-1.267z"
+    />
+    <path
+      className="mapLayersWizardIcon__backgroundDarker"
+      d="M33.322 1.125S31.277 14.3 31.72 14.522c.786.393 2.012.665 3.137 1.67 1.23 1.1 1.172 2.5 2.318 3.24.835.538 6.525-.704 6.525-.704l.228-7.956s-.174-4.5-.89-5.216c-.715-.716-2.488-1.125-3-2.08-1.115-2.08-3.068-2.351-3.068-2.351h-3.648z"
+    />
+  </svg>
+);
diff --git a/...es_geo_grid_source/heatmap_layer_icon.tsx → ...asses/layers/icons/heatmap_layer_icon.tsx b/...es_geo_grid_source/heatmap_layer_icon.tsx → ...asses/layers/icons/heatmap_layer_icon.tsx
diff --git a/...w_pew_source/point_2_point_layer_icon.tsx → ...layers/icons/point_2_point_layer_icon.tsx b/...w_pew_source/point_2_point_layer_icon.tsx → ...layers/icons/point_2_point_layer_icon.tsx
diff --git a/x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/tracks_layer_icon.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+export const TracksLayerIcon: FunctionComponent = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="49" height="25" fill="none" viewBox="0 0 49 25">
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M12.733 12.136h32.283v.545H12.935L4.452 19.98l-.356-.413 8.637-7.43z"
+    />
+    <circle cx="24.939" cy="12.409" r="3.273" className="mapLayersWizardIcon__highlight" />
+    <circle cx="35.849" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
+    <circle cx="45.561" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
+    <circle cx="5.197" cy="18.954" r="2.182" className="mapLayersWizardIcon__highlight" />
+    <circle cx="13.485" cy="12.409" r="2.182" className="mapLayersWizardIcon__highlight" />
+  </svg>
+);
diff --git a/x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/vector_tile_layer_icon.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+export const VectorTileLayerIcon: FunctionComponent = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="49" height="25" fill="none" viewBox="0 0 49 25">
+    <g clipPath="url(#clip0)">
+      <path
+        className="mapLayersWizardIcon__background"
+        d="M33.547 14.847l2.439-19.72-2.114.36c-1.133.385-2.692.577-4.114.684-.706.052-1.368.083-1.916.108l-.14.006c-.475.02-.868.038-1.097.064a2.885 2.885 0 00-.85.255c-.237.106-.48.237-.714.362l-.088.047c-.541.29-1.045.543-1.56.608l-1.99.515v8.926c0 1.062.215 3.302 0 5.242l-.311 2.543h12.455zM18.485-2.298c-1 .058-1.9.429-3.135.607-.356.051-.714.104-1.07.157-.888.131-1.765.26-2.577.362-1.143.142-2.115.22-2.77.172C8.031-1.067 7.22-.48 6.48.283c-.69.711-1.408 1.676-2.174 2.704l-.22.295C2.363 5.591.354 8.18-2.337 9.526c-.326.163-.528.475-.658.803-.132.334-.214.743-.263 1.188-.097.893-.07 2.016.011 3.17.109 1.539.322 3.2.488 4.5.082.64.153 1.192.194 1.598.122 1.188-.195 2.693-.564 4.038-.134.486-.27.939-.392 1.343l-.13.434a14.78 14.78 0 00-.184.661c-.044.178-.081.36-.081.508 0 .425.168.879.43 1.282.267.408.65.793 1.12 1.078l.102.061.12-.002c6.291-.103 15.558-.843 16.703-.97a.886.886 0 00.507-.259 2.15 2.15 0 00.342-.447c.204-.34.401-.797.59-1.32.38-1.05.753-2.434 1.098-3.834.244-.997.828-2.148 1.037-3.062l1.194-4.256c.101-.576.302-1.721.414-2.595.223-1.748-.015-3.866.148-6.088.162-2.22.26-4.44.223-6.168-.019-.862-.072-1.615-.172-2.19a3.756 3.756 0 00-.199-.752c-.08-.196-.42-.545-.42-.545h-.837zm16.639 19.212s-1.78-.992-2.356-.978c-1.153.03-1.976-.038-3.58 0h-8.356l-4.36 13.571c.305.102 2.95.677 3.414.681.943.008 2.25-.12 3.643-.3 1.338-.17 2.776-.392 4.077-.591l.171-.027c1.352-.207 2.532-.387 3.297-.463.53-.053 1.517-.037 2.829-.011l.194.004c1.259.025 2.768.056 4.367.035 3.347-.043 7.146-.31 9.894-1.35 2.162-.82 3.196-1.325 3.826-2.039.63-.714.876-2.4.876-2.4s-4.425 1.321-7.318 1.194c-1.411-.062-2.295.067-3.58-.52-2.175-.991-1.835-3.38-3.698-4.877-1.174-.944-3.34-1.929-3.34-1.929z"
+      />
+      <path
+        className="mapLayersWizardIcon__background"
+        d="M37.439-4.77s-3.114 20.058-2.44 20.395c1.197.598 3.063 1.012 4.775 2.543 1.872 1.673 1.784 3.805 3.53 4.93 1.27.82 9.932-1.07 9.932-1.07l.348-12.112s-.265-6.85-1.355-7.94C51.14.886 48.441.264 47.662-1.189c-1.697-3.169-4.67-3.581-4.67-3.581h-5.553z"
+      />
+      <circle cx="9.487" cy="7.606" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="42.779" cy="9.055" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="24.834" cy="21.957" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="46.423" cy="16.145" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="28.986" cy="2.029" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="30.646" cy="9.502" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="40.61" cy="-0.462" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="15.7" cy="2.029" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="2.415" cy="13.654" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="12.379" cy="15.315" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="4.075" cy="23.618" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="14.039" cy="24.448" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <circle cx="33.968" cy="24.448" r="1.661" className="mapLayersWizardIcon__highlight" />
+      <path
+        className="mapLayersWizardIcon__highlight"
+        d="M.834 23.863h48v.545h-48zm0-11.727h48v.545h-48zm0-11.727h48v.545h-48z"
+      />
+      <path
+        className="mapLayersWizardIcon__highlight"
+        d="M.834.409h.545v24H.834zm15.818 0h.545v24h-.545zm16.091 0h.545v24h-.545zm15.545 0h.545v24h-.545z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path fill="#fff" d="M0 0h48v24H0z" transform="translate(.834 .409)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/web_map_service_layer_icon.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+export const WebMapServiceLayerIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M30.766 14.01l1.602-12.954-1.389.237c-.744.253-1.768.38-2.702.45a43.28 43.28 0 01-1.259.07l-.092.004c-.312.014-.57.026-.72.042a1.895 1.895 0 00-.558.168c-.156.07-.316.156-.47.238l-.057.03c-.356.191-.687.358-1.025.4l-1.308.339v5.863c0 .698.142 2.17 0 3.443l-.204 1.67h8.182zM20.871 2.748c-.656.039-1.247.282-2.06.4l-.702.102c-.583.086-1.16.172-1.693.238-.75.093-1.389.145-1.82.113-.592-.044-1.124.341-1.61.843-.453.467-.926 1.1-1.429 1.777l-.144.193c-1.132 1.517-2.452 3.218-4.22 4.101-.214.108-.346.313-.432.528-.087.22-.14.489-.172.78-.064.587-.047 1.325.007 2.083.071 1.01.211 2.102.32 2.956.054.42.1.783.128 1.05.08.78-.128 1.769-.37 2.653-.088.319-.178.616-.258.882-.03.1-.06.195-.086.285a9.67 9.67 0 00-.12.434 1.518 1.518 0 00-.054.334c0 .279.11.577.283.842.175.268.426.52.735.708l.067.04.079-.001c4.133-.068 10.22-.554 10.972-.638a.582.582 0 00.334-.17c.083-.08.157-.182.224-.293.134-.223.264-.524.388-.867.249-.69.495-1.6.72-2.52.162-.654.545-1.41.683-2.01l.784-2.796c.066-.379.198-1.13.272-1.705.146-1.148-.01-2.54.097-3.999.107-1.458.171-2.917.146-4.052a10.13 10.13 0 00-.112-1.438 2.469 2.469 0 00-.131-.495c-.053-.128-.276-.358-.276-.358h-.55zm10.931 12.621s-1.169-.652-1.548-.642c-.757.019-1.298-.026-2.352 0h-5.489l-2.863 8.915c.2.066 1.938.444 2.242.447.62.005 1.478-.08 2.393-.197.88-.113 1.824-.258 2.678-.389l.113-.017a49.753 49.753 0 012.166-.305c.347-.034.996-.024 1.858-.007l.127.003c.827.017 1.819.037 2.869.023 2.198-.029 4.694-.204 6.5-.887 1.42-.538 2.099-.87 2.513-1.34.414-.468.575-1.576.575-1.576s-2.907.868-4.807.784c-.927-.04-1.508.045-2.352-.34-1.429-.652-1.206-2.221-2.43-3.205-.77-.62-2.193-1.267-2.193-1.267z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M33.322 1.125S31.277 14.3 31.72 14.522c.786.393 2.012.665 3.137 1.67 1.23 1.1 1.172 2.5 2.318 3.24.835.538 6.525-.704 6.525-.704l.228-7.956s-.174-4.5-.89-5.216c-.715-.716-2.488-1.125-3-2.08-1.115-2.08-3.068-2.351-3.068-2.351h-3.648z"
+    />
+  </svg>
+);
diff --git a/x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx b/x-pack/plugins/maps/public/classes/layers/icons/world_map_layer_icon.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+export const WorldMapLayerIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__highlight"
+      d="M13.175 15.71s-1.357 1.258.523 2.987c1.88 1.73-.379 3.912 1.096 5.712.782-.248-.418-.63 2.454-3.616 2.872-2.987 1.045-3.72-.574-4.454-1.619-.733-2.245-2.096-3.499-.629zm-2.506-2.987s.209-.68 1.305-.157c1.097.524 1.306-2.253 3.29-2.986 1.985-.734 2.037-1.625.783-2.306-1.253-.681-.888-1.205-2.088.472-1.202 1.676-2.007-1.516-.157-2.096.835-.262 1.044-1.468 0-1.834-1.045-.367-3.238.104-4.334-1.153C8.37 1.405 6.596.148 5.028 2.82c-1.566 2.672-.626 2.62 0 2.882.628.262 1.358-.42 2.09.943.73 1.363-.21 3.93.73 4.873.94.943-.068 2.841 3.604 3.302.418.052.835.157 1.044.366.21.21.992-.995-.679-1.362-1.67-.367-1.357-.786-1.148-1.1zm5.84-9.941c.495.332 1.462.157.992 1.258-.47 1.1-.627 2.882.313 3.51.94.63.836-1.938 2.559-1.938 1.723 0 2.872-6.13-.784-5.083-3.655 1.048-3.55 1.939-3.08 2.253zM44.716 1.3c.575-1.152-1.514-.89-2.715-.157-1.201.734-2.611.629-3.394.157-.784-.471-.418.734-1.619.891-1.201.157-2.559.262-2.298-.733.261-.996-1.096-.525-1.096-.525-1.15.367-1.985 1.677-1.724 2.83.261 1.153-1.514 1.834-3.133 1.153s-3.551.105-4.125 2.148c-.575 2.044-.992 2.463-1.723 3.197-.732.733.94 1.677 2.036-.053 1.097-1.729 1.828-.366 2.506.367.285.308.68 1.048.68 1.048s.115.258.317.618a2.081 2.081 0 00-.644-.103h-.258a2.028 2.028 0 00-1.518-.681h-2.297a2.04 2.04 0 00-2.037 2.043 2.04 2.04 0 002.037 2.044h1.712l.055.066c-.102.34-.272 1.214.457 1.701.919.615-.51.974.357 2.51.868 1.537 1.736 1.178 2.246.359.51-.82.306-1.025.97-1.537.664-.512.766-1.383.102-2.1-.29-.313-.287-.684-.193-1.003.163-.205.289-.442.366-.7l.031-.039-.02.003a2.106 2.106 0 00.07-.74c.27.209.56.355.857.389 1.32.147.948-1.129 1.836-1.121.51.233.796.626.984 1.435.366 1.572.575.262 1.62-.786 1.044-1.048 1.357-.173 2.819 1.153s.888-.524.731-1.467c-.157-.944 1.88-.01 1.306-2.146-.575-2.135 1.149-.422 1.514-2.098.366-1.677-1.201-1.94-.731-3.25.47-1.31 1.785-2.061 2.037-.209.275 2.031 2.287 1.773 1.817-.218-.47-1.991-.13-1.981.654-2.505.783-.525-1.166-.788-.592-1.94zM39.39 20.007c-1.134.27-.731 2.205.627 2.046 1.357-.16 2.245-.055 2.82 1.203.574 1.258 2.558-1.467 1.514-2.83-1.044-1.362-.835-1.467-1.358-2.358-.522-.89-2.507 1.677-3.603 1.94zm2.432-4.866h-.108a.792.792 0 010-1.583h.108a.792.792 0 110 1.583zm-4.302 3.486a.798.798 0 01-.56-.233.8.8 0 01-.231-.56.8.8 0 01.231-.56.8.8 0 01.56-.23.8.8 0 01.56.23.797.797 0 01.233.56.796.796 0 01-.792.793zm-7.133 3.593a.793.793 0 01-.56-1.35.793.793 0 011.12 0 .795.795 0 01.232.559.797.797 0 01-.792.792zm9.693-4.574a.797.797 0 01-.56-.231.794.794 0 01.56-1.352.793.793 0 010 1.583zm2.288-4.574a.792.792 0 01-.345-1.505c.597-.288.968-.88.968-1.544a.792.792 0 111.584 0 3.316 3.316 0 01-1.863 2.97.79.79 0 01-.344.08z"
+    />
+  </svg>
+);
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
@@ -14,6 +14,7 @@ import { EMSFileSource, sourceTitle } from './ems_file_source';
 import { getEMSSettings } from '../../../kibana_services';
 import { EMSFileSourceDescriptor } from '../../../../common/descriptor_types';
 import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+import { EMSBoundariesLayerIcon } from '../../layers/icons/ems_boundaries_layer_icon';
 
 export const emsBoundariesLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
@@ -24,7 +25,7 @@ export const emsBoundariesLayerWizardConfig: LayerWizard = {
   description: i18n.translate('xpack.maps.source.emsFileDescription', {
     defaultMessage: 'Administrative boundaries from Elastic Maps Service',
   }),
-  icon: 'emsApp',
+  icon: EMSBoundariesLayerIcon,
   renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: Partial<EMSFileSourceDescriptor>) => {
       const sourceDescriptor = EMSFileSource.createDescriptor(sourceConfig);

diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
@@ -15,6 +15,7 @@ import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_laye
 import { TileServiceSelect } from './tile_service_select';
 import { getEMSSettings } from '../../../kibana_services';
 import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+import { WorldMapLayerIcon } from '../../layers/icons/world_map_layer_icon';
 
 export const emsBaseMapLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
@@ -25,7 +26,7 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = {
   description: i18n.translate('xpack.maps.source.emsTileDescription', {
     defaultMessage: 'Tile map service from Elastic Maps Service',
   }),
-  icon: 'emsApp',
+  icon: WorldMapLayerIcon,
   renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: unknown) => {
       const layerDescriptor = VectorTileLayer.createDescriptor({

diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
@@ -29,7 +29,7 @@ import {
   STYLE_TYPE,
 } from '../../../../common/constants';
 import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
-import { ClustersLayerIcon } from './clusters_layer_icon';
+import { ClustersLayerIcon } from '../../layers/icons/clusters_layer_icon';
 
 export const clustersLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],

diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
@@ -15,7 +15,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer';
 import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
 import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants';
-import { HeatmapLayerIcon } from './heatmap_layer_icon';
+import { HeatmapLayerIcon } from '../../layers/icons/heatmap_layer_icon';
 
 export const heatmapLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],

diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
@@ -23,7 +23,7 @@ import { NUMERICAL_COLOR_PALETTES } from '../../styles/color_palettes';
 import { CreateSourceEditor } from './create_source_editor';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types';
-import { Point2PointLayerIcon } from './point_2_point_layer_icon';
+import { Point2PointLayerIcon } from '../../layers/icons/point_2_point_layer_icon';
 
 export const point2PointLayerWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],

diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
@@ -15,7 +15,7 @@ import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_ve
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants';
 import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
-import { EsDocumentsLayerIcon } from './es_documents_layer_icon';
+import { DocumentsLayerIcon } from '../../layers/icons/documents_layer_icon';
 import {
   ESSearchSourceDescriptor,
   VectorLayerDescriptor,
@@ -41,7 +41,7 @@ export const esDocumentsLayerWizardConfig: LayerWizard = {
   description: i18n.translate('xpack.maps.source.esSearchDescription', {
     defaultMessage: 'Points, lines, and polygons from Elasticsearch',
   }),
-  icon: EsDocumentsLayerIcon,
+  icon: DocumentsLayerIcon,
   renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: Partial<ESSearchSourceDescriptor>) => {
       if (!sourceConfig) {