The Fastest Way to Generate App Icons for React Native

Introduction

Generating app icons for React Native used to be tedious. Export your icon at 10+ different sizes for iOS, then another set for Android. Round icons, adaptive icons, notification icons—it never ends.

AppIcon.co used to be my favorite tool for this. Upload an image, download a zip with all sizes. It worked great, but still required manual file copying.

Now I use a faster approach: one command line tool that does everything locally.

The Fast Way

Install it globally or use npx:

npx icon-set-creator create src/icons/app_icon.png

That's it. The tool generates all required icon sizes for both iOS and Android.

Prepare Your Icon

Before running the command, prepare your source image:

Size: 1024x1024 pixels (minimum)

Format: PNG with transparency

Design: Keep important content in the center. Mobile platforms apply different masks (rounded corners, circles, squircles).

Safe zone: Keep critical elements within the center 80% of the image. Corners and edges might get cropped.

Background: If your icon needs a background color, include it in the PNG. Don't rely on transparency unless intentional.

What It Generates

The tool creates all the icon sizes you need:

iOS:

App icon sizes (20pt to 1024pt at 1x, 2x, 3x)
Assets.xcassets configuration
Handles light and dark mode if needed

Android:

mipmap folders (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
Launcher icons
Adaptive icons (foreground and background)
Round icons

All properly sized and organized in the correct directories.

Best Practices

Use vector graphics when possible - Design your icon in Illustrator, Figma, or Sketch. Export at 1024x1024 or higher for best quality.

Test on real devices - iOS and Android display icons differently. Test on both platforms to ensure it looks good.

Keep it simple - App icons are displayed at small sizes. Complex details get lost. Bold, simple shapes work best.

High contrast - Make sure your icon stands out against various backgrounds. Light and dark home screens, folders, etc.

No text - Text rarely works well in app icons. Use symbols and shapes instead.

Consistent style - Match the design language of your app. The icon is the first thing users see.

Alternative: Manual Setup

If you want more control, you can still do it manually:

iOS: Add icons to ios/YourApp/Images.xcassets/AppIcon.appiconset/

Android: Add icons to android/app/src/main/res/mipmap-*/

But honestly, why bother? The automated tool is faster and less error-prone.

Common Issues

Icon not updating:

After generating new icons:

iOS: Clean build folder (Product > Clean Build Folder in Xcode)
Android: Run cd android && ./gradlew clean
Rebuild the app

Wrong sizes generated:

Make sure your source image is at least 1024x1024. Smaller images get upscaled and look blurry.

Transparency issues on Android:

Android adaptive icons separate foreground and background. If your icon has transparency, you might need to provide a solid background layer.

Final Tip

If you're updating your app icon regularly, you can also add the command as a package.json script:

{
  "scripts": {
    "generate:icons": "icon-set-creator create src/icons/app_icon.png"
  }
}

Then just run npm run generate:icons whenever you need to update.