Deploying Iconify API on your own server used to be hard for people not familiar with server management.

To make it easier, now Iconify API includes a deployment script that can be used to set up VPS and deploy API.

It is very easy to use and requires very few steps. All server stuff is automated.

What script does:

• Automatically sets up Node.js and PM2 on server.
• Uploads API files to server.
• Starts API server.

What you need to do:

• Setup a VPS (very easy - just few clicks, docs explain every step).
• Clone Iconify API repository, build it, run deployment script (easy for anyone familiar with Node.js).
• Point your subdomain to VPS IP in Cloudflare or a similar service (very easy).

Additionally, there is a script for updating files on server without reinstalling Node.js and PM2.

See API deployment documentation.

AI powered search is now used on Iconify website and in Iconify plugin for Figma:

• In main search.
• When filtering icons in an icon set.

Old version showed direct keyword matches, which meant if you searched for "settings" and icon was named "cog", you wouldn't find it.

New version shows related matches, making it easy to find icons by related words.

What is the actual "AI" part? I've used AI to generate related keywords for each icon, creating a large database of related words. So actual search is not using AI, which would be expensive, but it is using AI generated data.

Screenshot of searching in an icon set: before (left) and after (right):

Idea is based on the following blog post by Jozef Môstka.

Iconify icon data is once again available in @iconify-icons packages.

These packages have one file per icon in IconifyIcon format.

Why were these packages abandoned? ​

There were several issues with old packages, the biggest one was large number of files.

Some icon sets have tens of thousands of icons, which required huge number of files (two per icon) in one directory. Some file systems used on Windows could not handle it, so packages prevented development of various projects.

Solution ​

New packages have a different structure, where instead of putting all files in one directory, files are grouped by first letter of icon name: data/h/home-outline.js.

Packages use exports field in package.json to map icon names to file locations, which also helps with auto completion in IDE.

So when you write this:

File is actually imported from @iconify-icons/solar/data/c/chat-square-outline.js.

This was not possible several years ago when Node.js just added exports, which was not fully supported by various tools. Today this is possible.

Breaking change ​

New components introduce a breaking change, so version number is bumped to 2.0.0.

Previously, it was possible to import icon data with and without .js extension:

In new version syntax with .js extension will no longer work.

Purpose of packages ​

These packages export raw icon data, which can be used in various custom tools.

These are not icon components or SVGs.

For icon components, check out premade icon components for React, Vue, Svelte and SolidJS.

Iconify has reached a new milestone: over 300k open source icons!

Huge thanks to all developers that release open source icons and maintain them. Most developers don't realise how many amazing open source icon sets exist. You can find icons for almost anything.

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.