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

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.
<!-- 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>

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

  • XAML. SVG path data encapsulated in a XML description.
  • Icons fonts
<?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?

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

  • 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?

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?

Early draft of the open source “Icon Book” application

Help me improve this article

--

--

www.webalys.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store