--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -101,31 +101,16 @@ body {
   border-width: 0 0 0 1px;
   min-height: var(--toolbar-height);
 }
 
 #timeline-toolbar .devtools-button {
   border-width: 0 1px 0 0;
 }
 
-.devtools-button {
-  position: relative;
-}
-
-.devtools-button::before {
-  content: "";
-  display: block;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -8px 0 0 -8px;
-}
-
 #element-picker::before {
   background-image: url("chrome://devtools/skin/images/command-pick.png");
 }
 
 .pause-button::before {
   background-image: url("images/debugger-pause.png");
 }
 
@@ -135,17 +120,16 @@ body {
 
 .pause-button.paused::before {
   background-image: url("images/debugger-play.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   #element-picker::before {
     background-image: url("chrome://devtools/skin/images/command-pick@2x.png");
-    background-size: 64px;
   }
 
   .pause-button::before {
     background-image: url("images/debugger-pause@2x.png");
   }
 
   .pause-button.paused::before {
     background-image: url("images/debugger-play@2x.png");

--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -83,18 +83,16 @@ html, body, #app, #memory-tool {
 }
 
 .devtools-toolbar > .toolbar-group > label.breakdown-by > span {
   margin-inline-end: 5px;
 }
 
 .devtools-toolbar > .devtools-button.take-snapshot::before {
   background-image: url(images/command-screenshot.png);
-  background-size: 64px 16px;
-  background-position: 0 center;
 }
 @media (min-resolution: 1.1dppx) {
   .devtools-toolbar > .devtools-button.take-snapshot::before {
     background-image: url(images/command-screenshot@2x.png);
   }
 }
 
 /**

--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -690,31 +690,31 @@
 .command-button:hover:active, .command-button[checked=true]:not(:hover) {
   background-color: hsla(206,37%,4%,.4);
 }
 
 .command-button > image {
   -moz-appearance: none;
   width: 16px;
   height: 16px;
-  background-size: 64px 16px;
+  background-size: cover;
   background-position: 0 center;
   background-repeat: no-repeat;
+  opacity: 0.7;
 }
 .command-button:hover > image {
-  background-position: -16px center;
+  opacity: 0.85;
 }
-.command-button:hover:active > image {
-  background-position: -32px center;
+.command-button:hover:active > image,
+.command-button[checked=true] > image,
+.command-button[open=true] > image {
+  opacity: 1;
 }
 .command-button[checked=true] > image {
-  background-position: -48px center;
-}
-.command-button[open=true] > image {
-  background-position: 0 center;
+  filter: url(images/filters.svg#checked-icon-state) !important;
 }
 
 #command-button-paintflashing > image {
   background-image: url("chrome://devtools/skin/images/command-paintflashing.png");
 }
 
 #command-button-screenshot > image {
   background-image: url("chrome://devtools/skin/images/command-screenshot.png");
@@ -725,17 +725,16 @@
 }
 
 #command-button-tilt > image {
   background-image: url("chrome://devtools/skin/images/command-tilt.png");
 }
 
 #command-button-scratchpad > image {
   background-image: url("chrome://devtools/skin/images/command-scratchpad.png");
-  background-size: 48px 16px;
 }
 
 #command-button-pick > image {
   background-image: url("chrome://devtools/skin/images/command-pick.png");
 }
 
 #command-button-frames > image {
   background-image: url("chrome://devtools/skin/images/command-frames.png");
@@ -968,34 +967,32 @@
 }
 
 /* Invert the colors of certain dark theme images for displaying
  * inside of the light theme.
  */
 .theme-light .devtools-tab[icon-invertable] > image,
 .theme-light #toolbox-dock-buttons > toolbarbutton > image,
 .theme-light .command-button-invertable > image,
-.theme-light .command-button-invertable:active > image,
 .theme-light .devtools-closebutton > image,
 .theme-light .devtools-toolbarbutton > image,
 .theme-light .devtools-button::before,
 .theme-light #breadcrumb-separator-normal,
 .theme-light .scrollbutton-up > .toolbarbutton-icon,
 .theme-light .scrollbutton-down > .toolbarbutton-icon,
 .theme-light #black-boxed-message-button .button-icon,
 .theme-light #requests-menu-perf-notice-button .button-icon,
 .theme-light #requests-menu-network-summary-button .button-icon,
 .theme-light #toggle-breakpoints[checked] > image,
 .theme-light .event-tooltip-debugger-icon {
   filter: invert(1);
 }
 
 /* Since selected backgrounds are blue, we want to use the normal
  * (light) icons. */
-.theme-light .command-button-invertable[checked=true]:not(:active) > image,
 .theme-light .devtools-tab[icon-invertable][selected] > image,
 .theme-light .devtools-tab[icon-invertable][highlighted] > image {
   filter: none !important;
 }
 
 .theme-light .command-button:hover {
   background-color: inherit;
 }