How we design effective icons: Part I

How we design effective icons: Part I

In his latest blog post, Hugo wrote how icons can make a difference. They play an important role in the design of our apps. We use them to make apps look better. But we also use them to create great user experiences. They create a clear context to other content and make it easier to read. They also attract attention to what is important. This makes it easy for users to quickly reach their goals.

Because of their impact, I’ll explain how we design effective icons in a 2-part blog series. In this first part, I’ll write about the three core ingredients of icon design. In the second part, I’ll give an in-depth explanation about how we create effective icons by taking you through the creation of a new icon.

The three core ingredients of effective icons

When we design icons, we always make sure the following attributes are in place: form, unity, recognizability. Always in this particular order. We start with a general form and work our way through to the more specific recognizability. We use this approach to ensure we look at a design from more than one perspective. We also see it as a good way to have some built-in quality control.


To create a stable base for an icon, we begin with combining basic geometric shapes. You can consider this a blueprint. This way we make sure we don’t step into too much detail too soon. This helps us to quickly get a general idea of what an icon should look like.

The lines in this image show the basic shapes that define the design’s form.


The graphical elements we use in a single icon or across a set of icons determine the unity. Good examples of such elements are rounded or square corners, fills or outlines and line weights, colors and more. We repeat these elements as much as possible to tie an icon or set of icons together and making it easier for the viewer to see them as a whole.

This icon of our favorite intergalactic villain contains repetetive design and style elements, creating unity.


An icon works when the viewer is able to easily understand what is depicts. This means that an icon should show properties that the viewer commonly associates with the idea. But it’s also important that an icon can be recognized as a part of a set of icons. This is where Unity also helps.

The unique and distinct features of our villain make him instantly recognizable. But as soon as his evil henchmen share similar style elements this makes them a coherent bunch!


In this post, we have looked at the basic ingredients that help us make great icons. Thinking about them in an iterative way, helps us outline what an icon should look like. In the next chapter of this 2-part series, I'll show you how we actually create them. See you soon!