SVG to Icon

What does SVG to Icon do?

Raw SVG markup exported from a design tool usually hardcodes colors — fill="#3B82F6" scattered across paths — which means the icon looks wrong the moment you drop it into a dark-mode UI, a themed button, or any context where it should inherit the surrounding text color instead of a fixed one. This tool parses your SVG, detects every distinct fill/stroke/stop-color value used (including shapes with no explicit fill, which render black by default), and lets you remap each one — most commonly to currentColor, the CSS keyword that makes an SVG inherit whatever color property is active where it's rendered.

Once colors are remapped, it exports the result three ways: a React TSX component (a function accepting a className prop, ready to drop into a component library), a cleaned standalone SVG file, or a Base64 data URI for inline use in CSS or HTML. All of this — parsing, color detection, remapping, and sanitization (stripping scripts, event handlers, and javascript: URLs) — runs by parsing the SVG markup as a string in the browser.

When to use it

Use it whenever you're building or maintaining an icon set for a design system and want every icon to inherit color instead of maintaining light/dark variants — the classic "why is this icon still blue in dark mode" bug. It's also useful for cleaning up SVGs from arbitrary sources (icon libraries, exported illustrations, AI-generated SVGs) before shipping them, since the sanitization pass removes anything that could execute script if the SVG were ever rendered untrusted.

You can paste SVG markup directly as text or upload an .svg file — either way the workflow is the same: detect colors, remap them, pick an export format. If your end goal is a bitmap image rather than a scalable icon component, this isn't the right tool — use Image Format Converter or Favicon Generator instead, which rasterize to PNG/WebP/JPEG.

Example

Paste an SVG checkmark icon exported from Figma with fill="#10B981" on its path. The tool detects #10B981 as the one color in use, and clicking "All → currentColor" remaps it. Set the component name to CheckIcon and export as TSX — you get export function CheckIcon({ className }: { className?: string }) { return (...) } with fill="currentColor" baked in, so it renders in whatever color the surrounding CSS sets, ready to paste straight into a components/icons folder.