{
  "path": "/css-in-svg-symbols.html",
  "site": "at://did:plc:x67qh7v3fd7znbdhauc45ng3/site.standard.publication/3mjcd2t6afe25",
  "$type": "site.standard.document",
  "title": "Using CSS vars to style SVG symbols",
  "updatedAt": "2026-04-14T00:00:00.000Z",
  "bskyPostRef": {
    "cid": "bafyreibxubnb5wuqq5umrkfzshtglbau5jnrehnlfsxeoka236vmj47ugm",
    "uri": "at://did:plc:x67qh7v3fd7znbdhauc45ng3/app.bsky.feed.post/3mjhv3hy2ji2b"
  },
  "publishedAt": "2026-04-14T00:00:00.000Z",
  "textContent": "Styling SVG symbols that are defined using <symbol id=\"x\">\nand included using <use href=\"#x\">.\n\nSVG symbol sprites\n\nIn a web frontend project I'm working on,\nwe need to show a lot of icons in different configurations on a drawing.\nThe symbols are SVGs exported from Figma\nand they have different layers\nthat can be styled and enabled depending on the symbol's status.\nE.g., we want to set the bg layer to green for showing the \"success\" state.\n\nThe structure we have looks like this:\nWe have a symbols.svg which is basically just a list of definitions:\n\nTo use the symbols,\nwe inline this SVG into our HTML (hidden, so it doesn't render on its own)\nand then reference individual symbols by ID:\n\nYou can also keep the sprite as an external file\nand reference it with <use href=\"symbols.svg#symbol-42\" />,\nbut inlining avoids CORS issues\nand is what most bundlers and frameworks do by default.\n\nIt's a shadow root\n\nNow, naively I thought that\nstyling the symbols would be as simple as writing a little CSS:\n\nThis does not work, however.\nWhen the symbols get injected,\nthe DOM structure becomes\n\nand our CSS selector can't go past that #shadow-root. \nThis is the dev tools indicator for a [ShadowRoot],\nwhich is (simplified) its own rendering context.\nThis is the system used for implementing [Web Components] as well.\n\n[ShadowRoot]: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot \"ShadowRoot on MDN web docs\"\n[Web Components]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components \"Web Components on MDN web docs\"\n\nStyling inner symbols\n\nWhat can get through to the element in this ShadowRoot then?\nAs it turns out, CSS variables!\nThis means we can set style=\"--bg-fill: green\" on our .symbol-wrap\nand in our symbols.svg we can use it.\n\nThe one missing piece to make this convenient is to,\nin the symbols.svg,\nadd a <style> that will pick up the variable\nand set the properties for our classes:\n\nThe currentColor fallback means symbols render sensibly\neven when no variable is set.\nThey just inherit the text color of their container.\n\nCSS custom properties are the one thing\nthat crosses the <use> shadow boundary,\nso this pattern scales to as many layers and states as you need.",
  "canonicalUrl": "https://deterministic.space/css-in-svg-symbols.html"
}