Gradient Icons

This strategy uses icon SVG from a remote service as a mask-image into mask shorthand, then a background gradient is no problem. Streamlined with custom properties.

With just this:

[data-icon] {
  mask: var(--_icon) center / contain no-repeat;
}

You can pass a svg and specify a gradient:

Try guessing other icons or changing the gradient!