SVG Icons FTW

A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. 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. What about size? For each icon size we need to add yet another icon image. What about a shape? A shadow? Yup, the same thing. Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale. But fortunately we’ve had icon fonts coming to the rescue. They allow us to manage all these things more easily and we have the following benefits: It’s plain text, which means they can be gzipped to up to 95% It’s a vector graphic, which means it can be scaled to any size making it Retina ready It’s one source file, which means a minimum of HTTP requests It’s a font – you can easily change size, color, shape and add a shadow Browser support for older browsers possible (e.g. IE6) Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. We can’t, for example, use an inset text shadow or apply different colors to the details. So today we will explore the possibilities of using SVG icons instead. Using SVG icons The icon solution I want to share here with you is based on SVG (Scalable...