How to Connect SVG Icons to Design Tokens
Tie SVG icon styling to your design system's color and size token scale.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Mapping Icons to Tokens
Instead of icon-specific colors, reference your design system's existing token scale (e.g. var(--color-neutral-700)) inside icon CSS, keeping icons visually consistent with every other UI element.
- Reuse existing design token variables in icon CSS
- Avoid icon-specific one-off color values
- Icons stay in sync with system-wide theme updates
Size Tokens for Icons
Define an icon size scale (sm/md/lg) mapped to your spacing tokens, so icon dimensions stay proportional and consistent with the rest of your component library.
- Map icon sizes to your existing spacing scale
- Keep icon proportions consistent across components
- Document the scale alongside your design system
Frequently Asked Questions
Should icons use their own color tokens or the system's?
Reuse your system's existing color tokens where possible so icons automatically update with global theme changes, rather than maintaining separate icon-only tokens.
How many icon size tokens are typical?
Most systems define 3-5 sizes (e.g. xs, sm, md, lg, xl) mapped to the existing spacing scale for consistency.
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