Die PNG. Die!How to use vector icons in your apps.

We all hate changing our old habits, but it’s time to retire the PNG.

Yes, the alpha transparency was a great feature… in 2001. We are now in the era of responsive designs and scalable vectors. SVG, XAML, PDF or Vector Drawables: there are better choices for embedding icons into your apps.

As an icon designer, I wondered a few weeks ago: “why the hell do I still have so many users requesting PNG version of my vector icons?”

To answer to that question, I started to survey icon users and created the “Better Icons” forum where developers and designers could collaborate and contribute to better standards for icons.

Feel free to join the conversation and read below the results of our discussion. Big thanks to @templarian, @starrcourt, @nicooprat, @marcedwards and @_cxa for their help.

Why does using PNG for icons suck?

• It’s a bitmap file format that cannot scale without losing quality. You need to update the file each time you change the image size. Unless you like blurred icons… Waste of time. Outdated workflow. Bah!
• Icons Designers produce icons in various PNG sizes, with tons of different folders for each size. Even Google does it for their Material Design Icons. It’s a waste of time for the designers to produce it, and you could have saved space on your hard drive by using a single vector icon. Also, the icon size they produce are not always of the size you need.
• You cannot change the PNG colors, neither the stroke size.

Which vector files can you use with Android?

• Vector Drawables. SVG path data encapsulated in a XML description.
• Icon fonts.

Read this article about working with Drawables:
In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without losing definition. You need only one asset file for a vector image, as opposed to an asset file for each screen density in the case of bitmap images. To create a vector image, you define the details of the shape inside a XML element.

Vector Drawable example of a vector image with the shape of a heart:

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
    android:height="256dp"
    android:width="256dp"
    <!-- size of the virtual canvas -->
    android:viewportWidth="32"
    android:viewportHeight="32">
  <!-- draw a path -->
  <path android:fillColor="#8fff"
      android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

Make vectors working on old Android versions

Some drawbacks are signaled by Luc Stepniewski in the comments. “Vector Drawables are available only from version 5+ (Lollipop; API Level 21+). That is, around 4% of the whole android population.”

But, there are solutions to allow usage of vectors inside Android applications. Use these libraries for displaying vector assets on legacy Android (two options):

• SVG: https://github.com/trello/victor
• Vector Drawables: https://github.com/telly/MrVector

For web applications or website, SVG / Webfonts are handled by most of the Android phones.

Thanks to @templarian for the tip

SVG - VS - PNG Performance

As stated in the comments by Josh Estelle (engineering lead on Google Material icons team):

There are performance and compability questions for SVG still. We’re pushing towards vectors with our icons and graphics too, but we haven’t been able to put PNGs to bed yet.

Which vector files can you use with Windows Desktop and Windows Mobile?

• XAML. SVG path data encapsulated in a XML description.
• Icons fonts

Example of an icon coded in XAML, from Modernuiicons.com

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_3d_3ds" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
	<Path Width="32" Height="40" Canvas.Left="23" Canvas.Top="18" Stretch="Fill" Fill="#FF000000" Data="F1 M 27,18L 23,26L 33,30L 24,38L 33,46L 23,50L 27,58L 45,58L 55,38L 45,18L 27,18 Z "/>
</Canvas>

Which vector files can you use with iOS and Mac OSX?

• Only PDF vector files. Xcode 6 generate 3 PNGs (with their respective 1x, 2x, 3x sizes) using the PDF file. It’s compatible with iOS 7 but not the older versions. But do developers still develop for iOS 6?

Read this excellent article by Cory Bohon: Using Vector Images in XCode 6

@marcedwards, from Bjango, gave us a lot of smart advices:

For iOS, you can use PDFs, but there’s some significant issues: http://bjango.com/articles/idontusepdfs

You can also use SVGs, if you’re happy using a third party framework. https://github.com/SVGKit/SVGKit
https://github.com/schwa/SwiftGraphics

iOS can also tint PNGs, as well as expand images using GPU (similar to Android’s 9-patch images). So changing colours for PNG icons isn’t an issue at all. Only changing the pixel density is.

If you really want vectors for iOS, using Core Graphics code and something like PaintCode is a good way to go.

OSX is similar to iOS, except PDFs can be drawn realtime as needed.

Which vector files can you use with web applications and websites?

It’s super easy to add vector icons to web apps. I assume that you all already know how to do it. Browsers now widely support:

• Icon Fonts
• SVG. Embedded as a unique SVG file or SVG sprites
• Base64 code, embedded directly in the HTML

When do you still need PNG?

For web development, you will still need PNG to be compatible with IE8, which apparently still represents around 3% of users. If your audience comes from western countries (USA, Europe) or is tech savvy that would be far less than 3%. Read this interesting article: “Is it time to drop support for IE8?”

Another feedback from @marcdewards about vector VS Bitmap:

For me, one of the biggest drawbacks for using vector formats is automated exporting using design tools — they’re just usually not as good as bitmap exporting (yet, anyway). Also, using SVG or a vector format usually means things are rendered in realtime. That can be good, because it allows for dynamic control, but bad, because it means you’re handing over control of quality to the OS and to something that needs to be optimised for performance, not quality.

PNG is far from dead. :-) But, hopefully better SVG support is on the horizon for iOS and Android, too.

How to export icons in vector formats?

• MaterialDesignIcons generates all of these file formats, with preview ability — except for PDF.
• Fontastic generate icon fonts and SVG sprites, from 9000 different icons (including the Webalys Streamline and Minicons collection)
• Icomoon generate icon fonts and SVG sprites.
• Fonticons generate icon fonts
• Fontello generate icons fonts
• Grunt Webfont generate icon fonts with a grunt task

How can we improve the workflow?

We need an app that allows you to manage your icons from various libraries, add new icons, and export the icons you need in vectors files format.

I’m thinking about developing an open source app that you could download on your computer (OSX, Windows or Linux). See below an early sketch of the interface. The concept is very close to the Mac OSX “Font Book”. A simple tool to manage your icon libraries, add more icons and export selected icons to vector files format needed for development.

Interested by the “Icon Book” project?
Join the conversation on the “Better Icons” forum, or contact me

Early draft of the open source “Icon Book” application

Help me improve this article

Please add comments or contact me if you see any errors and omissions, or if you want to share information and tips about using vector icons in development. I will regularly update this article with more info.