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:
<span class="background-demo"></span>
<span class="background-demo background-demo--2"></span>.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:
<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>.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:
- You can use Iconify API to generate CSS without writing any code.
- If you are using Tailwind CSS, you can use Iconify plugin for Tailwind CSS.
- If you are using UnoCSS, it has a built-in preset for icons.
- You can use Iconify Utils to generate CSS.
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:
- Locate icon set file.
- Read it and parse JSON.
- Use getIconsCSS() or getIconCSS() functions to generate CSS.
Code samples that should help you:
- See Iconify Utils documentation for CSS.
- See getIconsCSS() or getIconCSS().
- Source code for Iconify for Tailwind CSS.