deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_addons-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title>Icons / Extension</title><g fill="none"><path d="M0 0h16v16H0z"/><path d="M22.5 16c-1 0-1 1-1.7 1-.5 0-.8-.3-.8-.7V13c0-.6-.4-1-1-1h-3.2c-.5 0-.8-.3-.8-.7 0-.8 1-.8 1-1.8 0-.9-.9-1.5-2-1.5s-2 .6-2 1.5c0 1 1 1 1 1.8 0 .4-.3.7-.7.7H9c-.6 0-1 .4-1 1v2.3c0 .4.3.7.8.7.7 0 .7-1 1.7-1 .9 0 1.5.9 1.5 2s-.6 2-1.5 2c-1 0-1-1-1.7-1-.5 0-.8.3-.8.8V23c0 .6.4 1 1 1h3.3c.4 0 .7-.3.7-.7 0-.8-1-.8-1-1.8 0-.9.9-1.5 2-1.5s2 .6 2 1.5c0 1-1 1-1 1.8 0 .4.3.7.8.7H19c.6 0 1-.4 1-1v-3.2c0-.5.3-.8.8-.8.7 0 .7 1 1.7 1 .9 0 1.5-.9 1.5-2s-.6-2-1.5-2z" fill="#0A84FF"/></g></svg>
\ No newline at end of file

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_customize-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Glyph / Customize</title><g id="Symbols" fill="none" fill-rule="evenodd"><g id="Glyph-/-Customize" fill-rule="nonzero" fill="#0A84FF"><path d="M4 10c-.886.002-1.665.59-1.91 1.44 0 .01-.015.015-.018.025-.362 1.135-.705 2.11-1.76 2.573l-.022.012-.024.012c-.162.086-.265.254-.266.438 0 .276.224.5.5.5 1.74.12 3.46-.414 4.825-1.5.006-.006.007-.013.013-.02.62-.55.832-1.428.534-2.202C5.575 10.504 4.83 9.995 4 10zM15.693.307c-.365-.363-.95-.383-1.338-.046l-8.03 7c-.206.18-.327.435-.336.707-.01.27.093.535.285.727l1.032 1.03c.184.185.433.288.693.288h.033c.272-.01.527-.13.706-.335l7-8.03c.338-.39.318-.975-.047-1.34z" id="Shape"/></g></g></svg>
\ No newline at end of file

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_default-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><title>default-browser-16</title><path fill="#0A84FF" d="M8,6s0-4,3.5-4S15,5,15,6c0,4.5-7,9-7,9Z"/><path fill="#0A84FF" d="M8,6S8,2,4.5,2,1,5,1,6c0,4.5,7,9,7,9L9,9Z"/></svg>

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_library-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="92px" height="92px" viewBox="0 0 92 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Tip / Icon / Library</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tip-/-Icon-/-Library" fill-rule="nonzero" fill="#0C0C0D"><g id="Icon-/-Library-/-Web"><path fill="#0A84FF" d="M28.7405828,17.2350375 C25.5662458,17.2350375 22.9929371,19.8060508 22.9929371,22.9775563 L22.9929371,80.402744 C22.9929371,83.5742496 25.5662458,86.1452628 28.7405828,86.1452628 C31.9149199,86.1452628 34.4882285,83.5742496 34.4882285,80.402744 L34.4882285,22.9775563 C34.4882285,19.8060508 31.9149199,17.2350375 28.7405828,17.2350375 Z M45.98352,11.4925188 C42.8091829,11.4925188 40.2358743,14.063532 40.2358743,17.2350375 L40.2358743,80.402744 C40.2358743,83.5742496 42.8091829,86.1452628 45.98352,86.1452628 C49.157857,86.1452628 51.7311657,83.5742496 51.7311657,80.402744 L51.7311657,17.2350375 C51.7311657,14.063532 49.157857,11.4925188 45.98352,11.4925188 Z M91.6140792,78.4388026 L68.6234964,15.2710961 C67.9500245,13.3049026 66.2658683,11.8556604 64.2198302,11.4816739 C62.1737921,11.1076875 60.0851643,11.8673187 58.7585671,13.4679283 C57.4319699,15.0685378 57.0744241,17.2603443 57.8236701,19.198979 L80.814253,82.3666855 C81.4877249,84.332879 83.1718811,85.7821212 85.2179192,86.1561076 C87.2639573,86.5300941 89.3525851,85.7704629 90.6791823,84.1698533 C92.0057794,82.5692438 92.3633253,80.3774372 91.6140792,78.4388026 L91.6140792,78.4388026 Z M11.4976457,5.75 C8.32330864,5.75 5.75,8.32101323 5.75,11.4925188 L5.75,80.402744 C5.75,83.5742496 8.32330864,86.1452628 11.4976457,86.1452628 C14.6719828,86.1452628 17.2452914,83.5742496 17.2452914,80.402744 L17.2452914,11.4925188 C17.2452914,8.32101323 14.6719828,5.75 11.4976457,5.75 Z" id="Shape"></path></g></g></g></svg>
\ No newline at end of file

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_performance-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0A84FF" d="M8 1a8.009 8.009 0 0 0-8 8 7.917 7.917 0 0 0 .78 3.43 1 1 0 1 0 1.8-.86A5.943 5.943 0 0 1 2 9a6 6 0 1 1 11.414 2.571 1 1 0 1 0 1.807.858A7.988 7.988 0 0 0 8 1z"/><path fill="#0A84FF" d="M11.769 7.078a.5.5 0 0 0-.69.153L8.616 11.1a2 2 0 1 0 .5 3.558 2.011 2.011 0 0 0 .54-.54 1.954 1.954 0 0 0-.2-2.479l2.463-3.871a.5.5 0 0 0-.15-.69z"/></svg>

