--- a/toolkit/themes/shared/narrate/back.svg
+++ b/toolkit/themes/shared/narrate/back.svg
@@ -1,15 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      use:not(:target) {
-        display: none;
-      }
-      #disabled {
-        opacity: 0.5;
-      }
-    </style>
-    <path id="shape" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z " fill="gray"/>
-  </defs>
-  <use id="enabled" xlink:href="#shape"/>
-  <use id="disabled" xlink:href="#shape"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="context-fill" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z"/>
 </svg>
+

--- a/toolkit/themes/shared/narrateControls.css
+++ b/toolkit/themes/shared/narrateControls.css
@@ -40,26 +40,28 @@
 }
 
 #narrate-control > button:not(:first-child) {
   border-left: 1px solid var(--border-color);
 }
 
 #narrate-skip-previous {
   border-top-left-radius: 3px;
-  background-image: url("chrome://global/skin/narrate/back.svg#enabled");
+  background-image: url("chrome://global/skin/narrate/back.svg");
+  /* uncomment after bug 1350010 lands: context-properties: fill; */
+  fill: rgb(128 128 128); /* context-fill for image */
 }
 
 #narrate-skip-next {
   border-top-right-radius: 3px;
   background-image: url("chrome://global/skin/narrate/forward.svg#enabled");
 }
 
 #narrate-skip-previous:disabled {
-  background-image: url("chrome://global/skin/narrate/back.svg#disabled");
+  fill: rgb(128 128 128 / 50%); /* context-fill for image */
 }
 
 #narrate-skip-next:disabled {
   background-image: url("chrome://global/skin/narrate/forward.svg#disabled");
 }
 
 #narrate-start-stop {
   background-image: url("chrome://global/skin/narrate/start.svg");