Replace hardcoded hex colors in SVG with CSS custom properties like var(--color-primary). Makes your SVGs dynamically themeable via CSS without modifying the SVG.
Requires a Pro subscription. Free tier users see the tool but processing is gated.
Tool locked — preview only
Up to 50 MB per file · batch up to 20 files · API + MCP access
Up to 2 GB per file · unlimited batch · runner acceleration · priority MCP
Upload your SVG and map each unique color to a CSS variable name
The injector replaces all occurrences of each color with var(--your-variable)
Download the SVG and the matching CSS variable declarations
0 bytes uploaded. CSS Variable Injector runs entirely in your browser using the DOM API and Canvas. Your SVGs never leave your device.
When an SVG is inlined in HTML (not used as <img>), it inherits the document's CSS custom properties. Set --color-primary on :root and all var(--color-primary) fills update instantly.
No. CSS variables inside SVGs used as <img src> or background-image do not inherit from the document. Inline the SVG in HTML for theming to work.
Yes — the tool scans the SVG and lists all unique colors found. Click any color to assign a variable name, then generate the modified SVG.
Swap any hex, RGB, or named color across your entire SVG in one operation. Perfect for rebranding, theme switching, and design system color updates.
Open toolReplace hardcoded fill and stroke colors in SVG with Tailwind's currentColor (fill-current) and text-* color classes. Makes icons theme-aware and Tailwind-ready.
Open toolTransform colorful SVG icons and illustrations to a single fill color or grayscale. Essential for print production, accessibility testing, and design system unification.
Open tool