Add option in setting to change all icons on panel to grayscale... no need for custom icons.

appIcons.js

@@ -65,7 +65,8 @@ export const DEFAULT_PADDING_SIZE = 4;
 
 let APPICON_STYLE = {
     NORMAL: "NORMAL",
-    SYMBOLIC: "SYMBOLIC"
+    SYMBOLIC: "SYMBOLIC",
+    GRAYSCALE: "GRAYSCALE"
 }
 
 let DOT_STYLE = {
@@ -638,6 +639,13 @@ export const TaskbarAppIcon = GObject.registerClass({
             this.add_style_class_name(symbolic_icon_style_name);
         } else {
             this.remove_style_class_name(symbolic_icon_style_name);
+            if (SETTINGS.get_string('appicon-style') === APPICON_STYLE.GRAYSCALE) {
+                let desaturationValue = 1.0
+                let sat_effect = new Clutter.DesaturateEffect({factor : desaturationValue});
+                sat_effect.set_factor(desaturationValue);
+                this.add_effect_with_name('desaturate', sat_effect);
+            }
+
         }
     }
 

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -3,6 +3,7 @@
   <enum id='org.gnome.shell.extensions.dash-to-panel.appiconStyle'>
     <value value='0' nick='NORMAL'/>
     <value value='1' nick='SYMBOLIC'/>
+    <value value='2' nick='GRAYSCALE'/>
   </enum>
   <enum id='org.gnome.shell.extensions.dash-to-panel.dotStyle'>
     <value value='0' nick='DOTS'/>

ui/SettingsStyle.ui

@@ -113,6 +113,7 @@
                 <items>
                   <item id="NORMAL" translatable="yes">Normal</item>
                   <item id="SYMBOLIC" translatable="yes">Symbolic</item>
+                  <item id="GRAYSCALE" translatable="yes">Grayscale</item>
                 </items>
               </object>
             </child>