We all know how difficult and time consuming is to create icons and now we must create icons in three different sizes, regular, retina@2x and retina@3x.

PDF could be the solution

For last couple of days I was reading about assets library (Images.xcassets) in Xcode and how to organize assets better. During that process and playing with Xcode I figured that PDF format is supported by iOS and the most beautiful part is, just default size icon is enough.

XCode experiment with PDFs as icons

So how it works?

One pixel stroke proportionately gets enlarged for 2x and 3x images.
  1. Remember to do pixel hinting well. Do not know what pixel hinting is, scroll down…
  2. Just export your icons as PDF in regular size
  3. Name it accordingly and share it with developers
  4. Have a nice cup of coffee

iOS will automatically export @2x and @3x icons for you. PDFs do support alpha channel at-least when exported from Sketch.

Why should we use PDFs and not PNGs?

  1. Less assets to manage
  2. Future proof, what if tomorrow we might need to create @4x icons? @3x icons was a surprise for me.
  3. Small footprint

Where this process fails?

Android: Unfortunately android does not support this way yet. It does support SVGs but use of web-views is needed to do so. Android experts…Please correct me on this…

We all know what pixel is, but do we know what pixel hinting is?

Lets put it this way, it is process to make sure graphics are not looking blurred on any device. Check below example. X and Y positions of a node defining the curve are not rounded. X position is 419.5 and Y position is 250.25. The result of this is blurred graphic on mobile device.

This is not cool… the icon will look blurred

Now refer to the image below the X and Y position of node is perfectly aligned to pixel grid. Read more about pixel hinting here.

The icon will be sharp