Change SVG color with CSS: currentColor, fill and stroke

Choose the method from how the SVG is embedded

• Inline SVG in HTML: use page CSS and currentColor for icons that follow text, hover or theme colors.
• An SVG file in an img: edit the file's own paint values for a fixed-color export, or switch to inline markup when the page must control individual shapes.
• A decorative single-color silhouette: a CSS mask can reveal a colored background without editing internal paths.
• A multicolor illustration: target the specific shapes or gradient stops you intend to change. A blanket fill rule can destroy its palette.

Start by inspecting the rendered HTML. A framework import might produce an image URL or an inline component, and those outputs have different styling boundaries. The MDN guide to SVG as an image describes image embedding contexts and their restrictions.

Recolor a standalone SVG with fill and stroke

This complete file draws a filled blue circle and a white checkmark. Paste the SVG into SVG Vector Lab, then change only the circle's fill to #0f766e. To recolor the checkmark, change its stroke instead. Keep fill="none" on the checkmark so it remains line artwork.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128">
  <title>Blue circle with a white checkmark</title>
  <circle cx="32" cy="32" r="28" fill="#2f6fed" />
  <path d="M18 32 L28 42 L46 22" fill="none"
        stroke="#ffffff" stroke-width="6"
        stroke-linecap="round" stroke-linejoin="round" />
</svg>

Fill paints a shape's interior; stroke paints its outline. Setting color alone does not replace either paint. The SVG painting specification defines these separate roles. For outline thickness, joins and caps, continue with the SVG stroke guide.

Use currentColor for an icon that follows text

currentColor takes its value from the element's CSS color. Because color is inherited, an inline icon can follow its surrounding label without repeating a hex value. The MDN SVG color reference explains this indirect relationship to fill and stroke.

This HTML example uses a stroked icon and a visible link label. Put the CSS in your page stylesheet and the link in its HTML:

.download-link { color: #1d4ed8; }
.download-link:hover,
.download-link:focus-visible { color: #0f766e; }

<a class="download-link" href="drawing.svg" download>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
       width="24" height="24" aria-hidden="true" focusable="false"
       fill="none" stroke="currentColor" stroke-width="2">
    <path d="M12 3 V15 M7 10 L12 15 L17 10 M4 17 V21 H20 V17" />
  </svg>
  Download drawing
</a>

Replace the sample download URL with your real file. The icon is decorative here because the visible text already names the action. For an icon with independent meaning, choose an appropriate text alternative using the accessible SVG guide.

Use fill="currentColor" for a filled silhouette. Do not add it indiscriminately to line icons that need fill="none". Keep intentional accent colors explicit when only part of a multicolor icon should follow the text.

Why color on an img does not change the SVG

<!-- This does not turn the SVG file's paths red. -->
<img src="check.svg" alt="Complete" style="color: red">

The image element belongs to the page, but the SVG file is a separate image resource. A page selector such as img path cannot select paths inside that resource. A currentColor value inside the file resolves in the SVG's own context, not from the image element's color.

For a fixed red asset, edit the SVG's own fill or stroke. For a themeable icon, inline markup gives the page access to its shapes. Test the exact embedding method before concluding that the editor preview proves the website integration works. The responsive SVG guide covers sizing after you choose the embedding method.

Find the declaration that actually controls the paint

If changing a root fill has no effect, inspect the shape itself. A path with its own fill does not need to inherit the root's fill. A matching CSS fill declaration can also override a presentation attribute. See the MDN CSS fill reference for the property and its relationship to the SVG attribute.

1. Select the visible path in browser developer tools and inspect computed fill, stroke and color.
2. Look for paint on the path, ancestor groups, inline style attributes and stylesheet rules.
3. Change one winning declaration, then verify whether the intended region changes.
4. Keep none values and intentional accent colors unless the design calls for replacing them.
5. If paint uses url(#gradient), inspect the referenced gradient rather than replacing every fill with a solid color.

For example, changing a group's fill will not replace a child's explicit fill="#111827". Decide whether that child should inherit, use currentColor or retain a separate color. Avoid beginning with a global svg * { fill: ... } rule: it can fill open line artwork and remove distinctions between parts. Our gradient guide explains stop colors and reusable paint definitions.

Consider a CSS mask for a decorative silhouette

A mask controls which parts of an element remain visible. With an external SVG image as an alpha mask, its opaque areas reveal the element's background color. This is useful for a one-color decoration; it does not preserve the source illustration's different paint colors. MDN documents mask sources, alpha behavior and loading restrictions in its mask-image reference.

.status-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask-image: url("check.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

Use this on a decorative span beside a visible status label, with aria-hidden="true" on the span. Serve the mask over HTTP or HTTPS, check the actual asset URL, and test your target browsers. A failed mask request can leave the element invisible. A checkmark-only SVG gives a checkmark silhouette; the filled-circle example above gives a circular silhouette because the circle is opaque.

Check the exported file and the final page separately

Use SVG Vector Lab to inspect source beside the canvas and make a controlled paint edit. Keep a copy of the original before importing. The editor sanitizes imported SVG, so check the exported source instead of assuming every imported style or feature survives unchanged.

For a standalone deliverable, open the downloaded SVG and confirm its intended colors. For a currentColor component, test it inside the actual page with its stylesheet, light and dark backgrounds, and hover or focus states where relevant. The editor's surrounding page is not your application's theme.

If you need a PNG export, choose the final colors first and inspect the raster output. A PNG contains pixels and will not respond to currentColor later. If the artwork disappears rather than merely changing shade, use the invisible SVG checklist to separate paint problems from clipping, opacity or geometry.

Technical references reviewed September 19, 2026. Recheck embedding and computed styles when changing frameworks, export settings or theme rules.