diff --git a/css/screen.css b/css/screen.css
index 100401b1..eae4e2a3 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -14,20 +14,20 @@
 #cms-content-treeview .cms-tree-expand-trigger, #cms-content-listview .cms-tree-expand-trigger { display: none; }
 
 /** DEPRECATED: .cms-content-tools will be removed in 4.0 Use .cms-content-filters instead.  Hide certain elements when shown in "sidebar mode" */
-.cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 8px; }
+.cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 0; }
 .cms-content-tools #cms-content-treeview .cms-tree-expand-trigger { display: block; float: left; margin: 0 0 2px 0; }
 .cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text { padding-right: 8px; }
 .cms-content-tools #cms-content-treeview .cms-tree .badge { display: none; }
 .cms-content-tools #cms-content-treeview .cms-tree a:hover > .text > .badge, .cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked > .text > .badge { display: inline-block; }
 
 /** -------------------------------------------- The CMS Content Toolbar. Associated behaviour in CMSMain.js -------------------------------------------- */
-.cms-content-toolbar button.ss-ui-button { padding: .4em .75em; vertical-align: baseline; }
-.cms-content-toolbar button.ss-ui-button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms-content-toolbar button.ss-ui-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms-content-toolbar button.ss-ui-button:before { font-size: 1.1em; }
-.cms-content-toolbar button.ss-ui-button.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms-content-toolbar button.ss-ui-button.active { -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -moz-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
-.cms-content-toolbar button.ss-ui-button .ui-button-text { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; vertical-align: baseline; padding: 0; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button, .cms-content-toolbar [class^="font-icon-"].ss-ui-button { padding: 5px 8px; vertical-align: middle; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button:hover, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button:focus, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button:before, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:before { font-size: 1.3em; margin-right: 0.3em; margin-top: 0; vertical-align: middle; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button.ui-state-focus, .cms-content-toolbar [class^="font-icon-"].ss-ui-button.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button.active, .cms-content-toolbar [class*="font-icon-"].ss-ui-button:active, .cms-content-toolbar [class^="font-icon-"].ss-ui-button.active, .cms-content-toolbar [class^="font-icon-"].ss-ui-button:active { -moz-box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; -webkit-box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; box-shadow: 0 0 3px rgba(191, 194, 196, 0.9) inset; }
+.cms-content-toolbar [class*="font-icon-"].ss-ui-button .ui-button-text, .cms-content-toolbar [class^="font-icon-"].ss-ui-button .ui-button-text { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; vertical-align: baseline; padding: 0; }
 
 /** ------------------------------------------------------------------ URLSegment field ----------------------------------------------------------------- */
 .field.urlsegment.loading { background: url(../images/loading.gif) no-repeat 162px 8px; }
@@ -43,7 +43,7 @@
 .cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { width: 100%; overflow-y: auto; }
 .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; }
 .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; }
-.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -o-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
+.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
 .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.btn-icon-add { height: 17px; }
 .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; }
 .cms .AssetAdmin #Root_TreeView .cms-tree ul .class-Folder a span.text span.jstree-foldericon { background: url(../images/blue-folder-horizontal.png) no-repeat; width: 16px; height: 16px; float: left; display: block; margin-right: 4px; }
diff --git a/scss/_CMSMain.scss b/scss/_CMSMain.scss
index e86dfd89..e82336e5 100644
--- a/scss/_CMSMain.scss
+++ b/scss/_CMSMain.scss
@@ -63,16 +63,16 @@
 .cms-content-tools {
 	#cms-content-treeview {
 		.cms-content-toolbar {
-			border-bottom:none;
-			box-shadow:none;
-			margin-bottom:8px;
+			border-bottom: none;
+			box-shadow: none;
+			margin-bottom: 0;
 		}
 		.cms-tree-expand-trigger {
 			display: block;
 			float: left;
-			margin:0 0 2px 0;
-			span.ui-button-text{
-					padding-right:8px;
+			margin: 0 0 2px 0;
+			span.ui-button-text {
+					padding-right: 8px;
 			}
 		}
 
@@ -95,9 +95,10 @@
  * Associated behaviour in CMSMain.js
  * -------------------------------------------- */
 .cms-content-toolbar {
-	button.ss-ui-button {
-		padding: .4em .75em;
-		vertical-align: baseline;
+	[class*="font-icon-"].ss-ui-button,
+	[class^="font-icon-"].ss-ui-button {
+		padding: 5px 8px;
+		vertical-align: middle;
 
 		&:hover {
 			@include box-shadow(none);
@@ -108,15 +109,19 @@
 		}
 
 		&:before {
-			font-size: 1.1em;
+			font-size: 1.3em;
+			margin-right: 0.3em;
+			margin-top: 0;
+			vertical-align: middle;
 		}
 
 		&.ui-state-focus {
 			@include box-shadow(none);
 		}
 
-		&.active {
-			@include box-shadow(0 0 5px #b3b3b3 inset);
+		&.active,
+		&:active {
+			@include box-shadow(0 0 3px rgba(191, 194, 196, .9) inset);
 		}
 
 		.ui-button-text {
diff --git a/templates/Includes/CMSPagesController_ContentToolActions.ss b/templates/Includes/CMSPagesController_ContentToolActions.ss
index 159442e1..3bceb736 100644
--- a/templates/Includes/CMSPagesController_ContentToolActions.ss
+++ b/templates/Includes/CMSPagesController_ContentToolActions.ss
@@ -1,6 +1,6 @@
 <div class="cms-content-toolbar">
 	<div class="cms-actions-buttons-row">
-		<a class="cms-page-add-button ss-ui-button ss-ui-action-constructive tool-button" data-icon="add" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
+		<a class="ss-ui-button cms-content-addpage-button tool-button font-icon-plus" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
 
 		<% if $View == 'Tree' %>
 		<button class="cms-content-batchactions-button tool-button font-icon-check" data-toolid="batch-actions">