Skip to main content Accessibility Feedback

Automatically setting the fill for SVGs

Yesterday, we looked at how to use the currentColor property to dynamically set the color of an SVG.

In the article, I mentioned that if you don’t specify a fill color on an SVG, it will default to black (#000000).

Reader Johann Schopplich shared this little CSS snippet that will automatically set fill to currentColor for any SVG that doesn’t have a fill attribute (shared with permission).

svg:not([fill]) {
	fill: currentColor;

Pretty neat. Thanks Johann!


Twitter user 1076 pointed out that this will miss nested elements in an SVG that also don’t have fill properties.

He recommended an addition for nested items, like this.

svg *:not([fill]) {
	fill: currentColor;