diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index b5300a0f67..2d317fa4a0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -213,10 +213,22 @@ ul.color-picker li a  {
 
 
 
-.umb-thumbnails{
-  position: relative;
+.umb-thumbnails {
+    position: relative;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    justify-content: flex-start;
 }
 
+.umb-thumbnails > li.icon {
+    width: 14%;
+    text-align: center;
+}
 
 .umb-thumbnails i{margin: auto;}
 .umb-thumbnails a{
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 02035b416a..d72a9085ec 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -100,6 +100,27 @@
 .color-green, .color-green i{color: @green-d1 !important;}
 .color-yellow, .color-yellow i{color: @yellow-d1 !important;}
 
+/* Colors based on http://zavoloklom.github.io/material-design-color-palette/colors.html */
+.color-black, .color-black i { color: #000 !important; }
+.color-blue-grey, .color-blue-grey i { color: #607d8b !important; }
+.color-grey, .color-grey i { color: #9e9e9e !important; }
+.color-brown, .color-brown i { color: #795548 !important; }
+.color-blue, .color-blue i { color: #2196f3 !important; }
+.color-light-blue, .color-light-blue i {color: #03a9f4 !important; }
+.color-cyan, .color-cyan i { color: #00bcd4 !important; }
+.color-green, .color-green i { color: #4caf50 !important; }
+.color-light-green, .color-light-green i {color: #8bc34a !important; }
+.color-lime, .color-lime i { color: #cddc39 !important; }
+.color-yellow, .color-yellow i { color: #ffeb3b !important; }
+.color-amber, .color-amber i { color: #ffc107 !important; }
+.color-orange, .color-orange i { color: #ff9800 !important; }
+.color-deep-orange, .color-deep-orange i { color: #ff5722 !important; }
+.color-red, .color-red i { color: #f44336 !important; }
+.color-pink, .color-pink i { color: #e91e63 !important; }
+.color-purple,.color-purple i { color: #9c27b0 !important; }
+.color-deep-purple, .color-deep-purple i { color: #673ab7 !important; }
+.color-indigo, .color-indigo i { color: #3f51b5 !important; }
+
 
 // Scaffolding
 // -------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
index ec1ad6e663..7f7eed8e4c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
@@ -7,14 +7,13 @@ angular.module("umbraco")
             	$scope.icons = icons;
             });
 
-            $scope.submitClass = function (icon) {
+			$scope.submitClass = function(icon){
 				if($scope.color) {
 					$scope.submit(icon + " " + $scope.color);
 				}
-                else {
-					$scope.submit(icon);
+				else {
+					$scope.submit(icon);	
 				}
 			};
-
 		}
 	);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
index d962f8eec4..b2395228d8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -16,24 +16,25 @@
 
     <div class="umb-control-group">
         <select ng-model="color" class="input-block-level">
-            <option value="">
-                <localize key="colors_black">Black</localize>
-            </option>
-            <option value="color-green">
-                <localize key="colors_green">Green</localize>
-            </option>
-            <option value="color-yellow">
-                <localize key="colors_yellow">Yellow</localize>
-            </option>
-            <option value="color-orange">
-                <localize key="colors_orange">Orange</localize>
-            </option>
-            <option value="color-blue">
-                <localize key="colors_blue">Blue</localize>
-            </option>
-            <option value="color-red">
-                <localize key="colors_red">Red</localize>
-            </option>
+            <option value=""><localize key="colors_black">Black</localize></option>
+            <option value="color-blue-grey"><localize key="colors_bluegrey">Blue Grey</localize></option>
+            <option value="color-grey"><localize key="colors_grey">Grey</localize></option>
+            <option value="color-brown"><localize key="colors_brown">Brown</localize></option>
+            <option value="color-blue"><localize key="colors_blue">Blue</localize></option>
+            <option value="color-light-blue"><localize key="colors_lightblue">Light Blue</localize></option>
+            <option value="color-cyan"><localize key="colors_cyan">Cyan</localize></option>
+            <option value="color-green"><localize key="colors_green">Green</localize></option>
+            <option value="color-light-green"><localize key="colors_lightgreen">Light Green</localize></option>
+            <option value="color-yellow"><localize key="colors_yellow">Yellow</localize></option>
+            <option value="color-lime"><localize key="colors_lime">Lime</localize></option>
+            <option value="color-amber"><localize key="colors_amber">Amber</localize></option>
+            <option value="color-orange"><localize key="colors_orange">Orange</localize></option>
+            <option value="color-deep-orange"><localize key="colors_deeporange">Deep Orange</localize></option>
+            <option value="color-red"><localize key="colors_red">Red</localize></option>
+            <option value="color-pink"><localize key="colors_pink">Pink</localize></option>
+            <option value="color-purple"><localize key="colors_purple">Purple</localize></option>
+            <option value="color-deep-purple"><localize key="colors_deeppurple">Deep Purple</localize></option>
+            <option value="color-indigo"><localize key="colors_indigo">Indigo</localize></option>
         </select>
     </div>
 
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
index 743b72ddf1..0137e5d0e0 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
@@ -663,7 +663,20 @@
         <key alias="yellow">Yellow</key>
         <key alias="orange">Orange</key>
         <key alias="blue">Blue</key>
+        <key alias="bluegrey">Blue Grey</key>
+        <key alias="grey">Grey</key>
+        <key alias="brown">Brown</key>
+        <key alias="lightblue">Light Blue</key>
+        <key alias="cyan">Cyan</key>
+        <key alias="lightgreen">Light Green</key>
+        <key alias="lime">Lime</key>
+        <key alias="amber">Amber</key>
+        <key alias="deeporange">Deep Orange</key>
         <key alias="red">Red</key>
+        <key alias="pink">Pink</key>
+        <key alias="purple">Purple</key>
+        <key alias="deeppurple">Deep Purple</key>
+        <key alias="indigo">Indigo</key>
     </area>
 
     <area alias="shortcuts">
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
index 7a1908c2ff..1ff807b79b 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
@@ -661,7 +661,20 @@
         <key alias="yellow">Yellow</key>
         <key alias="orange">Orange</key>
         <key alias="blue">Blue</key>
+        <key alias="bluegrey">Blue Grey</key>
+        <key alias="grey">Grey</key>
+        <key alias="brown">Brown</key>
+        <key alias="lightblue">Light Blue</key>
+        <key alias="cyan">Cyan</key>
+        <key alias="lightgreen">Light Green</key>
+        <key alias="lime">Lime</key>
+        <key alias="amber">Amber</key>
+        <key alias="deeporange">Deep Orange</key>
         <key alias="red">Red</key>
+        <key alias="pink">Pink</key>
+        <key alias="purple">Purple</key>
+        <key alias="deeppurple">Deep Purple</key>
+        <key alias="indigo">Indigo</key>
     </area>
     <area alias="shortcuts">
         <key alias="addTab">Add tab</key>