How to use icons
How to use icons in your projects?
Iconify ecosystem offers many ways to use icons, for both coders and designers.
For using icons in HTML, there are several viable options:
- You can add icons to CSS.
- You can add SVG to HTML.
- Iconify offers unique components that render icons on demand.
SVG in CSS
How to use icons in CSS:
- Add icon as a background or mask image in CSS.
- Use <span> element in HTML to render it.
Using icons as background images works great for icons with hardcoded palette, such as emojis.
Using icons as mask images, in combination with setting background color to currentColor, allows using monotone icons in CSS. To change icon color, simply change text color.
Example showing icons used as background and mask images (hover to see color change):
See how to use icons in CSS for various tools and plug-ins that make it easy to add icons to CSS.
SVG in HTML
Icons can be embedded in HTML as <svg> elements:
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z"/>
See how to add SVG to HTML for various tools and components that make it easy to add icons to HTML.
Icons on demand
Iconify ecosystem has a unique feature: Iconify API.
It is used by various icon components to load icon data on demand. Iconify icon components only load icon data for icons used on the page visitor is viewing, at run time, instead of bundling icons.
Iconify icon components are perfect for complex projects like theme or website customisers, customisable admin panels or any similar projects, where icons can be customised by user.
Iconify icon components are very easy to use. All developer has to specify is an icon name:
For designers, Iconify ecosystem offers several ways to easily import icons in various design tools.
- Figma users can install Iconify plug-in for Figma.
- Sketch users can install Iconify plugin-in for Sketch.
- For other design tools, or if you are experiencing issues with plug-ins listed above, you can copy and paste SVG from one of sources listed below.
You can browse and search more than 150k open source icons at one of the following websites:
- Iconify icon sets - official website.
- Icones - alternative website created by Anthony Fu.
Find icon you want to use, select it, copy SVG to clipboard, paste it to your favorite design tool.
- Some design tools do not support currentColor. Set icon color to black before copying code sample.
- Almost all image editing software do not support SVG 2 animations. Animated icons will be imported without animations, sometimes rendered weirdly.