Looking to use the SVG + JS method to get your icon Sprites to make repeated icons more performant on your page? We’ve got your back.
We’ll cover the basics of when, and how, to use SVG Sprites to improve load time on sites that repeat the same icons.
Our testing shows that for the typical number of icons most people use on a site, the loading and rendering time for SVG+JS method is faster than Web Fonts.
A Case for SVG Symbols
The case below is a great one for SVG Symbols – there are a bunch of the same icon repeated on the page, so you'll get a big performance boost by loading each of them only once using the step-by-step method below.
We'll define these icons as symbols: pencil, trash, and star.
Make Sure to Add Some CSS
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.