How to Design Better Icons — Interaction & UX Designer

I am currently designing a set of a 100 icons, and I started thinking about what makes a good icon and thought I'd share a few techniques that have helped me.

Research

Know the context. Find out the target audience, evaluate the purpose of the icons and look at the branding. The style should should take cue from these factors. The icons can help set the tone of the interface. If the product or website wants to be friendly and welcoming, then it helps to use rounder, lighter and open lines.

Like these icons I recently saw on Mixcloud:

Simplicity

Less is More.

"I believe that good icons are more akin to road signs rather than illustrations, and ideally should present an idea in a clear, concise, and memorable way. I try to optimize for clarity and simplicity even as palette and resolution options have increased."

Wise words by the godmother of icon design, Susan Kare, who started designing icons in 1983. She designed the icons for 1984 Apple Macintosh 1.0. and became an expert at limited real estate. Many of her original icons are still widely used today, like the Apple command symbol and many of the Photoshop tool bar icons, for example.

We need clear road signs whilst navigating the highway of boundless information. If our guides are well crafted, clear and simple, then the journey is easier and more enjoyable.

Consistency

Consistent icon design can make a big difference to your website or app. The finished product will be polished and the design will feel cohesive. I see so many icons that are a muddle of sharp, rounded, minimal, detailed, thick and thin varieties. This leads to an incoherent design. Define a style and stick to it. Use the same perspective on all the icons. Remember that the style you choose applies to all different instances and sizes. It helps to design one at the biggest and smallest size first to see if it'll work.

Shake Shack's icons are a beautiful example of consistency:

Also see Google Material Design for guidelines to creating consistent icons.

Choose Metaphors Carefully

Try not be too different and obscure. Go with the standard symbols for the more obvious icons like refresh, delete or save. Try not use cultural references - make them universal. Think of the longevity and avoid obsolete shapes like the Floppy Disk save icon.

For the Apple command symbol, Susan Kare found inspiration in an international symbol dictionary and settled on one floral symbol that, in Sweden, indicated an attraction in a campground. Try iconfinder to look at other icon themes to get a basic idea. Sometimes a dictionary or thesaurus helps.