Painless icon generation for iOS apps with Sketch and Xcode — Part 2

How to create all of your icon sizes in seconds

Photo by rawpixel.com on Unsplash

Overview

Generating icons for your iOS project can be time consuming. This is the second part of a three part article that explains how 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.

In the first part of this article I covered how to use Sketch to export a full icon set from a single artboard.

Painless icon generation for iOS apps with Sketch and Xcode — Part 1

In this part I’ll describe how to import the icon files into Xcode so you don’t have to ‘drag and drop’ individual icon files each time. I’ll explain how to update your icon with a changed icon design, and how to add a new icon size to an icon set.

In the third part I’ll share some tips for setting up your artboards to manage multiple icons at once.

Painless icon generation for iOS apps with Sketch and Xcode — Part 3

Creating your icon set

Set up your icon set in Xcode

Your project will have an icon set called AppIcon by default. For the examples I’m going to assume this is what you’re using, but you can create a new one if you prefer (in which case your folder names might be different to mine).

To view the icon set in Xcode:

1. Select the Assets.xcassets file for your project.
2. Select AppIcon from the list

You can see the placeholders for your icon set.

An empty icon set in Xcode

If you right-click on AppIcon and select Show in Finder you’ll see that behind the scenes Xcode has created a folder called AppIcon.appiconset to hold the icon set’s individual icon files. Make a note of where this folder is for the next step.

AppIcon.appiconset folder

Add your icons to Xcode

Now we’re going to add the icon files to Xcode.

1. Find the icon set you exported from Sketch (in the last part of the article)
2. Copy the files to your AppIcon.appiconset folder

Icon files in the icon set folder

Back over in Xcode you’ll see that your icons have been added to the icon set in the Unassigned section.

Unassigned icons

Link the icons to placeholders

To link your icons to the placeholders, you can drag and drop them one by one. It’s not too hard because the icons are named to make it easy, but it’s fiddly and slow, and it turns out there is a much quicker way.

Go back to your AppIcon.appiconset folder, and you’ll see it contains a file called Contents.json.

Contents.json file

Contents.json is the file that links your icon files to the placeholder they belong to in Xcode. You can link everything in a flash by copying over a Contents.json file that has already been populated with icon file names. If you don’t have one yet, download the article resources from https://github.com/gllittler/Painless-icon-generation-for-iOS-apps and you’ll find one there.

1. Copy a pre-populated Contents.json file
2. Paste it into your AppIcon.appiconset folder (when asked, replace the existing one)

Back over in Xcode, you’ll see that your icons are now in the correct placeholders.

Populated icon set in Xcode

Congratulations! Your icon set is finished. When you build your project you’ll see your new icon.

How it works

The technique of copying the Contents.json file from one icon set to another to instantly link up your icon files and placeholders relies on the individual icons in a set always having exactly the same file names. Reusing the same slice or slice preset as we did in the last part of the article ensures this.

Maintaining your icon

Changing your icon design

If your icon design changes:

1. Get the icon set containing your new design (exported from Sketch)
2. Drop the files into your AppIcon.appiconset folder

In Xcode you’ll see that your icons have changed. You’ve updated your icon set with a new design in a fraction of a second!

Adding a new size to your icon

If size requirements change:

1. Get the icon set containing the new file size (exported from Sketch)
2. Drop the icon files into your AppIcon.appiconset folder
3. View the icon set in Xcode
4. EITHER: drag and drop the new size into its placeholder
5. OR: copy over the Contents.json file from an icon set that already contains the new size

Icon set with a new icon size in Unassigned

Again, you have updated your icon set in just a few seconds!

Summary

In this part of the article I’ve explained how to take an icon set that you created in Sketch and import it into your Xcode project at lightening speed. Head over to part three for some tips for setting up your artboards to manage multiple icons at once.

Painless icon generation for iOS apps with Sketch and Xcode — Part 3

For app development and more, please contact me at Control F1 or say ‘hi’ on twitter at @GabEarnsh.

Read more of my stories on medium:

Next-level Swift unit tests using the builder pattern

Implementing a Sketch text design system in your Xcode project