How to convert hardcoded svg colors to tailwind css classes
- Step 1Open the tool and add your SVG — Go to the SVG to Tailwind tool. Drop a
.svgfile onto the dropzone or paste the raw<svg>…</svg>markup into the source textarea. Only one file at a time — this tool is not multi-file (use svg-sprite-builder for combining many). - Step 2Click Process SVG — There is no options panel for this tool on the website, so processing applies the default
currentmode immediately: a regex pass replacing every colouredfill/strokewithcurrentColor. Nothing is uploaded; the transform happens in the page. - Step 3Check the preview and source — The result panel renders the converted SVG and exposes a
View SVG sourcedisclosure. Confirm that your coloured paths now readfill="currentColor"and that the root<svg>carriesclass="fill-current". - Step 4Copy or download the converted SVG — Use
Copy to clipboardto grab the markup for inlining, orDownload SVGto save<name>-tailwind.svg. The output is plain SVG text — no extra wrapper or component is generated here. - Step 5Paste it inline and set a colour on the parent — Drop the SVG directly into your JSX/HTML (inline, not
<img src>) and wrap it:<span class="text-blue-500"><svg …/></span>. The icon now renders blue becausefill-currentreads the inheritedcolor. - Step 6Add a dark-mode and sizing pair — Extend the wrapper with
dark:text-white w-5 h-5. Colour follows light/dark automatically; width/height utilities size the icon if it has aviewBoxand no fixedwidth/height. No SVG change needed.
What each mode does to your colours
The website tool always runs current. The palette mode is only reachable through the public API / paired local runner — the web UI has no control to switch modes.
| Mode | How it is triggered | Every fill/stroke colour becomes | Root <svg> class | Inline style fill/stroke |
|---|---|---|---|---|
current (default) | The only mode in the website UI; also tailwindMode: "current" via API | currentColor (one shared colour, driven by parent text-*) | fill-current added | Rewritten to fill:currentColor / stroke:currentColor |
palette | API / runner only: tailwindMode: "palette" | The nearest Tailwind class via CIE Lab — e.g. fill-indigo-500 (a different class per distinct colour) | Not added (per-element classes carry the colour) | Left untouched — only fill=/stroke= attributes are remapped |
Which paint values are touched vs left alone
Behaviour is identical in the browser and the engine. Values are matched by regex, not by parsing the SVG DOM.
| Paint in source | current mode | palette mode |
|---|---|---|
fill="#1a1a2e" (any hex/rgb/named) | → fill="currentColor" | → attribute removed, fill-<nearest> class added |
stroke="#4361ee" | → stroke="currentColor" | → attribute removed, stroke-<nearest> class added |
fill="none" / stroke="none" | Preserved (skipped by the regex) | Preserved (unresolvable, skipped) |
fill="currentColor" (already) | Left as-is | Left as-is (currentColor is unresolvable) |
fill="url(#grad)" (gradient/pattern ref) | Left as-is | Left as-is (url paints are skipped) |
<stop stop-color="#fff"> | Untouched — stop-color is not fill/stroke | Untouched |
style="fill:#000;stroke:#fff" | → fill:currentColor;stroke:currentColor | Untouched (style is not remapped in palette) |
Cookbook
Real before/after fragments for the default current mode — the one the website runs.
Single-colour glyph → fill-current
The everyday case: one solid-colour icon path. The hex fill becomes currentColor and the root svg gains the fill-current class, so a parent text-* utility now drives the colour.
Before: <svg viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5z" fill="#1a1a2e"/> </svg> After (current mode): <svg class="fill-current" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5z" fill="currentColor"/> </svg> Use: <span class="text-blue-500"><svg .../></span> → blue icon
Outline icon keeps its transparent fill
Stroke-only (Lucide-style) icons set fill='none'. The tool skips 'none' and only rewrites the real stroke colour, so the outline stays an outline and follows the parent colour.
Before: <svg viewBox="0 0 24 24" fill="none" stroke="#334155"> <path d="M5 12h14"/> </svg> After (current mode): <svg class="fill-current" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path d="M5 12h14"/> </svg> Note: fill="none" preserved; stroke now follows text color.
Inline style colours are converted too
Some icons carry colour in a style attribute rather than a presentation attribute. The default mode rewrites those as well, so CSS-styled icons convert without manual cleanup.
Before: <rect width="24" height="24" style="fill:#ef4444;stroke:#000"/> After (current mode): <rect width="24" height="24" style="fill:currentColor;stroke:currentColor"/>
Two-colour icon flattens to one in current mode
Because current mode maps every colour to the same currentColor, a primary + accent icon loses the distinction — both follow the parent text. If you need the accent kept separate, use palette mode (API) or a per-colour tool instead.
Before: <svg viewBox="0 0 24 24"> <path d="..." fill="#1a1a2e"/> <!-- primary --> <circle cx="18" cy="6" r="3" fill="#4361ee"/> <!-- accent --> </svg> After (current mode): <svg class="fill-current" viewBox="0 0 24 24"> <path d="..." fill="currentColor"/> <circle cx="18" cy="6" r="3" fill="currentColor"/> </svg> → both shapes now render the SAME colour.
Keep a fixed brand colour with a sibling tool
currentColor cannot express an arbitrary hex Tailwind has no exact class for. To pin a specific brand colour instead of inheriting it, swap that hex with the hex-swapper before (or instead of) converting, or wire it to a CSS variable.
Goal: primary follows theme, brand accent stays #4361ee. 1) svg-hex-swapper: leave #4361ee, or map it to a chosen value 2) svg-to-tailwind (current): primary #1a1a2e → currentColor Result markup combines a themeable primary with a fixed accent. For an arbitrary hex in Tailwind itself, use fill-[#4361ee] as an arbitrary-value class on that element by hand.
Edge cases and what actually happens
There is no colour picker / mapping UI on the page
By designThe website tool has no options panel for svg-to-tailwind, so you cannot accept or override per-colour matches in the browser. It runs the deterministic current pass. The CIE Lab palette mode that assigns a different Tailwind class per colour is only available through the public API and the paired local runner.
`fill="none"` / `stroke="none"`
PreservedThe regex explicitly excludes none, so transparent fills and absent strokes survive untouched. This is what keeps outline icons rendering as outlines instead of collapsing into solid shapes.
Gradient and pattern fills (`url(#…)`)
PreservedA fill="url(#grad)" references a <linearGradient>/<pattern> in <defs>. The tool leaves url(...) paints alone — currentColor can only express one flat colour, so a gradient cannot be expressed as fill-current. The gradient renders as-is; theme it via the gradient stops instead.
Gradient stop colours stay hardcoded
PreservedStops use stop-color, not fill/stroke, so they are not matched and remain their original hex. The old claim that this tool themes gradient stops is inaccurate — it does not. To recolour stops, use svg-hex-swapper or svg-css-variable-injector.
Multi-colour icon collapses to one colour
ExpectedBecause every colour maps to the same currentColor, a two-tone icon becomes single-tone in current mode. That is correct behaviour for a monochrome icon set; if you need each colour preserved as a distinct class, use the palette mode via API/runner or keep the accent fixed with a sibling colour tool.
Colour written as a CSS variable already
Preservedfill="var(--brand)" is a value, not none, so the current-mode regex would rewrite it to currentColor, discarding the variable. If your icons are already variable-driven, this tool is the wrong step — keep them on svg-css-variable-injector instead.
Pasted content is not valid SVG
Invalid inputIf you paste text that does not parse as SVG XML, the tool reports Invalid SVG — could not parse the pasted content as valid SVG XML and does nothing. Paste the full <svg>…</svg> element, not a fragment or a data URI.
File larger than the plan's per-job cap
413 size limitThe per-job size cap is 5 MB on Free, 50 MB on Pro, 2 GB on Developer. An over-cap file is rejected with an upgrade message before processing. This tool itself requires the Pro plan to run; icon SVGs are tiny, so the cap is rarely a factor.
Root element already has a class
SupportedIf the <svg> already carries class="…", the tool merges fill-current into the existing list rather than overwriting it (and won't duplicate it if it is already present). Other attributes on the root are left in place.
Tailwind purges fill-current in production
Watch closelyIf fill-current (or a text-* you apply dynamically) does not appear literally in scanned source, Tailwind's content scanner can tree-shake it out. Make sure the class is present in a file Tailwind scans, or add it to safelist in your Tailwind config.
Frequently asked questions
What does fill-current actually do?
fill-current is a Tailwind utility that sets the SVG fill to currentColor. currentColor resolves to the element's inherited CSS color, so wrapping the icon in text-blue-500 makes the fill blue. This tool both rewrites your colours to currentColor and adds class="fill-current" to the root <svg>.
Can I choose which Tailwind colour each shape gets in the browser?
No. The website UI has no per-colour control — it runs the default current mode, which maps every colour to the single shared currentColor. Per-colour Tailwind classes come from the palette mode, which is only available through the public API and the paired local runner, not the web page.
What is palette mode and how do I use it?
Palette mode (tailwindMode: "palette") maps each distinct fill/stroke colour to the nearest Tailwind v3 default palette class by CIE Lab (ΔE76) distance, e.g. #4361ee → fill-indigo-600. It removes the colour attribute and adds the class so the class drives the colour. It is reachable via the API/runner only; the website always runs current.
Does it work for multi-colour icons?
In the default current mode every colour collapses to the same currentColor, so a two-tone icon becomes one colour. To keep colours distinct, use palette mode (API/runner) so each gets its own fill-<class>, or keep the accent fixed with svg-hex-swapper.
Does this handle dark mode?
Yes — that is the main payoff. Because fill-current inherits from CSS color, adding dark:text-white (or any dark:text-*) to a wrapper repaints the icon in dark mode with no SVG change.
Will it change my fill='none' outline icons into solid shapes?
No. The conversion explicitly skips none, so fill="none" and stroke="none" are preserved. A stroke-only outline icon keeps its transparent fill and only its stroke colour becomes currentColor.
What happens to gradients?
Gradient fills (fill="url(#grad)") and gradient stop-color values are left untouched — currentColor cannot express a gradient. To recolour gradient stops use svg-hex-swapper or wire them to variables with svg-css-variable-injector.
My colour isn't an exact Tailwind colour — what do I get?
In current mode the exact value doesn't matter — everything becomes currentColor. In palette mode (API) the tool always picks the single nearest Tailwind class by CIE Lab distance; it never leaves a resolvable colour as-is. If you need a non-palette brand colour in Tailwind, write it as an arbitrary value class like fill-[#4361ee] yourself.
Is my SVG uploaded anywhere?
No. The conversion runs in your browser on the pasted or dropped file. The result panel shows a 0 bytes uploaded badge. Even via the API, JAD never receives uploads — the transform executes on a local runner on your own machine.
Does it produce a React/Vue component?
No — it outputs plain themeable SVG. To get a component, run that SVG through svg-to-jsx or svg-to-vue-svelte, both of which already default color to currentColor.
What plan do I need?
svg-to-tailwind requires the Pro plan. The per-job file-size cap is 5 MB on Free, 50 MB on Pro, and 2 GB on Developer, but icon SVGs are far below any of these.
Why doesn't my icon respond to text-* after conversion?
Two usual causes: (1) you're embedding via <img src> or background-image, where currentColor can't be inherited — inline the SVG instead; or (2) Tailwind purged fill-current/text-* from the build. Make the classes literal in scanned source or add them to safelist.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.