Which is better for icon design: vector graphics or raster graphics?


Which of the following approaches should I take to design icons in many resolutions?

  • Create them in vector graphics, as SVG or AI and then rasterize them
  • Design them directly as bitmap graphics (BMP, JPEG, or PNG and separate files for each resolution)

I'd like to consider the following factors:

  • Dependable: will not fail to provide a good quality output and force to start from scratch
  • Easier to learn for beginners in computer-aided graphic design
  • Faster to finish
  • Easier to modify later
  • Better quality of output
  • More common to be used
  • Have good tools, including open-source tools and support for Linux

The use case is launcher icons for an Android app:

Launcher icons on a mobile device must be 48x48 dp ( denisty-independent pixels: 1dp is one pixel on 160 dpi screen),therefore 3 sizes needed

Launcher icons for display on Google Play must be 512x512 pixels. That is the fourth size

2/19/2015 3:57:00 PM

Accepted Answer

If you're looking for fully scalable, easy to use, re-usable icons your best bet is to create your own custom font packages utilizing the icons, host them on a private (or client) database and use them in your designs. Not only will you cut down on load times, but you'll have nice crisp icons no matter what the size!

Check out: http://icomoon.io/ I've found it very helpful in quickly creating these kind of packs, they also have pre-made editable icons for base work.

Make sure you're creating them as vector in Illustrator for easy export / import in .svg form!

2/19/2015 3:59:00 PM

The best icon libraries I've seen use an hybrid approach:

  1. For most sizes you have a vector graphic that is rendered for whatever resolution you want

  2. For the really tiny version (16x16px) you make a separate hand tuned bitmap that often isn't even the same image.

Vector graphics is especially useful because today you have systems that can natively render vector images, high resolution displays and weird size icon requirements (web page icons don't have to conform to the icon sizes used in desktop apps)