How to mobile app icon design guidelines for ios and android in 2026
- Step 1Commit to one concept — The strongest icons carry a single idea — a letter, a shape, an object. Sketch many variations of that one idea before adding anything. Multiple competing elements read as noise at 29px.
- Step 2Build it as a square SVG with a safe area — Use a square
viewBoxand keep the key shape clear of the edges so neither the iOS squircle nor an Android launcher mask clips it. If your art is non-square, square it with svg-viewbox-fixer before generating. - Step 3Decide the background now — Because the generator preserves transparency, choose deliberately: a solid background
<rect>(required if you want the 1024 to pass App Store's no-alpha rule) or transparency (acceptable for Android home screens but not the iOS marketing icon). Bake the decision into the SVG. - Step 4Generate and inspect the small sizes — Run the App Icon Generator and open
icon_40x40.png,icon_58x58.png,icon_60x60.pngat 100%. If the mark is unrecognisable or twins a competitor, simplify and regenerate. This is your real test, not a 512px mock-up. - Step 5Check contrast and the muddy-gradient trap — Aim for strong figure/ground contrast (roughly 3:1 or better). Fine gradients and thin outlines that look elegant at 1024 turn to grey sludge at 48px. Flatten a busy multi-colour mark with svg-monochrome-converter if it loses legibility small.
- Step 6Leave corners square and hand off — Do not round corners — the systems do that. Take the generated
AppIcon.appiconsetinto Xcode and themipmap-*PNGs intores/. For browser/PWA icons, generate those separately with svg-favicon-master.
Design principles vs the smallest rendered sizes
How each principle plays out at the small iOS sizes the generator actually emits.
| Principle | Why it matters small | Test at (generated PNG) |
|---|---|---|
| One concept, bold silhouette | Detail collapses; only the silhouette survives | icon_40x40.png, icon_58x58.png |
| High figure/ground contrast | Low contrast vanishes against busy wallpapers | icon_60x60.png on a real home screen |
| No text (unless it is the brand) | Type is illegible below ~60px | icon_58x58.png (Settings size) |
| Flat or restrained gradient | Subtle gradients turn to mud at icon scale | icon_48-equivalent — Android mdpi/ic_launcher |
| Generous safe area | System masks clip art near the edge | Compare 120/180 vs the squircle/launcher mask |
Design choices the generator constrains
Where the tool's behaviour shapes your design decision.
| Decision | Tool behaviour | What to do |
|---|---|---|
| Corners | Emits square icons; never rounds | Design full-bleed square; let the OS mask |
| Background / transparency | Preserves SVG alpha at every size | Add an opaque <rect> if you need the 1024 to pass App Store |
| Aspect ratio | Scales to a square per size (stretches non-square art) | Use a square viewBox; pad with svg-viewbox-fixer |
| Detail level | Renders the SVG literally — no auto-simplify for small sizes | Simplify the mark; preview the 40/58/60px PNGs |
Cookbook
Design moves and how they translate through the generator into shippable icons.
The 20px test that catches over-complex icons
Generate, then judge at the true smallest size before falling in love with the 1024 mock.
concept.svg → concept-app-icons.zip Open at 100% zoom: icon_40x40.png ← iPhone Spotlight @2x icon_58x58.png ← Settings @2x icon_60x60.png ← Notifications @3x-ish If you can't tell what it is in 1 second → simplify, regenerate.
Opaque background baked into the SVG
Decide the background in source so the 1024 passes and small tiles read on any wallpaper.
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <rect width="512" height="512" rx="0" fill="#101225"/> <!-- single bold glyph, high contrast against #101225 --> <path d="…" fill="#7C8CFF"/> </svg> → icon_1024x1024.png is opaque (App-Store-safe) → small tiles have consistent ground on any home screen
Flatten a muddy multi-colour mark
A rich gradient logo can lose legibility small. A single-tone version often reads far better as an icon.
brand-gradient.svg → grey sludge at 48px svg-monochrome-converter (/svg-tools/svg-monochrome-converter) mode: single color → one strong tone on the background → App Icon Generator → crisp at every density
Square a wordmark before it becomes an icon
Wide marks stretch in a square. Square the canvas, centre the art, then generate.
wordmark.svg viewBox="0 0 360 96" (3.75:1) → stretched/squashed in each square PNG svg-viewbox-fixer (/svg-tools/svg-viewbox-fixer): pad to square → centred monogram → App Icon Generator → undistorted
Don't pre-round — let the system mask
Rounded corners in the SVG fight the platform mask. Ship square.
Square SVG (no rounded corners) → iOS squircle applied at display time → Android launcher shape applied at display time Pre-rounded SVG → iOS: double curve artifact → Android: clipped under circular mask
Edge cases and what actually happens
Icon unreadable at 40–60px
RedesignIf the mark is unrecognisable in icon_40x40.png / icon_60x60.png, no platform setting will save it. Reduce to one bold shape, raise contrast, drop text. The generator renders faithfully — legibility is a design responsibility.
Gradient turns to mud small
By designSubtle multi-stop gradients average to flat grey at icon scale. Use a flat fill or a strong two-stop gradient, or flatten with svg-monochrome-converter. The tool does not auto-adjust gradients for small sizes.
Transparent 1024 fails App Store
App Store rejectDesign decision with a hard consequence: the generator keeps transparency, and App Store Connect rejects an alpha 1024. Bake an opaque background <rect> into the SVG, or flatten the 1024 PNG, before submitting.
Pre-rounded corners
ArtifactRounding in the SVG produces a double-mask on iOS and clipping on Android. Always design square; the OS applies the shape. The generator emits square icons to support this.
Key art too close to the edge
ClippingAdaptive Android masks and the iOS squircle can clip edge-touching art. Leave a safe-area margin in the SVG. Pad with svg-viewbox-fixer if the artwork is tight to the frame.
Thin strokes disappear
ExpectedHairline strokes that look refined at 1024 vanish by 48px. Use weights that hold up small; preview the mdpi/ic_launcher (48px) output. The generator renders the SVG literally and will not thicken strokes for you.
Non-square artwork stretches
DistortionA non-square viewBox is scaled to fill a square, distorting the mark. Square the canvas first. This is a property of fitting any aspect into a square icon, not a tool defect.
Expecting tinted / dark-mode variants
Not generatediOS tinted and Android themed icon variants are optional and not produced here. If your brand needs them, author those assets separately; the generator emits the standard square set only.
Frequently asked questions
Should my app icon contain text?
Rarely. Text is illegible below ~60px and stores discourage it. The exception is a one- or two-letter monogram that is the brand — make the letters fill the icon and test at icon_58x58.png.
How simple does an icon really need to be?
Simple enough to recognise in one second at 40–60px. Generate the icon and judge the small PNGs at 100% zoom, not a blown-up mock. If it only works at 1024, it does not work.
Why does my gradient look muddy as an icon?
Multi-stop gradients average toward flat grey at icon scale. Use a flat fill or a strong two-stop gradient, or flatten the mark with svg-monochrome-converter. The generator does not modify gradients for small sizes.
Do I round the corners myself?
No — design a full-bleed square. iOS applies its squircle and Android applies the launcher shape at display time. The generator outputs square icons precisely so the system masks can do their job.
What background should the icon have?
Decide in the SVG. Because the generator preserves transparency, you need a solid background <rect> if you want the 1024 App Store icon to be opaque (required). For Android home screens, transparency is acceptable but a deliberate ground usually reads better on varied wallpapers.
How do I keep art from being clipped by launcher masks?
Leave a safe-area margin so the key shape sits inside the inner region of the canvas. Pad a tight SVG with svg-viewbox-fixer before generating.
Do dark/light or tinted variants matter?
They are optional polish, not submission requirements, and the generator does not produce them. If you want iOS tinted or Android themed icons, author those assets separately.
How important are icon A/B tests?
Very — store-side A/B tests routinely show double-digit swings in conversion between icon variants. Design from an SVG so you can iterate cheaply: change the source, regenerate the full set, and test the new mark.
Why does my icon look stretched after generating?
Your SVG viewBox is probably not square; the tool scales it into a square per size. Square the artwork first with svg-viewbox-fixer.
Will fine detail survive the export?
Only at large sizes. The generator renders the SVG exactly, so hairlines and tiny text die at 20–48px. Design for the smallest size and the large sizes take care of themselves.
Is my design uploaded when I generate?
No — generation runs entirely in your browser (Canvas + JSZip). Nothing is sent to a server. App icon generation requires the Developer plan.
Which tools help me prepare the icon design?
Square the canvas with svg-viewbox-fixer; flatten colour with svg-monochrome-converter; minify a heavy SVG with svg-pro-minifier; and make web/PWA icons with svg-favicon-master.
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.