diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
index b4843324a0def0..631a6117a111db 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Should render categorical legend with breaks 1`] = `
+exports[`renderLegendDetailRow Should render categorical legend with breaks 1`] = `
 <div>
   <EuiFlexGroup
     gutterSize="xs"
@@ -61,6 +61,24 @@ exports[`Should render categorical legend with breaks 1`] = `
         symbolId="marker"
       />
     </EuiFlexItem>
+    <EuiFlexItem
+      key="2"
+    >
+      <Category
+        color="grey"
+        isLinesOnly={false}
+        isPointsOnly={true}
+        label={
+          <EuiTextColor
+            color="secondary"
+          >
+            Other
+          </EuiTextColor>
+        }
+        styleName="icon"
+        symbolId="square"
+      />
+    </EuiFlexItem>
   </EuiFlexGroup>
 </div>
 `;
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
index 505c08ac35ba7e..132c0b3f276034 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
@@ -34,8 +34,8 @@ const makeProperty = (options: Partial<IconDynamicOptions>, field: IField = mock
   );
 };
 
-describe('DynamicIconProperty', () => {
-  it('should derive category number from palettes', async () => {
+describe('getNumberOfCategories', () => {
+  test('should derive category number from palettes', async () => {
     const filled = makeProperty({
       iconPaletteId: 'filledShapes',
     });
@@ -47,15 +47,53 @@ describe('DynamicIconProperty', () => {
   });
 });
 
-test('Should render categorical legend with breaks', async () => {
-  const iconStyle = makeProperty({
-    iconPaletteId: 'filledShapes',
+describe('renderLegendDetailRow', () => {
+  test('Should render categorical legend with breaks', async () => {
+    const iconStyle = makeProperty({
+      iconPaletteId: 'filledShapes',
+    });
+
+    const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
+    const component = shallow(legendRow);
+    await new Promise((resolve) => process.nextTick(resolve));
+    component.update();
+
+    expect(component).toMatchSnapshot();
   });
+});
 
-  const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
-  const component = shallow(legendRow);
-  await new Promise((resolve) => process.nextTick(resolve));
-  component.update();
+describe('get mapbox icon-image expression (via internal _getMbIconImageExpression)', () => {
+  describe('categorical icon palette', () => {
+    test('should return mapbox expression for pre-defined icon palette', async () => {
+      const iconStyle = makeProperty({
+        iconPaletteId: 'filledShapes',
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'US',
+        'circle-15',
+        'CN',
+        'marker-15',
+        'square-15',
+      ]);
+    });
 
-  expect(component).toMatchSnapshot();
+    test('should return mapbox expression for custom icon palette', async () => {
+      const iconStyle = makeProperty({
+        useCustomIconMap: true,
+        customIconStops: [
+          { stop: null, icon: 'circle' },
+          { stop: 'MX', icon: 'marker' },
+        ],
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'MX',
+        'marker-15',
+        'circle-15',
+      ]);
+    });
+  });
 });
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts
index 3e7b25ae5784aa..d190a62e6f300a 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts
+++ b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts
@@ -62,11 +62,11 @@ export function assignCategoriesToPalette({
   paletteValues: string[];
 }) {
   const stops = [];
-  let fallback = null;
+  let fallbackSymbolId = null;
 
   if (categories.length && paletteValues.length) {
     const maxLength = Math.min(paletteValues.length, categories.length + 1);
-    fallback = paletteValues[maxLength - 1];
+    fallbackSymbolId = paletteValues[maxLength - 1];
     for (let i = 0; i < maxLength - 1; i++) {
       stops.push({
         stop: categories[i].key,
@@ -77,7 +77,7 @@ export function assignCategoriesToPalette({
 
   return {
     stops,
-    fallback,
+    fallbackSymbolId,
   };
 }