diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js
index 619f2fe42dc31..64f97722c4df2 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js
@@ -89,6 +89,11 @@ function extractColorFromStyleProperty(colorStyleProperty, defaultColor) {
     return colorStyleProperty.options.color;
   }
 
+  // Do not use dynamic color unless configuration is complete
+  if (!colorStyleProperty.options.field || !colorStyleProperty.options.field.name) {
+    return defaultColor;
+  }
+
   // return middle of gradient for dynamic style property
   return getColorRampCenterColor(colorStyleProperty.options.color);
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js
index 27398bb201dda..221b6268c55df 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js
@@ -25,6 +25,9 @@ const defaultProps = {
     type: VectorStyle.STYLE_TYPE.DYNAMIC,
     options: {
       color: 'Blues',
+      field: {
+        name: 'prop1'
+      }
     }
   }
 };