The Wonderful World of Designing WordPress Dashicons
Ahh—the wonderful world of WordPress Dashicons. Icons and fonts were the first things we decided to work on as we began to discuss the visual changes to the WordPress Dashboard. Since almost all the information is textual, the type layout must really be taken care of.
The icons should complement the font choice. They should appear as if they’re from the exact same homogenized system so the information can be processed more easily without any interruptions.
As we are using the free (Google) font, it seemed a reasonable solution to create grid-based linear, flat and stroke consistent icons. Also, these new icons should suit the personality of the dashboard facelift we did previously. Let’s take a look at the current WordPress Dashicons and see what we’ve done to improve them.
Current WordPress Dashicons
The existing WordPress Dashicons are very diverse in their visual style. Having such complex and diverse shapes throughout the entire dashboard makes processing information on the page harder and slower.
Information should be processed as efficiently and as fast as possible. The key aim of an icon is to be helpful and useful.
Let’s take a look at why these icons might not be the best solution.
Shapes — there’s a lot of variety among shapes. Some are quite abstract while others are very literal. It would be a good idea to keep them all within one system that codes symbols in the same visual language. This way the user gets used to decoding that system.
Complexity — certain icons have lots of details and segments. On the other hand, there are some icons that are very simple and straightforward. Since these icons will be used in small sizes only, complexity just adds visual noise. The smaller the icon, the less details it requires.
Endings — there are endings that are sharp, rounded, straight or curvy. It would be good to match these details with the font. It’s not something that you will notice at first, but fixing all these details creates a big change.
Fill — as WordPress Dashicons are mostly fill–only icons, it would be good to make them equally visually dark / filled. There are inconsistencies in icon size and complexity so some of them appear to be much darker than others.
Strokes — some parts of the icons are stroke only so it would be beneficial to coordinate stroke thickness and use one or two different stroke weights.
Negative / positive space — there are some inconsistencies with the use of black and white areas. Whitespace acts as a stroke or divider between sections on some icons while on others it is more relevant. It actually represents the essence of the icon. Such roles switching when negative space becomes a significant shape, makes comprehension of icons difficult.
Size — some icons tend to be or at least optically appear to be smaller and larger than the average size. This adds to visual confusion and it would be good to adjust icon sizes.
The new set of icons
We tried to draw a new set of icons where we could fix those inconsistencies and shortcomings and eventually add to Dashboard functionality.
Now, here are characteristics of this icon set.
Unified—all icons follow the same logic and are created from the same system with a homogenized structure.
Grid system—icons are constructed within 30×30 px grid system.
Pixel perfect—icons are based on a pixel grid system in order to work efficiently in the digital media. All elements are aligned to the pixel grid.
Correlated to logo—icons are positioned inside a circle to keep the size and shapes visually consistent, composition stable and to be related to WordPress logo design.
Flat—icons follow the same flat visual style that matches the personality of the font.
Simplified shapes — shapes are simplified as much as possible in order to be easier for the eye to process. Complex shapes require additional attention so our eyes are kept more busy while processing data.
Same stroke— icons feature a 1px stroke that is consistent with all shapes.
Same size— size of all icons is 30×30 px and is consistent on all pages. Keeping the same size makes it easier for the eye to process the icon symbolism since it gets used to the same proportions throughout the design.
Linear — icons are linear so that they would match the font personality and size as much as possible. Keeping them linear avoids problems with proportions of positive and negative space. Some are with fill icons some might appear too dark while some appear light and small. Since the WordPress Dashicons system is ever growing, it’s best to avoid such visual style and keep it linear.
Colour—icons work well in black, negative and in color.
Extensible system—since WordPress Dashboard uses a large number of icons and many more will be added as needed, this system allows much more shapes to be drawn with the same characteristics.
Here is the entire set of icons for the Dashboard, All Posts and Add Post pages. We’ll keep adding more icons until we have the entire set so please subscribe so we can keep you updated! 🙂
And that wraps up the wonderful world of WordPress Dashicons. It’s now over to you.
Tell us your take on anything you've just seen. We'd love to hear from you.