Skip links

New Sketch tool: Create, Test & Export your app icon

Adjustments, adjustments, adjustments

When designing an icon for an app, that icon is the face of the app anywhere the app is featured e.g.:

  • The website,
  • Itunes,
  • App Store,
  • Device Home Screen,
  • Device Settings,
  • in notifications
  • and so on.

The icon is everywhere!

This also means that the icon will be shown in quite a few different sizes.

Which means that iOS and Android app needs a different size. iOS needs 12 different sizes, and an Android app needs 16 different icon sizes.

One of the main things to figure out as an app developer is, actually figuring out all the different sizes and naming conventions. And then creating all the assets. Therefore creating all of these icons is very time-consuming, and often end up being very frustrating.

 

Why should I use a template?

There are templates for everything. Templates for Standard UI Components. Templates for creating Style Guides. Even templates for showcasing designs in various settings and devices. And event templates for creating app icons.

But until now, none of these templates has taken advantage of the powerful combination of symbols and object resizing settings that are available in Sketch.

How to get the most out of the Sketch template tool

The template uses Symbols to reuse the same icon and scale it automatically to all the required sizes.

You design your icon once, and all the other sizes are generated for you instantly. With correct naming, and ready for export, neatly arranged in folders.

Furthermore, you also get a preview of your icon in different key screens. Such as the Home Screen and the App Stores. This helps you make your icon stand out, but also to make it fit in with the platform you are designing for.

You need to be aware of these pitfalls

Now, an icon that works well on the home screen, might now work well in half the size. It might be too complex, colours blend together, elements can get too small.
Since the template uses the same icon and scales into different sizes, there is no difference between the big or very small version of the icon.

The template is based upon the most frequently used icon size, which is one of the smallest, and thus mostly upscales the icon.

This way, most of the complex issues will be handled when making the original icon. If you would want to make changes on a specific icon size, you can always detach that icon from the Symbol, and make changes just in that icon size.

Version 1.1 of the template has just been released and can be downloaded for free.

Feel free to share the link with your colleagues.

Søren Clausen Designer