Learn how to set an SVG as the background image of an element. Background images can be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon.

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on :hover), this could be a good option for you.

<iframe style="width: 100%; height: 500px;" src="https://embed.plnkr.co/vjojxRwgiJT5ucbsh6Lt/" width="320" height="240"></iframe>

[SVG] Add an SVG as a Background Image