# Mobile App Icons: SVG Best Practices for iOS and Android
> Creating app icons that look perfect on every device. Learn SVG best practices for iOS and Android, including size requirements and optimization tips.
**Source:** https://vectosolve.com/blog/mobile-app-icons-svg-best-practices
**Author:** Robin Monteiro (Founder of VectoSolve)
**Published:** 2026-01-16
**Last updated:** 2026-10-10
**Category:** Tutorial
**Reading time:** 13 min
**Tags:** Mobile, App Icons, iOS, Android, Design
---
:::takeaways
- SVG icons scale perfectly across all device densities — but only if you prepare them correctly for each platform
- iOS requires PDF or SVG assets in Xcode Asset Catalogs; Android uses Vector Drawables (XML-based SVG subset)
- Always flatten transforms, outline strokes, and remove hidden layers before exporting icons for mobile
- Test icons at 16px, 24px, 48px, and 64px to catch rendering issues before they ship
- Keep SVG file sizes under 5KB per icon for optimal mobile performance
- Use a single source-of-truth SVG and automate platform-specific exports
:::
Every mobile developer has lived this moment: you drop a beautifully designed icon into your app, build it, and launch the simulator — only to see a blurry, misaligned, or completely invisible shape staring back at you. The icon looked flawless in Figma. It rendered perfectly in the browser. But on a real device, something went wrong.
The gap between *designing* an SVG icon and *shipping* it inside a native mobile app is wider than most teams realize. iOS and Android handle vector assets through entirely different pipelines, with different format requirements, different rendering engines, and different gotchas that can silently destroy your carefully crafted icons.
This guide collects the practices that prevent the most common rendering failures. Whether you're a solo developer managing your own assets or a designer handing off to an engineering team, these practices will save you hours of frustration.
---
## Why SVG Icons Matter for Mobile Apps
Mobile screens come in a dizzying array of sizes and pixel densities. A modern Android device might run at 1x, 1.5x, 2x, 3x, or even 4x density. iPhones ship at 2x and 3x. Tablets add yet more combinations. If you're using raster icons (PNG, JPG), you need to export every icon at every size — and manage all of those files.
SVG icons solve this by defining shapes mathematically. One file, infinite resolution. But "just use SVGs" dramatically undersells the complexity involved in mobile icon pipelines.
:::info
**The core challenge:** Neither iOS nor Android natively renders `.svg` files in their standard UI frameworks. Both platforms convert SVGs into platform-specific intermediate formats — PDF assets for iOS and VectorDrawable XML for Android. Understanding these conversion pipelines is essential for shipping clean icons.
:::
The benefits of getting this right are substantial:
- **Smaller app bundles** — one vector asset replaces 4-5 raster exports
- **Pixel-perfect rendering** at every screen density
- **Easier maintenance** — update one source file, regenerate all targets
- **Better accessibility** — vector shapes can carry semantic metadata
- **Future-proof** — no re-exporting when new screen densities emerge
---
## Preparing SVGs for Mobile Export
Before you even think about platform-specific formats, your source SVGs need to be clean. Mobile rendering engines are far less forgiving than web browsers. Here's a checklist to run through before every export.
### The Clean SVG Checklist
**1. Flatten all transforms.** CSS and SVG transforms (translate, rotate, scale) baked into group elements will sometimes be ignored or misinterpreted by mobile converters. Apply all transforms to the path data itself.
**2. Outline all strokes.** Android's VectorDrawable format has limited stroke support, and stroke rendering can vary across devices. Convert strokes to filled paths for consistent results.
**3. Remove hidden layers and metadata.** Design tools love to embed editor metadata, hidden layers, and unused definitions. Strip them out. Every unnecessary node is a potential rendering issue.
**4. Use a consistent viewBox.** Standardize on a viewBox like `0 0 24 24` for UI icons. This makes sizing predictable across platforms.
**5. Simplify paths.** Reduce unnecessary path points. Fewer points means smaller files, faster rendering, and fewer conversion artifacts.
Here's what a properly cleaned icon SVG looks like:
```xml
```
:::warning
**Avoid embedded raster images inside SVGs.** Some design tools export icons with embedded PNGs for complex effects like shadows or gradients. These will either fail to convert or balloon your file size. If your icon requires raster effects, reconsider the design for mobile contexts.
:::
---
## iOS: Asset Catalogs and PDF Vectors
Apple's recommended approach for vector icons is to use **PDF assets** inside Xcode Asset Catalogs. Starting with Xcode 12, Apple also added support for SVG assets directly, but PDF remains the more battle-tested path.
### Setting Up Vector Assets in Xcode
1. Open your Asset Catalog (`.xcassets`)
2. Create a new Image Set
3. In the Attributes Inspector, set **Scales** to "Single Scale"
4. Set **Resizing** to "Preserve Vector Data"
5. Drop in your PDF or SVG file
```xml
{
"images" : [
{
"filename" : "icon-settings.svg",
"idiom" : "universal"
}
],
"properties" : {
"preserves-vector-representation" : true
}
}
```
:::tip
**Always check "Preserve Vector Data"** in Xcode's asset inspector. Without this flag, Xcode will rasterize your vector at build time, defeating the entire purpose of using SVG source files. Forgetting this single checkbox is one of the most common iOS vector icon mistakes.
:::
### iOS App Icon Sizes
iOS requires specific sizes for app icons. While the app icon itself is typically raster, understanding the size matrix helps you design SVG-based icons that render cleanly at every target:
| Context | Size (pt) | Scale | Pixels |
|---|---|---|---|
| iPhone Notification | 20x20 | 2x, 3x | 40x40, 60x60 |
| iPhone Settings | 29x29 | 2x, 3x | 58x58, 87x87 |
| iPhone Spotlight | 40x40 | 2x, 3x | 80x80, 120x120 |
| iPhone App | 60x60 | 2x, 3x | 120x120, 180x180 |
| iPad App | 76x76 | 1x, 2x | 76x76, 152x152 |
| iPad Pro App | 83.5x83.5 | 2x | 167x167 |
| App Store | 1024x1024 | 1x | 1024x1024 |
When designing icons in SVG that will be rendered at these sizes, **test at the smallest target first**. An icon that looks great at 1024px but turns to mush at 40px has a design problem, not a technical one.
---
## Android: Vector Drawables
Android handles vector icons through its own XML format called **VectorDrawable**. This is essentially a subset of SVG — it supports paths, groups, and basic fills, but drops many SVG features like filters, masks, gradients (partially supported since API 24), and text.
### Converting SVG to VectorDrawable
Android Studio includes a built-in converter: **Vector Asset Studio**. Access it via File → New → Vector Asset. But for production pipelines, I recommend automating the conversion.
```xml
```
### Using Vector Drawables in Layouts
```xml
```
:::info
**Use `app:srcCompat` instead of `android:src`.** The `srcCompat` attribute from the AndroidX library provides backward-compatible vector rendering for devices running below API 21. Using `android:src` directly with VectorDrawables will crash on older devices.
:::
### Android Icon Size Reference
Android uses density-independent pixels (dp) with density buckets:
| Density | Scale | Icon Sizes (common) | DPI |
|---|---|---|---|
| mdpi (baseline) | 1x | 24x24, 48x48 | ~160 |
| hdpi | 1.5x | 36x36, 72x72 | ~240 |
| xhdpi | 2x | 48x48, 96x96 | ~320 |
| xxhdpi | 3x | 72x72, 144x144 | ~480 |
| xxxhdpi | 4x | 96x96, 192x192 | ~640 |
With VectorDrawable, you define icons once at the dp size and the system handles density scaling automatically. This is the primary advantage over raster drawable resources.
---
## Building an Automated Icon Pipeline
Manual icon exports are a recipe for inconsistency. The most reliable approach is to maintain a single source-of-truth SVG for each icon and automate platform-specific conversions.
Here's a typical production pipeline:
### Step 1: Optimize the Source SVG
```css
/* Example SVGO config (svgo.config.js) */
module.exports = {
plugins: [
'preset-default',
'removeDimensions',
'removeXMLNS',
{
name: 'removeAttrs',
params: {
attrs: ['data-*', 'class']
}
},
{
name: 'addAttributesToSVGElement',
params: {
attributes: [
{ xmlns: 'http://www.w3.org/2000/svg' }
]
}
}
]
};
```
### Step 2: Generate Platform Assets
Use a build script that converts optimized SVGs to:
- **PDF** for iOS (using tools like `svgexport` or `cairosvg`)
- **VectorDrawable XML** for Android (using `svg2vectordrawable` or Android Studio's batch converter)
- **Optimized SVG** for web/PWA usage
### Step 3: Validate Output
Automated validation catches issues before they reach QA:
- Check file sizes (flag anything over 5KB)
- Verify viewBox consistency
- Scan for unsupported elements (filters, masks, embedded images)
- Render at target sizes and compare against reference screenshots
:::tip
**Integrate icon validation into your CI pipeline.** A simple script that checks SVG file sizes, validates VectorDrawable XML structure, and flags unsupported elements will catch 90% of icon issues before they reach a device. The ten minutes it takes to set up will save hours of debugging later.
:::
---
## Common Mistakes and How to Fix Them
These are the most frequent mistakes in icon implementations:
### 1. Using Strokes Instead of Fills
**Problem:** An icon uses stroked paths that look fine in the browser but render with inconsistent thickness on mobile — or disappear entirely at small sizes.
**Fix:** Convert all strokes to outlined fills before export. In Figma, select the path and use "Outline Stroke." In Illustrator, use Object → Path → Outline Stroke.
### 2. Non-Standard ViewBox
**Problem:** Icons have inconsistent viewBox values (one is `0 0 24 24`, another is `0 0 100 100`, a third is `0 0 16 16`), causing sizing inconsistencies in the app.
**Fix:** Standardize on a single viewBox for your entire icon set. `0 0 24 24` is the most common convention, matching Material Design's icon grid.
### 3. Embedded Fonts and Text
**Problem:** An SVG icon contains a `` element with a custom font. The font isn't available on the device, so the text renders in a system fallback — or not at all.
**Fix:** Convert all text to paths before export. Always. No exceptions.
### 4. Forgetting Dark Mode
**Problem:** Icons use hardcoded black fills. They're invisible on dark backgrounds.
**Fix:** Use `currentColor` as the fill value in your SVGs. On iOS, use template rendering mode. On Android, apply tint colors via `android:tint` or `app:tint`.
### 5. Ignoring Accessibility
**Problem:** Icons convey meaning but have no accessibility labels.
**Fix:** Always set `contentDescription` on Android and `accessibilityLabel` on iOS. For decorative icons, explicitly mark them as non-accessible (`importantForAccessibility="no"` on Android, `isAccessibilityElement = false` on iOS).
:::warning
**The "it works on my device" trap:** Mobile icon rendering varies significantly across devices, OS versions, and manufacturer skins. Always test on at least 3 different Android devices (different manufacturers and API levels) and both 2x and 3x iOS devices. Emulators are not sufficient for catching all rendering edge cases.
:::
---
## Performance Considerations
Vector icons are generally lighter than their raster equivalents, but they're not free. Each VectorDrawable or PDF asset needs to be parsed and rasterized at runtime. Here are some performance guidelines:
**Keep icons simple.** A UI icon should rarely exceed 20-30 path commands. If your icon has hundreds of path points, it's probably too complex for a toolbar or tab bar.
**Cache rendered bitmaps.** Both iOS and Android cache rasterized versions of vector assets, but be aware of the memory implications if you're rendering many unique icons at many different sizes.
**Measure actual impact.** Use Android's GPU profiler or Xcode's Instruments to measure icon rendering time in your specific app. Complex vector icons can add a few milliseconds per frame during scrolling animations, which matters when you're trying to hit 60fps.
| Icon Complexity | Path Commands | File Size | Render Time (est.) |
|---|---|---|---|
| Simple (checkmark, arrow) | 5-10 | <1KB | <0.5ms |
| Medium (settings gear, user) | 15-30 | 1-3KB | 0.5-1ms |
| Complex (detailed illustration) | 50-100+ | 3-8KB | 1-3ms |
| Too complex (consider raster) | 200+ | 10KB+ | 3ms+ |
---
## Bringing It All Together
The SVG-to-mobile pipeline isn't complicated once you understand the constraints of each platform. Here's the workflow in summary:
1. **Design** icons on a standardized grid (24x24 recommended) with filled paths, no strokes, no text, no embedded effects
2. **Clean** the SVG — flatten transforms, outline strokes, strip metadata, optimize with SVGO
3. **Convert** to platform formats — PDF/SVG for iOS Asset Catalogs, VectorDrawable XML for Android
4. **Validate** — check file sizes, render at target sizes, verify accessibility labels
5. **Automate** — build this into your CI/CD so it runs on every design asset change
The initial setup takes a day or two. After that, your icon pipeline runs itself, and you never have to debug a blurry icon at 3 AM before a release again.
If you're working with existing raster icons — or complex logos that need to be converted to clean, scalable vectors — **[VectoSolve](https://vectosolve.com)** can handle the heavy lifting. Our AI-powered vectorization engine produces clean, optimized SVGs that are ready for mobile export pipelines. Upload a PNG or JPG, get back a production-ready SVG with proper viewBox, clean paths, and minimal file size. It's the fastest way to modernize your icon assets for a vector-first mobile workflow.
---
*Maintained by VectoSolve. When citing, link to https://vectosolve.com/blog/mobile-app-icons-svg-best-practices.*
*VectoSolve — AI-powered SVG platform: image-to-vector conversion, AI animation, brand identity generation, and more. https://vectosolve.com*