diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/sectionicon.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/sectionicon.directive.js
index d6a4537262..28b6620aeb 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/sectionicon.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/sectionicon.directive.js
@@ -17,7 +17,7 @@
                 if(convert){
                     element.html("<i class='icon-section " + convert + "'></i>");
                 }else{
-                    element.html("<img src='images/tray/" + icon + "'>");
+                    element.html("<img class='icon-section' src='images/tray/" + icon + "'>");
                 }
                 //it's a file, normally legacy so look in the icon tray images
             }
diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index f57feeb2ad..c2db58a99e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -19,7 +19,8 @@ ul.sections li {
 }
 
 ul.sections li [class^="icon-"]:before, 
-ul.sections li [class*=" icon-"]:before{
+ul.sections li [class*=" icon-"]:before,
+ul.sections li img.icon-section {
 	font-size: 30px;
 	margin: 1px 0 0 0;
 	opacity: 0.4;
@@ -29,7 +30,8 @@ ul.sections li [class*=" icon-"]:before{
 }
 
 ul.sections:hover li [class^="icon-"]:before, 
-ul.sections:hover li [class*=" icon-"]:before {
+ul.sections:hover li [class*=" icon-"]:before,
+ul.sections:hover li img.icon-section {
 	opacity: 1
 }