v144 · svg · demo
Dynamic Theme
An icon set driven entirely by CSS custom properties cascading into inline SVG. Chrome 144 implements SVG2 cascading properly — CSS custom properties now flow through the shadow tree of <use> and directly into fill / stroke presentation attributes. Switch themes instantly, or click any icon to give it a per-icon accent override that demonstrates cascade specificity.
SVG2 CSS cascade: checking…
Choose a theme
Click any icon to toggle a per-icon accent colour override (cascade specificity demo).
Active CSS variables
Generated <style> block
the API
<!-- Icons defined once with fill/stroke using CSS custom properties -->
<svg class="icon">
<path d="…" fill="var(--icon-fill)" stroke="var(--icon-stroke)"/>
</svg>
/* Inject a <style> block to theme the whole icon set */
#iconContainer {
--icon-fill: var(--accent-blue); /* flows into every SVG child */
--icon-stroke: var(--text-black);
--icon-bg: var(--bg-stone);
}
/* Per-icon override via cascade specificity */
.icon-card.accent-override svg path {
fill: var(--icon-accent); /* beats the parent rule */
}