Icon data

There are over 200,000 open source icons available, which you can use in your projects.

All these icons are:

• Open source.
• Validated and cleaned up.
• Automatically kept up to date.

Where to get them?

To make it easier for developers to work with icons, there are several ways to get data for icons.

The main source of icon sets is iconify/icon-sets repository on GitHub. Icon sets are stored in IconifyJSON format.

In addition to git repository, icon sets are available as:

• Big NPM package @iconify/json, which is identical to git repository.
• Packagist package iconify/json for PHP developers.
• NPM package @iconify/collections that contains only list of available icon sets (file collections.json from big package).
• Smaller NPM packages @iconify-json/* that contain only one icon set per package in IconifyJSON format.
• Iconify API that can be used to retrieve icon data on demand.

Below is a description for each of those sources.

All icons

You can get the latest version of package from the following sources:

• From GitHub: https://github.com/iconify/icon-sets.
• From NPM: @iconify/json.
• From Packagist: iconify/json.

This package is big and might take a while to download.

See big icons package documentation for list of files, functions and usage examples.

Icon set list

If you want to get a list of all available icon sets, it is:

• included in big package listed above as collections.json.
• available icon sets is available as NPM package @iconify/collections.

See icon sets list for more details.

Individual icon sets

Each icon set is also published as a separate NPM package @iconify-json/{prefix} (where "{prefix}" is an icon set prefix).

See split icon sets packages for more details.

API

Iconify API is very different from all other sources.

Other sources are various packages you can use during build time. Using them requires knowing which icons you are using, so build tools would extract data only for icons that you need. You cannot use them at run time because they are too big.

API is intended to be used when you don't know which icons you need. Several icon components retrieve icon data from API as needed, then render icon.

<Icon icon="mdi:home" />

<iconify-icon icon="mdi:alert" />

Developer passes icon name as attribute for icon component.

API

Icon Names

Browser

Component requests data for icons from Iconify API.

API

Icon Data

Browser

API sends data for requested icons.

API hosts thousands of icons, but sends only data for icons that were requested.

<svg width="1em" height="1em" viewBox="0 0 24 24" ...>...</svg>

<iconify-icon icon="mdi:alert">#shadow-root<svg width="1em" height="1em" viewBox="0 0 24 24" ...>...</svg></iconify-icon>

Component renders SVG using data retrieved from Iconify API.

There are several downsides of using API to get icon data:

• Requires a visitor to be online. Not usable in offline applications.
• Relies on third party service, though you can host your own Iconify API instances.
• Icon components contain overhead: code that downloads icon data on demand.

API also provides a list of available icon sets and icons, which can be used to build applications for browsing and searching icons, such as various plugins and icon pickers.

SVG

There are no special packages for SVG files, but you can generate them yourself using Iconify Tools.

In Iconify Tools examples, you can find a simple script that exports all icons as SVGs.