# Icons

# all

```yaml
title: Iconify Icon Sets Package
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "60k"
    value: "${counters.icons-short}"
  - code: "80 icon sets"
    value: "${counters.sets} icon sets"
types:
  IconifyJSON: "/docs/types/iconify-json.md"
  IconifyInfo: "/docs/types/iconify-json-metadata.md"
  LegacyIconifyInfo: "/docs/types/iconify-json-metadata.md"
  IconifyChars: "/docs/types/iconify-json-metadata.md#chars"
  IconifyMetaData: "/docs/types/iconify-json-metadata.md#iconify-categories"
functions:
  exportJSONPackage: "/docs/libraries/tools/export/json-package.md"
  getIconData: "/docs/libraries/utils/get-icon-data.md"
  getIcons: "/docs/libraries/utils/get-icons.md"
```

# 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](https://github.com/iconify/icon-sets)
- From NPM: `[npm]@iconify/json`
- From Packagist: `[packagist]iconify/json`

You can also get smaller packages, but it is not covered in this document. See [icon data documentation](./icon-data.md).

## Contents

Package contains:

- List of icon sets in `[file]collections.json`.
- Icon sets in `[file]json/{prefix}.json`, where `[str]{prefix}` is icon set prefix, such as `[file]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 `[file]collections.json`.

Contents are a simple object, where key is icon set prefix, value is icon set information in `[type]IconifyInfo` format. Information includes icon set name, author information, license, number of files and 3 sample files to display.

Additionally, `[file]collections.md` contains the same data, but in human-readable format.

## Icon sets

Each icon has is stored in one file, located in directory `[file]json/`. File name matches icon set prefix, which you can find as key in icon sets list in `[file]collections.json`.

Contents are stored in `[type]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](./json.md).

## 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](../api/index.md), you do not need to do anything because changes are automatically pushed to API servers within minutes after being published.

## Reading data {#tools}

For reading icon sets, you can use:

