Replace hardcoded fill and stroke colors in SVG with Tailwind's currentColor (fill-current) and text-* color classes. Makes icons theme-aware and Tailwind-ready.
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 icon with hardcoded hex or named colors
The tool maps fill/stroke colors to the closest Tailwind color class
Copy the Tailwind-ready SVG — colors now respond to parent text-* classes
0 bytes uploaded. SVG to Tailwind runs entirely in your browser using the DOM API and Canvas. Your SVGs never leave your device.
fill-current sets the SVG fill to currentColor, which inherits the CSS color property of the parent element. Add text-blue-500 to a wrapper and the icon turns blue automatically.
The tool maps colors to the 15 closest Tailwind palette entries using CIE Lab color distance. Custom colors that don't match closely remain as-is.
Yes. Since fill-current inherits from CSS color, you can use dark:text-white to make icons white in dark mode automatically.
Convert raw SVG markup to production-ready React JSX or TypeScript TSX components. Handles className, camelCase props, viewBox, and SVGProps typing automatically.
Open toolSwap 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 hex colors in SVG with CSS custom properties like var(--color-primary). Makes your SVGs dynamically themeable via CSS without modifying the SVG.
Open tool