You can leverage the SVG Sprites technique to make repeated icons more performant on your page.
Our testing shows that for the typical number of icons most people use on a site the loading and rendering time is faster than web fonts. Your mileage may vary, of course, and we'd love to hear about your experience if this turns out not to be the case for you.
See this working on CodePen.io(opens new window) .
We'll define these icons as symbols: pencil, trash, and star.
Watch your CSS, Goose
One of the downsides to SVG sprites is that extra styling is necessary to make them behave. When using symbols you will need to handle this yourself.