diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 9eaf443cdc7..71b82cd6fd1 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -14,7 +14,7 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Icons = require('../../../build/ploticon');
-
+var Parser = new DOMParser();
 
 /**
  * UI controller for interactive plots
@@ -192,8 +192,6 @@ proto.createIcon = function(thisIcon) {
 
     if(thisIcon.path) {
         icon = document.createElementNS(svgNS, 'svg');
-        icon.setAttribute('height', '1em');
-        icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
         icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
         var path = document.createElementNS(svgNS, 'path');
@@ -215,10 +213,13 @@ proto.createIcon = function(thisIcon) {
     }
 
     if(thisIcon.svg) {
-        icon = document.createElement('div');
-        icon.innerHTML = '<svg height="1em" width="' + (thisIcon.width / iconHeight) + 'em" viewbox="0, 0, ' + thisIcon.width + ',' + thisIcon.height + '" xmlns="">' + thisIcon.svg + '</svg>';
+        var svgDoc = Parser.parseFromString(thisIcon.svg, 'application/xml');
+        icon = svgDoc.childNodes[0];
     }
 
+    icon.setAttribute('height', '1em');
+    icon.setAttribute('width', '1em');
+
     return icon;
 };
 
diff --git a/src/fonts/ploticon/ploticon.svg b/src/fonts/ploticon/ploticon.svg
index e8fbfcd1e50..663b45ee7a3 100644
--- a/src/fonts/ploticon/ploticon.svg
+++ b/src/fonts/ploticon/ploticon.svg
@@ -28,18 +28,36 @@
 <glyph glyph-name="spikeline" unicode="&#57408;" d="M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z"/>
 </font>
 
-<g id="newplotlylogo" data-width="132" data-height="132">
-  <rect fill="#119dff" width="132" height="132" rx="6" ry="6"/>
-  <circle fill="#25fefd" cx="78" cy="54" r="6"/>
-  <circle fill="#25fefd" cx="102" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="78" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="54" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="30" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="30" cy="54" r="6"/>
-  <path fill="#fff" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
-  <path fill="#fff" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
-  <path fill="#fff" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
-  <path fill="#fff" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
-</g>
+<svg id="newplotlylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #119dff;
+      }
+
+      .cls-2 {
+        fill: #25fefd;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>plotly-logomark</title>
+  <g id="symbol">
+    <rect class="cls-1" width="132" height="132" rx="6" ry="6"/>
+    <circle class="cls-2" cx="78" cy="54" r="6"/>
+    <circle class="cls-2" cx="102" cy="30" r="6"/>
+    <circle class="cls-2" cx="78" cy="30" r="6"/>
+    <circle class="cls-2" cx="54" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="54" r="6"/>
+    <path class="cls-3" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
+    <path class="cls-3" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
+    <path class="cls-3" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
+    <path class="cls-3" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
+  </g>
+</svg>
 </defs>
 </svg>
diff --git a/tasks/util/pull_font_svg.js b/tasks/util/pull_font_svg.js
index 2903153badc..5fe807d6de4 100644
--- a/tasks/util/pull_font_svg.js
+++ b/tasks/util/pull_font_svg.js
@@ -2,7 +2,7 @@ var fs = require('fs');
 var xml2js = require('xml2js');
 
 var parser = new xml2js.Parser();
-var builder = new xml2js.Builder({ headless: true, rootName: 'g', renderOpts: {'newline': ''}});
+var builder = new xml2js.Builder({ headless: true, rootName: 'svg', renderOpts: {'newline': ''}});
 
 module.exports = function pullFontSVG(data, pathOut) {
     parser.parseString(data, function(err, result) {
@@ -29,17 +29,13 @@ module.exports = function pullFontSVG(data, pathOut) {
         });
 
         // Load SVG
-        var svgs = result.svg.defs[0].g;
-        svgs.forEach(function(g) {
-            var name = g.$.id,
-                width = parseFloat(g.$['data-width']),
-                height = parseFloat(g.$['data-height']);
-            delete g.$;
+        var svgs = result.svg.defs[0].svg;
+        svgs.forEach(function(svg) {
+            var name = svg.$.id;
+            delete svg.$.id;
             chars[name] = {
                 name: name,
-                width: width,
-                height: height,
-                svg: builder.buildObject(g)
+                svg: builder.buildObject(svg)
             };
         });