14 App Icon Design Tips to Follow

App icon is a small picture representing an app in Google Play or App Store and user device after installation. If you are soon to create your first mobile app icon design, follow our tips below. They will help you to avoid common app icon design mistakes and create high-quality images.

Your role as a designer is to make an app noticeable. Users tend to judge and choose apps based on their icons available in app stores. Well designed icon serves as an indicator of high quality and usability of the app and helps to convey the message of professionalism and reliability of the product.

To achieve great results, keep in mind the following tips for creative app icon design:

Follow guideline requirements

Icons are not just beautiful images meant to please the eye, they are viewed inside the graphical interface of the certain operating system. They should look naturally to the interface, harmoniously co-exist with other app icons and yet bear some uniqueness. That’s why you start app icon development with familiarizing yourself with guidelines from the OS manufacturer and looking at icon grid samples for Photoshop.

Here’re some guidelines to start with:

  1. Official website on Android Material Design. Here you can learn about style, animation, components, patterns, layout, usability and download reference materials for designers.
  2. iOS Human Interface Guidelines from Apple will be of service if you want to create app icon for iPad or iPhone.

Mobile icon samples

These guidelines will give you an idea of general principles and recommended practices.

2. Make sure you know your audience

App icon design for a local company like meal delivery service is going to be different from an icon for company entering an international market. In the last case you’ve got to be sure that symbols you use are universal for people with different cultural background and won’t offend anyone:

3. Create your icon in original size

Icon looking nice in big size won’t necessarily impress as much when re-sized to 120 x 120 pixels. It should be taken into account when working on professional icon design.

4. Simplify and get rid of unnecessary details

The more fancy details your add, the less recognizable your icon will be. Ideally it should be something close to a symbol: simple and comprehensible. For example, here’s an icon we've made for app with recipes:

Icon for Cookorama app

5. Use lights and shadows right

Lights and shadows are something to think about when working on an app icon design for Android. Guide on Android Material explains this aspect in great detail. It also lists values for shadows casted by objects of different colors.

Gmail app icon

6. Check whether icon looks its best on various backgrounds (dark, light, colored)

In market your icon will be displayed on white or light-grey background but it is only wise to check whether it looks good on popular backgrounds of different color since users like to personalize their home screen wallpapers.

7. Be brave and use perspective

Standardization is good only to a certain point. Utilizing perspective you can achieve interesting results and help your app icon design become more vivid and fresh. Here’s an excellent example of using perspective to attract attention:

Пример иконки приложения с перспективой

8. Create a unique form

App icons below are memorable thanks to the interesting forms used on them:

Icons with interesting forms attract attention

Those forms help users to recognize the icon even when it is displayed in small size.

9. Use less colors

Once you start adding colors, it’s hard to stop. That’s why you should make sure you stick to as little as two or three colors — it would be enough. Here’s a good example of icon using only two colors:

Icon using two colors

10. Don’t use photos

There’re great photorealistic icons out there but using actual photos is a taboo.

Photorealistic mobile app icons

11. Avoid using too much text

Firstly, tiny text is hard to read. Secondly, it creates localization problems when the company decides to launch its app on a new market (think China or South Korea with their unique writing systems). But you can still use the first letter of your app name, just like Tumblr or Pinterest do:

Tumblr and Pinterest icons

12. Don’t use interface elements on your icon

It’s a very bad idea confusing app users. Graphical control elements shouldn’t be placed there.

13. Create icons introducing main feature of the app

Good icon tells users what app function is and allows him or her to skip descriptions that tend to be lengthy and include too much extra information. Music players often use notes, music instruments or visualizers, cameras — lenses or photo cameras. Messengers like Viber go with conversation bubbles:

App icon for Viber instant messenger

On UARoads icon we have shown two important aspects of the app: transferring data to server and its driver-oriented nature:

UARoads app icon

14. Look at the icons of competitors

Despite the previous tip you should first check icons of the main competitors. They have probably already used the more obvious representations of the main function. Try to bring more originality. Take example from Wunderlist icon that stands out among the rest of standard to-do list applications:

Comparing Wunderlist with other to-do app icons

And here’s an icon we’ve made for a KeepSnap app used by photographers:

KeepSnap app icon

As you can see, even a small image representing your app in the store needs careful consideration. Good app icon design attracts attention of users who were searching market for another application entirely.

Radium icon evolution

Changing icon of a popular application is a serious business as well. For example internet radio player Radium had to change icon several times since new design wasn’t welcomed well by existing users.

We, studio stfalcon.com, will be happy to create a unique design for your application to help your business stand out from the app crowd.

About author

Designer
Oleg was working in studio in 2011-2016 and have participated in numerous successful projects as UI/UX designer.

Related posts

Return to list Return to list