Iconify icon sets package
You can get the latest version of open source icon data from the following sources:
- From GitHub: https://github.com/iconify/icon-sets
- From NPM: @iconify/json
- From Packagist: iconify/json
You can also get smaller packages, but it is not covered in this document. See icon data documentation.
Contents
Package contains:
- List of icon sets in collections.json.
- Icon sets in json/{prefix}.json, where "{prefix}" is icon set prefix, such as json/mdi-light.json.
- Helper functions for PHP and Node.js
- Misc files, such as package definition files, README, human-readable list of icon sets.
Icon sets list
Icon sets list is stored in collections.json.
Contents are a simple object, where key is icon set prefix, value is icon set information in IconifyInfo format. Information includes icon set name, author information, license, number of files and 3 sample files to display.
Additionally, collections.md contains the same data, but in human-readable format.
Icon sets
Each icon has is stored in one file, located in directory json/. File name matches icon set prefix, which you can find as key in icon sets list in collections.json.
Contents are stored in IconifyJSON format.
Icon set files contain all icon set data, including info and metadata. If you want to get minimal version without extra stuff, use small packages instead.
Maintenance
Package is automatically updated every few days, so it always includes the latest icons. If you want to use the latest icons, all you have to do is keep dependencies in your project up to date.
If you are using Iconify API, you do not need to do anything because changes are automatically pushed to API servers within minutes after being published.
Reading data
For reading icon sets, you can use:
- Iconify Utils for JavaScript.
- Iconify JSON Tools for PHP, deprecated and unmaintained.
To use icon set packages with Iconify Utils, follow these steps:
- Read icons data from JSON file for specific icon set. If you are using file system functions that return a string, convert it to IconifyJSON object using JSON.parse().
- Extract data. To extract multiple icons, use getIcons(), to extract one icon use getIconData(). Click function links for code samples.
Helper functions
Package contains simple helper functions for Node.js and PHP.
Node.js functions
In Node.js version of @iconify/json functions are asynchronous:
- lookupCollections() returns list of collections. It is a simple object, where key is prefix, value is information about icon set in IconifyInfo format.
- lookupCollection(prefix) loads an icon set. Result is IconifyJSON object.
All functions listed above are asynchronous and require using await before function name (see example below).
There are also few synchronous functions:
- locate(prefix) returns location of JSON file for an icon set.
PHP functions
PHP is a synchronous language, so functions for PHP are identical for versions 1 and 2.
Use Iconify\IconsJSON\Finder class that has the following static functions:
- collections() returns list of collections. It is a simple object, where key is prefix, value is information about icon set. For version 1 data is in LegacyIconifyInfo format, for version 2 data is in IconifyInfo format.
- locate(prefix) returns location of JSON file for an icon set.
- rootDir() returns location of root directory of package.
Example
Example:
// Installation: npm install --save @iconify/json
import { lookupCollections, locate } from '@iconify/json';
(async () => {
// Get list of all icon sets
const iconSets = await lookupCollections();
const prefixes = Object.keys(iconSets);
console.log(`Available ${prefixes.length} icon sets`);
// List icon sets in format: "prefix: name (total icons)"
console.log(
prefixes
.map((prefix) => {
const item = iconSets[prefix];
// prefix: name (total icons)
return prefix + ': ' + item.name + ' (' + item.total + ' icons)';
})
.join('\n')
);
// Get location of Taber Icons JSON file
const tabler = locate('tabler');
console.log('Tabler icons JSON file is located at:', tabler);
})();
require './vendor/autoload.php';
// Installation: composer require iconify/json
use Iconify\IconsJSON\Finder;
// Get list of all icon sets
$iconSets = Finder::collections();
$prefixes = array_keys($iconSets);
echo 'Available ', count($prefixes), " icon sets\n";
// List icon sets in format: "prefix: name (total icons)"
echo implode("\n", array_map(function ($prefix) use ($iconSets) {
$item = $iconSets[$prefix];
return $prefix . ': ' . $item['name'] . ' (' . $item['total'] . ' icons)';
}, $prefixes)), "\n";
// Get location of Taber Icons JSON file
$tabler = Finder::locate('tabler');
echo 'Tabler icons JSON file is located at: ', $tabler, "\n";
These helper functions only list and locate icon sets.
For reading icon sets, you can use Iconify Utils.
Adding icon sets
Do you know a good open source icon set that is missing in Iconify icon sets? Open an issue on GitHub to request to add it to Iconify icon sets.
Licences
All icon sets available in Iconify collections are released under free or open source licence, which allows redistribution. See each icon set's info for details.