icons

Icons are graphic symbols which convey meaning through their resemblance to real life objects. They are essentially pictures of things. We see them absolutely everywhere, not just in UI design. They can communicate vast amounts of information in a short time and in many cases, a lot faster than text can. They’ve been a staple of human communication throughout history and their ever-growing popularity is ensuring that they continue to be.

There are a few kinds of icons out in the UI field that you’ll commonly come across and will likely be designing. These include:

Favicons - Favicons represent websites and are found in browser bars. They are normally a smaller version of a logo or a variation.

Application Icons - These guys can sit on your phone screen or your dock.

Interface Icons - These are icons used in UI that aid navigation, frequently as part of a collection.

 

What makes an icon “good”?

Icon design affords designers loads of creative freedom and can be lots of fun. It is, at a very basic level, drawing pictures. Unfortunately, not all pictures are drawn equal. You’ll find exceptionally good icons out there as well as terrible ones too. Below you’ll see two Mail icons. Do you think they are both successfully telling you you’ve got mail?

 

Good Icons Are Simple, Clear and Predictable

Don’t add unnecessary decorative elements or details to your icons even if they look great. More often than not, unnecessary elements will get in the way of communication. This does not mean that icons have to be boring. You just need to make strategic use of style elements and tools to give them character without detracting from the icon’s meaning.

Good icons are also predictable. Users know that when they see 3 horizontal lines stacked on top of each other, a.k.a. a “hamburger” icon, they know that clicking it will usually reveal a hidden menu.

 

Good Icons Are Consistent

Good icons are consistent, not only with each other, but with the app or product they will be featured on. When creating an icon collection, be sure to apply the same styling to all of the icons. Make them feel like a family by using the same kinds of shapes, textures, or line weights. Their characteristics must match. You want to create unity, avoiding black sheep, or icons that don’t quite fit in with the rest of the herd.

Take a look at the image below. It features different objects, but you can tell that they belong to the same family because the styling is the same. The color, line weight, and shapes are all the same.

 

The Icon Design Process

Like with all work related to design, icon design has a process that your icons will greatly benefit from if you decide to follow it. We broke it down into 3 main stages: Exploration, Design, and Implementation.

1. Exploration

Before you start drawing out your icons, give yourself some time to explore. Spend some time thinking about the idea or object you are designing for and all the images or symbols directly associated with what you need to communicate.

2. Design

Once you have selected an idea or object to work with, begin sketching. Pencil and paper work wonders and are a quick way to explore alternatives fast. However, many chose to jump on their screens and pixel push early on, which is also totally acceptable.

3. Testing

Finally, you will need to test your icons. You want to make sure they are scalable and read clearly at different sizes. They should also align with the interface in which they will be used. Pop them into the UI and actively look for issues. Go back to the drawing board as needed. Revise your icons based on your findings and test again until they are just right.