: 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

@Merenda852

Most important indicator is probably what graphical elements
you want to use for your icons? Shapes and fonts (vector) or
parts of a photo (bitmap).

Second indicator is the format of the final product, in your
case bitmap.

Software for each type have different capabilities (e.g. filters)...
As the user Nir said, you could use a hybrid approach...

In general vector graphics are better at scaling contents
but if you design at a size where a line has a width of 5px
and then scale e.g. 30% then your result gets blurry and
you might have been better off using bitmap from the start.

For an android app I personally would use bitmap graphics.
According to this document best practice is to start with
an 864x864 artboard and then scale to 96, 72, 48 and 36 pixels.

P.S. You can use Inkscape for vector and Gimp for bitmap graphics.

Vote Up Vote Down

@Smith574

Create them in vector, even though it may not be as much fun to create. Only time you should use raster is if you are deadly certain that you will never need them larger. What happens if someone wants to buy your icons for print and needs 300ppi? Vector also resizes sharper and more accurately even when downsizing your images.

With SVG, you can scale the graphics on the web. This is important for responsive websites as you can simply set your image at 100% of its container element and it will look always it's best.

Also consider retina displays. Raster graphics currently need to be at double size for retina screens to display at max quality, causing larger download times.

Raster is very limiting, while vector will always look it's best, even on the side of a building.

Vote Up Vote Down

@Shakeerah625

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

Vote Up Vote Down

@Michele215

Personally I would go vector.

You can scale endlessly and resize to whatever dimensions you may need. In the past maybe bitmap would have been better because for quality icons you would want pixel perfect icons but now with Illustrators 'align to pixel grid' it makes it easier to get pixel perfect.

Illustrator also saves you time because you can make the icon once and resize to whatever you need whereas bitmap either you make one icon big and scale down but the quality can be a little funny sometimes (depends how you sample down) or you have to take the time to design the icon at each required dimensions e.g. you may think you need a 32x32 icon but you see it on website or app and then want to change it for whatever reason.

But at the end of the day I would say it comes down to which piece of software you feel more comfortable with. For example if you know Photoshop I don't know how easy or hard it would be for you to transition over to Illustrator.

Vote Up Vote Down

@Turnbaugh909

Microsoft published a best practice guide for Aero Glass Icons which may be appropriate here. Although it discusses the Aero icon style at some length, the techniques of producing a good set of scaled icons remain the same and different approaches are discussed towards the end of the article. Their recommendation is that it depends on what the output is.

Vote Up Vote Down

@Margaret771

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


For most sizes you have a vector graphic that is rendered for whatever resolution you want
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)

Vote Up Vote Down