SVG Color Tokens with CSS Custom Properties
CSS custom properties let SVG icons reference centrally defined color tokens, making theme changes a one-line update.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Referencing CSS Variables in SVG Fill Values
SVG fill and stroke attributes accept var(--token-name) just like any CSS color property does, so an icon can reference a design system's color tokens directly rather than hardcoding a hex value, meaning a rebrand or dark-mode switch only requires updating the token's definition once at the root level.
- fill and stroke accept var(--token) the same as any CSS color property
- Rebranding or theme changes require updating only the token definition
- Keeps icon colors consistent with the rest of a design system's palette
Building a Token-Based Icon Theming System
Defining a small set of semantic color tokens like --icon-primary, --icon-muted, and --icon-accent at the document root, then referencing those tokens throughout an icon library's SVG fills, creates a theming system where switching between light and dark mode, or between brand color schemes, is a matter of redefining a handful of variables rather than editing individual icon files.
- Semantic token names like --icon-primary keep intent clear in markup
- Light/dark mode switching redefines tokens rather than editing icons
- Scales cleanly to large icon libraries shared across many components
Frequently Asked Questions
Do CSS custom properties work inside externally referenced SVG files?
Only if the SVG is inlined in the HTML or referenced in a way that shares the same document context, such as an inline <svg> or a <use> reference to an inline <symbol> — an <img> tag pointing to an external SVG file cannot see the parent page's CSS variables.
Can I set a fallback value for an SVG color token?
Yes, var() supports a second fallback argument, e.g. var(--icon-primary, #333), which applies if the custom property isn't defined in the current scope.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG