Available icons

Iconify can work with any icon set.

By default, Iconify offers more than 100 open source icon sets with over 100,000 icons. All icons are validated, cleaned up, optimised and ready for use. See icon sets list.

Submit icon set

If you have created an icon set, please consider sharing it with Iconify community.

Streamlining icons

There is no standard for designing or publishing icons. Each icon set is different. Some use stroke for colors, some use fill. Some use currentColor, some use black color, some use hardcoded palette. Usually icons contain a lot of unnecessary code. Every icon set has its own way of using icons.

Iconify attempts to streamline that, by parsing icons and converting them to the same easy to use format.

All icons available with Iconify are pre-processed:

  • Icons without hardcoded palette use "currentColor" for color. That makes it easy to style all icons, regardless of what method it uses, by changing color in style.
  • All icons are cleaned up and optimised, so they do not contain unnecessary code.
  • All icons are validated to make sure there are no scripts, raster images or fonts.
  • All icon names are streamlined to use similar naming scheme. Allowed characters are "a-z", numbers and "-".

All icon sets are stored in IconifyJSON format.

See how icons are processed for more details and code examples.

Sources

All icon sets are stored in one public GitHub repository.

GitHub repository is the main source of icon sets, automatically updated several times a week.

Contents of GitHub repository are also available as:

  • NPM package @iconify/json for Node.js developers.
  • Packagist package iconify/json for PHP developers.

See full icon sets packages.

Repository and packages are quite large. Smaller packages with one icon set per package are available on NPM:

Individual icon sets

Each icon set is also published as a separate NPM package @iconify-json/{prefix} (where "{prefix}" is icon set prefix), where an entire icon set is stored in one file in IconifyJSON format.

See split icon sets packages.

Individual icons

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

This makes it easy to bundle data for individual icons.

See individual icon packages.

Icon set list

Additionally, list of available icon sets is available as NPM package @iconify/collections.

See icon sets list.

API

In addition to various packages, icon data is available on public Iconify API, which can be used by anyone.

Iconify API provides:

API sends data for icons on demand. Loading icons on demand has big advantages over other methods:

  • No need to pre-package icons. Icons are loaded dynamically when needed. That makes it very easy to use.
  • Only the icons used on web pages are loaded. No need to waste bandwidth on loading icons that are not displayed.

Disadvantage of using API is API must be reachable. This means your applications must have access to internet. If you need to use icons offline, use one of other methods.

By default, using API means relying on third party service. However, API software is open source, which means you can host your own API on your servers. That allows you to have full control over servers instead of relying on third party service.

What to use?

With so many options, what to use?

If you want to load icon data on demand, best option is to use Iconify API.

If you are using data to generate on server side or when bundling your application, best choice is full icon sets packages. However, if you are using only few icon sets, using split icon sets packages might be a better idea.

If you need data for only few icons without retrieving it from API, use individual icon packages.

Bundled icons

It is also worth mentioning icon bundles.

Icon bundles are sets of icon data used by icon components, similar to individual icon sets mentioned above. When generating icon bundle, you can filter icons you want to use and bundle them with icon component.

This requires a bit of coding.

Custom icons

You can use Iconify with any icons.

All default icon sets are open source, but you are not limited to open source icons. You can use Iconify with custom icons, with premium icon sets.

Iconify offers various tools for importing, manipulating and exporting icon sets. You can generate custom icon packages from sets of SVG files, from Figma documents.

There are several examples showing how to import some popular icon sets, such as FontAwesome Pro.