SVG to PNG Converter: Export Icons for iOS and Android

An svg to png converter is useful for raster fallbacks, but the correct mobile handoff starts with one cleaned 24 × 24 dp master: collapse transforms, outline strokes into fills, and keep artwork inside the 2 dp keyline padding. For iOS, prefer an SF Symbol when one fits; otherwise provide a single vector PDF in an asset catalog or PNGs at @1x, @2x, and @3x. For Android, provide VectorDrawable XML for vector UI icons plus PNGs at mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi where raster assets are required.

Key takeaways

• •Apple platforms use SF Symbols or asset-catalog vector PDFs; Android uses VectorDrawable XML for native vector drawables.
• •A 24 dp Android icon exports to 24, 36, 48, 72, and 96 px from mdpi through xxxhdpi.
• •iOS raster image sets require @1x, @2x, and @3x files at the intended point size.
• •Keep a 2 dp keyline padding inside a 24 × 24 dp icon grid.
• •Outline strokes and collapse transforms before conversion so exported path geometry stays predictable.

This guide is for mobile UI/UX designers and engineers who can edit vector paths and prepare iOS and Android asset folders.

Time: 25 minutes · You'll need: A vector editor that can outline strokes and flatten transforms, An iOS Xcode asset catalog, Android Studio or access to the Android app’s drawable resources, floow.design SVG to PNG Converter or a local SVG raster exporter

What's on this page

1. •Choose the native icon format for each platform
2. •Set the 24 × 24 dp grid before export icons mobile
3. •Flatten strokes and collapse SVG transforms
4. •Create iOS PDF and PNG fallback files
5. •Export Android XML and density PNGs
6. •Reference table

• •Common mistakes
• •FAQs

Exporting mobile icons, step by step

1. Choose the native icon format for each platform

Start by separating system symbols from custom brand or product icons. On iOS, use an SF Symbol when Apple’s symbol library contains the intended meaning and the symbol matches your app’s platform language. SF Symbols inherit the surrounding text style, weight, scale, rendering mode, and Dynamic Type behaviour when configured in code. Do not export a custom SVG to replace a standard symbol such as search, share, or chevron unless the product deliberately needs a different metaphor.

For a custom iOS UI icon, add a single-scale PDF vector to an Xcode image set and enable Preserve Vector Data when the asset needs to remain vector-backed. For Android, convert the icon to VectorDrawable XML, whose path data is rendered by Android’s drawable system. An SVG file is a working-source format, not the normal runtime icon format for an Android ImageView. Keep the original SVG with the design source, then hand engineering the platform-native deliverables.

Tip: Do not substitute a branded custom icon for an SF Symbol in a tab bar without checking Apple’s symbol availability and platform conventions.

2. Set the 24 × 24 dp grid before export icons mobile

Build each Android UI icon on a 24 × 24 dp frame with 2 dp keyline padding on every edge. The resulting central live area is 20 × 20 dp. This grid gives adjacent icons a consistent optical footprint even when a glyph, such as a diagonal arrow or a thin plus sign, does not visibly fill its bounding box. Set the VectorDrawable viewport to 24 by 24 and use 24dp for both intrinsic width and height when the icon is a standard Material-sized action icon.

Apply the same 24-unit master frame to the iOS source when the icon occupies a comparable control role. iOS layout uses points rather than dp, so the frame becomes 24 × 24 pt only if the component specification calls for a 24 pt icon. Do not assume every iOS control wants that size: preserve the component’s specified point size, while retaining a consistent internal keyline. Align paths to whole or half units only when that produces the intended raster result at target sizes.

Tip: Judge the icon at 100% beside its neighbouring icons; matching visible mass matters more than making every path touch the same edges.

3. Flatten strokes and collapse SVG transforms

Before creating any platform output, duplicate the source SVG and convert every visible stroke to an outlined fill. Expand dashed strokes, variable-width strokes, and stroke alignment effects into closed paths. A 1-unit stroke can rasterise differently after scaling or conversion, which makes a line appear thinner at one density than another. Filled outlines preserve the intended silhouette when the asset is converted to PNG, PDF, or Android path data.

Then collapse transforms: bake translate, scale, rotate, mirror, and nested group transforms into the final path coordinates. Inspect the exported SVG for transform= attributes and remove them by flattening the geometry in the vector editor. SVG renderers understand transforms, but an SVG-to-VectorDrawable conversion can produce changed pivots, nested groups, or unsupported effects when it translates transformed artwork into Android XML. The cleaned file should contain a viewBox="0 0 24 24", final path coordinates, and no hidden clipping masks, filters, or editor-only layers. Save this as the immutable export master.

Tip: Keep the unflattened design source too; outlined strokes are harder to edit when the icon weight changes later.

4. Create iOS PDF and PNG fallback files

For each custom iOS icon, export a vector PDF from the cleaned master at its intended point dimensions. Place that PDF in an Xcode image set as a universal asset rather than manufacturing three PDFs. Xcode can preserve the vector representation and render it for the required screen scale. Name the asset by meaning, such as receipt.add, rather than by an appearance detail such as blue-plus.

