Automatic splash screen generation and resizing for Mobile Apps. Supports Native, React Native, Cordova, Xamarin and more. The little brother of
- The Sample Projects
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.
npm install -g app-icon
You will need imagemagick installed:
brew install imagemagick # OSXsudo apt-get install imagemagick # Debian/Ubuntu/etcsudo 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:
If an iOS project is present, then the icon will be copied at all required sizes to:
If an Android project is present, then the icon will be copied at all required sizes to:
You can limit the platforms which icons are generated for with the
--platforms flag, specifying:
app-icon generate --platforms=iosapp-icon generate --platforms=android,ios
By default the tool will generate icons for both platforms.
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:
||Runs the unit tests.|
||Runs the tests in a debugger. Combine with
||Runs the tests, writing coverage reports to
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 6nvm use 6npm install -g yarngit clone email@example.com:dwmkerr/app-icon.gitcd app-iconyarn
Run the tests with:
Creating a Release
To create a release.
- Merge your work to master.
npm versionto bump, e.g.
npm version patch
- Push and deploy
git push --tags && git push && npm publish
The Sample Projects
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.
cd ./test/ReactNativeIconTest/npm installreact-native run-ios# OR react-native run-android
cd ./test/CordovaApp/npm installcordova 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.
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.