Since we design and illustrate a lot of icons for interfaces and infographics, I thought I’d share some tips I picked up along the way for you to consider as you dive into your next icon project. As you probably know, good icons can add visual appeal and structure to a layout, as well as help in navigating a website or communicating a message quickly. However, I’ve also seen my fair share of poor icon design and misuse that can easily ruin a design or hinder a website’s usability. So if you do decide to use icons, make sure you do your research first! As you work on creating new icons, strive to make them easy to recognize and memorize. Remember to:
1. Use the 5-second rule
If it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
Keep the design simple and schematic. Try to reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition. (Intricate details are difficult to distinguish at smaller sizes.)
3. Test the icons for recognizability
Ask people what they expect the icons to stand for. If you receive a variety of responses you probably have to go back to the drawing board.
4. Test the icons for memorability
Ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier.
5. And always include a visible text label
Unless the icon is universally recognized (ie. print, close, play/pause, reply, tweet, share on Facebook), play it safe and add a text label.
Additional Resources for Designers
This website allows you to upload your icon, preview and download them in different sizes formatted for the iPhone, iPad and app store.
A large, well-organized archive of icons that are searchable by category. You can also download an app that allows you to purchase and drag/drop icons directly into your favorite applications.