index

title: Generate CSS for icons with Iconify Utils
replacements:
  - code: '60,000'
    value: '${counters.icons}'
  - code: '60k'
    value: '${counters.icons-short}'
functions:
  getIconsCSS: '/docs/libraries/utils/get-icons-css.md'
  getIconCSS: '/docs/libraries/utils/get-icon-css.md'
  getIconsContentCSS: '/docs/libraries/utils/get-icons-content-css.md'
  getIconContentCSS: '/docs/libraries/utils/get-icon-content-css.md'

Generate CSS for icons with Iconify Utils

This method requires a bit of coding, using Node.js.

If you are not using Node.js or not comfortable with the code below, consider other methods of generating CSS for icons.

Node.js {#node}

If you do not have a Node.js app, you need to create one to generate CSS.

There are plenty of tutorials on how Node.js works, short version of steps:

• Install Node.js on your computer.
• Create an empty directory, run [bash]npm init -y to create a basic project.

Dependencies

You need to install two dependencies:

• [npm]@iconify/utils to install Iconify Utils that have function to generate CSS.
• [npm]@iconify/json to install data for all open source icon sets.

To install them, run

npm install --save-dev @iconify/utils @iconify/json

Functions

Iconify Utils has several functions that generate CSS for icons:

• [func]getIconsCSS() generates CSS for selected icons from an icon set.
• [func]getIconCSS() generates CSS for one icon (uses icon as a source instead of an icon set).
• [func]getIconsContentCSS() renders selected icons from an icon set as content of pseudo-elements.
• [func]getIconContentCSS() renders one icon as content of pseudo-element (uses icon as source).

This tutorial shows how to use [func]getIconsCSS(), which fits most use cases.

Build script

The process of building CSS is simple:

• Load icon set.
• Generate CSS for icons you need from that icon set.
• Save it to [file].css file.

src: usage/css-utils.js

Change the list of icons, location of [file].css file, run it to build CSS.

Usage

To use those icons in HTML, use [tag]span elements with two class names: class name for the icon set, class name for the icon.

<span class="icon--mdi-light icon--mdi-light--alert-circle"></span>

Options

There are options for [func]getIconsCSS() that you can use to customise generated CSS.

See getIconsCSS() documentation.