--- a/browser/themes/shared/sync-desktopIcon.svg
+++ b/browser/themes/shared/sync-desktopIcon.svg
@@ -1,22 +1,9 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    g:not(:target) { display: none; }
-
-    .glyph { fill: #4d4d4d; }
-    .glyph.translucent { fill-opacity: .15; }
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/>
+  <rect fill="context-fill" fill-opacity="0.15" x="2" y="4" width="12" height="7"/>
+</svg>
 
-    .inverted .glyph { fill: #fff; }
-    .inverted .glyph.translucent { fill-opacity: .15; }
-  </style>
-  <g id="icon">
-    <path class="glyph" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/>
-    <rect class="glyph translucent" x="2" y="4" width="12" height="7"/>
-  </g>
-  <g id="icon-inverted" class="inverted">
-    <path class="glyph" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/>
-    <rect class="glyph translucent" x="2" y="4" width="12" height="7"/>
-  </g>
-</svg>

--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -85,21 +85,23 @@ body {
   padding-inline-start: 35px;
 }
 
 .item.tab > .item-title-container {
   padding-inline-start: 20px;
 }
 
 .item.client.device-image-desktop > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon");
+  background-image: url("chrome://browser/skin/sync-desktopIcon.svg");
+  -moz-context-properties: fill;
+  fill: #4d4d4d;
 }
 
 .item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted");
+  fill: white;
 }
 
 .item.client.device-image-mobile > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon");
 }
 
 .item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted");