🚀 React Native App Icon Generator

A lightweight and hassle-free CLI tool to generate iOS and Android app icons in your React Native project from a single 1024x1024 PNG image — no config required, just run and go!

✨ Features

✅ One command to generate all required icons
✅ No manual image resizing needed
✅ Automatically finds your app_icon.png
✅ Replaces icons in the correct native folders
✅ CLI options for background, platform, output dir
✅ Supports adaptive Android icons
✅ Works with any React Native structure
✅ Interactive mode if no arguments are provided

🔧 How to Use

1️⃣ Option 1: Let It Find app_icon.png Automatically

Place a high-resolution 1024x1024 PNG named app_icon.png anywhere in your project.

📁 Example:

your-project/
├── src/
│ └── assets/
│ └── app_icon.png

Then run:

npx rn-app-icon-generator

2️⃣ Option 2: Provide Icon Path Manually

You can specify your own icon path:

npx rn-app-icon-generator ./assets/your_icon.png \
  --background "#ffffff" \
  --platform all \

3️⃣ Use Additional CLI Options

npx rn-app-icon-generator ./assets/your_icon.png \
  --background "#ffffff" \
  --platform all \
  --output ./custom-icons \
  --mask ./assets/masks/circle-mask.png (png or svg)

⚙️ CLI Options

| Option | Description | | -------------- | ------------------------------------------------------------------ | | --background | Background color (hex format). Default: #ffffff | | --platform | Platform to generate: android, ios, or all. Default: all | | --output | Optional output directory (useful for preview/testing) | | --mask | Optional mask file (PNG/SVG) for Android adaptive icons foreground |

💡 If no arguments are provided, the tool enters interactive mode.

🧱 Mask Support (Adaptive Android Icons)

The --mask option allows shaping the foreground icon for Android adaptive icons.

✅ Supported Mask Formats:

• .png — black & transparent areas (alpha mask)
• .svg — vector path (e.g., circle, rounded square)

🖼️ How It Works:

• The mask is applied to the foreground icon (ic_launcher_foreground.png)
• Using alpha masking or SVG shape with sharp.composite(..., blend: "dest-in")
• This creates a custom-shaped icon for modern Android launchers

📐 Example Usage:

npx rn-app-icon-generator ./assets/your_icon.png \
  --background "#ffffff" \
  --platform all \
  --mask ./assets/masks/circle-mask.svg

🎨 PNG Mask Example

A 1024x1024 PNG with:

• White or opaque = visible area
• Black or transparent = cropped area

📁 Example:

./assets/masks/circle-mask.svg

🧭 SVG Mask Example

Example circle-mask.svg:

Download SVG

You can also use:

• Rounded rectangles
• Circle
• Any SVG path

📂 Output Paths

| Platform | Path Example | | -------------------- | ------------------------------------------------------------------------------- | | Android | android/app/src/main/res/mipmap-*/ic_launcher.png and ic_launcher_round.png | | Android Adaptive | mipmap-*/ic_launcher_foreground.png, plus ic_launcher.xml & colors.xml | | iOS | ios/YourApp/Images.xcassets/AppIcon.appiconset/ with Contents.json |

📦 Optional: Local Installation

Install as a dev dependency:

npm install rn-app-icon-generator --save-dev

Run with:

npx rn-app-icon-generator

🧠 Pro Tips

• ✅ PNG must be 1024x1024 for best results (no SVG support).
• 🧼 Use solid backgrounds unless transparency is intentional.
• 📱 Make sure iOS folder has a valid `.xcodeproj` file.
• 🧪 Works on both macOS, Linux, and Windows.

💻 Example Script (CI/CD)

npx rn-app-icon-generator ./branding/your_icon.png --background "#000000" --platform all

Add to your package.json scripts:

"scripts": {
    "generate:icons": "rn-app-icon-generator ./branding/your_icon.png --background '#ffffff' --platform all"
}

📄 License

Licensed under the MIT License.

Created by Ara Apps Dev