How to Theme SVG with CSS Variables
Control SVG colors and sizing with CSS custom properties for a flexible icon system.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Setting Up Variable-Driven Icons
Replace hardcoded fill/stroke/width values in your SVG with var(--icon-fill), var(--icon-size), etc., defined at a sensible default and overridden per component or theme scope.
- Replace hardcoded values with CSS variables
- Set sensible defaults at the SVG or :root level
- Override per component, page, or theme scope
Practical Benefits
This approach lets a single SVG icon component adapt size and color contextually — smaller and muted in a list, larger and brand-colored in a hero — without duplicating markup.
- One icon component adapts across contexts
- No markup duplication for size/color variants
- Easier design-system consistency at scale
Frequently Asked Questions
Can CSS variables control SVG stroke-width as well as color?
Yes — any presentation attribute that accepts a CSS value, including stroke-width set via CSS, can reference a custom property.
Where should I define default icon variable values?
Define sane defaults at :root or on a shared icon wrapper class, then override only where a specific context needs a different value.
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