WordPress: Desaturate admin menu icons added as images before WordPress 3.8 to keep them from stealing attention.

desaturate-menu-image-icons.php

<?php
/**
 * Plugin Name: Desaturate Menu Image Icons
 * Description: Desaturate admin menu icons added as images before WordPress 3.8 to keep them from stealing attention.
 * Version: 1.0.0
 * Author: Brady Vercher
 * Author URI: http://www.blazersix.com/
 * License: GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/**
 * Print CSS in the admin header to apply grayscale filters to 
 *
 * @link http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
 */
function blazersix_desaturate_menu_image_icons() {
	?>
	<style type="text/css">
	#adminmenu li.menu-top .wp-menu-image img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
		opacity: 1;
	}

	#adminmenu li.wp-has-current-submenu .wp-menu-image img {
		filter: none;
		-webkit-filter: grayscale(0%);
	}
	</style>
	<?php
}
add_action( 'admin_head', 'blazersix_desaturate_menu_image_icons' );