diff --git a/src/components/mode-tools/mode-tools.css b/src/components/mode-tools/mode-tools.css
index e855eb97a0..dbd91ee71e 100644
--- a/src/components/mode-tools/mode-tools.css
+++ b/src/components/mode-tools/mode-tools.css
@@ -1,5 +1,6 @@
 @import "../../css/colors.css";
 @import "../../css/units.css";
+@import "../../css/filters.css";
 
 .mode-tools {
     display: flex;
@@ -11,6 +12,7 @@
     margin-right: calc(2 * $grid-unit);
     width: 2rem;
     height: 2rem;
+    filter: $filter-icon-gray;
 }
 
 [dir="ltr"] .mod-dashed-border {
diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css
index 9eda911519..f43ff3c0d5 100644
--- a/src/components/tool-select-base/tool-select-base.css
+++ b/src/components/tool-select-base/tool-select-base.css
@@ -1,5 +1,6 @@
 @import '../../css/colors.css';
 @import "../../css/units.css";
+@import "../../css/filters.css";
 
 $border-radius: .25rem;
 
@@ -28,6 +29,7 @@ img.tool-select-icon {
     height: 2rem;
     flex-grow: 1;
     vertical-align: middle;
+    filter: $filter-icon-gray;
 }
 
 .mod-tool-select.is-selected .tool-select-icon {
diff --git a/src/css/filters.css b/src/css/filters.css
new file mode 100644
index 0000000000..727b33a828
--- /dev/null
+++ b/src/css/filters.css
@@ -0,0 +1 @@
+$filter-icon-gray: var(--paint-filter-icon-gray, none);