WordPress 3.8 shipped with eight different color schemes. The Admin Color Schemes plugin provides an additional 8 color schemes to choose from. All of these choices in colors are a great thing for users but there is one problem. Plugins that use images for custom top-level menu icons disrupt the consistency of the WordPress backend.
Using Dashicons
Dashicons were added to the core of WordPress with the release of 3.8. Dashicons are what’s known as an icon font. The icons are vector based so they can be as large or small as you want without losing quality. Plugin authors can use CSS, HTML, or a Glyph for use within Photoshop to display an icon.
Plugin authors are encouraged to look at the variety of Dashicons available to see if one matches the functionality provided by the plugin. For example, a portfolio plugin can use the portfolio Dashicon. My initial concern with using Dashicons is that two different plugins could end up using the same one. When I asked around to see what other people thought, the most common response was that most sites don’t contain two activated plugins with similar functionality.
Using An SVG Icon
If plugins authors want to use a custom icon, they can use an SVG image. Similar to Dashicons, SVG images can scale large or small without losing quality. WordPress has JavaScript within the core so that SVG icons will automatically blend in with any color scheme.
It’s A Simple But Important Fix
Back in March of 2013, Matt Thomas outlined various methods that plugin authors could use to add top-level menu icons that would fit in with MP6. He explained the pros and cons of each method and at the end of post, suggests the best method to use. Whichever method plugin authors choose, I ask them to make the simple change to their top-level menu icons so that they become a natural part of the WordPress backend.
I love this post because it encourages consistency, and I hope plugin (and theme) developers everywhere take note.
*Quick correction: The Admin Color Schemes plugin provides an additional eight color schemes, not 16. You’ll have a TOTAL of 16 options if you install it, though.