--- a/devtools/client/framework/options-panel.css
+++ b/devtools/client/framework/options-panel.css
@@ -113,11 +113,12 @@
 #screenshot-options legend::after {
   content: "";
   display: inline-block;
   background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
   width: 16px;
   height: 16px;
   vertical-align: sub;
   margin-inline-start: 5px;
-  filter: var(--theme-icon-filter);
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
   opacity: 0.6;
 }

--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -1182,17 +1182,18 @@ body,
   padding-inline-end: 0;
   margin-top: 3px;
   margin-bottom: 3px;
   margin-inline-end: 1em;
 }
 
 .requests-list-network-summary-button > .summary-info-icon {
   background: url(chrome://devtools/skin/images/profiler-stopwatch.svg) no-repeat;
-  filter: var(--theme-icon-filter);
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
   width: 16px;
   height: 16px;
   opacity: 0.8;
 }
 
 .requests-list-network-summary-button:hover > .summary-info-icon {
   opacity: 1;
 }

--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -226,14 +226,15 @@
 
 #toggle-presets {
   background: url(chrome://devtools/skin/images/pseudo-class.svg);
 }
 
 #filter-container .add,
 #filter-container .remove-button,
 #toggle-presets {
-  filter: var(--theme-icon-filter);
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
 }
 
 .show-presets #toggle-presets {
-  filter: var(--theme-icon-checked-filter);
+  fill: var(--theme-toolbar-checked-color);
 }

--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -4,18 +4,16 @@
 
 @import url("resource://devtools/client/themes/splitters.css");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   font: message-box;
 
   --tab-line-selected-color: var(--blue-50);
