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.
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.
Some Icons Need to Blend In
- 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 Shine
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.