I think using a single SVG document that contains multiple icons identified by ids which you can reference from HTML is the idiomatic way of solving your proble

I think using a single SVG document that contains multiple icons identified by ids which you can reference from HTML is the idiomatic way of solving your problem. It guarantees that if external resources are not permitted to load, at least it presents a human readable title instead of a random letter. I can't find a link to the reference CSS Tricks article that presented the technique, but you can see it in action on this website: https://brutalinks.tech https://brutalinks.tech (There's an icon document: which is referred in the HTML when the icons are loaded: <svg><use xlink:href="https://brutalinks.tech/icons.svg#icon-home https://brutalinks.tech/icons.svg#icon-home "><title>home</title></use></svg>)