Types of Icons

There are a few types of icons that make up the iconography of a piece of software. It’s important to understand in which contexts the icons you create are used. What does the icon need to communicate to the end user?

Software Icons

The icons we most commonly think of are the ones that we double-click or tap on to launch the apps we use everyday. These icons have an enormous job to fulfill, they need to tell the user what the app is, and they need to provide a welcoming first impression.

Of course, a great icon should be visually attractive and follow the design language of the platform. But beyond that, a great icon will say to the user where it’s going to lead them. The more concise, yet creative you can get, the better. It’s easy to use skeumorphs to communicate this to the user (e.g. a real-world calendar to represent a calendar app), and sometimes this is the best solution. Other times its better to go for something a little more abstract or symbolic.

UI Icons

UI icons are what we use to interact with the software we use. These represent more simple, straightforward concepts. The idea of UI icons is to minimize or negate the need for text. These icons generally have single-word concepts. The user expects these icons to access certain functions, and perform actions in the software they’re using. In a web browser, an arrow pointing left means go back to the previous page. In your email app, an envelope with a plus sign might mean create a new email.

These icons are not only simple in what they convey, but also should be visually simple. Many times these icons take the simplified form of an outline or a silhouette. While you do want to be creative with how you style these icons, it’s generally good practice to use imagery that makes sense in the visual language of the platform you’re designing for, or is universally understood.