Automatic icon resizing for Mobile Apps. Supports Native, Cordova and React Native. Also supports labelling of app icons. Inspired by cordova-icon.

• Introduction
• Installation
• Usage
  • Generating Icons
  • Labelling Icons
• Coding
  • Initial Setup
  • Running Tests
  • Creating a Release
• The Sample Projects
• Troubleshooting
• License

This simple tool allows you to create a single icon in your app project, then create icons of all required sizes from it. It currently works for iOS and Android. You can also add labels to your app icons.

Create a single large icon.png, at least 192 pixels square, then run:

npx app-icon generate

In your project root. As long as you are running NPM 5.2 onwards it download and run the tool, generating icons for your project!

Install with:

npm install -g app-icon

You will need imagemagick installed:

brew install imagemagick          # OSX
sudo apt-get install imagemagick  # Debian/Ubuntu/etc
sudo yum install imagemagick      # CentOS/etc

The commandline tool can be used to generate icons or label icons.

Add an icon (ideally at least 192x192 pixels) named icon.png to your project root. To automatically generate icons of all sizes for all app projects in the same folder, run:

app-icon generate

If an iOS project is present, then the icon will be copied at all required sizes to:

./ios/<ProjectName>/Images.xcassets/AppIcon.appiconset

If an Android project is present, then the icon will be copied at all required sizes to:

./android/app/src/main/res

You can limit the platforms which icons are generated for with the --platforms flag, specifying:

app-icon generate --platforms=ios
app-icon generate --platforms=android,ios

By default the tool will generate icons for both platforms.

You can search in specific directories for icons, if the presence of other projects is interfering, just use the --search or -s parameter:

app-icon generate -s ./ios -s ./android

You can specify the path to the source icon, as well as the folder to search for app projects, just run app-icon generate -h to see the options.

Add labels to an icon with the command below:

app-icon label -i icon.png -o output.png --top UAT --bottom 0.12.3

This would produce output like the below image:

This is a useful trick when you are creating things like internal QA versions of your app, where you might want to show a version number or other label in the icon itself.

The only dependencies are Node 6 (or above) and Yarn.

Useful commands for development are:

Currently the linting style is based on airbnb. Run npm run lint to lint the code.

Install the dependencies (I recommend Node Version Manager):

nvm install 6
nvm use 6
git clone [email protected]:dwmkerr/app-icon.git
cd app-icon
npm install && npm test

Run the tests with:

npm test

Tests are executed with Mocha and coverage is handled by Istanbul. Coverage reports are written to an ./artifacts folder.

To create a release.

• Merge your work to master.
• Use npm version to bump, e.g. npm version patch
• Push and deploy git push --tags && git push && npm publish

This project includes some sample apps in the test folder, which are used for the tests. You can also run these apps to see the icons produced in action.

To run:

cd ./test/ReactNativeIconTest/
npm install
react-native run-ios
# OR react-native run-android

To run:

cd ./test/CordovaApp/
npm install
cordova run ios
# OR cordova run android

To run the native apps, open the ./test/NativeApp directory, then open the iOS/Android projects in XCode/AndroidStudio as needed.

app-icon dependds on ImageMagick. ImageMagick 6 is installed by default on many Linux distributions, as well as OSX. Some platforms are regularly tested (such as Ubuntu, via CircleCI). Other platforms may work but are not tested when I make a release, so your results may vary.

The table below shows the current confirmed compatibility:

Images labelled with app-icon label have the text slightly vertically offset

This seems to be an issue with Imagemagick 6 - try upgrading to 7.

MIT