diff --git a/toolkit/themes/linux/global/findBar.css b/toolkit/themes/linux/global/findBar.css
index 2f25357c0034..b2d1bd1a6677 100644
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -104,20 +104,24 @@ findbar[noanim] {
 }
 
 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   border-inline-end-width: 0;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-previous > .toolbarbutton-icon,
diff --git a/toolkit/themes/osx/global/findBar.css b/toolkit/themes/osx/global/findBar.css
index 59d389005c84..3eaef921df1f 100644
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -201,21 +201,25 @@ label.findbar-find-fast:-moz-lwtheme,
   border-left: none;
   border-right: none;
   margin-inline-end: 0;
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   border-radius: 0;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   padding-inline-end: 7px;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next:-moz-locale-dir(ltr) {
diff --git a/toolkit/themes/shared/icons/find-arrows.svg b/toolkit/themes/shared/icons/find-arrows.svg
deleted file mode 100644
index d6c59c771ebe..000000000000
--- a/toolkit/themes/shared/icons/find-arrows.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
-  <style>
-    #previous,
-    #next {
-      fill: -moz-dialogtext;
-    }
-    #previous-disabled,
-    #next-disabled {
-      fill: GrayText;
-    }
-    use:not(:target) {
-      display: none;
-    }
-  </style>
-  <defs>
-    <path id="path-previous" d="M5.407,1.5l-5,4.599L1.65,7.283l3.757-3.387l3.705,3.385l1.296-1.158L5.407,1.5z"/>
-    <path id="path-next" d="M5.547,8.255L0.538,3.53l1.239-1.265l3.77,3.641l3.719-3.641l1.264,1.188L5.547,8.255z"/>
-  </defs>
-  <use xlink:href="#path-previous" id="previous"/>
-  <use xlink:href="#path-next" id="next"/>
-  <use xlink:href="#path-previous" id="previous-disabled"/>
-  <use xlink:href="#path-next" id="next-disabled"/>
-</svg>
diff --git a/toolkit/themes/shared/icons/find-next-arrow.svg b/toolkit/themes/shared/icons/find-next-arrow.svg
new file mode 100644
index 000000000000..1a0da49dfeb6
--- /dev/null
+++ b/toolkit/themes/shared/icons/find-next-arrow.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg"
+     width="12" height="12" viewBox="0 0 12 12">
+  <path fill="context-fill" d="M5.547,8.255L0.538,3.53l1.239-1.265l3.77,3.641l3.719-3.641l1.264,1.188L5.547,8.255z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/icons/find-previous-arrow.svg b/toolkit/themes/shared/icons/find-previous-arrow.svg
new file mode 100644
index 000000000000..8fb08c470538
--- /dev/null
+++ b/toolkit/themes/shared/icons/find-previous-arrow.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg"
+     width="12" height="12" viewBox="0 0 12 12">
+  <path fill="context-fill" d="M5.407,1.5l-5,4.599L1.65,7.283l3.757-3.387l3.705,3.385l1.296-1.158L5.407,1.5z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn
index 4c48515ca047..34c9d67b3c0b 100644
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -28,7 +28,8 @@ toolkit.jar:
   skin/classic/global/scale.css                            (../../shared/scale.css)
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
-  skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
+  skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
+  skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
diff --git a/toolkit/themes/windows/global/findBar.css b/toolkit/themes/windows/global/findBar.css
index 2e8ab57a6c82..5d5e3af83509 100644
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -96,19 +96,23 @@ findbar[noanim] {
 }
 
 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-previous,