Using Custom Vector Icons on the Web

When I need a custom icon asset on a website I’m rather fond of using Scalable Vector Graphic (SVG) icons, especially for simple, pictographic icons, precisely for the reason that I can style them directly CSS. Plus, in many cases SVG is a much better option over raster graphics (like PNG or JPG) because as a vector asset it replaces the need for a bunch tailored assets to cover various display pixel densities, but I digress.

For these instructions, I’m going to make a large assumption that you know how to make a vector graphic and use a vector editor. I personally use Inkscape for all my icon creating needs, but you can use whichever tickles your fancy. So all you need to do is create a simple pictographic icon that’s a single path (by merging all paths or whatnot), fill colours are irrelevant, since we’ll be using CSS later on.

And here’s one I made earlier of a music note:

Next, since vector editors tend to add a lot of unnecessary metadata and cruft to saved/exported SVG assets, we’re going to scrub them: this is where I use a small command-line utility called svgo to strip out all the unnecessary code and give you something nice and neat like this:

<svg height="16" width="16">
  <path
     d="M 5,1 C 5,1 5,1 5,2 L 5,9.1875 C 4.68353,9.07398 4.35553,9 4,9 2.34315,9 1,10.34315 1,12 c 0,1.65685 1.34315,3 3,3 1.65685,0 3,-1.34315 3,-3 l 0,-7 6,0 0,4.1875 C 12.68353,9.07398 12.35553,9 12,9 c -1.65685,0 -3,1.34315 -3,3 0,1.65685 1.34315,3 3,3 1.65685,0 3,-1.34315 3,-3 L 15,1 c 0,0 0,0 -1,0 z" />
</svg>

Now, if you embed the SVG directly in your site’s code it becomes very simple to style with CSS since you can directly reference the objects within it such as the SVG itself and the icon (path) within it, for example you can give it a fill color:

svg path {
    fill:blue; 
}

This technique is not limited to tiny pictographic icons, if you need to do more complicated stylings you can add class names to the various elements of the SVG to style them individually.