Split icon packages

Split icon packages are deprecated.

It creates unnecessary duplication, adding 2 extra NPM packages per icon set. Please use JSON packages, which include all icons in one file.

Old packages are still available, but no longer updated.

To extract data for each icon from JSON file, you can use parseIconSet() from Iconify Utils.

You can also generate split packages yourself using exportIconPackage() from Iconify Tools.

For developer's convenience, full icon sets package was also available as smaller packages.

This documentation is for packages that contain many files, one per icon. These packages can be used if you need to import only few icons without parsing the whole icon set.

Be aware that some packages might contain many files, which some file systems cannot handle.

Packages

There are 2 versions of packages available on NPM:

• @iconify-icons/{prefix} that contains data as ES modules for modern development.
• @iconify/icons-{prefix} that contains icon data as CommonJS for legacy code.

Replace "{prefix}" with an icon set prefix.

Packages are automatically generated from big icon sets package whenever it is updated.

Contents

Each package contains one icon set, with separate files for each icon ("{name}" is icon name):

• {name}.js contains icon data in IconifyIcon format as default export.
• {name}.d.ts contains type definition.

Icon data in IconifyIcon format looks like this:

json{
 "body": "<path d=\"M15 20a1 1 0 0 0-1-1h-1v-2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4v2h-1a1 1 0 0 0-1 1H2v2h7a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1h7v-2h-7m-8-5V5h10v10H7z\" fill=\"currentColor\"/>",
 "width": 24,
 "height": 24
}

You can import data for any icon using default import from file, like this:

jsimport mdiHome from '@iconify-icons/mdi/home';

Example of React component using icon from such package:

jsximport { Icon, addIcon/* , addCollection */ } from '@iconify/react/dist/offline';
import bellFill from '@iconify-icons/bi/bell-fill';

// Assign icon data to name "bell" used in first example
addIcon('bell', bellFill);

// Test component
export function iconDemo() {
   return (
       <div>
           <div>
               Icon referenced by name: <Icon icon="bell" />
           </div>
           <div>
               Icon referenced by object: <Icon icon={bellFill} />
           </div>
       </div>
   );
}

CommonJS packages

For older software use CommonJS packages. Replace import with require():

jsconst mdiHome = require('@iconify/icons-mdi/home');

Creating packages

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

Icon sets list

If you need to get list of available open source icon sets, see icon sets list package.