--- a/browser/themes/shared/sync-mobileIcon.svg
+++ b/browser/themes/shared/sync-mobileIcon.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="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/>
+  <rect fill="context-fill" fill-opacity="0.15" x="4" y="2" width="8" height="11"/>
+</svg>
 
-    .inverted .glyph { fill: #fff; }
-    .inverted .glyph.translucent { fill-opacity: .15; }
-  </style>
-  <g id="icon">
-    <path class="glyph" d="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/>
-    <rect class="glyph translucent" x="4" y="2" width="8" height="11"/>
-  </g>
-  <g id="icon-inverted" class="inverted">
-    <path class="glyph" d="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/>
-    <rect class="glyph translucent" x="4" y="2" width="8" height="11"/>
-  </g>
-</svg>

--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -95,21 +95,23 @@ body {
   fill: #4d4d4d;
 }
 
 .item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container {
   fill: white;
 }
 
 .item.client.device-image-mobile > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon");
+  background-image: url("chrome://browser/skin/sync-mobileIcon.svg");
+  -moz-context-properties: fill;
+  fill: #4d4d4d;
 }
 
 .item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted");
+  fill: white;
 }
 
 .item.tab > .item-title-container > .item-icon-container {
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 .item-icon-container {
   min-width: 16px;