I still love The Noun Project a bunch, but it costs bucks, doesn’t seem to have innovated much (like it doesn’t have as many nice exporting options), and doesn’t group icons as well.

Jeez, Anthony Fu has done some incredible open-source projects!

Oh, and hey, if the idea of exporting to framework components is appealing to you, check out iconbundler which can take a whole bunch of them and do it for you right from the browser. I tend to use SVGR, though, to automate it.

<svg class="icon icon-eye-dropper" width="16" height="16" viewBox="0 0 16 16">
  <path d="..." />
  <path d="..." />
</svg>

This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons).

But, putting your SVG icons in CSS can be advantageous too. This converter is handy. For example:

.icon-menu {
  width: 1rem; height: 1rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="..."/></svg>');
}

You give up some styling control there — the icon is just going to look how that SVG looks, barring stuff like filter and background-blend-mode.

The advantage here is that your icons are now cached within your CSS and shared across everywhere on your site that is using that CSS file. If you have the (rare) issue of your DOM being too big, this would help.

A minor alteration to this is to use a mask instead of background-image to show the icon. This actually frees up the background to use to color it. Still getting the caching, just a bit easier to style now.

David Bushell just blogged about this and says:

This is technique perfect for:

• Button icons
• List bullet points
• Custom checkbox icons

Especically when the icon changes colour depending on interactive state, or light and dark theming, for example.