Android & iOS icon generator for React Native
- 🌈 Easy to install — does not require additional software
- ⚡️ Fast — image manipulation powered by sharp
- 🛠 Configurable — using cli options or config file
- 📱 iOS and Android support — create icons for both platforms with one command
- 🌟 Adaptive Icons — support for color and image backgrounds
- 🟢 Round Icons — automatically generated for Android
You can run the icon generator with the npx command (available in Node.js 8.2.0 and later).
$ npx icon-set-creator create ./path/to/icon.png
For earlier Node versions, see 🚀 Installation section below.
Node Version Requirement
Icon set creator requires Node.js version 14.0 or above (v16+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows .
To install the new package globally, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. n or nvm).
$ npm install -g icon-set-creator
# OR
$ yarn global add icon-set-creator
After installation, you will have access to the iconset binary in your command line. You can verify that it is properly installed by simply running iconset
, which should present you with a help message listing all available commands.
You can check you have the right version with this command:
$ iconset --version
If you want to install the icon-set-creator
locally, use one of the following commands:
$ npm install icon-set-creator -D
# OR
$ yarn add icon-set-creator -D
To create app icon you need:
- PNG icon for IOS and Android (Highly recommend using an icon with a size of at least 1024x1024 pixels). You can check the
example
folder for example icons. - You can also create Adaptive Icon for Android, which can display a variety of shapes across different device models (Learn More). To create it you need a foreground image and a background color or image. There is also a good article on how to design such icons.
The easiest way to use icon-set-creator
is to specify the path to icon using iconset create
command in root of your project:
$ iconset create ./icon.png
If you have the package installed locally, you can do same with the package.json
script and then run it with npm run create-appicon
:
{
"scripts": {
"create-appicon": "iconset create ./icon.png"
}
}
It will generate icons of different sizes for Android and iOS.
There are two primary ways to configure icon-set-creator
:
- CLI parameters - use the command options.
- Configuration files - use a JavaScript, JSON, or
package.json
file to specify configuration information to generate an application icon depending on your code style.
To display all of the options for the given command, run iconset <command> --help
. For example:
$ iconset create --help
Usage: index create [options] [image-path]
Generate a new icon set for React Native project
Options:
-d, --disable-launcher-icon Disable changing the launcher icon for iOS and Android
-A, --android [icon-name] Generate icon set for android
-IPA, --image-path-android Image path for android
--flavor [flavor] Flavor name
-b, --adaptive-icon-background <background> The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png") which will be
used to fill out the background of the adaptive icon.
-f, --adaptive-icon-foreground <foreground> The image asset which will be used for the icon foreground of the adaptive icon
-I, --ios Generate icon set for ios
--group <group> Group for ios
-IPI, --image-path-ios Image path for ios
-h, --help display help for command
icon-set-creator
supports configuration files in several formats:
- JavaScript - use
.iconsetrc.js
and export an object containing your configuration. - JSON - use
.iconsetrc.json
to define the configuration structure. package.json
- create aniconsetConfig
property in your package.json file and define your configuration there.
If there are multiple configuration files in the same directory, icon-set-creator
will only use one. The priority order is as follows:
.iconsetrc.js
.iconsetrc.json
package.json
icon-set-creator
will automatically look for them in the directory path to be used to run the CLI.
Here's an example JavaScript configuration file that uses the adaptiveIconBackground
/adaptiveIconForeground
options to support adaptive icons:
// .iconsetrc.js
module.exports = {
imagePath: './assets/icon.png',
adaptiveIconBackground: './assets/icon-background.png',
adaptiveIconForeground: './assets/icon-foreground.png',
};
imagePath
— The location of the icon image file which you want to use as the app launcher icon. e.g../assets/icon.png
disableLauncherIcon
- Generate only icons without changing manifest filesandroid
/ios
(optional):true
— Override the default existing React-Native launcher icon for the platform specified,false
— ignore making launcher icons for this platform,icon_name
— this will generate a new launcher icons for the platform with the name you specify, without removing the old default existing React-Native launcher icon.imagePathAndroid
— The location of the icon image file specific for Android platform (optional — if not defined then theimagePath
is used)imagePathIos
— The location of the icon image file specific for iOS platform (optional — if not defined then theimagePath
is used)
The next two attributes are only used when generating Android launcher icon:
adaptiveIconBackground
— The color (E.g."#ffffff"
) or image asset (E.g."assets/images/dark-background.png"
) which will be used to fill out the background of the adaptive iconadaptiveIconForeground
— The image asset which will be used for the icon foreground of the adaptive icon
✨ You are amazing!