What's the best approach when designing website/app UI icons in Photoshop?

Question

As the title says, I would like to know what's best to approach when inserting/using an icon when designing website/app UI. Should I insert it as a “smart object”, font-based icon, or vector mask?

I've looked at tons of websites in terms of UI design and how sharp/pixel perfect their designs are, mainly regarding the use of icons, and sadly believe most of them are rasterized! Even though most are using SVGs, they are still not as sharp as you would expect them to be and always tend to have pixelated and blurry edges.

For example, take a look at this;

I've realised this is true with many sites and not just eBay! This is true regardless whether they use font-based icons or SVG icons.

I often face this problem when starting a new design in Photoshop and then coding it. For example sometimes I find smart objects are sharper than font-based icons and sometimes even vector masks. I don't know what exactly causes this problem or why. Even if you resize them in Illustrator, it still happens and it always ends up NOT snapping into the right pixel. The same goes for font-based icons.

They never end up being sharp enough unless you create it with the pen tool, just as I did for the example above. But that's not always possible as not all the shapes/icons are easy to be redrawn or to be corrected that easily using the pen tool.

So what's the solution to this and how do you personally approach this when designing an UI when it comes to icons?

Thanks in advance.

Answer 1

Producing the icon in vector and exporting to a vector format (SVG / icon font) will produce the crisp edge that you are looking for. Can you create a code pen to recreate the problem, one that shows the difference in crispness?

The ebay example is using raster sprites. The carrot (on the live site not the sprite) looks crisp on my retina screen. Is it still jagged for you?

If you want to work in raster, there are tricks to make sure you get clean edges. Export to an appropriate size for all resolutions (Bohemian coding's Sketch allows you to do this with a few clicks) and align all straight edges to the pixel grid.

Here's a related thread that might be helpful How do I get my vector logos to look super sharp on the web?