We've spent a lot of time talking about using inline <svg> and the <use> element. You can build an icon system with that that is rife with advantages.

You can create an SVG icon system though in other ways. You could lay out a traditional gridded sprite sheet in SVG and do background-position sprites like we used to do with raster images. In the future you'll be able to use fragment identifiers, so that even gets a little easier. More information on these things.

Another way is to embed data URI's of the SVG image right into a CSS file. That is the approach that Grunticon takes.

Grunticon is a Grunt plugin for automating an SVG icon system. It takes a folder full of SVG and processes them into a CSS file. There are a bunch of selectors in there, based on the file names of the SVG images, that have a background-image of the SVG data URI (not Base64 though).

Doing it this way means you get the scalability of SVG and file size benefits, but that's about it. Still, often that's all you need.

Perhaps the best part about Grunticon though, is that it gives you everything necessary for fallbacks. This includes an alternate stylesheet for data URI PNG's and even individual PNGs themselves (which it creates for you). Plus, a script you use on your page to determine support and only load the appropriate stylesheet.

I think it's fair to say that this makes fallbacks easier to handle than the defs/<use> technique, for now. Not that it's impossible.

Grumpicon is an in-browser version of Grunticon, that we used in this screencast.

Grunticon is, as I write this, working on a way to progressively enhance up to embedded inline SVG, which would be pretty cool!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag