Blog
App Icon Generator: Design, Preview, and Export iOS and Android Icons in the Browser
Creating app icons is one of those tasks that sounds simple until you're staring at a list of 40+ required sizes, adaptive layers, and platform-specific folder structures. The App Icon Generator is a browser-based tool that handles the full icon pipeline — upload or design, preview in device context, and download a project-ready ZIP — without installing anything or sending your image to a server.
What the Tool Does
Most icon generators are resizers. You upload a 1024 × 1024 PNG, pick your platforms, and get back a folder of scaled images. That covers the simplest case, but it leaves out a large slice of real-world icon work: icons built from text initials, icons using a simple symbol from an icon library, adaptive Android icons with separate foreground and background layers, and the ability to see how your icon actually looks on a device before you ship it.
This tool addresses all of that. It has two modes:
- Image upload — drop in a source image and export to every required size across platforms
- Custom builder — design your icon from scratch using layered foreground and background, each of which can be an image, a clip art icon from the React Icons library, or styled text
Platform Support
The generator covers every major Apple and Android target:
| Platform | Output |
|---|---|
| iPhone | 11 sizes — home screen, Settings, App Store |
| iPad | 13 sizes — home screen and App Store |
| watchOS | 8 sizes — Watch app and notifications |
| macOS | 11 sizes — Mac app and App Store, including Retina variants |
| Android | mdpi, hdpi, xhdpi, xxhdpi with adaptive icon support |
The Apple output produces an folder and a file that can be dragged directly into Xcode's asset catalog. The Android output produces the correct subdirectory structure expected by Android Studio, including adaptive icon XML files.
How It Works
Step 1 — Upload or Design
If you have a finished icon image, drop it into the upload area. A square 1024 × 1024 PNG gives the cleanest results, but JPG and WebP are also accepted.
If you want to build the icon in the tool, switch to custom mode and configure two layers:
- Foreground layer — image, clip art from the React Icons library, or text
- Background layer — solid color, image, or clip art
Step 2 — Select Target Platforms
Toggle the platforms you need. Apple targets are split by device type — iPhone, iPad, watchOS, macOS — so you can include only what your project requires. Android generates the full adaptive icon set including legacy, round, and monochrome variants.
Step 3 — Preview in Context
Before exporting, the live preview panel renders your icon in iPhone and Android device frames across 8 contexts: home screen, spotlight, settings, notification bar, App Store, and Google Play. This is the step that catches the issues a thumbnail preview misses — text that reads fine at 1024px but disappears at 20px, or a background color that blends into the iOS home screen wallpaper.
Step 4 — Download the ZIP
Click generate and download a ZIP archive structured for direct import. The iOS folder goes into Xcode, the Android folder goes into your module's directory.
The Custom Icon Builder
React Icons Clip Art Library
The clip art picker gives access to thousands of icons from Font Awesome, Material Design, Remix Icons, Feather, and more — the full React Icons catalog. You can search by name and pick any icon as your foreground or background layer without leaving the tool and without a Figma or Illustrator license.
This makes it practical to generate branded app icons for side projects, internal tools, and prototypes directly in the browser.
Text with Typography Styles
The text layer lets you type any character — a letter, number, emoji, or short word — and apply Regular, Bold, or Italic styling. The builder renders it at full resolution onto the icon canvas. Combined with a solid color background, this is enough to produce clean, readable icons for most utility apps and personal projects.
Layered Foreground and Background
The Android adaptive icon format requires a foreground layer and a background layer as separate assets. The system then masks them into whatever shape the device launcher uses — circle, squircle, rounded square, or full bleed. This tool builds those layers explicitly, so the exported assets are correctly structured rather than being a single flat image forced into an adaptive icon wrapper.
Live Device Preview
The preview section renders your icon in realistic device frames before you commit to downloading. The iPhone mockup shows the icon across home screen, spotlight search, settings, notification bar, and the App Store product page. The Android mockup covers the equivalent contexts including Google Play.
This matters because app icons have to work at very different sizes. The App Store requires a 1024 × 1024 icon. The notification bar icon renders at around 24 × 24 density-independent pixels. An icon that looks sharp in a full-size preview can be completely unreadable at notification size if it relies on fine detail or low-contrast colors.
Compared with Android Studio's Image Asset Studio
Android Studio ships with Image Asset Studio, a built-in tool that generates adaptive icons natively inside the IDE. If you are already working in Android Studio and your icon is already designed, it is a solid choice — it writes directly into your project's resource directories and handles the full adaptive icon pipeline.
The browser tool is a better fit when:
- You are working across iOS and Android and need both outputs in one pass
- You want to design a simple icon quickly without opening an IDE
- You need to generate icons for a project that is not currently checked out locally
- You want device mockup previews before committing to a design
The two tools cover different parts of the workflow. The browser generator is faster for the design and preview phase; Android Studio is more integrated for the build and deployment phase.
Who Should Use It
- Indie developers building iOS and Android apps who want icon sets ready for Xcode and Android Studio without manual resizing
- Designers who need to hand off correctly structured icon archives without writing code
- Developers on side projects who need a serviceable icon quickly — text initials plus a color background, exported to all required sizes
- Teams reviewing icon designs who want to see device mockups before a final asset is approved
Try It
The App Icon Generator is free and runs entirely in the browser. No account required, no uploads to a server — your image stays on your device throughout.
More To Read
