diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
index 9c7e6de83b..471d23ae84 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
@@ -49,7 +49,7 @@ function IconPickerController($scope, iconHelper, localizationService) {
         });
 
         // set a default color if nothing is passed in
-        vm.color = $scope.model.color ? $scope.model.color : vm.colors[0].value;
+        vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors[0];
 
         // if an icon is passed in - preselect it
         vm.icon = $scope.model.icon ? $scope.model.icon : undefined;
@@ -70,9 +70,13 @@ function IconPickerController($scope, iconHelper, localizationService) {
         submit();
     }
 
+    function findColor(value) {
+        return _.findWhere(vm.colors, {value: value});
+    }
+
     function selectColor(color, $index, $event) {
         $scope.model.color = color.value;
-        vm.color = color.value;
+        vm.color = color;
     }
 
     function close() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index b29d9af2fa..3caa6ae03d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -44,9 +44,9 @@
                 <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
                 <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
-                    <ul class="umb-iconpicker" ng-class="vm.color" ng-show="vm.icons">
+                    <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
                         <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm) track by $id(icon)">
-                            <a href="#" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color)" prevent-default>
+                            <a href="#" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)" prevent-default>
                                 <i class="{{icon}} large"></i>
                             </a>
                         </li>