New version of Iconify icon sets website is now live.

This is a major rewrite, focusing on fixing user experience.

Main changes:

• No more infinite scrolling for icons, which caused many UI issues, icons list uses good old reliable pagination.
• No more overlapping elements, such as tooltips with buttons.
• New code generator.
• Select multiple icons, generate bundles and sprites.

More details about new features later.

This change applies to all SVG + CSS component packages:

• @iconify-vue/* packages for Vue.
• @iconify-svelte/* packages for Svelte.
• @iconify-react/* packages for React.
• @iconify-solid/* packages for SolidJS.

Now it is possible to customise icons using CSS variables, without editing icons.

You can change:

• colors
• stroke width
• opacity

Variables are generated based on icon content (see examples below):

• --svg-color--{color} for colors, where {color} is color value in lower case without "#"
• --svg-stroke-width--{stroke} for stroke width, where {stroke} is original stroke width "px" suffix and without dots
• --svg-opacity--{value} for opacity, where {value} is original value
• --svg-fill-opacity--{value} for fill-opacity, same as above

Variable names are generated from original value in lower case, replacing:

• All characters other than 0-9 and a-z are replaced with dash
• Leading and trailing dashes are removed, except for when value starts with '-' (negative number)

Examples:

• Color "#F80" becomes "f80"
• Stroke width "1.5px" becomes "1-5px"
• Negative number "-0.5" becomes "-0-5"

Usage examples with usable CSS:

Example customising stroke width in Tabler Icons:

Example customising opacity in two tone Google Material Icons:

Example customising opacity in two tone IconaMoon:

Example customising colors in Freehand color icons:

Where to see actual variables used in a specific icon?

Currently the only way is to inspect icon in browser or editor.

Soon you will be able to do that on Iconify icon sets website.

Following a set of Vue, Svelte and React components, new easy to use icon components for SolidJS have been published.

See SVG + CSS for SolidJS for details.

There are over 200 icon component packages, one per icon set:

• @iconify-solid/material-symbols for Material Symbols icons
• @iconify-solid/solar for Solar icons
• @iconify-solid/tabler for Tabler icons

... and so on.

To import an icon component, import default item from @iconify-solid/prefix/icon where "prefix" is icon set prefix, "icon" is icon name.

Example:

These packages will be automatically updated when Iconify icon sets are updated.

Following a set of Vue and Svelte components, new easy to use icon components for React have been published.

See SVG + CSS for React for details.

There are over 200 icon component packages, one per icon set:

• @iconify-react/material-symbols for Material Symbols icons
• @iconify-react/solar for Solar icons
• @iconify-react/tabler for Tabler icons

... and so on.

To import an icon component, import default item from @iconify-react/prefix/icon where "prefix" is icon set prefix, "icon" is icon name.

Example:

These packages will be automatically updated when Iconify icon sets are updated.

New minor versions of several Iconify packages have been published:

• Iconify Utils
• Iconify plugin for Tailwind CSS
• Iconify API

as well as yesterday's release of new major version of Iconify Tools.

Goal of all those releases is the same: reduce number of dependencies. These releases in some cases reduced number of dependencies to less than half of what it used to be.

Today, when developers and NPM packages are becoming targets of malicious attacks, it is more important than ever to stop relying on unnecessary and outdated dependencies.

All packages behave the same as before, changes are only internal.

New major version of Iconify Tools has been published.

Changes:

• Drops support for CommonJS.
• Reduces number of dependencies and size of dependencies.
• Uses new custom parser for XML.

CommonJS support ​

The biggest change is removal of CommonJS support.

Many dependencies no longer support CommonJS, making it impossible to update those dependencies while providing CommonJS support. To keep everything up to date, new version also removes CommonJS support.

If for some reason you still need CommonJS, install version 4:

New XML parser ​

SVG is now parsed by custom parser, which is much smaller than old parser.

That massively reduces bundle size and number of dependencies.

Migration ​

There is nothing to do. Old code should work fine with new version.

Iconify icon sets are updated from multiple sources, but mostly from Git repositories and Figma documents.

Unfortunately, updating from Figma documents is no longer possible.

Figma has introduced heavy rate limiting for API queries, making it impossible to retrieve documents with many SVGs from Figma API.

Affected icon sets ​

How does this affect Iconify?

This will affect updates of existing icon sets that are retrieved from Figma - those icon sets will no longer be maintained.

Usually only major updates are posted here, but this one can potentially be breaking for some users.

Iconify Tools package has been updated, which includes mostly just updates to dependencies and minor fixes, but there is one change that could be breaking: removal of axios as dependency.

If you need to use axios for some reason, you can set it with new setFetch() function:

Announcing a new way of rendering icons: Iconify Unplugin.

What makes it different?

• Unlike other solutions, it splits icons in SVG + CSS. This massively reduces HTML size, while still rendering full SVG.
• Unlike icons on demand, Unplugin Iconify generates icons at build stage, so icons are bundled and rendered instantly.
• Instead of pre-built icon components, components are generated on demand, allowing you to customise components.
• Supports multiple frameworks. Current it supports only Vue, Svelte, React and Preact. More will be added soon.

See GitHub repository.

Short graph of how it works:

Documentation is not ready yet, see readme file in GitHub repository.

If you have used Unplugin Icons package, which Iconify Unplugin is heavily inspired by, Unplugin Icons documentation might be useful. Usage is very similar.

Iconify plugin for Tailwind 4 has been updated.

There are two changes:

• Plugin now supports custom icon sets.
• Fixed square option that was not working in dynamic selectors plugin.

See custom icons in Tailwind 4 documentation.