Using the currentColor CSS Property with SVG

This post was originally written for the Echobind blog.

The currentColor property provides the current text color of the selected element. The CSS cascade makes it so the child’s text color matches the parents, but the currentColor property can be used for any other color property as well, like background or border colors.

.parent {
  color: red;
}

.child {
  border-color: currentColor; /* Also red */
}

This also includes properties on SVG elements on the page. Using currentColor as the fill or stroke color on a shape or path will have that element take on the text color of its parent. It even works with a CSS animation.

It’s important to remember that this only works if the SVG is rendered directly on the page - it won’t work if the SVG is loaded with an <img> tag.