deleted file mode 100755
--- a/browser/extensions/onboarding/content/img/icons_private-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title>Icons / Private Browsing</title><g fill="none"><path d="M0 0h32v32H0z"/><path d="M20.4 20c-1.7 0-2.8-2-4.4-2-1.6 0-2.8 2-4.4 2-2 0-3.5-2-3.5-5.3-.1-2 .6-2.7 3.2-2.7s3.4 1.1 4.7 1.1c1.3 0 2.1-1.1 4.7-1.1s3.3.7 3.2 2.7c0 3.3-1.5 5.3-3.5 5.3zm-7.8-5.4c-1.6 0-2.3 1-2.3 1.2 0 .3 1.1.9 2.1.9 1.1 0 2.3-.4 2.3-.7-.2-1-1.1-1.6-2.1-1.4zm6.8 0c-1-.2-1.9.4-2.1 1.4 0 .3 1.2.7 2.3.7 1 0 2.1-.6 2.1-.9 0-.2-.7-1.2-2.3-1.2z" fill="#0A84FF"/></g></svg>
\ No newline at end of file

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_screenshots-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="92px" height="92px" viewBox="0 0 92 92" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Tip / Icon / Screenshots</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tip-/-Icon-/-Screenshots" fill-rule="nonzero" fill="#0C0C0D"><g id="Icon-/-Screenshot-/-Web"><path fill="#0A84FF" d="M23.0526905,5.75 C16.7062659,5.75 11.5614723,10.8982866 11.5614723,17.2490201 L23.0526905,17.2490201 L23.0526905,5.75 Z M57.5263453,5.75 L46.035127,5.75 L46.035127,17.2490201 L57.5263453,17.2490201 L57.5263453,5.75 Z M80.5087818,5.75 L80.5087818,17.2490201 L92,17.2490201 C92,10.8982866 86.8552063,5.75 80.5087818,5.75 Z M40.2895179,5.75 L28.7982997,5.75 L28.7982997,17.2490201 L40.2895179,17.2490201 L40.2895179,5.75 Z M74.7631726,5.75 L63.2719544,5.75 L63.2719544,17.2490201 L74.7631726,17.2490201 L74.7631726,5.75 Z M80.5087818,34.4975502 L92,34.4975502 L92,22.9985301 L80.5087818,22.9985301 L80.5087818,34.4975502 Z M80.5087818,68.9946104 C86.8552063,68.9946104 92,63.8463237 92,57.4955903 L80.5087818,57.4955903 L80.5087818,68.9946104 Z M80.5087818,51.7460803 L92,51.7460803 L92,40.2470602 L80.5087818,40.2470602 L80.5087818,51.7460803 Z M77.9749681,39.286892 C74.3364854,34.0846734 67.1729138,32.8182928 61.9734467,36.4581331 L39.9390357,52.734996 L28.631677,44.8006721 C28.7205927,44.2448747 28.7762328,43.6842562 28.7982997,43.1218152 C28.7892628,38.6172543 26.6604054,34.3800822 23.0526905,31.6860398 L23.0526905,22.9985301 L11.5614723,22.9985301 L11.5614723,29.0355156 C5.79583786,30.1835386 1.31120668,34.7313256 0.240775953,40.5156383 C-0.829654779,46.2999509 1.73019662,52.1531434 6.70268981,55.2910372 C11.675183,58.4289309 18.0565494,58.2180974 22.811375,54.7588235 L29.9474215,59.7551477 L21.9035687,65.4011666 C16.3310302,62.0167647 9.17796578,62.8225007 4.49677041,67.3619045 C-0.184424965,71.9013083 -1.21401,79.0303725 1.99130168,84.710299 C5.19661336,90.3902255 11.8290284,93.1895755 18.1311131,91.5224455 C24.4331979,89.8553154 28.8167193,84.1418505 28.7982997,77.6188754 C28.7959008,76.6687877 28.699673,75.721263 28.5110192,74.7901165 L77.9749681,39.286892 Z M14.4342769,50.3087028 C10.4677615,50.3087028 7.25226545,47.0910236 7.25226545,43.1218152 C7.25226545,39.1526068 10.4677615,35.9349277 14.4342769,35.9349277 C18.4007922,35.9349277 21.6162883,39.1526068 21.6162883,43.1218152 C21.6162883,47.0910236 18.4007922,50.3087028 14.4342769,50.3087028 Z M14.4342769,84.805763 C10.4677615,84.805763 7.25226545,81.5880838 7.25226545,77.6188754 C7.25226545,73.649667 10.4677615,70.4319879 14.4342769,70.4319879 C18.4007922,70.4319879 21.6162883,73.649667 21.6162883,77.6188754 C21.6162883,81.5880838 18.4007922,84.805763 14.4342769,84.805763 Z M45.4605661,70.8402031 L62.7950688,84.0640762 C67.9945359,87.7039165 75.1581075,86.4375358 78.7965902,81.2353172 L55.457926,63.8200513 L45.4605661,70.8402031 Z" id="Shape"></path></g></g></g></svg>
\ No newline at end of file

