Using gradients on SVG icons is not as easy as using linear-gradient in CSS, but it can still be done. Let’s explore a few techniques.
Gradient fills for SVG icons Printing background colors with CSS and SVG
Web browsers do not print background colors by default. Here’s a trick for printing a flat color, e.g. if you have a white logo or graphic.
Using CSS variables in SVG icons
Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.
How to work with SVG icons
A complete guide to SVG icons in HTML pages, with the symbol sprites technique.
Browser support for SVG symbol sprites
All modern browsers support using SVG symbols from a different SVG element in the same page, or from a remote SVG document on the same domain.