All Icon Sets Individual Icons

Individual icon sets

There are several packages available that contain all icons, see icon sets documentation.

This article describes individual icons packages.

Packages

Each icon set is available as a separate NPM package. Package name is @iconify-json/{prefix}, where "{prefix}" is icon set prefix.

These packages are available only on NPM. They are automatically generated from big icon sets package whenever it is updated.

Contents

Each package contains one icon set, split in several files:

  • icons.json contains icon set in IconifyJSON format, without any metadata.
  • info.json contains icon set information in IconifyInfo format.
  • chars.json contains characters map, if exists in IconifyChars format. File might not exist in some icon sets.
  • metadata.json contains metadata in IconifyMetaData format: categories, themes. File might not exist in some icon sets.

You can import icon set using named import from package, like this:

import { icons as mdiIcons } from '@iconify-json/mdi';
import { icons as mdiLightIcons } from '@iconify-json/mdi-light';

However, code above uses JSON modules. It works fine when using bundlers or when using CommonJS. When using ES modules, importing JSON files requires running script with "--experimental-json-modules" flag.

Alternative is to use require():

const mdiIcons = require('@iconify-json/mdi/icons.json');
const mdiLightIcons = require('@iconify-json/mdi-light/icons.json');

Creating packages

If you want to create a package for your icon set, see exportJSONPackage() of Iconify Tools.

Difference from big icon sets package

In big icon sets package, all JSON files contain an entire icon set: icon data, information, metadata (categories, themes), characters map.

In small packages that data is split into several files, as described above. If you only want icon data, it is better to read icons.json from multiple small packages because they are smaller.

Collections list

Small packages contain only one icon set. How to know which icon sets are available?

List of icon sets is available in @iconify/collections package.

Package contains collections.json with list of all icon sets, same as collections.json in @iconify/json package.

You can import collections list directly from @iconify/collections/collections.json as default import or use named import:

import { collections } from '@iconify/collections';

Reading data

For reading icon sets, you can use: