In the early days of mobile app development, handling icons was a nightmare. A UI designer had to export every single icon as a PNG in three or four different sizes (e.g., 1x, 2x, 3x for iOS; mdpi, hdpi, xhdpi, xxhdpi for Android). This tedious process bloated the app's final download size and created hours of busywork.
Today, the industry has shifted almost entirely to vector graphics. Using SVGs (and their native platform equivalents) allows you to use a single master file that scales perfectly to any device, from an old iPhone 8 to a massive iPad Pro. Here is a practical guide on how to handle SVG assets across the major mobile platforms.
Android: VectorDrawables
Android does not natively render raw .svg files in its UI components. Instead, Android Studio uses a proprietary XML format called VectorDrawable.
The Workflow:
- Design your icon in Illustrator/Figma and export it as a standard SVG.
- Open Android Studio. Right-click the
res/drawablefolder and select New > Vector Asset. - Select "Local file (SVG, PSD)" and choose your SVG.
- Android Studio automatically translates the SVG paths into a VectorDrawable XML file.
You can now use this single XML file in any ImageView, and Android will automatically scale it perfectly for every screen density without any pixelation.
iOS (Swift/Xcode): Native SVG Support
For a long time, Apple preferred developers to use PDF format for vectors. However, as of Xcode 12 and iOS 13, Apple fully supports native SVG files directly in the Asset Catalog.
The Workflow:
- Export your SVG icon.
- Open your Xcode project and go to
Assets.xcassets. - Drag and drop the SVG file into the catalog.
- Select the icon in the catalog. In the Attributes Inspector on the right, change the Scales setting from "Individual Scales" to "Single Scale".
By selecting "Single Scale", you tell Xcode to stop asking for 1x, 2x, and 3x versions. It will use the mathematical paths in the SVG to render the icon crisply on any Apple device.
React Native: react-native-svg
If you are building cross-platform apps using React Native, you cannot simply use an <Image source={require('icon.svg')} /> tag out of the box. React Native does not have a native rendering engine for SVGs built into the core library.
The Workflow:
You must install the community standard library: react-native-svg.
npm install react-native-svg
npm install --save-dev react-native-svg-transformerBy configuring the transformer in your metro.config.js, you can import SVGs directly as React components. This allows you to pass props like `fill` and `width` directly to the SVG to dynamically change colors for active tabs or dark mode.
import HomeIcon from './assets/home.svg';
export default function App() {
return <HomeIcon width={24} height={24} fill="#007AFF" />;
}Conclusion
Switching your mobile app's asset pipeline from PNGs to SVGs is one of the highest-impact architectural decisions you can make. You will eliminate the headache of managing multiple image scales, reduce your app's download size by megabytes, and guarantee your UI looks incredibly sharp on every future device released.
Need vector icons for your app?
If you bought an icon pack that only came with PNGs, don't bloat your app size. Upload those PNG icons to our free converter to instantly turn them into lightweight, scalable SVGs ready for Xcode or Android Studio.
Open the Converter →About the Author
Faisal is a web developer and design enthusiast with a passion for web performance, scalable graphics, and creating tools that make developers' lives easier.