diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
index f83240e3f70d0..97706169d98bf 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
@@ -1,34 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Should render icon select when symbolized as Icon 1`] = `
-<EuiFormRow
-  describedByIds={Array []}
-  display="rowCompressed"
-  fullWidth={false}
-  hasEmptyLabelSpace={false}
-  label="Symbol type"
-  labelType="label"
->
-  <EuiSelect
-    compressed={true}
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressed"
     fullWidth={false}
-    hasNoInitialSelection={false}
-    isLoading={false}
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "text": "circle marker",
-          "value": "circle",
-        },
-        Object {
-          "text": "icon",
-          "value": "icon",
-        },
-      ]
-    }
-    value="icon"
-  />
+    hasEmptyLabelSpace={false}
+    label="Symbol type"
+    labelType="label"
+  >
+    <EuiButtonGroup
+      buttonSize="compressed"
+      idSelected="icon"
+      isFullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "circle",
+            "label": "circle marker",
+          },
+          Object {
+            "id": "icon",
+            "label": "icon",
+          },
+        ]
+      }
+    />
+  </EuiFormRow>
   <EuiSpacer
     size="s"
   />
@@ -60,37 +60,37 @@ exports[`Should render icon select when symbolized as Icon 1`] = `
     }
     singleSelection={true}
   />
-</EuiFormRow>
+</Fragment>
 `;
 
 exports[`Should render symbol select when symbolized as Circle 1`] = `
-<EuiFormRow
-  describedByIds={Array []}
-  display="rowCompressed"
-  fullWidth={false}
-  hasEmptyLabelSpace={false}
-  label="Symbol type"
-  labelType="label"
->
-  <EuiSelect
-    compressed={true}
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressed"
     fullWidth={false}
-    hasNoInitialSelection={false}
-    isLoading={false}
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "text": "circle marker",
-          "value": "circle",
-        },
-        Object {
-          "text": "icon",
-          "value": "icon",
-        },
-      ]
-    }
-    value="circle"
-  />
-</EuiFormRow>
+    hasEmptyLabelSpace={false}
+    label="Symbol type"
+    labelType="label"
+  >
+    <EuiButtonGroup
+      buttonSize="compressed"
+      idSelected="circle"
+      isFullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "circle",
+            "label": "circle marker",
+          },
+          Object {
+            "id": "icon",
+            "label": "icon",
+          },
+        ]
+      }
+    />
+  </EuiFormRow>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
index 7d6c6ede0d330..eab7896650772 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
@@ -1,6 +1,6 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeXS;
+  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
index 8a33582203887..b5529c6987459 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
@@ -23,6 +23,7 @@ export function StaticOrientationSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append="°"
     />
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
index fd1ce0ffe89a8..31b9b4f5ad649 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ValidatedDualRange } from 'ui/validated_range';
 import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';
+import { i18n } from '@kbn/i18n';
 
 export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
   const onSizeChange = ([min, max]) => {
@@ -23,10 +24,14 @@ export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
       max={DEFAULT_MAX_SIZE}
       step={1}
       value={[minSize, maxSize]}
-      showInput
+      showInput="inputWithPopover"
       showRange
       onChange={onSizeChange}
       allowEmptyRange={false}
+      append={i18n.translate('xpack.maps.vector.dualSize.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
       {...rest}
     />
   );
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
index 507f81ade9309..38f8fe53d1748 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { staticSizeShape } from '../style_option_shapes';
 import { ValidatedRange } from '../../../../../components/validated_range';
+import { i18n } from '@kbn/i18n';
 
 export function StaticSizeSelection({ onChange, styleOptions }) {
   const onSizeChange = size => {
@@ -23,6 +24,10 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append={i18n.translate('xpack.maps.vector.size.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
     />
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
index 0fcbe7653c3de..268b1f39255b9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiSelect,
+  EuiButtonGroup,
   EuiSpacer,
   EuiComboBox,
 } from '@elastic/eui';
@@ -21,14 +21,14 @@ import { SymbolIcon } from './legend/symbol_icon';
 
 const SYMBOLIZE_AS_OPTIONS = [
   {
-    value: SYMBOLIZE_AS_CIRCLE,
-    text: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
+    id: SYMBOLIZE_AS_CIRCLE,
+    label: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
       defaultMessage: 'circle marker',
     }),
   },
   {
-    value: SYMBOLIZE_AS_ICON,
-    text: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
+    id: SYMBOLIZE_AS_ICON,
+    label: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
       defaultMessage: 'icon',
     }),
   },
@@ -41,26 +41,27 @@ export function VectorStyleSymbolEditor({
   isDarkMode,
 }) {
   const renderSymbolizeAsSelect = () => {
-    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ value }) => {
-      return value === styleOptions.symbolizeAs;
+    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => {
+      return id === styleOptions.symbolizeAs;
     });
 
-    const onSymbolizeAsChange = e => {
+    const onSymbolizeAsChange = optionId => {
       const styleDescriptor = {
         options: {
           ...styleOptions,
-          symbolizeAs: e.target.value,
+          symbolizeAs: optionId,
         },
       };
       handlePropertyChange('symbol', styleDescriptor);
     };
 
     return (
-      <EuiSelect
+      <EuiButtonGroup
+        buttonSize="compressed"
         options={SYMBOLIZE_AS_OPTIONS}
-        value={selectedOption ? selectedOption.value : undefined}
+        idSelected={selectedOption ? selectedOption.id : undefined}
         onChange={onSymbolizeAsChange}
-        compressed
+        isFullWidth
       />
     );
   };
@@ -113,28 +114,23 @@ export function VectorStyleSymbolEditor({
     );
   };
 
-  const renderFormRowContent = () => {
-    if (styleOptions.symbolizeAs === SYMBOLIZE_AS_CIRCLE) {
-      return renderSymbolizeAsSelect();
-    }
-
-    return (
-      <Fragment>
+  return (
+    <Fragment>
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.vector.symbolLabel', {
+          defaultMessage: 'Symbol type',
+        })}
+        display="columnCompressed"
+      >
         {renderSymbolizeAsSelect()}
-        <EuiSpacer size="s" />
-        {renderSymbolSelect()}
-      </Fragment>
-    );
-  };
+      </EuiFormRow>
 
-  return (
-    <EuiFormRow
-      label={i18n.translate('xpack.maps.vector.symbolLabel', {
-        defaultMessage: 'Symbol type',
-      })}
-      display="rowCompressed"
-    >
-      {renderFormRowContent()}
-    </EuiFormRow>
+      {styleOptions.symbolizeAs !== SYMBOLIZE_AS_CIRCLE && (
+        <Fragment>
+          <EuiSpacer size="s" />
+          {renderSymbolSelect()}
+        </Fragment>
+      )}
+    </Fragment>
   );
 }