How to Manage SVG Icon Colors with CSS: When to Use fill and currentColor

TIPS

SVG (Scalable Vector Graphics) describes shapes as vector data, so icons can be enlarged without losing their sharp edges. It works well for arrows, navigation symbols, and save buttons on websites. Managing an SVG icon’s color with CSS (Cascading Style Sheets, the rules that control a page’s appearance) makes design changes easier. But a color fixed inside an SVG may prevent the icon from responding as expected. This guide explains when to use fill or currentColor, with a practical button example and checks to make before shipping.

When should you use fill or currentColor?

fill controls the color painted inside an SVG shape. stroke controls its outline. Both can be specified as SVG attributes or CSS properties. currentColor, by contrast, is not a particular color. It uses the computed value of the CSS color property on the element.

For a one-color icon that should match nearby text, set the shape to fill="currentColor". Then changing the parent element’s color can update the label and icon together. If one part of a logo must keep its own color regardless of surrounding text, an explicit fill value on that part is more appropriate.

Outlined icons need a different combination: use fill="none" to leave the interior empty and stroke="currentColor" to match the outline to the text color. Decide whether each shape is filled or drawn as a line before choosing the rule.

Example: control a save button’s SVG icon with CSS

The following button displays a star next to the word “Save.” Placing SVG markup directly in HTML is called inline SVG. Since the text already names the action, aria-hidden="true" prevents the decorative star from being announced unnecessarily by a screen reader.

<button class="save-button" type="button">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path fill="currentColor" d="M12 2 15 9 22 9 16.5 13.5 18.5 21 12 16.8 5.5 21 7.5 13.5 2 9 9 9Z" />
  </svg>
  Save
</button>

.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1em;
  border: 0;
  background-color: rgb(29 78 216);
  color: rgb(255 255 255);
}
.save-button:hover {
  background-color: rgb(30 64 175);
}

The button background is ■#1D4ED8, while its label and star are ■#FFFFFF. On hover, the background changes to ■#1E40AF; the star remains white because it follows color. Changing that CSS property would update both the text and the star at once. This is useful when several icons should follow the same visual rule instead of carrying separate hard-coded colors.

Why an icon might not change color—and what to check

First check how the SVG was added. If you display an external SVG file using <img src="icon.svg">, CSS on the surrounding webpage normally cannot target the file’s internal path and change its fill directly. Use inline SVG when page-level styling is needed, or edit the SVG file itself.

Even with inline SVG, a fixed fill attribute on an individual path can take precedence over a fill value inherited from its parent. Change the appropriate shapes to currentColor, or target those shapes directly with a CSS fill rule. Avoid blindly applying a single color to every part of a multicolor logo or illustration.

Check contrast for icons that convey information or identify controls. For example, a ■#FFFFFF star on a ■#1D4ED8 button has a contrast ratio of about 6.70:1. A blue ■#1D4ED8 icon on a white ■#FFFFFF background has the same ratio. Both exceed the WCAG 3:1 non-text contrast threshold that applies to meaningful graphics and essential interface indicators. Still check thin strokes, actual adjacent colors, and hover, selected, and focus states. Give icon-only buttons an accessible name, and do not communicate meaning or status through color alone.