changing to svg

src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg

+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z" fill="#000"/></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg

+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 0v11H0V0h11zM9.899 1.101H1.1V9.9H9.9V1.1z" fill="#000"/></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg

+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 4.399V5.5H0V4.399h11z" fill="#000"/></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg

+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z" fill="#000"/></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -75,7 +75,7 @@
 }
 
 .monaco-workbench > .part.titlebar > .window-controls-container {
-	display: block;
+	display: flex;
 	flex-grow: 0;
 	flex-shrink: 0;
 	margin-left: auto;
@@ -95,6 +95,33 @@
 	text-align: center;
 }
 
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon {
+	background-size: 11px;
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-close {
+	background-image: url('chrome-close.svg');
+	order: 3;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-unmaximize {
+	background-image: url('chrome-restore.svg');
+	order: 2;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-maximize {
+	background-image: url('chrome-maximize.svg');
+	order: 2;
+
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-minimize {
+	background-image: url('chrome-minimize.svg');
+	order: 1;
+}
+
 .monaco-workbench > .part.titlebar > .window-controls-container > .window-icon:hover {
 	background-color: rgba(255, 255, 255, 0.1);
 }

src/vs/workbench/browser/parts/titlebar/titlebarPart.ts

@@ -228,7 +228,6 @@ export class TitlebarPart extends Part implements ITitleService {
 	}
 
 	public createContentArea(parent: HTMLElement): HTMLElement {
-		const SVGNS = 'http://www.w3.org/2000/svg';
 		this.titleContainer = $(parent);
 
 		if (!isMacintosh) {
@@ -263,54 +262,33 @@ export class TitlebarPart extends Part implements ITitleService {
 			}
 		});
 
-		const $svg = (name: string, props: { [name: string]: any }) => {
-			const el = document.createElementNS(SVGNS, name);
-			Object.keys(props).forEach((prop) => {
-				el.setAttribute(prop, props[prop]);
-			});
-			return el;
-		};
-
 		if (!isMacintosh) {
-			// The svgs and styles for the titlebar come from the electron-titlebar-windows package
 			let windowControls = $(this.titleContainer).div({ class: 'window-controls-container' });
 
-			$(windowControls).div({ class: 'window-icon' }, (builder) => {
-				const svg = $svg('svg', { x: 0, y: 0, viewBox: '0 0 10 1' });
-				svg.appendChild($svg('rect', { fill: 'currentColor', width: 10, height: 1 }));
-				builder.getHTMLElement().appendChild(svg);
-			}).on(EventType.CLICK, () => {
+			$(windowControls).div({ class: 'window-icon window-minimize' }).on(EventType.CLICK, () => {
 				this.windowService.minimizeWindow().then(null, errors.onUnexpectedError);
 			});
 
-			$(windowControls).div({ class: 'window-icon' }, (builder) => {
-				const svgf = $svg('svg', { class: 'window-maximize', x: 0, y: 0, viewBox: '0 0 10 10' });
-				svgf.appendChild($svg('path', { fill: 'currentColor', d: 'M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z' }));
-				builder.getHTMLElement().appendChild(svgf);
-
-				const svgm = $svg('svg', { class: 'window-unmaximize', x: 0, y: 0, viewBox: '0 0 10 10' });
-				const mask = $svg('mask', { id: 'Mask' });
-				mask.appendChild($svg('rect', { fill: '#fff', width: 10, height: 10 }));
-				mask.appendChild($svg('path', { fill: '#000', d: 'M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z' }));
-				mask.appendChild($svg('path', { fill: '#000', d: 'M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z' }));
-				svgm.appendChild(mask);
-				svgm.appendChild($svg('path', { fill: 'currentColor', d: 'M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z', mask: 'url(#Mask)' }));
-				builder.getHTMLElement().appendChild(svgm);
-			}).on(EventType.CLICK, () => {
-				this.windowService.isMaximized().then((maximized) => {
-					if (maximized) {
-						return this.windowService.unmaximizeWindow();
-					} else {
-						return this.windowService.maximizeWindow();
-					}
-				}).then(null, errors.onUnexpectedError);
+			this.windowService.isMaximized().then((maximized) => {
+				let builder;
+				if (maximized) {
+					builder = $(windowControls).div({ class: 'window-icon window-unmaximize' });
+				} else {
+					builder = $(windowControls).div({ class: 'window-icon window-maximize' });
+				}
+
+				builder.on(EventType.CLICK, (e, builder) => {
+					this.windowService.isMaximized().then((maximized) => {
+						if (maximized) {
+							return this.windowService.unmaximizeWindow();
+						} else {
+							return this.windowService.maximizeWindow();
+						}
+					}).then(null, errors.onUnexpectedError);
+				});
 			});
 
-			$(windowControls).div({ class: 'window-icon window-close' }, (builder) => {
-				const svg = $svg('svg', { x: '0', y: '0', viewBox: '0 0 10 10' });
-				svg.appendChild($svg('polygon', { fill: 'currentColor', points: '10,1 9,0 5,4 1,0 0,1 4,5 0,9 1,10 5,6 9,10 10,9 6,5' }));
-				builder.getHTMLElement().appendChild(svg);
-			}).on(EventType.CLICK, () => {
+			$(windowControls).div({ class: 'window-icon window-close' }).on(EventType.CLICK, () => {
 				this.windowService.closeWindow().then(null, errors.onUnexpectedError);
 			});
 
@@ -337,8 +315,18 @@ export class TitlebarPart extends Part implements ITitleService {
 	}
 
 	private onDidChangeMaximized(maximized: boolean) {
-		($(this.titleContainer).getHTMLElement().querySelector('.window-maximize') as SVGElement).style.display = maximized ? 'none' : 'inline';
-		($(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize') as SVGElement).style.display = maximized ? 'inline' : 'none';
+		if (maximized) {
+			let element = $(this.titleContainer).getHTMLElement().querySelector('.window-maximize');
+			element.classList.remove('window-maximize');
+			element.classList.add('window-unmaximize');
+		} else {
+			let element = $(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize');
+			element.classList.remove('window-unmaximize');
+			element.classList.add('window-maximize');
+		}
+
+		// ($(this.titleContainer).getHTMLElement().querySelector('.window-maximize') as SVGElement).style.display = maximized ? 'none' : 'inline';
+		// ($(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize') as SVGElement).style.display = maximized ? 'inline' : 'none';
 		// $(this.titleContainer).getHTMLElement().style.paddingLeft = maximized ? '0.15em' : '0.5em';
 		// $(this.titleContainer).getHTMLElement().style.paddingRight = maximized ? 'calc(2em / 12)' : '0';
 	}