How to use SVG icons as background images in CSS

There are different ways to use SVG icons as background images. In this article, we'll provide a list of possible CSS techniques you can use.

SVG as an external file with CSS background-image #

Just like JPG or PNG images, SVG icons can be set as background images. First, create an SVG file (e.g., icon.svg) and use it with the CSS background-image property:

.element {
  background-image: url('../icon.svg');
}

You can then use the other background properties (e.g., background-size, background-position, etc) to customize the background appearance.

.my-element {
  background-image: url('../icon.svg');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}

If you have multiple icons or varied colors, consider creating an SVG image sprite.

An SVG image sprite is a file containing multiple icons arranged in a grid. Below is an example of an SVG sprite created using icons in two different colors from the Nucleo library:

You can then use the CSS background-position property to display the proper icon:

.icon {
  display: inline-block;
  height: 96px;
  width: 96px;
  background-image: url('../icons.svg');
  background-repeat: no-repeat;
}

.icon-tags {
  background-position: -96px 0px;
}

You can learn more about SVG sprites in this article on using SVG sprites in a web project.

SVG as data URI with CSS background-image #

If you do not want to create an external file for your SVG icon, you can convert the SVG to data URI and use it as background-image:

.my-element {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke-width='1' fill='none' stroke='%23372929' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='15.5,13.5 8,1.5 0.5,13.5 '%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

While converting SVG to data URI can be complex, tools like Nucleo simplify the process.

You can learn more about data URI and why to use it in this article on converting SVG icons to data URI.

SVG as data URI with CSS mask-image #

When using an SVG icon as background image, you lose the option of changing the icon color. A workaround is using the SVG data URI as mask-image and adjusting the icon color with the background-color property:

.my-element {
	background-color: red; // icon is red
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke-width='1' fill='none' stroke='%23372929' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='15.5,13.5 8,1.5 0.5,13.5 '%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E"); // SVG data URI
}

This method allows you to modify the icon color as needed, adding more flexibility to your design.

The end! Check our documentation tutorials page for more articles on working with icons.