i🩵SVG
Fast, clean SVG utilities

SVG Recolor

Recolor Settings

Output preview
Upload an SVG to see the recolored output preview.

SVG Recolor Guide

This page edits the SVG as text in your browser. It extracts a palette, applies replacements, and outputs a cleaned SVG you can download. Nothing is uploaded to a server.

Upload an SVG or paste SVG markup. This tool extracts the actual palette (fill and stroke), lets you replace specific colors, recolor everything to one color, or convert icons to currentColor for CSS theming. Runs client-side.

What gets detected

The palette is built by parsing the SVG markup and counting colors found in common paint locations.

  • Presentation attributes: fill="" and stroke=""
  • Inline style attributes: style="fill: …; stroke: …"
  • Style tags (best effort): <style> rules that set fill or stroke

What is skipped (on purpose)

Some SVG paints are references or effects rather than literal colors. These don’t behave like solid fills, so the tool avoids rewriting them unless you build a dedicated feature for that.

  • Paint servers like url(#gradient) for gradients, patterns, masks
  • External CSS (classes that rely on styles outside the SVG)
  • Special cases like filters and complex effects that aren’t simple fill/stroke paints
If your SVG is mostly CSS-driven, currentColor mode is usually the cleanest path.

Modes

ReplaceMost common

Builds a mapping from From to To and only rewrites colors that match (after normalization). Great for multi-color SVGs and brand swaps.

Works on attributes, inline style, and optionally <style>.
GlobalOne color

Forces everything (fill/stroke depending on “Apply to”) to one color. Useful for turning a complex icon into a single-color glyph.

Respects “preserve none” and “preserve transparent” if enabled.
currentColorCSS theming

Sets targeted paints to currentColor so the icon inherits CSS color from its parent. Ideal for hover states, dark mode, and UI systems.

Optional: set root style="color: …".

Edit workflow

SVG Recolor Tool: practical workflow notes

Replace SVG fill and stroke colors quickly with live preview and copy-ready output. Use this page when that specific output is the fastest path, then jump to the related tools below if you need a different export, cleanup, or craft-file workflow.

Best for

  • recolor svg
  • Cleaning, checking, editing, or exporting existing SVG markup
  • Web, app, print, design-system, and handoff workflows
  • Fast local SVG adjustments before export

Settings to try

  • Use the visible controls for the exact SVG attribute or export behavior you need.
  • Preview the output before copying or downloading.
  • Run SVG cleaner or minifier when file size or editor markup gets in the way.

Useful limits

  • SVG utility tools edit SVG markup and do not trace raster images.
  • Complex filters, external references, or missing fonts can affect browser previews.
  • Use image-to-SVG tools when your source is PNG, JPG, JPEG, or WebP.

Related tools

SVG Background EditorAdd or remove an SVG background rectangle for solid color or transparent output.SVG Resize and Scale EditorResize and scale SVGs safely by updating viewBox, width, height, and sizing attributes.SVG Stroke Width EditorAdjust SVG line thickness by editing stroke widths across attributes, styles, or CSS.SVG Flip and Rotate EditorFlip horizontally or vertically, and rotate SVGs without rasterizing the original file.

Need help choosing?

Read the concise workflow, preset, settings, and troubleshooting docs without adding clutter to the converter.

How it worksPreset Guide

FAQ

Will this upload my SVG to a server?+

No. Recoloring runs in your browser. The SVG text is edited locally and you download the updated file.

Do I have to guess the colors?+

No. The tool extracts the SVG palette automatically and lists each detected color with a count. Click a swatch to create or update a replacement rule.

Why does part of my SVG not recolor?+

Some SVGs define colors in CSS (style tags) or inline style attributes. Enable those toggles under Replace mode. If it uses external CSS classes, currentColor mode is often the cleanest solution.

What is currentColor mode used for?+

It converts icons to inherit CSS color from the parent element. This is ideal for UI icons, hover states, and dark mode.

Can I paste SVG code instead of uploading a file?+

Yes. Paste SVG markup anywhere on the page, or open the paste box and click Apply.

All SVG tools

Browse every SVG converter, editor, inspector, optimizer, and craft-file utility available on iLoveSVG.

Image to SVG converters

Convert raster images, logos, drawings, sketches, scans, text, stickers, and outlines into scalable SVG files.

Image -> SVG
Convert an image into an SVG vector for scaling, logos, icons, and clean print output.
Convert
Open tool
PNG -> SVG
Convert PNG images to SVG vectors for scalable logos, icons, graphics, and print-ready artwork.
Convert
Open tool
JPG -> SVG
Convert JPG images into scalable SVG files for web graphics, posters, and print projects.
Convert
Open tool
JPEG -> SVG
Convert JPEG images to SVG with clean vector-style output for resizing without blur.
Convert
Open tool
WebP -> SVG
Convert WebP images to SVG for scalable assets and consistent rendering across sizes.
Convert
Open tool
Logo -> SVG
Turn a logo into a scalable SVG for brand kits, websites, printing, and sharp resizing.
Convert
Open tool
Icon -> SVG
Convert icons to SVG for crisp scaling, theming, UI use, and consistent rendering.
Convert
Open tool
Emoji -> SVG
Convert emoji-style images to SVG for scalable stickers, icons, overlays, and graphics.
Convert
Open tool
Text -> SVG
Convert text into SVG for logos, wordmarks, headings, and scalable typography graphics.
Convert
Open tool
Sticker -> SVG
Convert sticker images to SVG for clean cut lines, scaling, decals, and print-ready output.
Convert
Open tool
Line Art -> SVG
Convert line art into SVG for crisp outlines, coloring pages, decals, and cut-friendly paths.
Convert
Open tool
Drawing -> SVG
Convert a drawing into SVG so it stays sharp at any size for prints, merch, and design edits.
Convert
Open tool
Scan -> SVG
Convert scanned images to SVG for cleanup, scaling, document graphics, and printable art.
Convert
Open tool
Sketch -> SVG
Vectorize sketches into SVG for clean scaling, editing, and consistent line output.
Convert
Open tool
Image -> Outline
Generate an outline SVG from an image for clean line art, decals, and cut-ready shapes.
Convert
Open tool
Photo -> Outline
Create an outline-style SVG from a photo for posters, stickers, simplified art, and decals.
Convert
Open tool
B&W -> SVG
Convert black and white images to SVG with clear edges for stencils, decals, signs, and prints.
Convert
Open tool
GIF -> SVG
Convert static GIF artwork, old web graphics, transparent GIFs, and sticker-style art into SVG.
Convert
Open tool
AVIF -> SVG
Convert AVIF graphics into SVG for modern web artwork, logos, icons, and illustration cleanup.
Convert
Open tool
BMP -> SVG
Convert BMP files into SVG for legacy bitmap art, scans, line art, and old archive graphics.
Convert
Open tool
TIFF -> SVG
Convert TIFF scans and archival artwork into SVG for cleanup, line extraction, and print handoff.
Convert
Open tool
Transparent PNG -> SVG
Convert transparent PNG logos, stickers, and product art into SVG with background-aware tracing.
Convert
Open tool
Image -> Layered SVG
Create layered SVG output from image artwork for editable color regions and creator workflows.
Convert
Open tool
JPG -> Layered SVG
Convert JPG artwork into layered SVG output for separated colors and editable creator assets.
Convert
Open tool
Logo -> Layered SVG
Convert logo artwork into layered SVG output for separated colors, brand marks, and reusable graphics.
Convert
Open tool

Cricut, stickers, vinyl, Etsy, Silhouette, and laser cutting

Tools for craft workflows, cut files, layered SVG output, vinyl projects, stickers, Print Then Cut, Etsy listings, Silhouette projects, and laser cutting prep.

Cricut SVG Converter
Convert artwork into SVG files for Cricut Design Space, vinyl decals, stickers, labels, stencils, cards, and craft projects.
Craft
Open tool
Image -> Cricut SVG
Convert PNG, JPG, WebP, GIF, BMP, TIFF, AVIF, HEIC, HEIF, or SVG files into Cricut-friendly SVG output.
Craft
Open tool
PNG -> Cricut SVG
Convert PNG images into Cricut-friendly SVG files for cut files, decals, stickers, and crafts.
Craft
Open tool
JPG -> Cricut SVG
Convert JPG images into Cricut-friendly SVG files for stickers, decals, vinyl, labels, and craft projects.
Craft
Open tool
JPEG -> Cricut SVG
Convert JPEG images into Cricut-friendly SVG files for cut files, decals, stickers, and craft use.
Craft
Open tool
WebP -> Cricut SVG
Convert WebP images into Cricut-friendly SVG files for Design Space, vinyl, stickers, and crafts.
Craft
Open tool
Photo -> Cricut SVG
Convert photos into Cricut-friendly SVG output for simplified art, decals, stickers, and craft projects.
Craft
Open tool
B&W -> Cricut SVG
Convert black and white images into Cricut-friendly SVG files for stencils, decals, stickers, and signs.
Craft
Open tool
Line Art -> Cricut SVG
Convert line art into Cricut-friendly SVG outlines for decals, coloring pages, vinyl, and cut projects.
Craft
Open tool
Drawing -> Cricut SVG
Convert drawings into Cricut-friendly SVG files for craft projects, stickers, decals, and vinyl cuts.
Craft
Open tool
Sketch -> Cricut SVG
Convert sketches into Cricut-friendly SVG files for decals, labels, stickers, and cut-file workflows.
Craft
Open tool
Sticker -> Cricut SVG
Convert sticker artwork into Cricut-friendly SVG files for Print Then Cut, decals, labels, and sticker sheets.
Craft
Open tool
Logo -> Cricut SVG
Convert logo files into Cricut-friendly SVG cut files for decals, branding, signs, labels, and craft projects.
Craft
Open tool
Base64 -> Cricut SVG
Decode Base64 SVG data and prepare the SVG for Cricut Design Space, downloads, and craft workflows.
Craft
Open tool
Code -> Cricut SVG
Convert SVG code or markup into a downloadable Cricut-friendly SVG file for Design Space.
Craft
Open tool
Layered Cricut SVG
Create or prepare layered SVG files for Cricut projects, multicolor artwork, vinyl, stickers, and craft designs.
Craft
Open tool
Image -> Layered SVG
Convert PNG or JPG images into color-separated layered SVG files for Cricut Design Space.
Craft
Open tool
PNG -> Layered SVG
Create layered SVG output from PNG artwork for Cricut projects, vinyl, stickers, and multicolor designs.
Craft
Open tool
JPG -> Layered SVG
Convert JPG or JPEG images into color-separated layered SVG files for Cricut Design Space.
Craft
Open tool
Logo -> Layered SVG
Convert logos into layered SVG files for Cricut projects with editable color-separated layers.
Craft
Open tool
Print Then Cut SVG
Prepare PNG artwork for Cricut Print Then Cut workflows, stickers, labels, and printable designs.
Craft
Open tool
Vinyl Cricut SVG
Convert PNG artwork into SVG files for Cricut vinyl projects, decals, and cut-friendly designs.
Craft
Open tool
Sticker Cricut SVG
Turn PNG sticker artwork into SVG files for Cricut sticker projects, decals, labels, and prints.
Craft
Open tool
PNG -> Etsy SVG
Convert PNG designs into SVG files for Etsy digital downloads, craft bundles, decals, stickers, and printable product listings.
Craft
Open tool
PNG -> Silhouette SVG
Convert PNG artwork into SVG files for Silhouette Studio projects, decals, stickers, labels, and cut-file workflows.
Craft
Open tool
Laser Cut SVG
Convert PNG artwork into SVG files for laser cutting, engraving prep, outlines, and cut paths.
Craft
Open tool

Seller, Shopify, Etsy, and store asset workflows

Focused routes for shop graphics, listing previews, store logos, favicons, seller exports, and ecommerce asset cleanup.

PNG -> Shopify SVG
Prepare PNG store graphics, badges, and brand assets as scalable SVG files.
Seller
Open tool
Logo -> Shopify SVG
Convert store logos into SVG for Shopify themes, brand assets, and favicon prep.
Seller
Open tool
Shopify SVG -> PNG
Export Shopify-ready PNG copies from SVG logos, badges, icons, and theme graphics.
Seller
Open tool
Shopify Favicon
Generate favicon assets from Shopify store SVG logos and brand marks.
Seller
Open tool
Shopify SVG Resize
Resize Shopify SVG logos, theme graphics, and badges while keeping the file editable.
Seller
Open tool
Shopify Logo Favicon
Generate Shopify favicon assets from a logo image or SVG.
Seller
Open tool
Etsy SVG -> PNG
Export Etsy listing previews and digital product visuals from SVG artwork.
Seller
Open tool
Etsy SVG -> JPG
Export flattened JPG previews from SVG artwork for Etsy product images and mockups.
Seller
Open tool
Logo -> Etsy SVG
Convert Etsy shop logos and brand marks into scalable SVG seller assets.
Seller
Open tool
Sticker -> Etsy SVG
Convert sticker artwork into SVG for Etsy digital downloads, decals, and product art.
Seller
Open tool
Image -> Etsy SVG
Convert images into SVG for Etsy listing assets, digital downloads, and mockup prep.
Seller
Open tool
JPG -> Etsy SVG
Convert JPG artwork into SVG for Etsy shop graphics, listings, and seller files.
Seller
Open tool
Etsy SVG Resize
Resize SVG assets for Etsy previews, product graphics, and digital download files.
Seller
Open tool

Glowforge, Silhouette, and laser prep

Convert, clean, and resize SVG artwork for laser, vinyl, sticker, decal, and cutting software workflows.

PNG -> Glowforge SVG
Convert PNG artwork into SVG for Glowforge-style laser prep, sizing, and testing.
Cut
Open tool
JPG -> Glowforge SVG
Convert JPG artwork into SVG for Glowforge-style outline cleanup and engraving prep.
Cut
Open tool
Logo -> Glowforge SVG
Convert logo artwork into SVG for Glowforge-style engraving, cutting prep, and sizing checks.
Cut
Open tool
Glowforge SVG Clean
Clean SVG markup before Glowforge-style laser import and path review.
Cut
Open tool
Glowforge SVG Resize
Resize SVG artwork for Glowforge-style laser prep and predictable dimensions.
Cut
Open tool
Image -> Glowforge SVG
Convert images into SVG for Glowforge-style laser prep, outlines, and cleanup.
Cut
Open tool
JPG -> Silhouette SVG
Convert JPG artwork into SVG for Silhouette-style cutting, vinyl, and sticker prep.
Cut
Open tool
Image -> Silhouette SVG
Convert images into SVG for Silhouette-style vinyl, decals, labels, and stickers.
Cut
Open tool
Logo -> Silhouette SVG
Convert logo artwork into SVG for Silhouette-style vinyl, decals, and labels.
Cut
Open tool
Sticker -> Silhouette SVG
Convert sticker artwork into SVG for Silhouette-style decals, labels, and vinyl workflows.
Cut
Open tool
Silhouette SVG Clean
Clean SVG markup before Silhouette-style import, sizing checks, and path review.
Cut
Open tool
Silhouette SVG Resize
Resize SVG artwork for Silhouette-style vinyl, stickers, decals, and cut files.
Cut
Open tool

Canva and Figma handoff

Prepare SVG and PNG files for design app handoff, predictable sizing, cleanup, and flattened previews.

PNG -> Canva SVG
Convert PNG artwork into SVG for Canva design reuse, scalable logos, and simple graphics.
Design
Open tool
JPG -> Canva SVG
Convert JPG graphics into SVG for Canva design reuse, logos, and scalable layout assets.
Design
Open tool
Canva SVG -> PNG
Export SVG artwork to PNG for Canva uploads, transparent graphics, and previews.
Design
Open tool
Logo -> Canva SVG
Convert logo images into SVG for Canva brand graphics and reusable design assets.
Design
Open tool
Canva SVG Resize
Resize SVG logos and design assets before Canva handoff.
Design
Open tool
Figma SVG Clean
Clean SVG markup for Figma handoff while preserving practical SVG structure.
Design
Open tool
Figma SVG Resize
Resize SVG assets for Figma handoff, viewBox checks, and predictable exports.
Design
Open tool
Figma SVG -> PNG
Export SVG assets to PNG for Figma previews, thumbnails, and flattened sharing files.
Design
Open tool
PNG -> Figma SVG
Convert PNG assets into SVG for Figma handoff, icon prep, and cleanup workflows.
Design
Open tool

Developer SVG utilities

Convert SVG markup into JSX, embed snippets, Base64 output, and cleaner code-oriented assets without changing converter behavior.

SVG -> JSX
Convert SVG markup into React-friendly JSX with common attribute conversion and optional component wrapping.
Dev
Open tool

SVG to image and PDF converters

Export SVG files to PNG, JPG, WebP, PDF, and favicon formats for web, print, sharing, and app icons.

SVG -> PNG
Convert SVG to PNG with clean edges, transparent background support, and fast export.
Export
Open tool
SVG -> JPG
Export SVG as JPG or JPEG for sharing, email, previews, and standard image workflows.
Export
Open tool
SVG -> WebP
Convert SVG to WebP for smaller files, modern websites, and efficient image delivery.
Export
Open tool
SVG -> PDF
Convert SVG to PDF for printing, sharing, design handoff, and document workflows.
Export
Open tool
Favicon Generator
Generate favicon.ico and common icon sizes from an SVG for browsers and app shortcuts.
Export
Open tool
SVG -> ICO
Create favicon.ico output from SVG logos and icons with the existing favicon generator.
Export
Open tool
Image -> Favicon
Generate favicon ICO and PNG icon assets from SVG, PNG, JPG, or WebP images.
Export
Open tool
PNG -> Favicon
Turn PNG logos and app icons into favicon ICO and supporting icon sizes.
Export
Open tool
JPG -> Favicon
Create favicon assets from JPG or JPEG logo images with square padding and background controls.
Export
Open tool
Logo -> Favicon
Generate favicon ICO and PNG icon assets from logo images or SVG brand marks.
Export
Open tool
PNG -> ICO
Convert PNG logo or icon files into favicon.ico output and supporting icon sizes.
Export
Open tool

SVG viewers, inspectors, and embed tools

Preview SVGs, inspect dimensions and file size, generate embed code, compare inline SVG vs img, and check accessibility.

Preview Viewer
Preview SVGs instantly in the browser to verify rendering, layout, and visible output.
Inspect
Open tool
Embed Code
Generate embed snippets for inline SVG, img tags, CSS backgrounds, and HTML usage.
Inspect
Open tool
Inline vs IMG
Compare inline SVG vs img for styling, caching, accessibility, and performance tradeoffs.
Inspect
Open tool
Dimensions
Inspect width, height, viewBox, aspect ratio, and computed pixel size for an SVG.
Inspect
Open tool
File Size
Check SVG file size and see what changes affect KB, bytes, and optimization potential.
Inspect
Open tool
A11y + Contrast
Check WCAG contrast, preview color blindness modes, and test higher-contrast options.
Inspect
Open tool

Follow i🩵SVG On Social Media