How to export app icons for ios and android from svg online
- Step 1Prepare a square SVG that reads at 20px — Use a square
viewBox(e.g.0 0 512 512). The generator scales the artwork to fill each square target, so a non-square viewBox will be stretched. Avoid hairline strokes and fine text — they vanish at the 20px and 29px sizes. If your icon has a non-square bounding box, normalise it first with svg-viewbox-fixer. - Step 2Drop the SVG on the tool or paste its source — Use the upload area or paste the raw
<svg>…</svg>markup. It accepts a single.svgfile (MIMEimage/svg+xml). Pasted source is validated as SVG XML before processing; malformed markup is rejected with a parse error rather than producing broken PNGs. - Step 3Run the generator — Click Process SVG. There are no options to set — the tool always produces the full iOS + Android set. It loads the SVG into an
Image, draws it into a<canvas>at each target size, and encodes each frame as PNG. The result panel reportsiOS sizes: 13andAndroid densities: 5. - Step 4Download the ZIP — Download
<your-file>-app-icons.zip. Inside you getios/AppIcon.appiconset/(13 PNGs +Contents.json),android/mipmap-*/ic_launcher.png(×5),android/play-store-icon.png, and your original<your-file>.svgat the root. - Step 5Wire iOS into Xcode — Drag the
AppIcon.appiconsetfolder into your target'sAssets.xcassets, or replace the existing one. The bundledContents.jsonreferences each PNG by filename. Note: every entry is declared atscale: 1xwith absolute pixel filenames, so Xcode treats each as a discrete asset rather than auto-deriving @2x/@3x — verify the catalog resolves without yellow warnings before archiving. - Step 6Wire Android into your res/ tree — Copy each
android/mipmap-<density>/ic_launcher.pnginto the matchingapp/src/main/res/mipmap-<density>/folder. Uploadplay-store-icon.png(512px) as the Play Console high-res icon. This produces a classic square/legacy launcher icon — if you need an adaptive icon with separate foreground/background layers, build those manually (the generator does not create them).
Exact contents of the generated ZIP
Every file the tool writes, with no platform selection step — the full set is produced on each run. Pixel sizes are taken directly from the generator's size arrays.
| Path in ZIP | Pixel size(s) | Purpose |
|---|---|---|
ios/AppIcon.appiconset/icon_<S>x<S>.png | 20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180, 1024 | 13 iOS PNGs — iPhone, iPad and the 1024 App Store marketing icon |
ios/AppIcon.appiconset/Contents.json | — | Asset-catalog manifest; one image entry per iOS size, all scale: 1x |
android/mipmap-mdpi/ic_launcher.png | 48 | Android mdpi launcher icon |
android/mipmap-hdpi/ic_launcher.png | 72 | Android hdpi launcher icon |
android/mipmap-xhdpi/ic_launcher.png | 96 | Android xhdpi launcher icon |
android/mipmap-xxhdpi/ic_launcher.png | 144 | Android xxhdpi launcher icon |
android/mipmap-xxxhdpi/ic_launcher.png | 192 | Android xxxhdpi launcher icon |
android/play-store-icon.png | 512 | Google Play Console high-res listing icon |
<stem>.svg | — | Your original source SVG, preserved at the ZIP root |
What it does — and what it deliberately does not
Grounded in the generator code. Where a capability is missing, the right sibling tool or manual step is named.
| Behaviour | Status | Detail / alternative |
|---|---|---|
| Platform / size selection | Not configurable | There is no options panel — the full iOS + Android set is always produced |
| Transparency handling | Preserved (not stripped) | PNGs are drawn on a cleared canvas, so SVG transparency is kept — including in the 1024 icon (see edge cases for the App Store implication) |
| Corner rounding | Not applied | Square icons are emitted; iOS/Android masks corners at display time — do not pre-round |
| Android adaptive layers | Not generated | Only legacy square ic_launcher.png per density; build foreground/background manually if you need adaptive |
| macOS / watchOS / tvOS / Windows | Not generated | Only iOS + Android. For favicons/web icons use svg-favicon-master |
| @2x / @3x scale entries | Not used | Contents.json lists every size at scale: 1x with explicit pixel filenames |
Cookbook
Real workflows for getting a clean SVG into both stores. File and bundle names anonymised.
From brand.svg to a buildable Xcode catalog
The everyday path: one square SVG in, an AppIcon.appiconset folder you can drop straight into Assets.xcassets.
Input: brand.svg (viewBox="0 0 512 512") Run the App Icon Generator → brand-app-icons.zip Unzip → ios/AppIcon.appiconset/ icon_20x20.png icon_29x29.png icon_40x40.png icon_58x58.png icon_60x60.png icon_76x76.png icon_80x80.png icon_87x87.png icon_120x120.png icon_152x152.png icon_167x167.png icon_180x180.png icon_1024x1024.png Contents.json Drag AppIcon.appiconset into Xcode → Assets.xcassets → catalog resolves, no missing-image warnings
Dropping the mipmaps into an Android res/ tree
The android/ folder mirrors the mipmap density structure Gradle expects, so it is a copy-paste into src/main/res.
Unzip → android/ mipmap-mdpi/ic_launcher.png (48px) mipmap-hdpi/ic_launcher.png (72px) mipmap-xhdpi/ic_launcher.png (96px) mipmap-xxhdpi/ic_launcher.png (144px) mipmap-xxxhdpi/ic_launcher.png (192px) play-store-icon.png (512px) cp -r android/mipmap-* app/src/main/res/ # upload play-store-icon.png in Play Console → Store listing
Fixing a non-square logo before generating
A wordmark with a wide bounding box stretches when forced into a square. Square it first, then generate.
Problem: logo.svg viewBox="0 0 400 120" (3.3:1) → App Icon Gen stretches it into each square PNG (distorted) Fix: 1. svg-viewbox-fixer → pad to a square viewBox (/svg-tools/svg-viewbox-fixer) 2. App Icon Generator on the squared SVG → artwork centred, no horizontal stretch
Web favicons are a different tool
App Icon Gen makes iOS + Android launcher assets only. For a favicon.ico plus web PNGs and HTML link tags, use the favicon tool — it shares the same in-browser rasterisation.
Need launcher icons (iOS/Android)? → svg-app-icon-gen
Need favicon.ico + web icons + <link> tags?
→ svg-favicon-master (/svg-tools/svg-favicon-master)
emits a real multi-resolution favicon.ico (16/32/48)
plus icon-16…icon-512 PNGs and copy-paste <link>sKeeping the source SVG with the rasters
Because the ZIP includes your original SVG at the root, you can commit the whole archive as a regeneration-ready artifact.
brand-app-icons.zip ├─ ios/AppIcon.appiconset/… ├─ android/… └─ brand.svg ← original source, unmodified # commit the SVG to version control; re-run the generator # any time the mark changes to refresh all sizes at once
Edge cases and what actually happens
The 1024 App Store icon keeps SVG transparency
Review before submitFrames are drawn on a cleared canvas and encoded as PNG, so transparency in your SVG is preserved everywhere — including icon_1024x1024.png. App Store Connect rejects a 1024 marketing icon that contains alpha. The generator does not flatten alpha, so if your SVG has a transparent background, paint a solid background <rect> into the SVG before generating, or flatten the 1024 PNG separately.
Non-square viewBox stretches into the squares
DistortionEach PNG is drawn at size × size, so a non-square SVG is scaled to fill a square and looks stretched. Square the artwork first with svg-viewbox-fixer (pad to a square viewBox), then generate.
Malformed SVG markup
errorIf the SVG cannot be parsed/loaded into an Image, rasterisation fails with Failed to rasterise SVG. Ensure the SVG markup is well-formed. Pasted source is also validated as SVG XML up front and rejected as Invalid SVG if it is not parseable. Fix the markup (or run it through a cleaner) and retry.
SVG references external images or fonts
May failThe image is loaded with crossOrigin="anonymous". An SVG that pulls in an external bitmap (<image href="https://…">) or a remote font can taint the canvas, which makes toBlob return null and surfaces Canvas toBlob returned null. Inline/embed all assets (e.g. convert text with svg-font-to-path, base64-embed bitmaps) so the SVG is fully self-contained.
Fine detail disappears at 20px / 29px
By designThe smallest iOS targets are 20 and 29px. Thin strokes, small text, and intricate detail rasterise to mush at that scale — this is a design constraint, not a bug. Simplify the mark for small sizes; the generator faithfully renders whatever the SVG contains.
No adaptive icon is produced
Not supportedAndroid output is a legacy square ic_launcher.png per density. The tool does not split your art into the foreground/background layers an adaptive icon (ic_launcher.xml with <adaptive-icon>) requires. Author those layers manually if your launcher needs adaptive masking and animation.
No macOS / watchOS / tvOS / Windows assets
Not supportedDespite app-icon conventions across many platforms, this generator emits iOS + Android only. There is no macOS .icns set, no watchOS catalog, no tvOS layered image, and no Windows MSIX tiles. For web/browser icons use svg-favicon-master.
JavaScript-driven SVG animation
Static snapshotRasterisation captures a single static frame via Canvas. Script-driven animations do not run and SMIL/CSS animations are captured at their initial state. App icons are static anyway, so design the icon as a still image.
The original SVG is in the ZIP, not just PNGs
ExpectedThe archive includes <stem>.svg at its root in addition to the rasters. That is intentional — it keeps the regeneration source alongside the output. If your packaging step copies the whole ZIP into the app bundle, exclude the .svg so it is not shipped.
Frequently asked questions
What exactly is in the download?
One ZIP, <your-file>-app-icons.zip, containing ios/AppIcon.appiconset/ with 13 PNGs (20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180, 1024) plus a Contents.json; android/mipmap-{mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi}/ic_launcher.png (48/72/96/144/192); android/play-store-icon.png (512); and your original SVG at the root.
Can I choose to export only iOS or only Android?
No. There is no options panel and no platform selector — every run produces the complete iOS + Android set. Just delete the folder you do not need from the unzipped output.
Does it strip transparency for the App Store icon?
No. PNGs are drawn on a cleared canvas, so SVG transparency is preserved in every size, including the 1024 marketing icon. Since App Store Connect rejects a 1024 icon with alpha, add a solid background <rect> to your SVG before generating, or flatten the 1024 PNG yourself.
Does it round the corners?
No, and you should not pre-round them. The tool emits full-square icons; iOS and Android apply their corner masks (superellipse on iOS, launcher-dependent on Android) at display time. Pre-rounding produces a double-mask artifact.
Does it create Android adaptive icons (foreground + background)?
No. It produces a single legacy square ic_launcher.png per density. Adaptive icons need separate foreground and background layers plus an <adaptive-icon> XML; author those manually if your launcher requires them.
What about macOS, watchOS, tvOS or Windows icons?
Not produced — this tool is iOS + Android only. For browser/web icons (favicon.ico, web PNGs, HTML link tags) use svg-favicon-master.
Does the Contents.json use @2x / @3x scales?
No. Each entry is declared at scale: 1x with an explicit pixel filename (e.g. icon_120x120.png), and idiom is derived from size (1024 → ios-marketing, ≥76 → ipad, else iphone). Xcode treats each as a discrete asset; verify the catalog resolves cleanly before archiving.
What SVG size can I upload?
SVG is resolution-independent, so the viewBox magnitude does not matter for sharpness — only the artwork's clarity does. The per-file size limit follows the SVG tier limit (5 MB free, 50 MB Pro, 2 GB Developer), though this tool itself requires the Developer plan.
Is my artwork uploaded anywhere?
No. The SVG is loaded into an off-screen Image, drawn into a <canvas> for each size, encoded to PNG, and zipped with JSZip — all in your browser. The result panel shows 0 bytes uploaded.
Why does my icon look stretched?
Because each PNG is square and your SVG's viewBox probably is not. Drawing a non-square viewBox into a square canvas stretches it. Pad the artwork to a square viewBox first with svg-viewbox-fixer.
Why did processing fail with a rasterisation error?
Either the SVG markup is malformed (Failed to rasterise SVG. Ensure the SVG markup is well-formed.) or it references external resources that taint the canvas (Canvas toBlob returned null.). Fix the markup, and inline any external bitmaps/fonts so the SVG is self-contained — convert <text> with svg-font-to-path.
Which tier do I need, and can I automate it?
App icon generation requires the Developer plan. To automate, GET /api/v1/tools/svg-app-icon-gen returns the schema (it reports runnerBacked: true, apiAvailable: false, and an empty options list); execution runs through your paired @jadapps/runner, which spins up a headless browser locally. See the CI/CD automation guide for the full pipeline.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.