diff --git a/lib/gui/components/svg-icon.js b/lib/gui/components/svg-icon.js
index 2f9f0a0b..6739e42f 100644
--- a/lib/gui/components/svg-icon.js
+++ b/lib/gui/components/svg-icon.js
@@ -69,21 +69,16 @@ class SVGIcon extends react.Component {
     const doc = parser.parseFromString(contents, 'image/svg+xml')
     const svg = doc.querySelector('svg')
 
-    const img = document.createElement('img')
-    img.src = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
+    const svgData = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
 
-    return react.createElement('div', {
+    return react.createElement('img', {
       className: 'svg-icon',
-      height,
-      width,
       style: {
         width,
         height
       },
-      disabled: this.props.disabled,
-      dangerouslySetInnerHTML: {
-        __html: img.outerHTML
-      }
+      src: svgData,
+      disabled: this.props.disabled
     })
   }
 
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 4cd721d4..a4a51322 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6480,8 +6480,8 @@ svg-icon {
 .page-main {
   margin-top: 75px; }
 
-svg-icon > div[disabled] path {
-  fill: #787c7f; }
+svg-icon > img[disabled] {
+  opacity: 0.2; }
 
 .page-main .step-selection-text {
   color: #fff; }
diff --git a/lib/gui/pages/main/styles/_main.scss b/lib/gui/pages/main/styles/_main.scss
index 0736122e..4a25aced 100644
--- a/lib/gui/pages/main/styles/_main.scss
+++ b/lib/gui/pages/main/styles/_main.scss
@@ -18,8 +18,8 @@
   margin-top: 75px;
 }
 
-svg-icon > div[disabled] path {
-  fill: $palette-theme-dark-disabled-foreground;
+svg-icon > img[disabled] {
+  opacity: $disabled-opacity;
 }
 
 .page-main .step-selection-text {
diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss
index 2f044fba..983ddafd 100644
--- a/lib/gui/scss/main.scss
+++ b/lib/gui/scss/main.scss
@@ -20,6 +20,7 @@ $cursor-disabled: initial;
 $link-hover-decoration: none;
 $btn-min-width: 170px;
 $link-color: #ddd;
+$disabled-opacity: 0.2;
 
 @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 @import "./modules/theme";
diff --git a/tests/gui/components/svg-icon.spec.js b/tests/gui/components/svg-icon.spec.js
index 3cf2a75a..3f4ccd06 100644
--- a/tests/gui/components/svg-icon.spec.js
+++ b/tests/gui/components/svg-icon.spec.js
@@ -56,7 +56,7 @@ describe('Browser: SVGIcon', function () {
       const originalSVGParser = new DOMParser()
       const originalDoc = originalSVGParser.parseFromString(iconContents, 'image/svg+xml')
       const compiledSVGParser = new DOMParser()
-      const compiledContents = decodeURIComponent(element.children()[0].children[0].src.substr(19))
+      const compiledContents = decodeURIComponent(element.children()[0].src.substr(19))
       const compiledDoc = compiledSVGParser.parseFromString(compiledContents, 'image/svg+xml')
 
       m.chai.expect(compiledDoc.outerHTML).to.equal(originalDoc.outerHTML)
@@ -64,12 +64,12 @@ describe('Browser: SVGIcon', function () {
 
     it('should accept an SVG in the path attribute', function () {
       const iconContents = '<svg><rect x="10" y="10" height="100" width="100" style="stroke:red;fill:blue;"/></svg>'
-      const img = `<img src="data:image/svg+xml,${encodeURIComponent(iconContents)}">`
+      const imgData = `data:image/svg+xml,${encodeURIComponent(iconContents)}`
       $rootScope.iconContents = iconContents
 
       const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope)
       $rootScope.$digest()
-      m.chai.expect(element.children().html()).to.equal(img)
+      m.chai.expect(element.children().attr('src')).to.equal(imgData)
     })
 
     it('should default the size to 40x40 pixels', function () {