deleted file mode 100644
--- a/browser/extensions/onboarding/content/img/icons_singlesearch-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16 "><title>Icons / Search</title><g fill="none"><path d="M0 0h32v32H0z"/><path d="M23.7 22.3l-4.8-4.8c1.8-2.5 1.4-6.1-1-8.1s-5.9-1.9-8.1.4c-2.3 2.2-2.4 5.7-.4 8.1 2 2.4 5.6 2.8 8.1 1l4.8 4.8c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4zM14 18c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.4 2.1-1.1 2.9-.8.7-1.8 1.1-2.9 1.1z" fill="#0A84FF"/></g></svg>
\ No newline at end of file

deleted file mode 100755
--- a/browser/extensions/onboarding/content/img/icons_sync-colored.svg
+++ /dev/null
@@ -1,1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="8 8 16 16"><title>  Icons &#x2F; Sync</title><desc>  Created with Sketch.</desc><g fill="none"><rect width="32" height="32"/><path d="M22 9C21.4 9 21 9.4 21 10L21 11.1C19.2 9.3 16.6 8.6 14.2 9.2 11.7 9.9 9.8 11.8 9.2 14.3 9.1 14.7 9.2 15 9.5 15.3 9.8 15.5 10.1 15.6 10.5 15.5 10.8 15.4 11.1 15.1 11.2 14.8 11.7 12.6 13.7 11 16 11 17.6 11 19 11.7 20 13L18 13C17.4 13 17 13.4 17 14 17 14.6 17.4 15 18 15L22 15C22.6 15 23 14.6 23 14L23 10C23 9.4 22.6 9 22 9ZM22 16.5C21.8 16.4 21.5 16.5 21.3 16.6 21.1 16.7 20.9 17 20.8 17.2 20.3 19.4 18.3 21 16 21 14.4 21 13 20.3 12 19L14 19C14.6 19 15 18.6 15 18 15 17.4 14.6 17 14 17L10 17C9.4 17 9 17.4 9 18L9 22C9 22.6 9.4 23 10 23 10.6 23 11 22.6 11 22L11 20.9C12.8 22.7 15.4 23.4 17.8 22.8 20.3 22.1 22.2 20.2 22.8 17.7 22.9 17.2 22.6 16.6 22 16.5Z" fill="#0A84FF"/></g></svg>

