It’s a font – you can easily change size, color, shape and add a shadow.

It’s one source file, which means a minimum of HTTP requests.

It’s a vector graphic, which means it can be scaled to any size making it Retina ready.

It’s plain text, which means they can be gzipped to up to 95%.

They allow us to manage all these things more easily and we have the following benefits: Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale.īut fortunately we’ve had icon fonts coming to the rescue. What about a shape? A shadow? Yup, the same thing. What about size? For each icon size we need to add yet another icon image. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image.

Using raster graphics for icons means that they are not manageable in CSS. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible.

Svg icon user