CurrentColor

Pass text color to SVG with currentColor.

What is currentColor?

currentColor is a special CSS keyword: it means 'use this element's color value'. In SVG, if you set it on a shape's fill or stroke, the shape follows the text color.

This lets icons change color together with button text. You change the button's color; the icon follows automatically. You don't write the color in two places.

Color inheritance

In CSS, the color property inherits from parent to child. If you set color: #2563eb on a button, the SVG inside also gets a blue color — even without writing it.

The result: any SVG element with fill: currentColor follows the button's color. Change the color in one place; every icon updates.

Exercise Bind the icon to the text color

Inside .btn, set color to #0ea5e9; inside .btn svg, set fill to currentColor. The icon now follows the button's text color.

Show example solution

inside .btn write color: #0ea5e9; inside .btn svg write fill: currentColor;.
Example solution:
.btn {
  color: #0ea5e9;
}
.btn svg {
  fill: currentColor;
}

Test yourself

What does currentColor refer to?
- The element's color value
- The page background
- The parent's font
- The browser default color
Show answer

The element's color value — Correct! currentColor takes the element's current color value.
Match the currentColor concepts

currentColor

follows the color value
color

spreads by inheritance
fill: currentColor

icon follows text color
parent

passes color to child

Bind the icon to the text color

.icon path {
  fill: ____;
}

Show answer

.icon path {
  fill: currentColor;
}

Next lesson: SVG icons

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies