diff --git a/src/sql/media/icons/common-icons.css b/src/sql/media/icons/common-icons.css
index 1d0eb9587f..ce01b02054 100644
--- a/src/sql/media/icons/common-icons.css
+++ b/src/sql/media/icons/common-icons.css
@@ -324,54 +324,61 @@ Includes non-masked style declarations. */
 	mask-size: 50% 100%;
 }
 
-.codicon.bold {
+.codicon.masked-icon.bold::before {
 	-webkit-mask-image: url("toolbar-bold.svg");
 	mask-image: url("toolbar-bold.svg");
 }
-.codicon.italic {
+
+.codicon.masked-icon.italic::before {
 	-webkit-mask-image: url("toolbar-italic.svg");
 	mask-image: url("toolbar-italic.svg");
 }
-.codicon.underline {
+
+.codicon.masked-icon.underline::before {
 	-webkit-mask-image: url("toolbar-underline.svg");
 	mask-image: url("toolbar-underline.svg");
 }
-.codicon.highlight {
+
+.codicon.masked-icon.highlight::before {
 	-webkit-mask-image: url("toolbar-highlight.svg");
 	mask-image: url("toolbar-highlight.svg");
 }
-.codicon.code {
-	-webkit-mask-image: url("toolbar-code.svg");
-	mask-image: url("toolbar-code.svg");
-}
-.codicon.insert-link {
-	-webkit-mask-image: url("toolbar-link.svg");
-	mask-image: url("toolbar-link.svg");
-}
-.codicon.list {
-	-webkit-mask-image: url("toolbar-list.svg");
-	mask-image: url("toolbar-list.svg");
-}
-.codicon.ordered-list {
-	-webkit-mask-image: url("toolbar-ordered-list.svg");
-	mask-image: url("toolbar-ordered-list.svg");
-}
-.codicon.insert-image {
-	-webkit-mask-image: url("toolbar-image.svg");
-	mask-image: url("toolbar-image.svg");
-}
-.codicon.split-toggle-on {
-	-webkit-mask-image: url("toolbar-preview-toggle-on.svg");
-	mask-image: url("toolbar-preview-toggle-on.svg");
-}
-.codicon.split-toggle-off {
-	-webkit-mask-image: url("toolbar-preview-toggle-off.svg");
-	mask-image: url("toolbar-preview-toggle-off.svg");
-}
-.codicon.code {
+
+.codicon.masked-icon.code::before {
 	-webkit-mask-image: url("code.svg");
 	mask-image: url("code.svg");
 }
+
+.codicon.masked-icon.insert-link::before {
+	-webkit-mask-image: url("toolbar-link.svg");
+	mask-image: url("toolbar-link.svg");
+}
+
+.codicon.masked-icon.list::before {
+	-webkit-mask-image: url("toolbar-list.svg");
+	mask-image: url("toolbar-list.svg");
+}
+
+.codicon.masked-icon.ordered-list::before {
+	-webkit-mask-image: url("toolbar-ordered-list.svg");
+	mask-image: url("toolbar-ordered-list.svg");
+}
+
+.codicon.masked-icon.insert-image::before {
+	-webkit-mask-image: url("toolbar-image.svg");
+	mask-image: url("toolbar-image.svg");
+}
+
+.codicon.masked-icon.split-toggle-on::before {
+	-webkit-mask-image: url("toolbar-preview-toggle-on.svg");
+	mask-image: url("toolbar-preview-toggle-on.svg");
+}
+
+.codicon.masked-icon.split-toggle-off::before {
+	-webkit-mask-image: url("toolbar-preview-toggle-off.svg");
+	mask-image: url("toolbar-preview-toggle-off.svg");
+}
+
 .codicon.markdown {
 	-webkit-mask-image: url("markdown.svg");
 	mask-image: url("markdown.svg");
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
index 022ce5340f..a12d7c467c 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
@@ -51,16 +51,16 @@ export class MarkdownToolbarComponent {
 	}
 
 	private initActionBar() {
-		let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
-		let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
-		let underlineButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.underlineText', '', 'underline', this.buttonUnderline, this.cellModel, MarkdownButtonType.UNDERLINE);
-		let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
-		let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
-		let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
-		let listButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.listText', '', 'list', this.buttonList, this.cellModel, MarkdownButtonType.UNORDERED_LIST);
-		let orderedListButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.orderedText', '', 'ordered-list', this.buttonOrderedList, this.cellModel, MarkdownButtonType.ORDERED_LIST);
-		let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
-		let togglePreviewAction = this._instantiationService.createInstance(TogglePreviewAction, 'notebook.togglePreview', true, this.cellModel.showPreview);
+		let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold masked-icon', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
+		let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic masked-icon', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
+		let underlineButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.underlineText', '', 'underline masked-icon', this.buttonUnderline, this.cellModel, MarkdownButtonType.UNDERLINE);
+		let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight masked-icon', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
+		let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code masked-icon', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
+		let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link masked-icon', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
+		let listButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.listText', '', 'list masked-icon', this.buttonList, this.cellModel, MarkdownButtonType.UNORDERED_LIST);
+		let orderedListButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.orderedText', '', 'ordered-list masked-icon', this.buttonOrderedList, this.cellModel, MarkdownButtonType.ORDERED_LIST);
+		let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image masked-icon', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
+		let togglePreviewAction = this._instantiationService.createInstance(TogglePreviewAction, 'notebook.togglePreview masked-icon', true, this.cellModel.showPreview);
 
 		let headingDropdown = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading', '', 'heading', this.dropdownHeading, this.cellModel, null);
 		let heading1 = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading1', this.optionHeading1, 'heading 1', this.optionHeading1, this.cellModel, MarkdownButtonType.HEADING1);
diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
index f2a452da46..264272e0f6 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
@@ -52,56 +52,32 @@
 	position: absolute;
 	right: 0;
 }
+
 .markdown-toolbar .carbon-taskbar li a {
 	display: flex;
 	height: 20px;
 	width: 20px;
-	-webkit-mask-position: center;
-	-webkit-mask-repeat: no-repeat;
-	mask-position: center;
-	mask-repeat: no-repeat;
 }
 
-.markdown-toolbar li a.codicon.bold {
-	-webkit-mask-size: 50% 100%;
-	mask-size: 50% 100%;
+.markdown-toolbar li a.codicon.masked-icon::before {
+	-webkit-mask-size: auto;
+	mask-size: auto;
 }
-.markdown-toolbar li a.codicon.italic {
-	-webkit-mask-size: 60% 100%;
-	mask-size: 60% 100%;
-}
-.markdown-toolbar li a.codicon.highlight {
-	-webkit-mask-size: 65% 100%;
-	mask-size: 65% 100%;
-}
-.markdown-toolbar li a.codicon.code {
+
+.markdown-toolbar li a.codicon.code::before {
 	-webkit-mask-size: 88% 100%;
 	mask-size: 88% 100%;
 }
-.markdown-toolbar li a.codicon.insert-link {
+
+.markdown-toolbar li a.codicon.insert-link::before {
 	-webkit-mask-size: 80% 100%;
 	mask-size: 80% 100%;
 }
-.markdown-toolbar li a.codicon.list {
-	-webkit-mask-size: 80% 100%;
-	mask-size: 80% 100%;
-}
-.markdown-toolbar li a.codicon.ordered-list {
+
+.markdown-toolbar li a.codicon.ordered-list::before {
 	-webkit-mask-size: 86% 100%;
 	mask-size: 86% 100%;
 }
-.markdown-toolbar li a.codicon.insertimage {
-	-webkit-mask-size: 86% 100%;
-	mask-size: 86% 100%;
-}
-.markdown-toolbar li a.codicon.split-toggle-on {
-	-webkit-mask-size: 75% 100%;
-	mask-size: 75% 100%;
-}
-.markdown-toolbar li a.codicon.split-toggle-off {
-	-webkit-mask-size: 75% 100%;
-	mask-size: 75% 100%;
-}
 
 text-cell-component .offscreen {
 	height: 1px;
diff --git a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
index b596d1fabc..786386258d 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
@@ -187,7 +187,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		}
 		const toolbarIconColor = theme.getColor(toolbarIcon);
 		if (toolbarIconColor) {
-			collector.addRule(`.markdown-toolbar li a { background-color: ${toolbarIconColor};}`);
+			collector.addRule(`.markdown-toolbar li a:before { background-color: ${toolbarIconColor};}`);
 		}
 		const toolbarBottomBorderColor = theme.getColor(toolbarBottomBorder);
 		if (toolbarBottomBorderColor) {