Developer's Blog

10 things to take care with in icon design

Today, I want to let you know about ten points to take care with when creating application icons.
Please freely use this as a reference when creating icons for the basics, easy to miss faults, points to make sure of, and much more.

Also, there are quite a few occasions where I refer to an application icon for certain OS guidelines.
Strictly set points such as angles, light sources and shadowing are also mentioned, so please use them as a reference as well.

1. Shapes with volume

How little of a gap there is when surrounding the icon with a square of the same size as the icon is the volume.

When there is no volume your icon will not stand out, and it will feel like the gap can not be clicked. Just by adding volume you can create the stable feeling that you can easily click the icon.

An icon with a small gap (left) and an icon with a large gap (right)

2. Do not overuse main colours.

Try keeping the number of main colours used to 1 or 2, because by keeping the number of unnecessary colours to a minimum you create a finished product with more of an impression.
However, I feel that using many colours in a way that is not confusing, and creating an icon using one colour that is “colourful” is fine.

3. Easy to understand theme

Creating an icon showing a tool that you have never seen before, or an icon with 4 or 5 objects overlapping each other can lead to confusion. Also, selecting a theme that the user can easily work out what application the icon is for is important.

4. Perfect to the smallest details

It maybe obvious to draw icons neatly and beautifully to the smallest details, but it is also important to be particular about positioning of dots and lines, sizing, proportion, and anything else because the sense of quality will reflect in the finished product.

5. Looks the same for whoever views it

If the icon has a design that seems like a computer, television, or microwave depending on the person viewing it, the impression the icon gives becomes all over the place. Asking other people what do you see, and including unique characteristics(such as an antenna for a television) will help emphasize what it is, and avoid confusion.

6. Add bordering, a background, and a feeling of quality

Many kinds of wallpapers can normally be set to the desktop and homepage screen.
I offer this tip to prevent the reality of icons not being easy to see depending on the wallpaper used.
There are occasions where it is prevented automatically depending on the OS.

Examples where the same colors have been used as the background.

Avoided by adding a barrier (added feeling of quality). This example should be visible when using any background.

7. Icon easily distinguishable even when shrunk

It is advised to check your icon in early stages that when you shrink it doesn’t break apart and become difficult to tell what it is, or the impression it gives becomes totally different. Even though resolutions are increasing, small icons still exist.

8. Icon easily distinguishable even when simplified

I have turned the icon below into a black and white simple silhouette to find out if it can still be easily recognized when the colouring and the added qualities have been removed.

The Sleipnir Mobile for Android logo (left) and a simplified rough silhouette version of it (right)

It is another topic, but silhouette icons like this are often used in software web pages and interfaces.

9. Be able to represent the icon in words

If you are worrying about whether your created icon is easy to understand, easy to remember, or creates a good impression, as a way to decide these worries, why don’t you try explaining what the icon is in words. It is often the case that icons that can be explained in 1 or 2 concise words such as (Yellow book) leave a better impression than those that are longer such as (Whitish square with detailed characters).

10. Does it impress you?

I have already offered many tips, but I think this is the most important – an icon that you want to touch instinctively.
It may be obvious, but I would like to point out that is best to avoid icons that leave an awkward feeling for most people when viewed.

If something is impressive then just that will be enough to like and remember that particular item.
The chances that the icon will be given a special seat by a user increases if they like it.

Please join us on Facebook for Sleipnir for Windows!

Please join us on Facebook for Sleipnir Mobile!

Please follow us on Twitter.

Facebook Comments