Iconify documentation

Iconify is the most versatile icon framework. It was originally designed to replace outdated icon fonts with modern SVG framework, while offering ease of use that icon fonts are famous for. Since then Iconify has evolved. It offers more icons than any other solution and various native components for web app frameworks.

This documentation is split into several parts.

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 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.

Iconify offers more than 100 open source icon sets with over 100,000 icons. All icons are pre-processed and stored in IconifyJSON format.

See icons section for list of various packages and formats.

Browse icons to see what is available.

API

In addition to offering open source icon data as packages, Iconify has public API.

API is used to:

Components

Having 100k+ icons is not really helpful without ability to use them in your projects.

There are various ways to use icons:

  • Iconify icon components are available for most popular frameworks: Vue, React, Svelte, etc...
  • Iconify SVG framework makes it easy to use icons in HTML without UI frameworks.
  • Unplugin Icons dynamically generates icon components for many frameworks: Vue, React, Svelte, Solid, etc... and it works with all popular bundlers.
  • UnoCSS with @unocss/preset-icons package allows you to use icons in a stylesheet.
  • Astro Icon component for Astro.

Missing an icon component for UI framework of your choice or want to create your own icon component? See "Libraries" section below. Components listed above use functions from Iconify Utils to generate icons.

In addition to icon components, Icon Finder is in development.

Plugins

In addition to icon data and components, Iconify offers plug-ins for popular software for UI design:

Plugins are based on upcoming Icon Finder and they use Iconify API to search for icons and to dynamically load icon data.

Libraries

Libraries section contains documentation for various tools that are used to develop and maintain Iconify:

  • Iconify Types describes various formats used in Iconify projects.
  • Iconify Tools is a library that can import icons from various sources, process them and export to multiple formats.
  • Iconify Utils is a set of reusable functions for working with icon sets and icon data.