diff --git a/src/sql/media/icons/common-icons.css b/src/sql/media/icons/common-icons.css
index 82ae2e413f..ab867b0fd7 100644
--- a/src/sql/media/icons/common-icons.css
+++ b/src/sql/media/icons/common-icons.css
@@ -99,22 +99,22 @@
 .vs .icon.success,
 .vs-dark .icon.success,
 .hc-black .icon.success {
-	background-image: url("status_success.svg");
+	content: url("status_success.svg");
 }
 
 .vs .icon.canceled,
 .vs-dark .icon.canceled,
 .hc-black .icon.canceled {
-	background-image: url("status_cancelled.svg");
+	content: url("status_cancelled.svg");
 }
 
 .vs .icon.in-progress {
-	background-image: url("loading.svg");
+	content: url("loading.svg");
 }
 
 .vs-dark .icon.in-progress,
 .hc-black .icon.in-progress {
-	background-image: url("loading_inverse.svg");
+	content: url("loading_inverse.svg");
 }
 
 .vs .icon.scriptToClipboard,
diff --git a/src/sql/workbench/parts/tasks/browser/media/loading.svg b/src/sql/workbench/parts/tasks/browser/media/loading.svg
new file mode 100644
index 0000000000..e762f06d5e
--- /dev/null
+++ b/src/sql/workbench/parts/tasks/browser/media/loading.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
diff --git a/src/sql/workbench/parts/tasks/browser/media/loading_inverse.svg b/src/sql/workbench/parts/tasks/browser/media/loading_inverse.svg
new file mode 100644
index 0000000000..c3633c0dda
--- /dev/null
+++ b/src/sql/workbench/parts/tasks/browser/media/loading_inverse.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:white;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
diff --git a/src/sql/workbench/parts/tasks/browser/media/status_cancelled.svg b/src/sql/workbench/parts/tasks/browser/media/status_cancelled.svg
new file mode 100644
index 0000000000..ffe0a467c7
--- /dev/null
+++ b/src/sql/workbench/parts/tasks/browser/media/status_cancelled.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#3062d6;}.cls-2{fill:#fff;}</style></defs><title>cancelledstate_16x16</title><circle class="cls-1" cx="8.07" cy="8.07" r="7.93"/><polygon class="cls-2" points="8.82 8.07 11.53 10.78 10.83 11.48 8.12 8.78 5.41 11.48 4.7 10.78 7.42 8.07 4.65 5.31 5.36 4.61 8.12 7.37 10.83 4.67 11.53 5.36 8.82 8.07"/></svg>
\ No newline at end of file
diff --git a/src/sql/workbench/parts/tasks/browser/media/status_success.svg b/src/sql/workbench/parts/tasks/browser/media/status_success.svg
new file mode 100644
index 0000000000..776e1fd909
--- /dev/null
+++ b/src/sql/workbench/parts/tasks/browser/media/status_success.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#3bb44a;}</style></defs><title>success_16x16</title><path class="cls-1" d="M16,3.16,5.48,13.69,0,8.2l.89-.89,4.6,4.59,9.63-9.62Z"/></svg>
\ No newline at end of file
diff --git a/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css b/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
index 221b3ec86e..228bb507dc 100644
--- a/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
+++ b/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
@@ -53,3 +53,24 @@
 .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started {
 	background-image: url('status_queuedtask_inverse.svg');
 }
+
+.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress {
+	background-image: url("loading.svg");
+}
+
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress {
+	background-image: url("loading_inverse.svg");
+}
+
+.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success,
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success {
+	background-image: url("status_success.svg");
+}
+
+.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled,
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled {
+	background-image: url("status_cancelled.svg");
+}
diff --git a/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts b/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
index c387e9d268..85aa511e88 100644
--- a/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
+++ b/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
@@ -66,7 +66,7 @@ export class TaskHistoryRenderer implements IRenderer {
 	public renderElement(tree: ITree, element: TaskNode, templateId: string, templateData: ITaskHistoryTemplateData): void {
 		let taskStatus;
 		if (element) {
-			templateData.icon.className = 'icon task-icon';
+			templateData.icon.className = 'task-icon';
 			switch (element.status) {
 				case TaskStatus.Succeeded:
 					dom.addClass(templateData.icon, TaskHistoryRenderer.SUCCESS_CLASS);