diff --git a/ui/components/FeatherIcon.vue b/ui/components/FeatherIcon.vue
index 85e32a08..26c321b4 100644
--- a/ui/components/FeatherIcon.vue
+++ b/ui/components/FeatherIcon.vue
@@ -1,46 +1,42 @@
-<template>
-    <div class="feather-icon" v-html="iconSVG"></div>
-</template>
 <script>
 import feather from 'feather-icons';
 
 const validIcons = Object.keys(feather.icons);
 
 export default {
-    props: {
-        name: {
-            type: String,
-            required: true,
-            validator(value) {
-                const valid = validIcons.includes(value);
-                if (!valid) {
-                    console.warn(`name property for feather-icon must be one of `, validIcons);
-                }
-                return valid;
-            }
-        },
-        size: {
-            type: Number,
-            default: 16
-        }
-    },
-    computed: {
-        iconSVG() {
-          const icon = feather.icons[this.name];
-          if (!icon) {
-            return '';
-          }
-          return icon.toSvg({
-              width: this.size,
-              height: this.size
-          });
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator(value) {
+        const valid = validIcons.includes(value);
+        if (!valid) {
+          console.warn(
+            `name property for feather-icon must be one of `,
+            validIcons
+          );
         }
+        return valid;
+      }
     }
-}
+  },
+  render(h) {
+    let icon = feather.icons[this.name];
+    return h('svg', {
+      attrs: Object.assign({}, icon.attrs, {
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-width': 1.5,
+        width: null,
+        height: null
+      }),
+      class: [icon.attrs.class],
+      domProps: {
+        innerHTML: icon.contents
+      }
+    });
+  }
+};
 </script>
-<style>
-.feather-icon {
-    display: inline-flex;
-}
-</style>
-