Create App Icons with app-icon

image credits

Icon management for Mobile Apps. Create icons, generate all required sizes, label and annotate. Supports Native, Cordova, React Native, Xamarin and more. — app-icon README

When I develop an iOS app, the default app icon is OK, but at some point, I want to have my own icon. Especially, if you have several sample and demo apps on your iPhone that use the same default app icon.

In this case it is good enough to have an icon with two or three letters. I don’t need a super great designed icon for a demo app.

app-icon npm package

I looked for some tools and found the npm package app-icon. It requires ImageMagick which I have on my machine and I also have Node.js. Therefore, I can (without having to install anything) run the app-icon package as follows:

npx app-icon init

… or with some text (see README):

npx app-icon init --caption "App".

The ‘npx’ command is a Node.js Package Runner … and “lets you run code built with Node.js and published through the npm registry”.

This creates the icon.png file. I simply adapt this file. Either I copy an image into it or just add a plain background with some letters, characters, numbers or emojis 🥳. As I said, a simple icon which I can find on my phone is enough.

adjusted icon.png image

After customizing the icon.png file, I create an AppIcon folder in the Xcode project’s root folder and copy the icon.png file into it. The following command will then generate all the necessary app icons, directly into the Xcode project:

npx app-icon generate -i AppIcon/icon.png

Xcode screenshot with all app icons

Now, I can customize the icon at any time and regenerate it.

Summary

app-icon is a Node.js package that I use to quickly create an icon for a demo iOS app, but I also use it to create the icon for a real app, like the icon for my Mindful Widget app.

Any questions or comments? Write me on Twitter @choas (DM is open).