Tinker Tools

Icon Color Changer Instantly

Change the color of your SVG or PNG icons in seconds. All processing is done locally in your browser—your files never leave your device.

Preview

Drop your icon here or click to browse

Supports SVG and PNG files

How it works

1. Upload Icon

Drag and drop or click to upload an SVG or PNG icon file. Your file is processed locally and never leaves your device.

100% Private

2. Pick a Color

Use the color picker, enter a hex code, or click a preset color. SVG fill/stroke attributes and PNG pixel colors will be changed to your chosen color.

Precise Control

3. Download Result

Compare the original and recolored icons side by side, then download the result. SVG files stay as SVG; PNG files are re-encoded as PNG.

Before & After

What Is Icon Coloring and Why Does It Matter?

Icon coloring is the process of changing the fill, stroke, or overall color of an icon — typically an SVG — to match your design system, brand palette, or accessibility requirements. SVG icons are the standard for modern web and app development because they scale to any size without losing sharpness and their colors can be manipulated with CSS. A single SVG icon file can render in red on an error banner, green on a success message, and gray in a disabled state — all without duplicating the asset. This flexibility depends on how the SVG is authored. Icons using hardcoded hex values like fill="#FF0000" resist CSS overrides. Icons using currentColor as their fill or stroke value inherit the text color of their parent element automatically, making them far more adaptable in component-based design systems.

The distinction between fill and stroke is fundamental. Fill controls the interior color of a shape — the solid area inside a path. Stroke controls the outline — the border that traces the path. Many icon libraries mix both. A shopping cart icon might use fill for the basket body and stroke for the wheel outlines. If you change only the fill color through CSS, the wheels stay their original color and the icon looks broken. Understanding the SVG source structure — which elements use fill, which use stroke, and whether any use inline style attributes — is the first step to reliable color manipulation. The best icon libraries set fill="none" and use stroke="currentColor" consistently, or vice versa, so a single CSS color property controls the entire icon.

Accessibility adds another layer of complexity. WCAG 2.1 Success Criterion 1.4.11 requires non-text UI components — including icons — to have a contrast ratio of at least 3:1 against adjacent colors. An icon sitting on a white background needs a fill color no lighter than #949494 to meet that threshold. Icons that convey meaning — a warning triangle, a checkmark, a trash can — must also not rely on color alone to communicate their purpose, per WCAG 1.4.1. Adding a visible text label or an aria-label to the SVG element ensures that color-blind users and screen reader users both understand what the icon represents. This tool helps you pick icon colors that meet contrast requirements and previews the result against your actual background colors.

Key Features and Benefits

  • SVG color editor — Upload any SVG icon and change its fill and stroke colors independently. The editor parses the SVG markup and identifies every path, circle, rect, polygon, and line element. You can assign colors globally — one color for all fills, one for all strokes — or target individual elements for multi-color icons. The output SVG uses inline attributes by default, but you can switch to an embedded style block or external CSS class references depending on your integration approach.
  • currentColor conversion — Convert hardcoded color values in any SVG to the currentColor keyword with one click. The tool replaces fill="#333333" with fill="currentColor" and stroke="#333333" with stroke="currentColor" across all elements. This makes the icon inherit its color from the CSS color property of the parent element — the standard pattern used by icon component libraries like Heroicons, Lucide, and Phosphor. You can also selectively convert only fills or only strokes if the icon requires a fixed color on one property.
  • Contrast ratio checker — Pick your icon color and background color, and the tool calculates the contrast ratio using the WCAG 2.1 relative luminance formula defined in the W3C's contrast ratio specification. It reports the exact ratio — for example, 4.52:1 — and tells you whether it passes the 3:1 minimum for non-text elements under Success Criterion 1.4.11. If the ratio falls short, the tool suggests the nearest color that meets the threshold while staying as close as possible to your original choice in the CIELAB perceptual color space.
  • Color-blind simulation — Preview how your icon colors appear to users with protanopia, deuteranopia, tritanopia, and achromatopsia. The simulation applies clinically validated color transformation matrices — based on the Brettel, Vienot, and Mollon 1997 model — to your icon and background combination. This reveals whether your warning icon's red fill becomes indistinguishable from your success icon's green fill under the most common form of color vision deficiency, which affects roughly 8% of men and 0.5% of women globally.
  • CSS filter generator — For raster icons — PNG or JPEG images that cannot be edited as SVG — the tool generates a CSS filter chain that approximates your target color. The algorithm, originally described by Barrett Sonntag, uses a brute-force search over hue-rotate, saturate, brightness, and invert filter values to find a combination that transforms a black source icon to any target hex color with a delta-E error below 1.0 in most cases. You get a ready-to-paste CSS filter declaration like filter: invert(27%) sepia(85%) saturate(4256%) hue-rotate(218deg) brightness(97%) contrast(108%).
  • Design system palette integration — Import your design system's color tokens — as CSS custom properties, JSON, or a Tailwind config snippet — and the tool maps your icons to those tokens. Instead of picking arbitrary hex values, you assign semantic names like --color-icon-primary, --color-icon-danger, or --color-icon-disabled. The output SVG references these tokens, ensuring your icons stay synchronized with your design system as the palette evolves. Change --color-icon-primary from blue to purple in your token file, and every icon using that token updates automatically.

