diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index 698a4211f5..eaa26b5d1a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -232,43 +232,40 @@ body.touch .umb-tree {
     }
 }
 
-.protected,
-.has-unpublished-version,
-.is-container,
-.locked {
+.umb-tree-item__annotation {
     &::before {
         font-family: 'icomoon';
         position: absolute;
-        font-size: 20px;
-        padding-left: 7px;
-        padding-top: 7px;
         bottom: 0;
     }
 }
 
-.protected::before {
-    content: "\e256";
-    color: @red;
-}
-
-.has-unpublished-version::before {
+.has-unpublished-version > .umb-tree-item__inner > .umb-tree-item__annotation::before {
     content: "\e25a";
     color: @green;
+    font-size: 20px;
+    margin-left: -25px;
 }
 
-.is-container::before {
+.is-container > .umb-tree-item__inner > .umb-tree-item__annotation::before {
     content: "\e04e";
     color: @blue;
-    font-size: 8px;
-    padding-left: 13px;
-    padding-top: 8px;
-    pointer-events: none;
+    font-size: 9px;
+    margin-left: -20px;
 }
 
+.protected > .umb-tree-item__inner > .umb-tree-item__annotation::before {
+    content: "\e256";
+    color: @red;
+    font-size: 20px;
+    margin-left: -25px;
+}
 
-.locked::before {
+.locked > .umb-tree-item__inner > .umb-tree-item__annotation::before {
     content: "\e0a7";
     color: @red;
+    font-size: 9px;
+    margin-left: -20px;
 }
 
 .no-access {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
index 9474e98350..b11b656c8e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -1,11 +1,12 @@
 <li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="getNodeCssClass(node)" on-right-click="altSelect(node, $event)">
     <div class="umb-tree-item__inner" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >
         <ins data-element="tree-item-expand"
-            ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}"
-            ng-style="{'visibility': (scope.enablelistviewexpand === 'true' || node.hasChildren && (!node.metaData.isContainer || isDialog)) ? 'visible' : 'hidden'}"
-            ng-click="load(node)">&nbsp;</ins>
+             ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}"
+             ng-style="{'visibility': (scope.enablelistviewexpand === 'true' || node.hasChildren && (!node.metaData.isContainer || isDialog)) ? 'visible' : 'hidden'}"
+             ng-click="load(node)">&nbsp;</ins>
 
         <i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.routePath}}" ng-click="select(node, $event)" ng-style="::node.style"></i>
+        <span class="umb-tree-item__annotation"></span>
         <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{node.name}}</a>
 
         <!-- NOTE: These are the 'option' elipses -->