Split icon packages

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

This article describes split icons packages.

Packages

Each icon set is available as a separate NPM package. Package name is @iconify-icons/{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, 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:

{
   "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:

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

Example of React component using icon from such package:

import { 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

Packages @iconify-icons/{prefix} use ES modules.

However, some outdated software still does not support ES modules. To support that software, CommonJS packages are also available. They are identical to ES modules, but icon files export CommonJS:

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

Format for icon data packages:

  • ES package: @iconify-icons/{prefix}
  • CommonJS package: @iconify/icons-{prefix}

where "{prefix}" is an icon set prefix. Use ES package whenever possible, switch to CommonJS package if your bundler does not support ES modules or if you need to use it in Node.js.

Creating packages

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