thedevtoolset
Mobile

App Icon Generator — Free Online iOS, Android, macOS & Slack Icons

Free online app icon generator for iOS, Android (Flutter, React Native, Expo), macOS & Slack — turn an image, SVG, text, or emoji into every icon size. No signup, no AI, 100% in your browser.

One icon in, every size out

Shipping a native app means producing the same artwork at a dozen-plus sizes across several platforms: iOS and iPhone want everything from a 20 px notification badge to the 1024 px App Store icon, Android needs five mipmap densities plus a Play Store image, macOS needs ten .iconset sizes, and Slack needs its own workspace and app icons. Exporting each one by hand is tedious and easy to get wrong.

This free, online app icon generator runs entirely in your browser — no signup, no server upload, no watermark. Create an icon from an image, an SVG, text, or an emoji directly in the tool, configure your colors, and download the whole set as one ZIP. It works the same whether you’re shipping native Swift/Kotlin, or building with Flutter, React Native, or Expo — your artwork never leaves your device.

The sizes each platform actually needs

iOS & iPhone. Apple’s Xcode asset catalog expects sizes for the home screen, Settings, Spotlight, and notifications at @2x and @3x — 20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180 — topped by the 1024 px App Store icon. All must be opaque. The tool also generates a ready-to-drop Contents.json for the AppIcon.appiconset folder so Xcode maps every file automatically — this is what makes it a proper Xcode app icon generator, not just a resizer. See Apple’s Human Interface Guidelines for artwork direction.

Android. Launcher icons live in density-specific mipmap-* folders: mdpi (48 px), hdpi (72), xhdpi (96), xxhdpi (144), and xxxhdpi (192) — each folder gets two files: ic_launcher.png (an opaque, flattened fallback for launchers older than Android 8.0) and ic_launcher_foreground.png (the transparent adaptive icon layer). The Play Store listing needs a separate 512 px image. The tool also generates the ic_launcher.xml and colors.xml for the mipmap-anydpi-v26 layer, which references ic_launcher_foreground.png as the foreground drawable so your foreground/background split works on every shape the launcher applies. This is the fastest-growing search behind this tool — if you only need one platform, Android’s five densities plus the adaptive-icon files are exactly what this generator produces.

macOS. The Mac app icon .iconset format requires ten files at five point sizes and two resolutions each: 16, 32, 128, 256, 512 (all at @1x and @2x). Drop the generated AppIcon.iconset folder into Xcode or run iconutil -c icns to convert it to an .icns file for distribution.

Flutter, React Native & Expo apps

Cross-platform frameworks don’t have their own icon format — under the hood, they still ship the same iOS asset catalog and Android mipmap files described above, so this doubles as a Flutter app icon generator, a React Native app icon generator, and an Expo app icon generator with no extra export step:

  • Flutter. Drop the generated ios/AppIcon.appiconset folder into ios/Runner/Assets.xcassets/ and the android/mipmap-* folders into android/app/src/main/res/. Prefer automation? Point the flutter_launcher_icons package’s image_path at the 1024 px source image this tool exports and let it copy the sizes in for you.
  • Expo. Set "icon" in app.json (or app.config.js) to the 1024 px PNG, and android.adaptiveIcon.foregroundImage to the transparent ic_launcher_foreground.png this tool generates — Expo’s build service produces every platform size from those two files during eas build.
  • React Native (bare). Identical to a native project: the iOS asset catalog goes in ios/<ProjectName>/Images.xcassets/, and the Android mipmaps go in android/app/src/main/res/.

Slack workspace & app icons

Enable the Slack platform toggle to generate slack-icon-512.png and slack-icon-1024.png — the standard format for both Slack use cases, which share the same spec (a square PNG, ≥512 px, rendered as a rounded square in the sidebar):

  • Workspace icon — upload slack-icon-512.png at Workspace settings → Administration → Icon.
  • Slack app icon (UI path) — go to api.slack.com → your app → Basic Information → Display Information → App icon and upload slack-icon-512.png. Note: the standard JSON/YAML app manifest has no icon field — the icon is always uploaded here, not declared in the manifest.
  • Slack CLI / Bolt (manifest-as-code) — place the PNG at assets/icon.png in your project and reference it as icon: "assets/icon.png" in your code manifest; the Slack CLI uploads it on deploy.

The slack/README.txt in the ZIP covers all three paths and includes a pre-filled display_information branding snippet (with your app name and background color already set) to drop into your app manifest.

No AI guesswork — precise, pixel-exact output

Search for “AI app icon generator” and you’ll find tools that produce one unpredictable, often-blurry image from a text prompt — and then still leave you to resize it yourself, flatten transparency for iOS, validate against Apple’s submission rules, and figure out the Xcode asset catalog structure. If the generated art doesn’t match your brand, you start over.

This tool works the opposite way: you own the artwork, and the tool handles every technical detail precisely. Upload your existing logo, type your app’s initials, or pick an emoji — then get back exact, spec-correct files for every platform in one ZIP, generated entirely by the browser’s canvas API. No server, no AI hallucination, no signup, nothing uploaded.

How this compares

