Skip to content
On this page

How to use icons in CSS

Using icons in CSS is easy: set icon as background or mask image, use simple <span> element in HTML to render icon.

Skip to list of available tools if you want to skip long explanation of how it all works.

Advantages

It has advantages and disadvantages over using SVG in HTML.

Advantages:

  • No repeating. Only one entry for each icon.
  • No deep DOM tree.

However, it also has disadvantages:

  • You cannot target elements inside icons, such as changing stroke-width.
  • CSS usually contains all icons, including ones not used on current page.

How icons are rendered

There are two types of icons:

  • Icons with hardcoded palette.
  • Monotone icons that change color.

You can use both types in CSS.

Icons with palette

Icons with hardcoded palette are rendered as background images:

html<span class="background-demo"></span>
<span class="background-demo background-demo--2"></span>
css.background-demo {
   /* Add dimentions to span */
   display: inline-block;
   width: 32px;
   height: 32px;
   /* Add background image */
   background-image: url('https://api.iconify.design/fluent-emoji-flat/alarm-clock.svg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.background-demo--2 {
   background-image: url('https://api.iconify.design/fluent-emoji-flat/memo.svg');
}

Monotone icons

Monotone icons are rendered as mask images with background color set to currentColor:

html<span class="mask-demo"></span>
<span class="mask-demo"></span>
<span class="mask-demo mask-demo--2"></span>
<span class="mask-demo mask-demo--2"></span>
<span class="mask-demo mask-demo--3"></span>
<span class="mask-demo mask-demo--3"></span>
css.mask-demo {
   /* Add dimensions to span */
   display: inline-block;
   width: 32px;
   height: 32px;
   /* Add background color */
   background-color: currentColor;
   /* Add mask image, use variable to reduce duplication */
   --svg: url('https://api.iconify.design/bi/bell-fill.svg');
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
}

.mask-demo--2 {
   --svg: url('https://api.iconify.design/carbon/edit-off.svg');
}

.mask-demo--3 {
   --svg: url('https://api.iconify.design/carbon/humidity.svg');
}

Using currentColor as background color makes it easy to change icon color by changing text color.

Tools

How to generate CSS for icons in the Iconify ecosystem?

There are several ways to do it:

Custom plugin

Want to build a custom plugin that generates CSS?

Iconify Utils package includes all functions you need. Process of generating CSS is simple:

Code samples that should help you:

Released under the Apache 2.0 License.