Designing Iconic Across Different Sizes

Designing Iconic Across Different Sizes.

This is a great read about SVG icons. They make a good point about scaling graphics:

SVG is great because (as its name suggests), it’s scalable. This means that SVG images, including icons, will be super-crisp at any size, right?

Nope. If you’ve followed our Kickstarter project, you probably know what we’re going to say, so we’ll be brief.

It’s easy to assume that vector images are the salvation for legibility, but that simply isn’t the case. Even if an image is put together as vectors, it still renders on the screen through pixels. Meaning if your vector points land on floating-point numbers, your “crisp” image is going to show up with sub-pixel ugliness. High pixel-density screens will help alleviate this, but it doesn’t need to (nor should it) be a pre-requisite for sharp imagery.

Additionally, icons have optimal legibility ranges—just like typefaces. Meaning an icon designed for 32 pixels will often be illegible at 50% and appear chunky at 300%.