Josh Habdas

While working on a React Native app for Lumpen Radio I got to the point where I was ready to enter beta - and I needed an App Icon for my app. I hit up a few peeps with apps already in the App Store to understand how they created their app icons. Much to my chagrin I found out each of them had created their app icons manually using an image editing tool of some sort. Not wanting to work through the process of manual image creation using a GUI editor I stumbled upon an Inkscape template and accompanying script that’ll do it for you. Giggity!

Update 11 Nov 15: Thanks to a well placed tip from SubProto it’s possible to get the script running on OS X. To do so look at the resize.sh code from the commit bd335fd and adapt accordingly. I tested this on OS X 10.11.1 (El Capitan) using the provided icon template with success.

Update 24 Jul 15: For those with a Sketch license, app icon and launch screen images can be produced along with asset catalogs using the sketch-to-xcode-assets-catalog, though the approach used in this article allows for creation of assets without an additional penny spent. Thanks to Diego Durli for the information.

Automate creation of iOS App Icons using SVG multi-rasterization to PNG with Inkscape and shell scripting

The Docker way

Given I already had Docker installed I simply went ahead and used that. Following are the steps I followed. Please adapt these to meet your needs. The approach will work for both Windows and Mac users and requires a total of zero dollars to do.

This will create a new folder called App-Icon-Template under the root users home directory with the contents of the Git repo and enter the directory. Additionally, it’ll install a few utilities we’ll need to run later.

You’re almost ready to start converting, but first you’ll need to get your SVG into the Docker container.

Copy SVG image into Docker container

With the App Icon Template and Vim now installed inside the container, leave your shell open and, in a text editor on your operating system, open the SVG file and copy its contents to your clipboard by selecting all of the file contents and Ctrl+C (Windows) or Cmd+C (Mac).

With your SVG goodness now copied to your clipboard go back to the Ubuntu shell and do the following:

vim appicon.svg

Next press i to enter insertion mode in Vim.

Then paste the contents of the clipboard into the file with Ctrl+V (Windows) or Cmd+V (Mac). You’ll see the file fill up. Wait until it finishes and then save and exit the file by pressing Esc followed by :wq and finally Enter.

Verify the file exists and has a size greater than 0 by typing ll at the command line after exiting Vim.

You’re now ready to run the script to create the iOS assets.

Run the resize script to create asset images

To run the resize script simply type the following from the command line in the directory where your new image resides:

./resize.sh appicon.svg

You’ll see some verbose output as the script goes to work rasterizing your SVG into PNG bitmap images of various sizes for iOS. Wait for it to finish and then type ll again. You should see something like this:

If you see that, it worked. Now go ahead and create an archive of those files so we can pull them out of the container in a later step.

Create an archive of the image assets

With our assets created we’ll need an easy way to extract them from the Docker container and back onto the host machine (your machine). To do this back out one directory and use the tar utility, like so:

cd ..
tar czf appicons.gz.tar App-Icon-Template

Verify it worked by typing ll. You should see a sizable gzipped tar file named appicons.tar.gz in the working directory.

And that’s that. Now type exit to exit the Docker container, saving your changes automatically. You’re now ready to copy the archive out of the container.

Copy the archive out of the container

With the archive created and the container exited you’re ready to copy the archive out of the container. To do this run the following, which’ll pull the file from the latest docker image created (which happened automatically when you exited):

docker cp $(docker ps -alq):appicons.tar.gz .

You can then extract the archive containing the images and get back to doing what you love most.

Wrapping up

In this post we learned how to run a script to automatically generate icons for iOS apps using an existing SVG image. Currently the script supports up to iOS 8, so please help keep it updated in the future.