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
There are advantages and disadvantages of using SVG in CSS over using SVG in HTML.
Advantages:
- No repeating. Only one entry for each icon.
- No deep DOM tree.
- Can use icons from untrusted sources because if there are any scripts in SVG, they are not executed.
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 the 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 can be rendered as background images:
<span class="background-demo"></span>
<span class="background-demo background-demo--2"></span>.background-demo {
/* Add dimensions 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');
}Rendering as content
Icons with hardcoded palette can also be rendered as content of pseudo-elements.
It is similar to using icons as background images, but with a difference: icon's size cannot be controlled with CSS. You need to set width and height in SVG in pixels.
<span class="content-demo"></span>
<span class="content-demo content-demo--2"></span>.content-demo::after {
content: url('https://api.iconify.design/bi/bell-fill.svg?height=32&color=gray');
}
.content-demo--2::after {
content: url('https://api.iconify.design/fluent-emoji-flat/memo.svg?height=32');
}There are no clear advantages of rendering icons as content of pseudo-elements instead of background images.
Monotone icons
Monotone icons can be 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.