Icon system with 


Or :

 How to make simple, smart & effective icon system 

Problematic : 

On some projects, you can end up with some huge 

icons system, a same icon, in three of four version

to handle all the possibilities


For example, a twitter icon can be white, or blue, depending it's context. 


With the old fashion way, we use to have 2 different icon versions, a blue and a white, or just a huge PNG sprite file.

I was working on a company that had 

an old way to generate icons, making X calls to the server, and sometimes, the same icon was in 3 different versions, so for a page, 3 server requests, to display 3 times the same icon, with some different colors.



I needed to make it easier to handle, starting by getting all the icons in SVG, getting rid of our old icon.css file, and I wanted to use a SASS loop to re-generate the CSS, automatically

First solution : 

My first solution was to write a @mixin, 

that looped over each icon names (Twitter) and icon colors (red, blue, green)


To generate a clean icon, using background image, and SVG.


One of the benefit was also the browser support : 


On the browser support front, the danger zones are IE 8 and down, Safari 5 and down, iOS 4.3 and down, and Android 2.3 and down. But if your policy is "the last two major versions" - you're looking at pretty much 100% support

From css-tricks : 

It was working, but the output css was really huge.


Replacing a problem, by an other, wasn't a great solution.


So I kept working on it, and finally, the Second iteration was what I wanted.. 

The second solution was smarter, I wanted to use those 

SVG sprites, I heard it was really powerful, and could

fix my problem. 


Once my svg sprite was ready, all I needed was basically to make a simple sass loop, with only one color parameter, and to call my icons on the HTML side


It would allow me to call the same icon X times, with as much modifications as I wanted on it, reducing the number of server requests,providing better looking icons, and making our "icon logic" more flexible

Second solution : 

Icon system with SVG & SASS

By Lucas Bonomi

Icon system with SVG & SASS

  • 840
Loading comments...

More from Lucas Bonomi