Using CSS vars to style SVG symbols

Styling SVG symbols that are defined using and included using .

SVG symbol sprites

In a web frontend project I'm working on, we need to show a lot of icons in different configurations on a drawing. The symbols are SVGs exported from Figma and they have different layers that can be styled and enabled depending on the symbol's status. E.g., we want to set the bg layer to green for showing the "success" state.

The structure we have looks like this: We have a symbols.svg which is basically just a list of definitions:

To use the symbols, we inline this SVG into our HTML (hidden, so it doesn't render on its own) and then reference individual symbols by ID:

You can also keep the sprite as an external file and reference it with , but inlining avoids CORS issues and is what most bundlers and frameworks do by default.

It's a shadow root

Now, naively I thought that styling the symbols would be as simple as writing a little CSS:

This does not work, however. When the symbols get injected, the DOM structure becomes

and our CSS selector can't go past that #shadow-root. This is the dev tools indicator for a ShadowRoot, which is (simplified) its own rendering context. This is the system used for implementing Web Components as well.

Styling inner symbols

What can get through to the element in this ShadowRoot then? As it turns out, CSS variables! This means we can set style="--bg-fill: green" on our .symbol-wrap and in our symbols.svg we can use it.

The one missing piece to make this convenient is to, in the symbols.svg, add a