diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index a5b7ea023a..653e107941 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -24,10 +24,17 @@ angular.module("umbraco.directives.html")
                     scope.dialogModel.view = "views/documenttype/dialogs/iconpicker/iconpicker.html";
                     scope.showDialog = true;
 
-                    scope.dialogModel.pickIcon = function(icon) {
-                        scope.icon = icon;
+                    scope.dialogModel.pickIcon = function(icon, color) {
+
+                        if(color) {
+                            scope.icon = icon + " " + color;
+                        } else {
+                            scope.icon = icon;
+                        }
+
                         scope.showDialog = false;
                         scope.dialogModel = null;
+
                     };
 
                     scope.dialogModel.close = function(){
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/iconpicker/iconpicker.html
index 1b083159fd..824346aa70 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/iconpicker/iconpicker.html
@@ -28,7 +28,7 @@
         <div class="umb-control-group">
             <ul class="umb-thumbnails thumbnails" ng-class="color">
                 <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-                    <a href="#" title="{{icon}}" class="thumbnail" ng-click="model.pickIcon(icon)" prevent-default>
+                    <a href="#" title="{{icon}}" class="thumbnail" ng-click="model.pickIcon(icon, color)" prevent-default>
                         <i class="{{icon}} large" style="font-size: 32px"></i>
                     </a>
                 </li>