Painless icon generation for iOS apps with Sketch and Xcode — Part 1
How to create all of your icon sizes in seconds
Generating icons for your iOS project can be time consuming. The last icon set I created in Xcode needed 18 different individual icon sizes. The real killer is that this isn’t a one-off job, you have to create them again every time your icon design changes, and every time you need a new icon. Before you know it you’ve spent hours creating, copying and pasting different icons into Xcode.
I’ve condensed the process of exporting an icon from Sketch into Xcode down to less than a minute, even for a brand new icon. You don’t need to be a designer (although you can get your designer to do the Sketch set up), and you don’t need any tools apart from Sketch and Xcode. Read on to find out how.
Overview
The article is in three parts.
In this part I’ll go through how to set up your icon on an artboard in Sketch, and how to slice it so you can export your whole icon set at once. I’ll tell you how to regenerate your icon set if your design changes, or if you need to add a new size. I’ll give you some tips to speed up the process even more using presets, and I’ll explain how it all works.
In the second part I’ll describe how to set up your icon sets in Xcode to link icon files to their placeholders in a flash.
In the third part I’ll share some tips for setting up your artboards to manage multiple icons at once.
Creating your icon set
Create an icon in Sketch
To start with, you’ll need a vector version of your icon on a single artboard in Sketch. I use a 180x180 artboard, but it can be any size you like.
It should be a vector because they can be exported at any size. If you’ve only got a bitmap image, I strongly recommend that you get a vector version, even if you have to redraw it. It’s worth it in the long run because you’ll be able to export a larger version in the future, and it’s easier to set up.
Slice your artboard
To generate all the different sizes you need for your icon set, we’re going to create a slice. You can find more information about slices in the Sketch documentation, but basically they let you export an area of your artboard at multiple sizes.
A really quick way to create a slice with all the sizes you need is to copy and paste one that is already set up. If you don’t have one, download the resources from https://github.com/gllittler/Painless-icon-generation-for-iOS-apps and open /Sketch/Snowflake icon.sketch.
- Select the slice (called
my-icon/iconin the example file) - Right click and
Copy - Go to your new icon and select its artboard
- Right click and select
Paste Over - Move and resize the slice so that it is the same size as your artboard and positioned at 0, 0.
Export your slice
All that remains is to export your slice.
- Click on the
Export my-icon/icon...button - Select your output folder
- Click
Export.
Look in your output folder and you’ll see a folder called my-icon that contains a full set of icons. Congratulations! They’re ready to be imported into Xcode.
If you want to learn more about maintaining your icon sets and how it all works, keep reading. If you want to keep it simple, go to second part of the article to import them in to Xcode.
Naming your slice
The name of your slice is important. From the Sketch documentation:
A neat trick: if you include a slash (/) in the layer name, it will place that slice in a new folder. For example, if you named your Slice foo/bar.png, it would first create a folder named foo and then create a image named bar.png in there.
I’ve called my slice my-icon/icon. my-icon is the folder name, and you can call that whatever you like. icon will form the name of your individual icons. If you always use icon, your exported pngs will always have the same names, which will make it much quicker to set up new icon sets in Xcode. More on this in part two.
You can be creative with slice naming, and in part three I’ll share some tips to help you export icons directly into Xcode.
Maintaining your icon
Changing your icon design
If your icon design changes:
- Make the changes to your icon on your artboard
- Select your slice
- Hit the export button again
You’ve generated your new icon set in a fraction of a second!
Adding a new size to your icon
If size requirements change:
- Add a new size to your slice (see Explanation of how the slice is set up below)
- Hit the export button again
Again, you have a new icon set in seconds!
Tip: if you have more than one icon to re-generate, use a slice preset. I explain how to use them in the next section.
Speed up your workflow with a slice preset
Using a slice preset, you can set up a slice with a single click. I recommend using one if you create or maintain more than one icon.
To make your preset:
- Select a slice that is already set up
- Click the slice preset button and select
Create Preset... - Call your new preset
iOS icons
To use your preset to slice a new icon:
- Add a slice to your artboard (make it the same size as your artboard, and make sure it is positioned at 0, 0).
- Give your slice a name like
my-icon/icon - Click on the slice preset button and apply your preset
Your slice now has all the sizes from your preset. Tip: you can use a preset to replace the sizes in any slice, so if you’re adding some new sizes to an existing slice you don’t need to delete it and start again, just apply the preset.
How to add new icon sizes to a slice
Each ‘row’ of your slice exports to a given size in your icon set. To work out what sizes you need, look at the placeholders in an icon set in Xcode.
Calculate the size of your icon by multiplying the size in pts of the placeholder by its size factor (i.e. 1 for 1x, 2 for 2x or 3 for 3x). So for a 20pt icon at 3x you’ll need an icon that is 20x3=60. The size box in your slice should contain 60h (the h tells Sketch to scale the exported icon to the given height).
The suffix is added to the name of the slice when you export it. Specify whether it’s for iPhone or iPad, the size in pts and the size factor, e.g. -iPhone20@3x. This will make it easy for you to link up your icons with the placeholder they belong to when added to your icon set in Xcode.
Putting that all together, exporting the above for a slice called my-icon/icon will give you an icon called icon-iPhone20@3x.png in a folder called my-icon.
Summary
In this part of the article I’ve explained how to set up your icon in Sketch so you can export a full icon set from a single artboard at lightening speed. Now you’ve got your icons, head over to part two to import them into Xcode.
For app development and more, please contact me at Control F1 or say ‘hi’ on twitter at @GabEarnsh.
