Design tips for your app icon
Creating an icon which is recognisable, differentiates from other icons and still looks good at different sizes can be a bit of a challenge, so here are a few tips for you.
For an in-depth look at our design principles and how they are applied to iconography throughout Ubuntu, head over to the icon guidelines section on the design website.
Community designer Samuel Hewitt has created a guide to help you through the process of designing your own Ubuntu icon.
The icon you choose for your app should describe what your app is about, what it does, or what service it is there for in a recognisable way. Some ideas which might work for you:
- an altered version of the logo of the service you are using (you might have to check trademark policies first),
- a real-life object your app is connected to (a book with bookmarks for a 'bookmark manager', a fridge for a shopping list app, etc.),
- your own logo, if it's distinctive and easy to spot,
- the name of your app - bear in mind though, that letters get hard to read on small sizes of the icon
Depending on the object you choose to show in the icon, on the perspective, lighting and other factors, it might be hard to recognise what you are trying to depict. A TV might look like a box, or a computer screen, a remote control like a phone, etc. When deciding on the design, you could try a very quick sketch and look at it from some distance or show it to friends to see how well it is understood.
A detailed icon is very nice too look at as it shows quality and your eye for the small things, it might add confusion though, especially in smaller sizes or for people who have impaired eyesight. Show what's necessary, pay attention to detail, but don't overload the icon.
To show off your app well, you will want to ship various sizes of the icon, so they can be used in various settings and places. Sometimes it might be necessary to not just scale down the images, but also remove a few details before sizing down as your icons can very quickly look pixelated which will just confuse your users. The software store will require a 256x256px sized icon.
Use distinctive colours, make your icon stand out a bit and give the shapes enough contrast to be visible.