diff --git a/browser/themes/shared/devedition.inc.css b/browser/themes/shared/devedition.inc.css
index d667d021f9ff..900fcf50d7cc 100644
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -191,22 +191,11 @@ toolbar[brighttext] #downloads-indicator-counter {
   box-shadow: none !important;
 }
 
-:root[devtoolstheme="dark"] #identity-icon:-moz-lwtheme {
-  --identity-icon-normal: url(chrome://browser/skin/identity-icon.svg#normal-white);
-  --identity-icon-hover: url(chrome://browser/skin/identity-icon.svg#hover-white);
-  --identity-icon-notice: url(chrome://browser/skin/identity-icon.svg#notice-white);
-  --identity-icon-notice-hover: url(chrome://browser/skin/identity-icon.svg#notice-hover-white);
-}
-
-:root[devtoolstheme="dark"] #tracking-protection-icon:-moz-lwtheme {
-  --tracking-protection-icon-enabled: url(chrome://browser/skin/tracking-protection-16.svg#enabled-white);
-  --tracking-protection-icon-disabled: url(chrome://browser/skin/tracking-protection-16.svg#disabled-white);
-}
-
-:root[devtoolstheme="dark"] #connection-icon:-moz-lwtheme {
-  --connection-icon-mixed-passive-loaded: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-white);
-  --connection-icon-mixed-active-loaded: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-white);
-}
+%filter substitution
+%define selectorPrefix :root[devtoolstheme="dark"] 
+%define selectorSuffix :-moz-lwtheme
+%define iconVariant -white
+%include identity-block/icons.inc.css
 
 #urlbar {
   border-inline-start: none !important;
diff --git a/browser/themes/shared/identity-block/icons.inc.css b/browser/themes/shared/identity-block/icons.inc.css
new file mode 100644
index 000000000000..9146683abf5f
--- /dev/null
+++ b/browser/themes/shared/identity-block/icons.inc.css
@@ -0,0 +1,62 @@
+%if 0
+/* 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/. */
+%endif
+
+@selectorPrefix@#identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal@iconVariant@);
+}
+
+@selectorPrefix@#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+@selectorPrefix@#identity-box[open=true] > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover@iconVariant@);
+}
+
+@selectorPrefix@#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice@iconVariant@);
+}
+
+@selectorPrefix@#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+@selectorPrefix@#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ {
+  list-style-image: url(url(chrome://browser/skin/identity-icon.svg#notice-hover@iconVariant@));
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ {
+  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
+}
+
+
+@selectorPrefix@#tracking-protection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled@iconVariant@);
+}
+
+@selectorPrefix@#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled@iconVariant@);
+}
+
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-secure.svg);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
+
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@,
+@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@ {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
+  visibility: visible;
+}
diff --git a/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css
index 01922edb52b0..d8627806649c 100644
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -4,6 +4,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
+%filter substitution
+
+%define selectorPrefix
+%define selectorSuffix
+%define iconVariant
+%include icons.inc.css
+
+%define selectorPrefix
+%define selectorSuffix :-moz-lwtheme
+%define iconVariant -black
+%include icons.inc.css
+
 #identity-box {
   font-size: .9em;
   padding: 3px 5px;
@@ -52,39 +64,8 @@
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
-  --identity-icon-normal: url(chrome://browser/skin/identity-icon.svg#normal);
-  --identity-icon-hover: url(chrome://browser/skin/identity-icon.svg#hover);
-  --identity-icon-notice: url(chrome://browser/skin/identity-icon.svg#notice);
-  --identity-icon-notice-hover: url(chrome://browser/skin/identity-icon.svg#notice-hover);
-
   width: 16px;
   height: 16px;
-  list-style-image: var(--identity-icon-normal);
-}
-
-#identity-icon:-moz-lwtheme {
-  --identity-icon-normal: url(chrome://browser/skin/identity-icon.svg#normal-black);
-  --identity-icon-hover: url(chrome://browser/skin/identity-icon.svg#hover-black);
-  --identity-icon-notice: url(chrome://browser/skin/identity-icon.svg#notice-black);
-  --identity-icon-notice-hover: url(chrome://browser/skin/identity-icon.svg#notice-hover-black);
-}
-
-#identity-box:hover > #identity-icon:not(.no-hover),
-#identity-box[open=true] > #identity-icon {
-  list-style-image: var(--identity-icon-hover);
-}
-
-#identity-box.grantedPermissions > #identity-icon {
-  list-style-image: var(--identity-icon-notice);
-}
-
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
-#identity-box.grantedPermissions[open=true] > #identity-icon {
-  list-style-image: var(--identity-icon-notice-hover);
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
-  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
@@ -142,23 +123,10 @@
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon {
-  --tracking-protection-icon-enabled: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
-  --tracking-protection-icon-disabled: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
-
   width: 16px;
   height: 16px;
   margin-inline-start: 2px;
   margin-inline-end: 0;
-  list-style-image: var(--tracking-protection-icon-enabled);
-}
-
-#tracking-protection-icon:-moz-lwtheme {
-  --tracking-protection-icon-enabled: url(chrome://browser/skin/tracking-protection-16.svg#enabled-black);
-  --tracking-protection-icon-disabled: url(chrome://browser/skin/tracking-protection-16.svg#disabled-black);
-}
-
-#tracking-protection-icon[state="loaded-tracking-content"] {
-  list-style-image: var(--tracking-protection-icon-disabled);
 }
 
 #tracking-protection-icon[animate] {
@@ -184,37 +152,5 @@
   height: 16px;
   margin-inline-start: 2px;
   visibility: collapse;
-
-  --connection-icon-mixed-passive-loaded: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
-  --connection-icon-mixed-active-loaded: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
 }
 
-#connection-icon:-moz-lwtheme {
-  --connection-icon-mixed-passive-loaded: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-black);
-  --connection-icon-mixed-active-loaded: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-black);
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-secure.svg);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
-  list-style-image: var(--connection-icon-mixed-passive-loaded);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
-  list-style-image: var(--connection-icon-mixed-active-loaded);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
-  list-style-image: var(--connection-icon-mixed-passive-loaded);
-  visibility: visible;
-}