[pseudosavant]

SVG can handle this situation. You can define the SVGs somewhere in the HTML document and reference them anywhere you want. https://css-tricks.com/lodge/svg/13-svg-icon-system-use-elem...

The syntax is like this:

<!-- Define the SVGs. I usually put them in an element with `display:none` --> <svg id='svgID12345'><path d="..."/></svg>

<!-- Use the SVG via `<use xlink>` anywhere you want to see it. --> <svg><use xlink:href='#svgID12345'></svg>

You can reference external SVGs in external files as well. Just use `<use xlink:href="defs.svg#icon-1"></use>`. https://css-tricks.com/svg-use-with-external-reference-take-...