Whether flashy or shy, brash or subdued, icons are a part of our daily life. As an artist, I find that well-designed icons are a work of art in and of themselves and that creating icons can be a real joy.
Emerging standards for common functions have eliminated a lot of the guesswork as to which icon should be used where. Also, the rise of inexpensive icon libraries created by professional designers has largely eliminated the need to create custom icon sets for every project. However, not even the best icon libraries can anticipate your every need, and unique project requirements may call for the design of icons that are simply not in your chosen library and in fact, may not exist anywhere. When this happens, a designer who can create the missing icons will keep your project from misusing icons from your library, which would otherwise muddy their meanings and lock user uncertainty into your finished project.
Things to keep in mind when designing icons for your project:
Icons Work at Different Sizes
Icons are not tiny and cuddly. Well, some are, but not all of them. Those beautiful little thumb-tip sized colorful chiclets that adorn your phone screen? Those actually live in a number of places and need to be different sizes everywhere.
From minuscule favicon sizing, used in the address bar of your web browser, to the massive App Store displays, one size simply does NOT fit all, and often your art will need to be adjusted at various points where the design breaks.Custom template I created for managing icon sizes,
Resizing Icons All Willy-Nilly Will Blur Them
Resizing icons without regard to pixel fractions creates fuzzy edges. This happens when edges land between pixels. Newer, high-resolution displays make these less visible, but will not eliminate them entirely.
In situations where designs may undergo a high amount of scrutiny by clients or stakeholders, it’s OK to spend time fashioning pixel-perfect versions of icons, especially those carrying brand messages.
Note on Icon Fonts: Icon fonts are great, but also suffer from pixel-fraction blurring, and there is no way to easily fix this in the font itself. Icons that should not degrade should be handled outside of an icon font.Note the blurring on the edges of the icon on the left.
Some Icons Need to Blend InInterface icons need to be immediately recognizable without competing for attention with the more important parts of your screen. In this image, note that the highlighted icons:
- Are the same color as the text they are next to.
- This prevents them from grabbing too much attention.
- This also visually links the icon to the text.
- Are medium contrast with their background.
- High contrast would call too much attention.
- Low contrast would cause them to appear ‘grayed out’.
Some Icons Need to ShineApp icons, for instance, are like little book covers that sit on a screen filled with other app icons. Often they carry the same weight as your logo. Make sure your branding icons carry the personality of your projects throughout and are not simply driven by current design trends. Is it happy? Or all business? Is it cool? How about hip? Maybe a little nerdy? Possibly cute. Maybe even a little retro. Whatever your product’s brand, it is should come out in your icon design. Remember, your icon “stands for” your product in places where your product cannot. Sometimes icons need to compete for attention.
Icons Have a Variety of Audiences
“Jargon is only jargon once it escapes.”
Jargon and acronyms are only inappropriate if your audience struggles to understand them. If everyone already knows what you’re talking about, go for it. Just make sure that ‘everyone’ is actually everyone.Acronyms and Jargon are OK if your audience already uses them.
Text is OK. Maybe.
Text isn’t necessarily bad, per se. It’s just not nearly as strong as a symbol. If you must use text, pair it with a strong symbol or else create a unique visual design that turns the text into a symbol in its own right.Text in icons can be OK, but should not become a crutch for lack of design.