You can use "currentColor" as the color value in SVG elements, to pick up the color attribute from CSS. For example:

<div style="color: red;">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" fill="currentColor" />
  </svg>
</div>

Note that this doesn't work when you're using an external SVG as a background image.

Final thoughts

Before finding this, Google gave me a bunch of misleading results. Here's hoping that improves.

Latest
Mastodon Mastodon