Show Menu
Cheatography

Designing Application Icon Rules Cheat Sheet (DRAFT) by [deleted]

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Introd­uction

Every app needs a beautiful and memorable icon that attracts attention in the Applic­ation Store and stands out on the Home screen. Your icon is the first opport­unity to commun­icate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results.

Do's

Embrace simpli­city. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautio­usly. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.
Provide a single focus point. Design an icon with a single, centered point that immedi­ately captures attention and clearly identifies your app.
Design a recogn­izable icon. People shouldn’t have to analyze the icon to figure out what it repres­ents. For example, the Mail app icon uses an envelope, which is univer­sally associated with mail. Take time to design a beautiful and engaging abstract icon that artist­ically represents your app’s purpose.
Keep the background simple and avoid transp­are­ncy. Make sure your icon is opaque, and don’t clutter the backgr­ound. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.
Test your icon against different wallpa­pers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspe­ctive as the device moves.
Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include noness­ential words that repeat the name or tell people what to do with your app, like "­Wat­ch" or "­Pla­y." If your design includes text, use words that relate to the actual content of your applic­ation.
Keep icon corners square. The system applies a mask that rounds icon corners automa­tic­ally.

Don'ts

Don’t include photos, screen­shots, or interface elemen­ts. Photog­raphic details are lost at small sizes. Screen­shots are too complex for an app icon and don’t generally commun­icate your app’s purpose. Interface elements as an icon are misleading and confusing.
Don’t use replicas of Apple/­Man­ufa­cturer hardware produc­ts. Apple products are copyri­ghted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.
Don’t place your app icon throughout the interf­ace. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorp­orating your icon’s color scheme.
 

The 5 Core Aspects

Let’s take a look at some of the best practices of app icon design. I’ll discuss each of my ‘5 core aspects of app icon design’, give tips on how to improve each aspect and show off some examples of how I’ve worked with that quality. A lot of these examples will be based around my own work. That’s not because I feel like it is the best or only way to illustrate these things, but they have the added benefit of me knowing what thoughts went into the process. When going through the aspects, try imagining icons that you like and how the individual aspects take shape in the icons on your homesc­reen.

1. Scalab­ility

One of the most important aspects of an icon is scalab­ility. Because the icon is going to be shown in several places throughout the platform, and at several sizes, it’s important your creation maintains its legibility and unique­ness. It needs to look good on the App Store, on Retina devices and even in the Settings panel.

A very big part of the conceptual stages of app icon design should be dedicated to thinking about if any given design scales gracef­ully.
Working on a 1024 x 1024px canvas can be deceptive – make sure you try out your design on the device and in multiple contexts and sizes
Embrace simplicity and focus on a single object, preferably a unique shape or element that retains its contours and qualities when scaled
Make sure the app icon looks good against a variety of backgr­ounds

2. Recogn­isa­bility

An app icon is like a little song, and being able to identify it easily in amongst all the noise of the store or your homescreen is a key component in great icon design. Like the verse of a song needs to resonate with the listener, so do the shapes, colours and ideas of an app icon. The design needs to craft a sense of memory and connection on both a functional and an emotional level.
Your icon will be vying for attention amongst thousands of other icons, all of which have the same 1024px canvas to make their impact and secure their connection with the viewer. While scalab­ility is a huge part of recogn­isa­bility, so is novelty. The search for a balance between these qualit­ies is the very crux of the discip­line.
Bland, overly compli­cated icons are the enemy of recogn­isa­bility. Try removing details from your icon until the concept starts to deteri­orate. Does this improve recognisability
Try out several variations on your design. Line them up in a grid and try to glance over them, seeing what aspects of the designs catch your eye
Try to decons­truct your favourite app icons and figure out why you like them and what methods they use to stand out

3. Consis­tency

The icon to interface consis­tency is important in streng­thening your visual narrative.
There’s something to be said for creating consis­tency between the experience of intera­cting with your app icon and intera­cting with the app it repres­ents. I feel like good icon design is an extension of what the app is all about. Making sure the two support each other will create a more memorable encounter.
Shaping a sleek, unified image of your app in your users’ minds increases product satisf­action, retention and virality.

In short: making sure your icon works harmon­iously with the essence, functi­onality and design of your applic­ation is a big win.
One way to ensure consis­tency between app and icon is to keep the colour palette of your interface and icon in line, and use a similar and consistent design language – a green interface reinfo­rced by a green app icon, for example
Although it’s not always possible, one way to tighten the connection between your app and your icon is for the symbolism of the icon to directly relate to the functi­onality of the app

4. Uniqueness

This almost goes without saying, but try to make something unique. Mimicking a style or a trend is perfectly fine, but make it your own. Your app icon is constantly competing with other icons for the users’ attention, and standing out can be a perfectly valid argument for a design.

Uniqueness is a tricky part of design, because it not only relies on your skills but also on the choices of others who are trying to tackle a similar task.
Consider what everyone else is doing in your space, then try a different direction. Always do your research – the world doesn’t need another checkmark icon
A singular glyph on a one-color background can be a tricky route to go down if you want to stay unique. Play around with different colors and compos­itions, and challenge yourself to find new and clever metaphors
Color is a great and often overlooked way of reposi­tioning a concept

5. Don’t Use Words

Only in the rarest of occasions is it OK to use words in app icons. If you have to retreat to another tool of abstra­ction – the written word – I’d say that you’re not using the full force of your pictorial arsenal.

Words and pictures are separate repres­ent­ational tools, and mixing them in what is supposed to be a graphical repres­ent­ation often leads to a cluttered and unfocused experi­ence, which is harder to decode. Is there really no better way to visualise the applic­ation than with dry words
Whenever I see words in app icons, I feel like the designer missed an opport­unity to more clearly convey their intent­ions.
There’s no need to include the app name in the icon – it will most often be accomp­anying the icon in the interface. Instead, spend your time coming up with a cool pictorial concept
“But Facebook has the ‘f’ in its app icon”, I hear you say. If you’re using a singular letter and you feel like it’s a good (and unique) fit, then the letter loses its ‘wordy’ qualities and becomes iconic by itself. However, this is more often the exception than the rule
Your company logo and name in a square is never a good solution. Do you have a mark or a glyph that works well within the constraints If not, you’re probably best off coming up with something new. Remember, icons and logos are not the same, and shouldn’t be forced into the same context