- [Iconify Utils](/docs/libraries/utils/index.md) for JavaScript.
- [Iconify JSON Tools](https://github.com/iconify/json-tools.php) 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 `[type]IconifyJSON` object using `[func]JSON.parse()`.
- Extract data. To extract multiple icons, use `[func]getIcons()`, to extract one icon use `[func]getIconData()`. Click function links for code samples.

## Helper functions {#helpers}

Package contains simple helper functions for Node.js and PHP.

### Node.js functions {#functions-node}

In Node.js version of `[npm]@iconify/json` functions are asynchronous:

- `[func]lookupCollections()` returns list of collections. It is a simple object, where key is prefix, value is information about icon set in `[type]IconifyInfo` format.
- `[func]lookupCollection(prefix)` loads an icon set. Result is `[type]IconifyJSON` object.

All functions listed above are asynchronous and require using `[func]await` before function name (see example below).

There are also few synchronous functions:

- `[func]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 `[prop]Iconify\IconsJSON\Finder` class that has the following static functions:

- `[func]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 `[type]LegacyIconifyInfo` format, for version 2 data is in `[type]IconifyInfo` format.
- `[func]locate(prefix)` returns location of JSON file for an icon set.
- `[func]rootDir()` returns location of root directory of package.

### Example

Example:

```yaml
src: icons/json/finder.js
title: Node.js
extra:
  - src: icons/json/finder.php
    title: PHP
```

These helper functions only list and locate icon sets.

For reading icon sets, you can use [Iconify Utils](/docs/libraries/utils/index.md).

## Adding icon sets {#submit}

Do you know a good open source icon set that is missing in Iconify icon sets? [Open an issue on GitHub](https://github.com/iconify/icon-sets/issues) 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.

# collections

```yaml
title: Icon Sets List
types:
  IconifyInfo: '/docs/types/iconify-json-metadata.md'
```

# Available icon sets list

If you are not using [full icon sets package](./all.md), which contains `[file]collections.json`, you might need to know list of available open source icon sets.

There are several ways to get it:

- From `[npm]@iconify/collections` NPM package.
- [From Iconify API](../api/collections.md).

In `[npm]@iconify/collections` and full icon sets package you'll find `[file]collections.json` with list of all icon sets.

## Structure

Data is stored as an object, where key is icon set prefix, value is icon set information in `[type]IconifyInfo` format.

## Import

If you are using `[npm]@iconify/collections` package, you can import icon sets list directly from `[file]@iconify/collections/collections.json` as default import or use named import:

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

Code above uses JSON modules, which does not work with outdated version of Node.js. If you are using older version of Node, importing JSON files requires running script with `[str]--experimental-json-modules` flag.

Alternatively, for older versions of Node.js you can use `[func]require()`:

```js
const collections = require('@iconify/collections/collections.json');
```

# custom

```yaml
title: Custom Icon Sets
types:
  IconifyJSON: '/docs/types/iconify-json.md'
functions:
  exportJSONPackage: '/docs/libraries/tools/export/json-package.md'
```

# Custom icon sets

You can also use Iconify with custom icons.

Most icon components and plugins support custom icon sets. The only exception are plugins that are not meant to work with custom icon sets, such as [Iconify plugin for Figma](/docs/design/figma/index.md).

## Format

How custom icon sets are handled depends on your use case.

[All tools in Iconify ecosystem](/docs/usage/index.md) work with `[type]IconifyJSON` format.

Some icon components and plugins that are designed to work in Node.js (server side rendering or works with bundlers) can import individual SVG files, but usually they convert icons to `[type]IconifyJSON` format.

## Import tools

Importing custom icon sets can be done at build time in Node.js environment.

It is done with [Iconify Tools](/docs/libraries/tools/index.md) package.

Typical import process:

- Import icons. There are [various import functions](/docs/libraries/tools/import/index.md). They create unparsed icon set.
- [Cleaning up imported icons](/docs/libraries/tools/icon/cleanup.md).
- For monotone icon sets [parsing colors](/docs/libraries/tools/icon/colors.md) to make sure all icons use `[prop]currentColor`.
- [Export icon set](/docs/libraries/tools/icon-set/export.md) to `[type]IconifyJSON`.

See [Iconify Tools code examples](/docs/libraries/tools/examples/index.md) for code samples.

## Using custom icon sets

Usage depends on where you want to use it. See documentation of icon component you want to use icons with.

If icon component you want to use loads icon data on demand, you probably want to [set up your own Iconify API](/docs/api/hosting-js/index.md) to host custom icon sets.

# icon-basics

```yaml
title: "Getting Started: Icons Cleanup"
types:
  IconifyJSON: "/docs/types/iconify-json.md"
  IconifyIcon: "/docs/types/iconify-icon.md"
functions:
  getIconData: "/docs/libraries/utils/get-icon-data.md"
  parseIconSet: "/docs/libraries/utils/parse-icon-set.md"
  defaultIconProps: "/docs/libraries/utils/default-icon-props.md"
```

# Icons Cleanup

One of goals of Iconify project is to make icons easy to use.

This is not as simple as running icons through popular optimisation tools.
Icon parsing in Iconify is very strict and process is much more invasive.

Icons are modified, so they can be used the same way regardless of icon set.

## What exactly is done? {#process}

Each icon is:

- Validated (see below).
- Cleaned up and optimised (see below).
- Palette is fixed to either contain `[prop]currentColor` or hardcoded palette.
- If needed, icons are renamed to follow Iconify naming convention (see below).

## Naming convention

To make icons easy to use regardless of their source, all icons follow the same naming convention.

Allowed characters in icon names are `[str]a-z`, numbers and `[str]-`. Hyphen cannot be used at start or end of name, 2 hyphens in a row `[str]--` are not allowed.

Examples of valid icon names: `[str]home-outline`, `[str]1st-place-medal`, `[str]camera-with-flash`.

## Validation

When icons are imported and validated, icons that contain any of the following are not allowed:

- Scripts and event listeners. They can be harmful or badly coded, thus they do not belong in public icons.
- Raster images. They don't scale, so they do not belong in vector icons.
- External resources. Icon should not rely on something hosted elsewhere.
- Text. Texts are rendered differently in different browsers and operating systems. Icons should look identical to all visitors. Convert text to shapes.

Additionally, everything that does not affect icon rendering is removed. Many bad editors leave a lot of junk code in generated SVG, all of that is removed.

This is done during import process for open source icon sets using [Iconify Tools](/docs/libraries/index.md). Custom icon sets might not follow the same guidelines.

## Clean up and optimisation

Clean up and optimisation process removes all unnecessary code, making icon as small as possible, without breaking icon.

For more details about icon cleanup, see [icons clean up process](/docs/articles/cleaning-up-icons/index.md).

## Palette

Palette is always checked and fixed if necessary.

What exactly is done depends on type of icon.

There are 2 types of icons:

- Icons with hardcoded palette, such as emojis. Colors cannot be changed.
- Monotone icons. They have only one color that can be changed.

What is the difference?

### Hardcoded palette

Colors in icons with hardcoded palette cannot be changed.

Examples:

```yaml
include: common/icon-types-palette
```

In CSS these icons are used as background images.

Palette in such icons is kept as is.

### Monotone icons

All monotone icons are modified to use `[prop]currentColor` for color.

This makes it easy to change icon color by changing text color in CSS.

Examples:

```yaml
include: common/icon-types-monotone
```

Hover samples above to see color change.

Why not `[prop]fill`? Main reason is because many icons use `[prop]stroke` for color. Using `[prop]fill` to set color is bad practice because it limits your icons to only icons that use `[prop]fill`. It also prevents icons from being used as mask images because background color cannot be set to fill color.

In CSS these icons are used as mask images, see [using SVG in CSS](/docs/usage/css/index.md) for details.

#### Do not set fill! {#fill}

Some icon sets recommend changing color by changing `[prop]fill`, but you should never do that with Iconify!

This is a very bad practice because not all icons use fill. Many icons use `[prop]stroke`, but you cannot change `[prop]stroke` because it would add stroke to icons that do not have `[prop]stroke`.

To avoid all that mess, Iconify changes color in monotone icons to `[prop]currentColor`, so you can change icon color by changing text color, regardless of how icon is structured.

### Mixing currentColor and custom colors

While it is possible to mix monotone and hardcoded palette, it is a very bad idea. Icon with mix of `[prop]currentColor` and hardcoded colors is unusable because:

- It cannot be used in CSS. If it is used as a background image, `[prop]currentColor` becomes black. If it is used as a mask image, custom palette disappears.
- It works only with a specific color scheme, usually designed only for white background.

Therefore, icons with mixed palette are not allowed in Iconify open source icon sets repository.

## Format

Icons are stored converted to `[type]IconifyIcon` format, then stored in icon sets in `[type]IconifyJSON` format.

Data is stored in easy to use JSON files.

### Custom type

Why is icon stored in custom `[type]IconifyIcon` type instead of SVG?

Format splits icon attributes for `[tag]svg` element and content.
This it makes it easy to alter SVG without parsing XML: resize, change `[prop]viewBox`, render as components without parsing JSX, append/prepend shapes to icon, etc.

## Icon sets

Multiple icons are stored in an icon set. See [icon sets documentation](./icon-set-basics.md) for details.

# icon-data

```yaml
title: Open Source Icon Data
replacements:
  - code: '60,000'
    value: '${counters.icons}'
  - code: '60k'
    value: '${counters.icons-short}'
types:
  IconifyJSON: '/docs/types/iconify-json.md'
  IconifyIcon: '/docs/types/iconify-icon.md'
```

# Icon data

There are over 60,000 open source icons available, which you can use in your projects.

All these icons are:

- Open source.
- Validated and cleaned up.
- Automatically kept up to date.

## Where to get them? {#sources}

To make it easier for developers to work with icons, there are several ways to get data for icons.

The main source of icon sets is [iconify/icon-sets](https://github.com/iconify/icon-sets) repository on GitHub. Icon sets are stored in `[type]IconifyJSON` format.

In addition to git repository, icon sets are available as:

- Big NPM package `[npm]@iconify/json`, which is identical to git repository.
- Packagist package `[packagist]iconify/json` for PHP developers.
- NPM package `[npm]@iconify/collections` that contains only list of available icon sets (file `[file]collections.json` from big package).
- Smaller NPM packages `[npm]@iconify-json/*` that contain only one icon set per package in `[type]IconifyJSON` format.
- [Iconify API](/docs/api/index.md) that can be used to retrieve icon data on demand.

Below is a description for each of those sources.

### All icons

You can get the latest version of package from the following sources:

- From GitHub: [https://github.com/iconify/icon-sets](https://github.com/iconify/icon-sets).
- From NPM: `[npm]@iconify/json`.
- From Packagist: `[packagist]iconify/json`.

This package is big and might take a while to download.

See [big icons package documentation](./all.md) for list of files, functions and usage examples.

### Icon set list {#collections}

If you want to get a list of all available icon sets, it is:

- included in big package listed above as `[file]collections.json`.
- available icon sets is available as NPM package `[npm]@iconify/collections`.

See [icon sets list](./collections.md) for more details.

### Individual icon sets {#json}

Each icon set is also published as a separate NPM package `[npm]@iconify-json/{prefix}` (where `[str]{prefix}` is an icon set prefix).

See [split icon sets packages](./json.md) for more details.

<!--
### Individual icons {#icons}

There are also packages for each icon set `[npm]@iconify-icons/{prefix}`, where each icon is stored in a separate file `[npm]@iconify-icons/{prefix}/{name}` (where `[str]{prefix}` is icon set prefix, `[str]{name}` is icon name) in `[type]IconifyIcon` format.

This makes it easy to bundle data for individual icons or load them from a server one icon at a time.

See [individual icon packages](./icons.md) for details.
-->

### API

[Iconify API](../api/index.md) is very different from all other sources.

Other sources are various packages you can use during build time. Using them requires knowing which icons you are using, so build tools would extract data only for icons that you need. You cannot use them at run time because they are too big.

API is intended to be used when you don't know which icons you need. [Several icon components](/docs/icon-components/index.md) retrieve icon data from API as needed, then render icon.

<icon-loading-process></icon-loading-process>

There are several downsides of using API to get icon data:

- Requires a visitor to be online. Not usable in offline applications.
- Relies on third party service, though you can host your own Iconify API instances.
- Icon components contain overhead: code that downloads icon data on demand.

API also provides a list of available icon sets and icons, 
which can be used to build applications for browsing and searching icons, such as various plugins and icon pickers.

### SVG

There are no special packages for SVG files, but you can generate them yourself using [Iconify Tools](/docs/libraries/tools/index.md).

In Iconify Tools examples, you can find a [simple script that exports all icons as SVGs](/docs/libraries/tools/examples/export-svg.md).

# icon-set-basics

```yaml
title: 'Getting Started: Icon Sets'
types:
  IconifyJSON: '/docs/types/iconify-json.md'
  IconifyIcon: '/docs/types/iconify-icon.md'
functions:
  getIconData: '/docs/libraries/utils/get-icon-data.md'
  parseIconSet: '/docs/libraries/utils/parse-icon-set.md'
  defaultIconProps: '/docs/libraries/utils/default-icon-props.md'
```

# Icon Sets

What are icon sets?

Icon set is a set of icons, created by the same author or group of authors, published with the same name and license.

## Examples

Several examples of icon sets:

- [Material Design Icons](https://icon-sets.iconify.design/mdi/)
- [Material Design Icons Light](https://icon-sets.iconify.design/mdi-light/)
- [Tabler Icons](https://icon-sets.iconify.design/tabler/)
- [Twitter Emoji](https://icon-sets.iconify.design/twemoji/)

All icons in an icon set must have the following in common:

- Same license. License is per icon set, not per icon.
- Be either monotone or have hardcoded palette. Only one type of icons is stored in one icon set. See [icon basics](./icon-basics.md).

Additionally, icons in open source icon sets have the following in common:

- Icons use the same design principles: grid, padding.
- Icons thematically fit together.

## Format

In Iconify icons are not stored one by one as SVG, they are stored as icon sets in an easy to read custom JSON format, which uses `[type]IconifyJSON` type.

Advantages of using `[type]IconifyJSON` to store icon sets:

- One file per icon set instead of many SVG files.
- Easy to read, supported by all programming languages.
- Stores only content of icon, without `[tag]svg` element. This makes it easy to manipulate icons without parsing XML, add custom attributes to `[tag]svg`, use framework native code to create SVG element in frameworks like React.
- Stores metadata, such as icon set author information, license, categories and themes used to filter icons, used when browsing available icons.
- Prevents duplication with aliases, which support basic transformations: flip and 90/180/270 degrees rotations. For example, instead of designing `[icon]arrow-left`, you can design only `[icon]arrow-right` and create an alias for it with horizontal flip.

## Naming

Each icon set has a prefix. It is unique for each icon set.

Prefix naming rules are the same as icon naming rules: allowed characters are `[str]a-z`, numbers and `[str]-`. Hyphen cannot be used at start or end of name, 2 hyphens in a row `[str]--` are not allowed.

Examples of valid prefixes: `[str]mdi`, `[str]mdi-light`, `[str]fluent-emoji-flat`.

## Functions

To parse icon sets, [Iconify Utils](/docs/libraries/utils/index.md) offers the following functions:

- `[func]parseIconSet()` parses an entire icon set, calling custom function for every icon.
- `[func]getIconData()` extracts data for an icon in `[type]IconifyIcon` format.

To create convert icons to icon sets, use [Iconify Tools](/docs/libraries/tools/index.md).

# icons

```yaml
title: Split Icon Packages
types:
  IconifyIcon: '/docs/types/iconify-icon.md'
  IconifyInfo: '/docs/types/iconify-info.md'
functions:
  exportIconPackage: '/docs/libraries/tools/export/icon-package.md'
```

# Split icon packages

For developer's convenience, [full icon sets package](./all.md) 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.

## Packages

Packages are published as `[npm]@iconify-icons/{prefix}`, where `[str]{prefix}` is icon set prefix.

Packages are automatically generated from [big icon sets package](./all.md) whenever it is updated.

## Contents

Each package contains one icon set, with separate files for each icon (`[str]{name}` is icon name).

Icon data in `[type]IconifyIcon` format looks like this:

```yaml
src: icons/sample.json
copy: false
```

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

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

Example of React component using icon from such package:

```yaml
src: icon-components/common/offline.jsx
```

## Info

Additionally, each package contains default export with information about icon set in `[type]IconifyInfo` format.

Usage:

```js
import mdiLightInfo from '@iconify-icons/mdi';

console.log('Icon set name:', mdiLightInfo.name);
```

## Creating packages

If you want to create a package for your icon set, see `[func]exportIconPackage()` of [Iconify Tools](/docs/libraries/tools/index.md).

## Icon sets list

If you need to get list of available open source icon sets, see [icon sets list package](./collections.md).

# index

```yaml
title: "Getting Started: Icons"
replacements:
  - code: "60,000"
    value: "${counters.icons}"
  - code: "60k"
    value: "${counters.icons-short}"
  - code: "80 icon sets"
    value: "${counters.sets} icon sets"
  - code: "80 open source"
    value: "${counters.sets} open source"
types:
  IconifyJSON: "/docs/types/iconify-json.md"
  IconifyIcon: "/docs/types/iconify-icon.md"
```

# Icons

There are over 60,000 icons available from more than 80 open source icon sets, which you can use in your projects.

This section of Iconify documentation explains:

- Where to get raw data for icons to use in your projects.
- How icons are organised.
- How icons are handled in Iconify (imported, cleaned up, updated).

This section is only about icon data, it does not explain how to use icons in your project,
for that [see different section of documentation](/docs/usage/index.md).

## Icon data {#data}

How icons are organised:

- Icons are grouped in icon sets. Each icon set contains icons from the same source.
- Icon sets are exported in easy to use JSON format, which includes icons and extra metadata.
- All icon sets are stored in one main GitHub repository, also available as NPM packages.

See [how to get icon data](./icon-data.md) for a list of packages and repositories.

You can use that data to create your own components, plugins, generate icons in various formats.

Iconify ecosystem offers [different components and plugins to render icons](/docs/usage/index.md) and [tools to work with icons](/docs/libraries/index.md).

### What makes Iconify different? {#iconify}

What makes Iconify different from other projects that consolidate icons?

- All icon sets are automatically kept up to date.
- Icons are not just dumped as is, they pass strict validation, cleanup and optimisation process to make sure all icons from all icon sets can be used in the same consistent way.
- Icon data is available in easy to use format, encouraging developers to create their own components that render it.

See [icon clean up and validation process](./icon-basics.md) article for more details. It also describes icon naming convention used in Iconify.

## Icon sets

Icons in Iconify are organised in icon sets.

Each icon set has icons from the same author(s) following the same theme.

See [icon set basics](./icon-set-basics.md) for more details.

Icon sets are automatically kept up to date, checking for updates several times a week.

## Custom icons {#custom}

You can also use Iconify with custom icons.

This allows you to reuse components and plugins from Iconify ecosystem with your icons instead of creating your own.

See [building custom icon sets](./custom.md) for details.

## Add an icon set {#add}

If you have created an open source icon set that you want to add to Iconify, please [follow this guide](/docs/articles/add-icon-set/index.md).

# json

```yaml
title: Individual Icon Sets
types:
  IconifyJSON: "/docs/types/iconify-json.md"
  IconifyInfo: "/docs/types/iconify-json-metadata.md"
  IconifyChars: "/docs/types/iconify-json-metadata.md#chars"
  IconifyMetaData: "/docs/types/iconify-json-metadata.md#iconify-categories"
functions:
  exportJSONPackage: "/docs/libraries/tools/export/json-package.md"
  getIconData: "/docs/libraries/utils/get-icon-data.md"
  getIcons: "/docs/libraries/utils/get-icons.md"
```

# Individual icon sets

For developer's convenience, [full icon sets package](./all.md) is also available as smaller packages, one package per icon set.

## Packages

Packages are published as `[npm]@iconify-json/{prefix}`, where `[str]{prefix}` is icon set prefix.

These packages are available only on NPM. They are automatically generated from [big icon sets package](./all.md) whenever it is updated.

## Contents

Unlike full package, where all data for icon set is stored in one file, individual icon sets split data in several files, so you can load only data you need:

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

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

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

Code samples above use JSON modules. It works fine when using bundlers or when using CommonJS. When using ES modules, older versions of Node.js require running script with `[str]--experimental-json-modules` flag.

If you are using older Node.js and cannot import JSON files, you can use `[func]require()`:

```js
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 `[func]exportJSONPackage()` of [Iconify Tools](/docs/libraries/tools/index.md).

## Difference from big icon sets package

In [big icon sets package](./all.md), 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 `[file]icons.json` from multiple small packages because they are smaller.

## Icon sets list

If you need to get list of available open source icon sets, see [icon sets list package](./collections.md).

## Reading data {#tools}

For reading icon sets, you can use:

- [Iconify Utils](/docs/libraries/utils/index.md) for JavaScript.
- [Iconify JSON Tools](https://github.com/iconify/json-tools.php) for PHP (deprecated).

To use icon set packages with Iconify Utils, follow these steps:

- Read icons data. If you are using file system functions that return a string, convert it to `[type]IconifyJSON` object using `[func]JSON.parse()`.
- Extract data. To extract multiple icons, use `[func]getIcons()`, to extract one icon use `[func]getIconData()`. Click function links for code samples.