How to Change SVG Icon Color with CSS

Last updated: November 2026

CSS can recolor an inline SVG through fill, stroke and currentColor — but only when the icon sits inline in the HTML and its shapes do not lock in their own colors. Here are the three methods that work, hover states included, plus the fixes for when nothing changes.

Rule zero: the icon must be inline

CSS selectors stop at the boundary of an image. An icon loaded with an <img> tag, or as a CSS background, renders in its own sealed document: no fill rule from your stylesheet can reach its paths. To recolor with CSS, paste the SVG markup inline (or serve it as a same-document <use> sprite and accept that only inherited properties cross into the shadow tree). Every recoloring method below assumes the paths live in your HTML.

currentColor: the one-rule theme

Well-built icon sets paint their shapes with fill="currentColor" (or stroke="currentColor" for line icons). The keyword means "whatever CSS color this element inherits", so a single rule themes the icon: set color on the button or link, and the icon follows — normal, hover and dark mode alike. Most libraries in this catalog follow the convention; on any icon page here you can copy the inline code and drive it with color alone.

Targeting fill and stroke directly

When shapes carry plain presentation attributes (fill="#333"), a CSS rule wins over the attribute: .icon path { fill: #2563eb } recolors them, because attributes sit at the bottom of the cascade. Two things defeat the rule: a style attribute on the path (inline styles beat stylesheets — remove or override with a more specific rule) and multicolor artwork, where each path has a deliberate different color; there, recolor per path with classes, or accept the palette and only theme a wrapper background.

Hover and state changes

Pair the techniques above with state selectors. With currentColor icons it is one line: a:hover { color: #dc2626 } transitions the icon with its text. With direct targeting, animate the property you set — transition: fill .15s ease — and remember transforms and opacity animate more cheaply than fills if the icon also moves. Keep a non-color cue for state (underline, weight, background) so the change is not carried by hue alone.

When nothing changes

Work down this list: the icon is an <img> or background (inline it); the paths have style attributes (strip them or raise specificity); the SVG uses currentColor but you set fill instead of color (set color); or the artwork is genuinely multicolor and was never themeable (swap to a monochrome set such as an outline or filled variant of the same concept — the same concept usually exists in several libraries here).

← Practical SVG Guides and Tutorials