-  /* Introduce a specific variable here to be able to special-case firebug theme */
-  --toolbar-icon-checked-filter: var(--theme-icon-checked-filter);
 }
 
 :root.theme-light {
   --tab-line-hover-color: rgba(0,0,0,.2);
 }
 
 :root.theme-dark {
   --tab-line-hover-color: rgba(255,255,255,.2);
@@ -31,19 +29,16 @@
 
 :root[platform="linux"],
 :root.theme-firebug {
   --monospace-font-family: monospace;
 }
 
 :root.theme-firebug {
   --proportional-font-family: Lucida Grande, Tahoma, sans-serif;
-
-  /* Do not use filters for Firebug checked icons: they are images, not SVGs */
-  --toolbar-icon-checked-filter: none;
 }
 
 .devtools-monospace {
   font-family: var(--monospace-font-family);
 }
 
 :root[platform="linux"] .devtools-monospace {
   font-size: 11px;
@@ -261,30 +256,33 @@ checkbox:-moz-focusring {
 
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 .devtools-button:empty::before {
   width: 16px;
   height: 16px;
   margin: 0 3px;
   transition: opacity 0.05s ease-in-out;
 
-  /* For text-as-image usage, match the SVG color */
-  color: #0b0b0b;
+  color: var(--theme-toolbar-color);
   direction: ltr;
   font-size: 11px;
 }
 
 .devtools-button:empty::before {
   content: "";
   display: inline-block;
   background-size: cover;
   background-repeat: no-repeat;
   vertical-align: middle;
 }
 
+.devtools-button.checked:empty::before {
+  color: var(--theme-toolbar-checked-color);
+}
+
 /* Standalone buttons */
 .devtools-button[standalone],
 .devtools-button[data-standalone],
 .devtools-toolbarbutton[standalone],
 .devtools-toolbarbutton[data-standalone] {
   border-color: rgba(138,161,180,0.2) !important;
   min-height: 30px;
 }
@@ -310,17 +308,17 @@ checkbox:-moz-focusring {
 .devtools-button:disabled,
 .devtools-toolbarbutton[disabled] {
   opacity: 0.5 !important;
 }
 
 .devtools-button.checked::before,
 .devtools-toolbarbutton:not([label])[checked=true] > image,
 .devtools-toolbarbutton:not([label])[open=true] > image {
-  filter: var(--toolbar-icon-checked-filter);
+  fill: var(--theme-toolbar-checked-color);
 }
 
 /* Button states */
 .devtools-toolbarbutton[label]:not([type=menu-button]),
 .devtools-toolbarbutton[standalone],
 .devtools-button[data-standalone],
 .devtools-button:not(:empty) {
   background: var(--toolbarbutton-background);

--- a/devtools/client/themes/images/filters.svg
+++ b/devtools/client/themes/images/filters.svg
@@ -1,53 +1,21 @@
 <!-- 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 height="0" xmlns="http://www.w3.org/2000/svg">
-  <!-- DevTools icon filter: Grey 90 + 0.8 opacity (light theme normal) -->
-  <filter id="icon-normal-light">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0 0.01
-              0 0 0 0 0.01
-              0 0 0 0 0.01
-              0 0 0 0.8 0"/>
-  </filter>
-  <!-- DevTools icon filter: Photon Blue 60 (light theme selected) -->
-  <filter id="icon-selected-light">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0 0
-              0 0 0 0 0.122
-              0 0 0 0 0.74
-              0 0 0 1 0"/>
-  </filter>
   <!-- DevTools icon filter: Photon Blue 60 (light theme checked) -->
   <filter id="icon-checked-light">
     <feColorMatrix in="SourceGraphic" type="matrix"
       values="0 0 0 0 0
               0 0 0 0 0.122
               0 0 0 0 0.74
               0 0 0 1 0"/>
   </filter>
-  <!-- DevTools icon filter: Grey 10 + 0.8 opacity (dark theme normal) -->
-  <filter id="icon-normal-dark">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0 0.945
-              0 0 0 0 0.945
-              0 0 0 0 0.95
-              0 0 0 0.8 0"/>
-  </filter>
-  <!-- DevTools icon filter: white (dark theme selected) -->
-  <filter id="icon-selected-dark">
-    <feColorMatrix in="SourceGraphic" type="matrix"
-      values="0 0 0 0 1
-              0 0 0 0 1
-              0 0 0 0 1
-              0 0 0 1 0"/>
-  </filter>
   <!-- DevTools icon filter: syntax blue #75BFFF (dark theme checked) -->
   <filter id="icon-checked-dark">
     <feColorMatrix in="SourceGraphic" type="matrix"
       values="0 0 0 0.18 0
               0 0 0 0.52 0
               0 0 0 1 0
               0 0 0 1 0"/>
   </filter>

--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -44,30 +44,31 @@
 
 .side-menu-widget-item-checkbox .checkbox-check {
   -moz-appearance: none;
   background-image: url(images/item-toggle.svg);
   background-color: transparent;
   width: 16px;
   height: 16px;
   border: 0;
+  -moz-context-properties: fill;
 }
 
 .side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
 .side-menu-widget-item-checkbox:not([checked]) + vbox {
   opacity: 0.3;
 }
 
 .side-menu-widget-item:not(.selected) .checkbox-check {
-  filter: var(--theme-icon-filter);
+  fill: var(--theme-toolbar-color);
 }
 
 /* Make sure icon is white when the item is selected */
 .side-menu-widget-item.selected .checkbox-check {
-  filter: invert(1);
+  fill: var(--theme-toolbar-selected-color);
 }
 
 /* Shader source editors */
 
 .editor-label {
   padding: 1px 12px;
   border-top: 1px solid;
 }

--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -168,26 +168,27 @@ li.error > .stylesheet-info > .styleshee
   margin: 0 8px;
   background-image: url(images/item-toggle.svg);
   background-repeat: no-repeat;
   background-clip: content-box;
   background-position: center;
   background-size: 16px;
   width: 24px;
   height: 40px;
-  filter: var(--theme-icon-filter);
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
 }
 
 .disabled > .stylesheet-enabled {
   opacity: 0.3;
 }
 
 /* Invert the toggle icon in the active row for light theme */
-.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled {
-  filter: invert(1);
+.splitview-nav > li.splitview-active .stylesheet-enabled {
+  fill: var(--theme-toolbar-selected-color);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;
 }
 
 .stylesheet-linked-file:not(:empty){

--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -175,29 +175,29 @@
 }
 
 .devtools-sidebar-tabs tabs > tab[selected],
 .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
   color: var(--theme-selection-color);
   background: var(--theme-selection-background);
 }
 
-/* Invert the colors of certain light theme images for displaying
- * inside of the dark theme.
+/*
+ * Apply the default fill color to toolbar icons
  */
-.devtools-tab.icon-invertable > img,
 .devtools-toolbarbutton > image,
 .devtools-button::before,
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon,
 #black-boxed-message-button .button-icon,
 #canvas-debugging-empty-notice-button .button-icon,
 #toggle-breakpoints[checked] > image,
 .event-tooltip-debugger-icon {
-  filter: var(--theme-icon-filter);
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
 }
 
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {

--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -176,33 +176,28 @@
   margin-inline-start: 10px;
   margin-inline-end: 5px;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
   vertical-align: text-top;
   flex-shrink: 0;
 }
 
-/* Don't apply any filter to non-invertable command button icons */
-.command-button:not(.command-button-invertable),
-/* icon-invertable-light-theme icons are white, so do not invert them for the dark theme */
-.theme-dark .devtools-tab.icon-invertable-light-theme > img,
-/* Since "highlighted" icons are green, we should omit the filter */
-.devtools-tab.icon-invertable.highlighted:not(.selected) > img {
-  filter: none;
-}
-
 .devtools-tab > label {
   white-space: nowrap;
   margin: 0 4px;
 }
 
-/* Apply selected icon filter to `invertable` icons */
-.devtools-tab.selected.icon-invertable > img {
-  filter: var(--theme-icon-selected-filter) !important;
+.devtools-tab > img {
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
+}
+
+.devtools-tab.selected > img {
+  fill: var(--theme-toolbar-selected-color);
 }
 
 .devtools-tab:not(.highlighted) > .highlighted-icon,
 .devtools-tab.selected > .highlighted-icon,
 .devtools-tab:not(.selected).highlighted > .default-icon {
   display: none;
 }
 

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -21,16 +21,17 @@
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
   --theme-toolbar-selected-color: var(--blue-60);
+  --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
   /* Selection */
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
@@ -79,18 +80,16 @@
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Icon filters */
-  --theme-icon-filter: url(chrome://devtools/skin/images/filters.svg#icon-normal-light);
-  --theme-icon-selected-filter: url(chrome://devtools/skin/images/filters.svg#icon-selected-light);
   --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
 
   /* Command line */
@@ -106,16 +105,17 @@
   --theme-sidebar-background: var(--grey-90);
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: var(--grey-90);
   --theme-toolbar-color: var(--grey-40);
   --theme-toolbar-selected-color: white;
+  --theme-toolbar-checked-color: #75BFFF;
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #2F343E;
   --theme-toolbar-hover: #252526;
   --theme-toolbar-hover-active: #252526;
 
   /* Selection */
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
@@ -164,18 +164,16 @@
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 
   /* Icon filters */
-  --theme-icon-filter: url(chrome://devtools/skin/images/filters.svg#icon-normal-dark);
-  --theme-icon-selected-filter: url(chrome://devtools/skin/images/filters.svg#icon-selected-dark);
   --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-dark);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
   /* Command line */
@@ -228,18 +226,16 @@
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
   --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
   --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
 
   /* Icon filters */
-  --theme-icon-filter: none;
-  --theme-icon-selected-filter: none;
   --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
 
   /* Font size */
   --theme-toolbar-font-size: 12px;
 
   /* Header */
   --theme-header-background: #F0F0F0 linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.1),