diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
index 6d09d0fb15..73fdb6a95b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
@@ -1,16 +1,15 @@
 /**
 * @ngdoc filter 
 * @name umbraco.filters:umbTreeIconClass
-* @restrict E
 * @description This will properly render the tree icon class based on the tree icon set on the server
 **/
-function treeIconClassFilter() {
+function treeIconClassFilter(treeIconHelper) {
     return function (treeNode, standardClasses) {
         if (treeNode.iconIsClass) {
-            return standardClasses + " " + treeNode.icon;
+            return standardClasses + " " + treeIconHelper.convertFromLegacy(treeNode);
         }
-        
-        return standardClasses;
+        //we need an 'icon-' class in there for certain styles to work so if it is image based we'll add this
+        return standardClasses + " icon-custom-file";
     };
 }
 angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconimage.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconimage.filter.js
deleted file mode 100644
index eb08a2d8ef..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconimage.filter.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
-* @ngdoc filter 
-* @name umbraco.filters:umbTreeIconImage
-* @restrict E
-* @description This will properly render the tree icon image based on the tree icon set on the server
-**/
-function treeIconImageFilter() {
-    return function (treeNode) {
-        if (treeNode.iconIsClass) {
-            return "";
-        }
-
-        return "<img src='" + treeNode.iconFilePath + "'></img>";
-    };
-}
-
-//angular.module('umbraco.filters').filter("umbTreeIconImage", treeIconImageFilter);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconstyle.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconstyle.filter.js
new file mode 100644
index 0000000000..92f6dfa4c3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconstyle.filter.js
@@ -0,0 +1,19 @@
+/**
+    * @ngdoc filter 
+    * @name umbraco.filters:umbTreeIconImage
+    * @description This will properly render the tree icon image based on the tree icon set on the server
+    **/
+function treeIconStyleFilter(treeIconHelper) {
+    return function (treeNode) {
+        if (treeNode.iconIsClass) {
+            var converted = treeIconHelper.convertFromLegacy(treeNode);
+            if (converted.startsWith('.')) {
+                //its legacy so add some width/height
+                return "height:16px;width:16px;";
+            }
+            return "";
+        }
+        return "background-image: url('" + treeNode.iconFilePath + "');height:16px;background-position:2px 0px";
+    };
+}
+angular.module('umbraco.filters').filter("umbTreeIconStyle", treeIconStyleFilter);
\ No newline at end of file