Most online icon generators are server-side: your image is uploaded to their infrastructure, processed, and sometimes stored. Here’s what makes this one of the best app icon generators to reach for:

  • 100% client-side. Every resize, flatten, and ZIP operation runs in your browser tab. Your source artwork never leaves your device.
  • Zero metadata / no tool fingerprint. Server-side generators typically inject attribution metadata into PNG files (the same way Photoshop stamps EXIF/XMP data). This tool uses the browser canvas API, which writes no metadata. The PNGs you download are clean.
  • Free with no signup or paywall. No account required, no “free tier” watermark, no premium plan needed to unlock platform outputs.
  • Live previews before you download. See your icon on an iOS home screen, Android launcher and splash screen, Mac dock, and Slack sidebar — live, before generating the ZIP.
  • Slack alongside the standard platforms. Most icon generators stop at iOS and Android.

Creating an icon from scratch — no source art needed

No logo yet? The Text / Initials and Emoji modes below double as a lightweight app logo generator, turning a couple of characters or an emoji into a real branded mark before your final artwork exists. The tool includes three input modes selectable via the tab bar:

  • Upload — drag-and-drop or pick any PNG, JPG, or SVG file.
  • Text / Initials — type 1–2 characters (your app’s initials), choose a font, shape (square, rounded, or circle), foreground and background colors. Useful for a clean, branded wordmark icon without opening a graphics editor.
  • Emoji — pick any emoji, set the background color, scale it up or down, and nudge it horizontally and vertically to avoid cropping at small icon sizes.

Composing layers

The Compose layers panel lets you place your artwork as a foreground on a customizable background — solid color or a diagonal gradient from two colors you choose. Drag the foreground scale slider to control how much of the canvas the artwork fills. When you’re happy with the preview, click Apply — use as source and the composited result becomes the source image for all generated sizes.

This is especially useful for Android adaptive icons: set the background to your app’s brand color, scale down the foreground artwork to leave breathing room, and the generated ic_launcher.xml will reference the correct foreground/background split.

Per-platform overrides

The Per-platform overrides panel (collapsed by default) lets you set a different background color, padding, or even a completely different source image per platform. This is the right tool when iOS icons need a white opaque background while Android uses your full-bleed artwork, or when macOS should use a simplified version of the full app icon. Each platform falls back to the main image if no override is set, so you only need to upload extra images when the platforms genuinely diverge.

Save and share your settings

All configuration — colors, platform toggles, app name, and per-platform overrides — is automatically saved in the URL hash as you make changes. Bookmark the page to return to your exact setup, or copy the URL to share a pre-configured icon generator with a colleague. Your uploaded image is never included in the URL (it lives only in your browser session and is never uploaded anywhere); re-upload it after opening a shared link. The Reset settings button clears everything back to defaults and removes the hash.

How to use the generated files

  • iOS: drop the entire ios/AppIcon.appiconset/ folder into Assets.xcassets — Xcode reads Contents.json and maps every PNG to the correct slot automatically.
  • Android: drop each ic_launcher.png and ic_launcher_foreground.png into the matching res/mipmap-<density>/ folder, copy ic_launcher.xml into res/mipmap-anydpi-v26/, and add colors.xml to res/values/.
  • macOS: drop AppIcon.iconset into Xcode or run iconutil -c icns AppIcon.iconset to produce an .icns.
  • Slack: upload slack-icon-512.png per the instructions in slack/README.txt (workspace settings, app Display Information, or Slack CLI — the README covers all three).

Realistic platform previews

After you upload or create an icon, the tool shows it in context on every surface — before you download anything:

  • iOS home screen — your icon (squircle-masked, opaque) placed on a realistic wallpaper among placeholder app tiles, with your app name beneath it.
  • Android home + splash — circle-masked launcher icon and a splash screen stub centred on your theme color.
  • macOS Dock — rounded-rect icon in a translucent dock bar (shown when macOS export is enabled).
  • Slack workspace — rounded-square icon in a Slack-style sidebar rail (shown when Slack export is enabled).

All previews update live as you change colors, app name, or upload a new icon — no need to generate the ZIP to see how the output looks.

App name and short name

The App name field drives the home-screen label in the iOS and Android previews. The Short name is what Android uses on the launcher grid when space is tight. Typical pattern: app name "My Awesome App", short name "AwesomeApp" (12 characters or fewer, no spaces).

Designing a source that scales

Because every icon is scaled down from your source, the source does the heavy lifting. Use a bold, simple mark that stays legible at small sizes — fine detail and small text disappear at a 20 px notification badge. Keep important content away from the edges, since iOS and Android both apply corner masks. Export at 1024 px (or use SVG) so the downscaler always has more detail than it needs.

Need favicons or PWA manifest icons for a website instead of a native app? Use the Favicon Generator — it produces favicon.ico, an SVG favicon with dark mode, and apple-touch/manifest icons from the same kind of source image. Working across units and platforms? The CSS px to rem converter keeps your web type and spacing scale consistent, and the color contrast checker confirms your icon mark stays legible against its background at every size. Everything runs 100% client-side — your files never leave your machine.