How to Color and Optimize SVG Icons

  1. 1

    Upload or paste your SVG

    Drag an SVG file onto the editor or paste the raw SVG markup into the code panel. The tool parses the XML structure and renders a preview at multiple sizes — 16px, 24px, 32px, and 48px — so you can see how color changes look at actual UI scale rather than an oversized preview that hides subtlety. If the SVG contains embedded raster images or external references, the tool flags them as elements that cannot be recolored through SVG attributes alone.

  2. 2

    Inspect the current color structure

    The element inspector panel lists every shape in the SVG with its current fill and stroke values. Elements using hardcoded hex values like #1A1A1A are shown in orange to indicate they will not respond to CSS color overrides. Elements using currentColor or none are shown in green. This gives you an immediate picture of how flexible the icon is in its current form and which elements need conversion before the icon can integrate cleanly into a component system.

  3. 3

    Apply your target colors

    Use the global color picker to set a single fill color for all filled elements and a single stroke color for all stroked elements. For multi-color icons, switch to element-level editing and assign distinct colors to individual paths. Enter colors as hex, RGB, HSL, or paste a CSS custom property reference. The preview updates in real time across all four size variants, and the contrast ratio against your chosen background recalculates with every change.

  4. 4

    Convert to currentColor if needed

    Click the currentColor conversion button to replace all hardcoded color values with the currentColor keyword. This is the recommended approach for single-color icons in web applications because it lets the icon inherit color from CSS. After conversion, set a text color on the parent element — like color: var(--color-icon-primary) — and the icon adopts it automatically. Test the conversion by toggling between light and dark background modes in the preview panel to confirm the icon remains visible in both contexts.

  5. 5

    Validate accessibility and export

    Run the contrast checker against your target background color. Verify the ratio meets the 3:1 WCAG 1.4.11 minimum. Enable the color-blind simulation to check that your icon remains distinguishable from adjacent icons under all four major color vision deficiency types. Once everything passes, export the SVG as a file, as inline markup, or as a React/Vue component snippet. The export includes aria-hidden="true" by default — the correct attribute for decorative icons — with an option to add role="img" and an aria-label for icons that convey independent meaning.

Expert Tips for Icon Color Management

Build your icon library around a single color strategy from day one. The two dominant approaches are fill-based and stroke-based. Fill-based icons — where shapes are solid and fill="currentColor" controls the color — work well for dense, small icons at 16px and below because the solid mass remains visible even at tiny sizes. Stroke-based icons — where paths are open and stroke="currentColor" controls the color — produce a lighter, more elegant look but can become too thin to see at small sizes if the stroke-width is below 1.5px. Mixing both approaches in the same icon set creates maintenance headaches. Choose one, document it in your design system, and enforce it in code review. Heroicons uses stroke-based for its outline set and fill-based for its solid set — a clean separation that avoids ambiguity.

The CSS filter approach for recoloring raster images works but has real limitations. The generated filter chain — typically five to seven function calls — is an approximation that varies across browsers because filter rendering is not perfectly standardized in the CSS Filter Effects Module Level 1 specification. A filter that produces a perfect match in Chrome may shift by 2-3 delta-E units in Firefox or Safari. For icons that must hit an exact brand color, SVG is the only reliable path. Reserve CSS filters for cases where you have legacy PNG assets that cannot be converted to SVG in the short term and the color accuracy tolerance is relaxed — hover state tints, decorative badges, or non-brand UI elements.

Accessibility testing for icon color goes beyond contrast ratios. Screen readers treat SVG elements differently depending on their ARIA attributes. An SVG with aria-hidden="true" is completely invisible to assistive technology — correct for decorative icons that sit next to a text label. An SVG with role="img" and aria-label="Delete" is announced as an image with the label — correct for standalone icons that serve as the only clickable element without adjacent text. If you set neither attribute, screen reader behavior is inconsistent across platforms. VoiceOver on macOS may read the SVG's title element. NVDA on Windows may read nothing. JAWS may read the filename. Define explicit ARIA attributes for every icon in your system and test with at least two screen readers to catch platform-specific quirks.

When building dark mode support, do not simply invert your icon colors. A #333333 icon on a white background needs a specific dark mode counterpart — typically #E0E0E0 or lighter on a #1A1A1A background — to maintain the same perceived contrast. If your icons use currentColor, the switch happens automatically when you change the parent element's color property in your dark mode stylesheet. But multi-color icons with hardcoded values need explicit dark mode overrides. Use CSS custom properties for every color in the SVG — fill: var(--icon-fill-primary) — and redefine those properties inside a prefers-color-scheme: dark media query or a .dark class scope. This pattern scales to any number of icons and any number of color schemes without touching the SVG files themselves.

Related Tools

Color Converter

Convert between hex, RGB, HSL, and other formats when specifying icon colors

Color Contrast Checker

Verify your icon-to-background contrast ratio meets WCAG 1.4.11 requirements

Icon Format Converter

Convert between SVG, PNG, ICO, and other icon formats while preserving color fidelity

Icon coloring is one piece of a larger workflow that connects color science, accessibility standards, and design system architecture. The color converter lets you translate between hex, RGB, HSL, and OKLCH — critical when your design tokens use one format and your SVG authoring tool exports another. The color contrast checker validates that your chosen icon color meets the 3:1 non-text contrast ratio mandated by WCAG 1.4.11 before you ship. The icon format converter handles the cases where you need the same icon in SVG for the web, PNG for an email template, and ICO for a favicon — each export preserving the exact color you selected. These tools work together to ensure your icons are visually consistent, technically correct, and accessible to every user across every context.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats with a live color preview.