Also prepare raster fallbacks when a destination cannot use the PDF vector workflow, such as a legacy pipeline, a fixed bitmap effect, or a review build that explicitly requests PNGs. Export the same point-size artwork at @1x, @2x, and @3x. A 24 pt icon therefore produces 24 px, 48 px, and 72 px PNG files. Keep all three exports from the same 24-unit master; never resize a @3x PNG downward as the source for @2x. In the image set, assign each file to its matching scale slot so iOS selects the correct resource for the device display.

Tip: Use a PDF for monochrome interface artwork; use PNG only when the icon contains pixel-specific texture, photographic content, or an approved bitmap effect.

5. Export Android XML and density PNGs

Convert the cleaned 24 × 24 master into VectorDrawable XML for Android UI icons. Put the XML in res/drawable/ and verify that its android:viewportWidth and android:viewportHeight are both 24. Test it with the intended tint and state behaviour in Android Studio; a VectorDrawable usually receives its colour from a tint or theme attribute rather than from separate blue, white, and dark-mode files.

When the icon must be raster, export the complete Android density ladder. A 24 dp master is 24 px at mdpi, 36 px at hdpi, 48 px at xhdpi, 72 px at xxhdpi, and 96 px at xxxhdpi. Place each PNG in the matching drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, and drawable-xxxhdpi directory. The manual method is to rasterise the cleaned SVG once at each pixel dimension and inspect every output. floow.design’s free SVG to PNG Converter at /free-tools/svg-to-png-converter can rasterise an SVG from 1x to 4x or package every iOS scale and Android density into one archive.

Tip: Use VectorDrawable XML for simple path icons, but retain PNG density sets for artwork that depends on unsupported SVG features or pixel-specific rendering.

Reference table

24 dp icon raster export sizes

Do it with the free SVG to PNG Converter

Rasterise any SVG at 1x to 4x, or export every iOS scale and Android density as one archive.

Open the SVG to PNG Converter → — free, no sign-up.

Common mistakes

Sending one SVG file and asking engineers to make it work on both platforms.

Send the cleaned SVG as source, then provide a PDF image-set asset for iOS and VectorDrawable XML for Android. Include PNG density sets only when the runtime asset must be raster.

Leaving live 1-unit strokes in the export master.

Outline every visible stroke into a filled path before rasterisation or XML conversion. This prevents conversion and scaling from changing the apparent line weight.

Exporting a 24 px PNG into every Android drawable folder.

Export 24, 36, 48, 72, and 96 px versions for a 24 dp icon. Android selects resources based on density qualifiers, not filename suffixes.

Using transformed groups, masks, and filters in the SVG handed to Android.

Collapse transforms into path coordinates and remove unsupported effects before conversion. Test the resulting VectorDrawable in the actual app theme and at the intended size.

Frequently asked questions

Can I use SVG icons directly in iOS and Android apps?

SVG is best treated as a source format rather than the shared runtime format for iOS and Android UI icons. iOS custom interface icons commonly ship as vector PDFs in asset catalogs, while Android native vector icons use VectorDrawable XML. Keep the SVG in the design repository so future platform exports start from the same path geometry.

What icon export sizes do I need for Android?

A 24 dp Android raster icon needs 24 px mdpi, 36 px hdpi, 48 px xhdpi, 72 px xxhdpi, and 96 px xxxhdpi files. Place each PNG in the density-qualified drawable directory with the same resource name. Use VectorDrawable XML instead when the icon is a simple compatible path asset.

Do I need @1x, @2x, and @3x when I export icons for iOS?

You need @1x, @2x, and @3x PNGs only when your iOS asset is raster; a vector PDF image asset can be supplied once and preserved as vector data. For a 24 pt raster icon, export 24 px, 48 px, and 72 px files. Match each file to the correct Xcode image-set scale slot.

Why does my SVG icon look thinner after I convert it to PNG?

An SVG icon can look thinner after PNG conversion when live strokes are reinterpreted at a different raster scale or during format conversion. Convert visible strokes to filled outlines before exporting, then inspect the PNG at every target pixel size. This is especially necessary for 1-unit strokes and small 24-unit icons.

Where this leaves you

A reliable mobile icon handoff has one clean vector master and two native delivery paths. Use SF Symbols before drawing a custom iOS equivalent, then use an asset-catalog PDF for the custom iOS vector. Convert the same flattened 24-unit geometry into Android VectorDrawable XML, and generate density-specific PNGs only where raster output is required. The 2 dp keyline, collapsed transforms, and outlined strokes prevent most cross-platform mismatches before engineering sees the file. Take one existing icon set, clean a single 24 × 24 master, and compare its iOS PDF, Android XML, and 24 px raster output side by side.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •WebP Converter — Batch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.
• •Phone Mockup Generator — Drop screenshots into realistic iPhone and Android frames, then export every combination as PNG and SVG.
• •Phone Mockup: Put App Screens in Device Frames — Build a credible phone mockup by matching screenshot apertures, choosing flat or angled fr
• •Placeholder Image Generator for App Mockups — Use a placeholder image generator and realistic app copy to expose text, image, locale, lo
• •Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery

Sources

• •Apple Human Interface Guidelines: SF Symbols
• •Apple Developer: SF Symbols
• •Android Developers: VectorDrawable
• •Android Developers: Support different pixel densities
• •Material Design 3: Icons