Change SVG Icon Color with CSS

If color changes are inconsistent in your UI, your SVG setup is the issue, not CSS.

The core rule

Use currentColor inside SVG, then set color on the parent element.

<button class="icon-btn" aria-label="Search">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="20" height="20">
    <path d="..." />
  </svg>
</button>

.icon-btn {
  color: #334155;
}

.icon-btn:hover {
  color: #2563eb;
}

fill vs stroke

Use fill="currentColor" for filled icons.
Use stroke="currentColor" for outline icons.
Avoid hardcoded values like #000 unless truly fixed.

React example

export function IconButton() {
  return (
    <button className="text-slate-600 hover:text-blue-600" aria-label="Notifications">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" className="h-5 w-5">
        <path d="..." />
      </svg>
    </button>
  );
}

Tailwind example

<button class="text-zinc-600 hover:text-emerald-600">
  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">...</svg>
</button>

Common gotcha

If the icon is loaded with <img src="icon.svg">, internal fill and stroke cannot be controlled by your page CSS.

Dark mode tip

Keep semantic tokens for icon color states (--icon-default, --icon-hover, --icon-muted) so dark mode is a token swap, not a manual override sprint.

Test one icon quickly

Use this preview to copy the SVG markup and validate your currentColor setup.

lucide:bell•56px

View pack →

Icons to test color states

lucide

Why `currentColor` scales better

When icons inherit text color, your theme system controls both text and icon states from one source. That means fewer custom overrides, cleaner component APIs, and easier dark mode support.

Production checklist

Ensure icon paths use fill/stroke with currentColor.
Avoid hardcoded color literals inside shipped assets.
Test hover/focus/disabled states.
Validate contrast on light and dark backgrounds.

If all four pass, icon color behavior is usually stable.

Advanced pattern: semantic color tokens

For product-scale systems, avoid raw utility values in every component. Use semantic tokens like --icon-default, --icon-accent, --icon-danger, then map those to theme values. This makes future rebrands and dark-mode tuning faster.

Troubleshooting flow

inspect rendered SVG path attributes
verify inheritance chain for color
confirm no CSS specificity conflict overrides icon state
test fallback states for disabled and high-contrast themes

Final note

Color control becomes effortless when icon assets are prepared correctly. Invest once in currentColor patterns, then reuse everywhere.

Once standardized, this approach also simplifies cross-brand or seasonal theme updates.

It also makes design QA significantly faster because state behavior becomes predictable.

Additional source references: ¹ ² ³.