I’ve been saying for years that a pretty good icon system is just dropping in icons with inline
<svg> where you need them. This is simple to do, offers full design control, has (generally) good performance, and means you aren’t smurfing around with caching and browser support stuff.
Along those lines… using
<img> isn’t the worst idea for icons either. It doesn’t offer as much fine-grained design control (although you can still
filter them) and arguably isn’t quite as fast (since the images need to be fetched separately from the document), but it still has many of the same upsides as inline SVG icons.
Shubham Jain has a project called SVGBOX that offers icons-as-
<img> and removes one of the design-control limitations by offering a URL parameter to change colors.
Want an Instagram icon, but in red? Pass in
If you’re going to use a bunch of icons, the provided copy-and-paste code offers an “SVG sprite” version where the URL is like this:
That is going to increase the download weight of the icon (because it’s downloading all the icons from this set), but possibly be more efficient as it’s a single download not many. Hard to say if that’s more efficient or not these days, with HTTP/2 around.
What’s interesting is the
<view> element. Don’t see that every day.
You can support CSS-Tricks by being an MVP Supporter.