diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
index aac11bfd22..9401cacab1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
@@ -36,7 +36,7 @@ Use this directive to generate color swatches to pick from.
             scope.setColor = function (color, $index, $event) {
                 scope.selectedColor = color;
                 if (scope.onSelect) {
-                    scope.onSelect(color.color, $index, $event);
+                    scope.onSelect({color: color, $index: $index, $event: $event});
                     $event.stopPropagation();
                 }
             };
@@ -55,7 +55,7 @@ Use this directive to generate color swatches to pick from.
                 colors: '=?',
                 size: '@',
                 selectedColor: '=',
-                onSelect: '=',
+                onSelect: '&',
                 useLabel: '=',
                 useColorClass: '=?'
             },
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 16d6cf23fc..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,8 +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;
+        $scope.model.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 55c4317279..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
@@ -37,16 +37,16 @@
                         colors="vm.colors"
                         selected-color="vm.color"
                         size="s"
-                        on-select="vm.selectColor">
+                        on-select="vm.selectColor(color)">
                     </umb-color-swatches>
                 </div>
 
                 <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>