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="">
    <rect width="50" height="50" fill="currentColor" />

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.

Mastodon Mastodon