diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
index 46754c8c7cb6b..a8d3b843a1f3d 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.stories.tsx
@@ -75,27 +75,17 @@ storiesOf('app/ServiceMap/Cytoscape', module)
       const cy = cytoscape();
       const elements = [
         { data: { id: 'default' } },
-        { data: { id: 'cache', label: 'cache', 'span.type': 'cache' } },
-        { data: { id: 'database', label: 'database', 'span.type': 'db' } },
+        { data: { id: 'cache', 'span.type': 'cache' } },
+        { data: { id: 'database', 'span.type': 'db' } },
         {
           data: {
             id: 'elasticsearch',
-            label: 'elasticsearch',
             'span.type': 'db',
             'span.subtype': 'elasticsearch'
           }
         },
-        {
-          data: { id: 'external', label: 'external', 'span.type': 'external' }
-        },
-        {
-          data: {
-            id: 'messaging',
-            label: 'messaging',
-            'span.type': 'messaging'
-          }
-        },
-
+        { data: { id: 'external', 'span.type': 'external' } },
+        { data: { id: 'messaging', 'span.type': 'messaging' } },
         {
           data: {
             id: 'dotnet',
@@ -119,11 +109,18 @@ storiesOf('app/ServiceMap/Cytoscape', module)
         },
         {
           data: {
-            id: 'js-base',
-            'service.name': 'js-base service',
+            id: 'RUM (js-base)',
+            'service.name': 'RUM service',
             'agent.name': 'js-base'
           }
         },
+        {
+          data: {
+            id: 'RUM (rum-js)',
+            'service.name': 'RUM service',
+            'agent.name': 'rum-js'
+          }
+        },
         {
           data: {
             id: 'nodejs',
@@ -163,7 +160,8 @@ storiesOf('app/ServiceMap/Cytoscape', module)
                 description={
                   <pre>
                     agent.name: {node.data('agent.name') || 'undefined'},
-                    span.type: {node.data('span.type') || 'undefined'}
+                    span.type: {node.data('span.type') || 'undefined'},
+                    span.subtype: {node.data('span.subtype') || 'undefined'}
                   </pre>
                 }
                 icon={
@@ -174,7 +172,7 @@ storiesOf('app/ServiceMap/Cytoscape', module)
                     width={80}
                   />
                 }
-                title={node.data('label')}
+                title={node.data('id')}
               />
             </EuiFlexItem>
           ))}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
index 4925ffba310b5..dd9b48d312725 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts
@@ -5,11 +5,12 @@
  */
 
 import cytoscape from 'cytoscape';
+import { isRumAgentName } from '../../../../../../../plugins/apm/common/agent_name';
 import {
   AGENT_NAME,
   SERVICE_NAME,
-  SPAN_TYPE,
-  SPAN_SUBTYPE
+  SPAN_SUBTYPE,
+  SPAN_TYPE
 } from '../../../../../../../plugins/apm/common/elasticsearch_fieldnames';
 import databaseIcon from './icons/database.svg';
 import defaultIconImport from './icons/default.svg';
@@ -62,7 +63,12 @@ export function iconForNode(node: cytoscape.NodeSingular) {
   const type = node.data(SPAN_TYPE);
 
   if (node.data(SERVICE_NAME)) {
-    return serviceIcons[node.data(AGENT_NAME) as string];
+    const agentName = node.data(AGENT_NAME);
+    // RUM can have multiple names. Normalize it
+    const normalizedAgentName = isRumAgentName(agentName)
+      ? 'js-base'
+      : agentName;
+    return serviceIcons[normalizedAgentName];
   } else if (isIE11) {
     return defaultIcon;
   } else if (