Frequently asked questions

  • What size should my source image be?

    Start from a square 1024×1024 PNG. That is the largest size every platform asks for (iOS App Store, Android Play Store, macOS App Store), so every smaller icon is produced by scaling down without ever scaling up and losing quality. SVG works too and scales perfectly. If your source is smaller than 1024 px or not square, the tool still generates the set but warns you.

  • Why can't iOS app icons be transparent?

    Apple requires app icons to be fully opaque — a flat rectangle with no see-through areas. The system applies its own rounded-corner mask, so a transparent icon would expose the home-screen wallpaper through the gaps and get rejected at submission. This tool flattens iOS and macOS icons onto your chosen background color. Android's adaptive foreground layer (ic_launcher_foreground.png) stays transparent by design — the launcher composites it over a separate background color — while the legacy ic_launcher.png fallback is flattened for pre-Android-8 devices.

  • What is the iOS Contents.json and do I need it?

    Xcode's asset catalog uses a Contents.json file to map icon filenames to their idiom (iPhone/iPad) and scale (@2x/@3x). Without it you have to drag each PNG into the correct slot manually. This tool generates the Contents.json automatically so you can drop the entire AppIcon.appiconset folder into your Assets.xcassets and Xcode wires everything up immediately.

  • Will I lose my settings if I close the tab?

    No — all configuration (colors, platform toggles, app name, and per-platform overrides) is automatically saved in the URL hash as you work. Bookmark the URL or copy it to return to or share the exact setup. The only thing not saved is your uploaded image: it never leaves your browser and cannot be stored in a URL, so re-upload it when you return to a shared link.

  • Can I use a different icon per platform?

    Yes — open the Per-platform overrides panel and click 'Use different image' under any platform. That image is used only for that platform's output files; all other platforms continue using the main source. The platform preview cards update live to reflect the override. Background color and padding can also be set independently per platform.

  • What size is a Slack workspace or Slack app icon?

    Both use the same format: a square PNG, at least 512×512 px. Slack renders it as a rounded square in the workspace sidebar and as a circle in some older surfaces. Upload slack-icon-512.png from this tool's output. The 1024×1024 file is included for future-proofing and as a higher-resolution source if Slack raises its requirements.

  • Can I set my Slack app icon in the app manifest?

    It depends on how you build. The classic JSON/YAML manifest you paste into the Slack app config UI (api.slack.com) has no icon field — the icon is uploaded separately under Basic Information → Display Information. If you use the Slack CLI or Bolt manifest-as-code, you can reference the icon at assets/icon.png and the CLI uploads it on deploy. The README in this tool's slack/ folder covers both paths, plus a pre-filled display_information branding snippet with your app name and background color.

  • Does this tool use AI to generate icons?

    No. This is a precision canvas tool, not a generative AI model. You supply the artwork — by uploading an image, typing initials, or picking an emoji — and the tool resizes, flattens, and packages it to exact platform specs. There is no AI, no server, no signup, and your files never leave your browser.

  • Can I use this as a Flutter app icon generator?

    Yes. Flutter apps use the same native iOS asset catalog and Android mipmap folders as any other app — this tool generates exactly those. Drop the downloaded ios/AppIcon.appiconset folder into ios/Runner/Assets.xcassets/ and the android/mipmap-* folders into android/app/src/main/res/, or point the flutter_launcher_icons package at the 1024×1024 source image this tool produces and let it copy the files in for you.

  • Does this work as a React Native or Expo app icon generator?

    Yes, for both. In a bare React Native project, use the iOS and Android output exactly as you would in native Xcode/Android Studio projects — the folder structure is identical. In Expo, set "icon": "./assets/icon.png" in app.json (or app.config.js) to the 1024 px source, and android.adaptiveIcon.foregroundImage to the transparent ic_launcher_foreground.png this tool generates; the Expo build service produces every platform size from those two files automatically.

  • Can I create an app icon from an image, SVG, text, or an emoji?

    Yes — the tool has three input modes. Upload any PNG, JPG, or SVG as source artwork; switch to Text / Initials to type one or two characters with a chosen font, shape, and colors; or switch to Emoji to use any emoji as your icon's mark, with scale and position controls. All three modes produce the identical full platform output.

  • Is this app icon generator really free?

    Yes — no signup, no account, no premium tier gating any platform or file. Every resize, flatten, and ZIP step runs in your browser via the canvas API, so there's no server cost driving a paywall. Generate as many icon sets, for as many apps, as you want.

  • Can I use this as an app logo generator, not just for an existing logo?

    Yes. If you don't have artwork yet, the Text / Initials mode turns your app's initials into a clean, branded mark — pick a font, shape (square, rounded, or circle), and foreground/background colors — and the Compose layers panel lets you place that mark on a solid or gradient background. The result becomes the source for every platform's icon set, so you can go from no logo to a full app icon package in one tool.

  • What makes this one of the best app icon generators to use?

    Four things you don't get from most alternatives: it runs 100% client-side, so your artwork is never uploaded anywhere; it writes zero attribution metadata into the PNGs; it's completely free with no signup or watermark; and it covers iOS, Android (including Flutter/React Native/Expo's underlying files), macOS, and Slack in one pass with live previews before you download.

Related tools