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; }