Designing Icons

Designing icons

Designing icons is much like designing traditional logos. They should read quickly, be distinct, audience-appropriate, memorable, suggest purpose and scale elegantly. The key difference is that logos are (usually) one-off instances of a graphic mark. Icons, on the other hand, are members of systems. Each icon in the system needs to relate to the others in terms of its graphic language, scale and conventions. Once you establish what a human figure looks like, for example, it is important to adhere to those conventions for all human figures, creating difference only where the difference is important. So, once you establish what a man looks like it’s not difficult to imagine what would need to change to make him a woman…or a centaur.

icon design

The examples above were created by AIGA and the Department of Transportation in 1974 and later expanded in 1979 (except for the Centaur which is a product of The Noun Project). They were designed be be internationally recognizable regardless of literacy or language. Each works in both positive and negative form, providing maximum flexibility and visibility in high-traffic environments.

Depending on the context you are designing for, a more stylized approach may be appropriate. Remember, icons not only inform, they are part of the visual language that communicate the personality of the brand or product they represent. Notice how these icons, designed by Los Angeles designer Keith Knueven for have a much friendlier, less authoritarian, more approachable feel:

icon design (metroicons)

Depending on the use, your icons may also have several states. For instance, the clouds in these weather icons (design: Adam Witcoft) each have multiple states (day, night and neutral). This is a great example of a thoughtful, extendable system. This is why—as we discussed in class—it makes sense to first loosely sketch out the bulk of the system before committing to the details of a single design. It gives you the opportunity to revise the fundamental building blocks as you identify the needs of the system.

weather icon design


Scalability matters also. In many cases icons may need to be distinguishable at fairly small sizes, but the details should resolve beautifully at larger scales also. This set by German designer Sascha Elmers is a good example:

Consider also how line weight affects the character of the design:

…or line quality (design: Ethan Keller):

hand-drawn icon design

Or geometry (design: Cosmic):

Or dimension (design: Ben Barry):

If you’re designing icons for UI elements there are a host of technical concerns which must also be considered. We’re not going to cover these in depth in class, but for those who are interested you may wish to read this article and/or study the work of Susan Kare.

For the purposes of this project, you may want to check out the following:

The work of Tim Boelaars
Eight Hour Day

How to Deisgn Logos, Symbols and Icons, by Gregory Thomas
1,000 Icons, Rockpost Publishers (note: many of the examples in this book aren’t very good, but the sheer variety of approaches may be helpful as reference)
The Icon Handbook — this book from Five Simple Steps deals primarily with application and favicons, but most of the principles and techniques apply universally to designing icons for print or digital applications. Definitely worth adding to your library.

I’ve also created a Pinterest board of icon inspiration for you.

Pin It