FreeProTool

SVG guide

How to Make a Black SVG White

A black SVG usually becomes white by changing the paint values that draw its shapes—not by adding a white box behind it. The right method depends on whether the artwork is inline in HTML, saved as a file, or made from more than one color.

Change both fill and stroke when necessary

Fill paints the inside of a shape; stroke paints its outline. An icon can use either or both. Search the markup for fill and stroke attributes, inline style declarations, and inherited color rules before deciding what to replace.

Original and edited SVG
<svg viewBox="0 0 24 24" aria-hidden="true">
  <path fill="#000000" stroke="#000000" d="M4 12h16"/>
</svg>

<!-- White version -->
<svg viewBox="0 0 24 24" aria-hidden="true">
  <path fill="#ffffff" stroke="#ffffff" d="M4 12h16"/>
</svg>

Use currentColor for inline website icons

If the SVG markup is directly in the HTML, setting fill or stroke to currentColor lets normal CSS choose the icon color. A white parent color then produces a white icon without maintaining a separate asset.

  • This works for inline SVG, not usually for an SVG loaded through an img element.
  • Keep fill="none" on deliberately hollow shapes.
  • Check strokes separately; changing only fill will not recolor an outline icon.

Do not confuse recoloring with inversion

Replacing black with white is a targeted recolor. Inverting every color maps each RGB channel to its opposite, so red becomes cyan and blue becomes yellow. On a multicolor logo, that is a very different result.

When an automated inverter helps

For a downloadable SVG that uses direct black fill or stroke values, choose a strict black-and-white mode and leave the relevant fill and stroke controls enabled. Preview the result before download, especially when the file also contains gradients or inline effects.

Apply this to your file

When you are ready to work on the asset, use FreeProTool to turn a black SVG white.

Related SVG guides

How to Invert SVG Fill and Stroke Colors

Invert SVG fill and stroke colors separately, understand inherited paint, and handle gradients and inline styles accurately.

How to Invert an SVG for Dark Mode

Prepare an SVG for a dark background by choosing between targeted recoloring, full inversion, and CSS, without losing transparency.