So you call yourself an Icon designer?
Things you should be thinking about, if you weren’t already
Introduction
As part of to [icon] here are a of my few musings about how to get started in icon design. Don’t get me wrong, I’m not the be-all-end-all expert on designing icons, but if practice makes perfect, than I’m getting pretty darn close. Step one is going to be admitting that designing okay icons is easy, and great icons, is remarkably harder, you as a designer are going to have to choose what side of the fence you want to sit on.
Designing great icons is a challenge. To be successful you will not only need to create (or make use of) strong metaphors, pick the right level of detail, and then somehow on top of that, create visual language or style.
One of your biggest challenges as the designer of a 100+ set of icons (coming from experience here) will be constancy. That said, applying a formula of sorts will not necessarily make an icon set awesome. I find the the best way to think about a icon set is to use the analogy of a family. Just as a family they may have similarities, same eye colour, hair colour, body shape, face shape, but, by no means are they clones. Some of the icons will be naturally stronger, some weaker, but all of them have references to one another. Whats important is that together they make sense as a set, and have thoughtful ties with the addition or exclusion of little details. Having a point of view will also be important to make icons that have personality and are individual. A well considered icon set should be similar to having a family of icons, they might not be identical, but in a line up, they need to look and feel like they belong together.
Creating a style
Details
This is more of a meta question, how detailed do you want your icons to be? Keep in mind at the moment most of out sets are 32px to you will have to use abstraction, and be smarter about how you show a details. At some point you will be able to feel when you are getting bogged down into the detail spiral. Some abstraction is totally fine.
Form
What types of forms are you going to use? geometric or more organic? linear? heavy? light?
Will you be keeping edges sharp or will you round corners? A combination of the two is tricky but possible, using inner curves but not outer etc…
If you are rounding corners what value will you use repeatedly?
If you are using strokes what sizes will you use? Try to limit yourself to two sizes. If there is hatching, what angle?
Negative space
Is there a rule or value associated with the negative space between your elements?
e.g sections between an elements are always 2px apart, between separate objects 4px.
Repetition
Are there any shapes that you can repeat throughout the set? This will help them look like a happy family.
e.g My smallest circle size will be a 2px circle, medium 4px, large 8px. Or if you really like a squircle you have made, make sure you use it when it makes sense.
Pro Tips
Pixel Aligner beware
When pasting from one page to another and your pixels are on pixel align most cases your icons are going to get pretty funky pretty fast. Using pixel align is great for quick construction, but make sure you turn it off once you are done, all your hard work to make it snap will be undone really quickly.
Colour or special effects
This is more of a question than a tip, but, if you have colour or effects is there a way you can use colour meaningfully. To emphasise the most import part of the icon, or the action in play.
Text within Icons
Typefaces are always a difficult balancing act in iconography, especially at 32px.
For that reason its best to:
a) evaluate if you really need text?
b) if you can make your own pixel typeface?
c) if you can find a pixel or bitmap typeface that will look ok?
d) if there is a brand typeface etc, can you use a thicker typeface for legibility?
Once you decide o a font as always it’s important to set a constant type size.
Getting text to snap to pixels is going to ruin most typefaces, so aim to get a full pixel height and align any verticals that you can. (i,I, l, L, T,t, H etc..) Don’t stress if you can’t align every letter. Feel free to make your own typeface. Try to at least lineup the first letter. Beware of the $, & and ?
Want to see more beautiful, thought-out icons? Check out to [icon] or get in contact with is at The Artificial.
