How to Use SVG with Design Tokens
Connect SVG fill and stroke colors to your design token system for consistent, themeable icon styling.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Mapping SVG Colors to Tokens
Replace hardcoded fill and stroke colors in your SVG markup with CSS custom properties matching your design token names, so icons automatically follow your token system's color values.
- Replace hardcoded hex fills with var(--color-token-name) references
- Icons automatically update when token values change globally
- Keeps icon colors consistent with the rest of your design system
Supporting Theme Switching
Since token-driven SVG colors reference CSS custom properties, switching themes (light/dark mode) by updating root-level token values automatically recolors all icons without touching individual SVG files.
- Dark/light mode switches automatically update icon colors via tokens
- No need to maintain separate icon files per theme variant
- Token changes propagate instantly across every icon using that token
Frequently Asked Questions
Do I need separate SVG files for dark and light mode?
No — if your SVG fills reference CSS custom properties tied to design tokens, a single icon file automatically recolors when the token values change per theme.
Can token-driven colors work in exported standalone SVG files?
CSS custom properties require the surrounding page's stylesheet, so standalone exported SVGs need hardcoded colors baked in at export time for use outside your app.
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