--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -195,31 +195,30 @@
   margin: 40px 0 0 0;
   padding: 0;
   margin-inline-start: 16px;
 }
 
 #onboarding-tour-list .onboarding-tour-item-container {
   list-style: none;
   outline: none;
+  position: relative;
 }
 
 #onboarding-tour-list .onboarding-tour-item {
   pointer-events: none;
   display: list-item;
   padding-inline-start: 49px;
   padding-top: 14px;
   padding-bottom: 14px;
   margin-bottom: 9px;
-  background-repeat: no-repeat;
-  background-position: left 17px top 14px;
-  background-size: 20px;
   font-size: 16px;
   cursor: pointer;
   max-height: 54px;
+  --onboarding-tour-item-active-color: #0A84FF;
 }
 
 #onboarding-tour-list .onboarding-tour-item:dir(rtl) {
   background-position-x: right 17px;
 }
 
 #onboarding-tour-list .onboarding-tour-item.onboarding-complete::before {
   content: url("img/icons_tour-complete.svg");
@@ -228,19 +227,42 @@
   top: -10px;
   float: inline-start;
 }
 
 #onboarding-tour-list .onboarding-tour-item.onboarding-complete {
   padding-inline-start: 29px;
 }
 
+#onboarding-tour-list .onboarding-tour-item::after {
+  content: "";
+  display: block;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  offset-inline-start: 0px;
+  top: 0px;
+  background-color: #3E3D40;
+  mask-repeat: no-repeat;
+  mask-position: left 17px top 14px;
+  mask-size: 20px;
+}
+
+#onboarding-tour-list .onboarding-tour-item:dir(rtl)::after {
+  mask-position: right 17px top 14px;
+}
+
+#onboarding-tour-list .onboarding-tour-item.onboarding-active::after,
+#onboarding-tour-list .onboarding-tour-item-container:hover .onboarding-tour-item::after {
+  background-color: var(--onboarding-tour-item-active-color);
+}
+
 #onboarding-tour-list .onboarding-tour-item.onboarding-active,
 #onboarding-tour-list .onboarding-tour-item-container:hover .onboarding-tour-item {
-  color: #0A84FF;
+  color: var(--onboarding-tour-item-active-color);
   /* With 1px transparent outline, could see a border in the high-constrast mode */
   outline: 1px solid transparent;
 }
 
 /* Default browser tour */
 #onboarding-tour-is-default-browser-msg {
   font-size: 16px;
   line-height: 21px;
@@ -391,104 +413,59 @@
   background: #002275;
 }
 
 .onboarding-tour-action-button:disabled {
   opacity: 0.5;
 }
 
 /* Tour Icons */
-#onboarding-tour-singlesearch,
+#onboarding-tour-singlesearch.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-singlesearch] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_singlesearch.svg");
-}
-
-#onboarding-tour-singlesearch.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-singlesearch {
-  background-image: url("img/icons_singlesearch-colored.svg");
-}
-
-#onboarding-tour-private-browsing,
-#onboarding-notification-bar[data-target-tour-id=onboarding-tour-private-browsing] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_private.svg");
+  mask-image: url("img/icons_singlesearch.svg");
 }
 
-#onboarding-tour-private-browsing.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-private-browsing {
-  background-image: url("img/icons_private-colored.svg");
-}
-
-#onboarding-tour-addons,
-#onboarding-notification-bar[data-target-tour-id=onboarding-tour-addons] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_addons.svg");
+#onboarding-tour-private-browsing.onboarding-tour-item::after,
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-private-browsing] #onboarding-notification-tour-title::before {
+  mask-image: url("img/icons_private.svg");
 }
 
-#onboarding-tour-addons.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-addons {
-  background-image: url("img/icons_addons-colored.svg");
+#onboarding-tour-addons.onboarding-tour-item::after,
+#onboarding-notification-bar[data-target-tour-id=onboarding-tour-addons] #onboarding-notification-tour-title::before {
+  mask-image: url("img/icons_addons.svg");
 }
 
-#onboarding-tour-customize,
+#onboarding-tour-customize.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-customize] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_customize.svg");
-}
-
-#onboarding-tour-customize.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-customize {
-  background-image: url("img/icons_customize-colored.svg");
+  mask-image: url("img/icons_customize.svg");
 }
 
-#onboarding-tour-default-browser ,
+#onboarding-tour-default-browser.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-default-browser] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_default.svg");
+  mask-image: url("img/icons_default.svg");
 }
 
-#onboarding-tour-default-browser.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-default-browser {
-  background-image: url("img/icons_default-colored.svg");
-}
-
-#onboarding-tour-sync,
+#onboarding-tour-sync.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-sync] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_sync.svg");
-}
-
-#onboarding-tour-sync.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-sync {
-  background-image: url("img/icons_sync-colored.svg");
+  mask-image: url("img/icons_sync.svg");
 }
 
-#onboarding-tour-library,
+#onboarding-tour-library.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-library] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_library.svg");
-}
-
-#onboarding-tour-library.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-library {
-  background-image: url("img/icons_library-colored.svg");
+  mask-image: url("img/icons_library.svg");
 }
 
-#onboarding-tour-performance,
+#onboarding-tour-performance.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-performance] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_performance.svg");
+  mask-image: url("img/icons_performance.svg");
 }
 
-#onboarding-tour-performance.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-performance {
-  background-image: url("img/icons_performance-colored.svg");
-}
-
-#onboarding-tour-screenshots,
+#onboarding-tour-screenshots.onboarding-tour-item::after,
 #onboarding-notification-bar[data-target-tour-id=onboarding-tour-screenshots] #onboarding-notification-tour-title::before {
-  background-image: url("img/icons_screenshots.svg");
-}
-
-#onboarding-tour-screenshots.onboarding-active,
-.onboarding-tour-item-container:hover #onboarding-tour-screenshots {
-  background-image: url("img/icons_screenshots-colored.svg");
+  mask-image: url("img/icons_screenshots.svg");
 }
 
 a#onboarding-tour-screenshots-button,
 a#onboarding-tour-screenshots-button:hover,
 a#onboarding-tour-screenshots-button:visited {
   color: #fff;
   text-decoration: none;
 }
@@ -546,24 +523,26 @@ a#onboarding-tour-screenshots-button:vis
   font-size: 12px;
   font-weight: normal;
   margin-top: 5px;
 }
 
 #onboarding-notification-tour-title {
   margin: 0;
   font-weight: bold;
-  color: #0f1126;
+  color: var(--onboarding-notification-tour-title-color);
   font-size: 14px;
+  --onboarding-notification-tour-title-color: #0f1126;
 }
 
 #onboarding-notification-tour-title::before {
   content: "";
-  background-repeat: no-repeat;
-  background-size: 14px;
+  background-color: var(--onboarding-notification-tour-title-color);
+  mask-repeat: no-repeat;
+  mask-size: 14px;
   height: 16px;
   width: 16px;
   float: inline-start;
   margin-top: 2px;
   margin-inline-end: 2px;
 }
 
 #onboarding-notification-tour-icon {