Whether flashy or shy or 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 has eliminated a lot of the guess work as to which icon should be used where. Also, the emergence of inexpensive icon libraries created by professional icon designers has largely eliminated the practice of creating 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 not only in your chosen library, but 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 muddies their meanings and locks user uncertainty into your finished project, or falling back on using stand-alone text, which uses more real estate and
Thing 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 have actually live in a number of places and need to be different sizes everywhere.
From minuscule favicon sizing, which is used by your web browser, to the massive App Store displays, one size simply does NOT fit all, and often you art will need to be adjusted at various points where the design breaks.
Resizing Icons All Willy-Nilly Will Blur Them
Resizing icons without regard to pixel fractions creates fuzzy edges. This happens when edges lands between pixels. Newer, high resolution displays make these less visible, but don’t eliminate it entirely.
In situations where designs may undergo a high amount of scrutiny by clients or stakeholders, its 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.
Some Icons Need to Blend In
Interface icons need to be immediately recognizable without competing for attention with the more important parts of your screen. In the image above, note that the highlighted icons:
- Are the same color as the text they are next to.
- This keeps them from grabbing too much attention.
- And 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 Shine
App 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 icon carries your project’s personality throughout, not be driven by current design trends. Is it happy? Or all business? Is it cool? How about hip? Maybe a little nerdy? Possibly its cute. Or a little retro. Whatever it is should come out in your icon design. Remember, your icon “stands for” your project in places where your project 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, however, go for it. Just make sure that ‘everyone’ is actually everyone.
Text is OK. Maybe.
Text isn’t necessarily bad, per se. Its just not nearly as strong as an symbol. If you’re going to use text, make sure to pair it with a strong symbol or else to create a unique visual design that turns the text into a symbol in its own right.