Split icon packages
For developer's convenience, full icon sets package is 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 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:
{
"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
For older software use CommonJS packages. Replace import with require():
const 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.