SVG Color Replacer
Local ProcessingSearch and replace fill, stroke, and stop-color attributes inside SVG markup directly in your browser.
How It Works & Processing Standards
Search and replace fill, stroke, and stop-color attributes inside SVG markup directly in your browser.
Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.
Current Limits
- Maximum input length: 100,000 characters
Use it to recolor icon SVGs in a brand color. Pick the color to replace and the new one to change every match, or turn on "replace all" to make every HEX color (#…) in the source the new one.
What You Can Do
- Replace one color
- #FF0000 and #ff0000 are treated as the same color.
- Replace all
- Every HEX color (#…) in the source becomes the new color.
How to Use SVG Color Replacer
- 1Paste the SVGPaste the SVG source.
- 2Pick colorsThe color to replace and the new color.
- 3CopyCopy the updated SVG.
Examples
Common Use Cases
- Recoloring free icons in your brand color
- Making icon colors for dark mode
Frequently Asked Questions (FAQ)
Does it change colors set by CSS classes?
It changes HEX values written in the SVG source, so colors inside <style> change if they match. Named colors such as red and colors in external CSS files do not.