Iconify Updates 2026

New milestone 10 Jul

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 Iconify icon sets website 14 May

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.

CSS variables in SVG + CSS components 30 Apr

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:

csssvg {
 /* replace 2px stroke width with 1.5px */
 --svg-stroke-width--2px: 1.5px;
}

Example customising opacity in two tone Google Material Icons:

csssvg {
 /* replace 0.3 with 0.5 */
 --svg-opacity--0-3: 0.5;
}

Example customising opacity in two tone IconaMoon:

csssvg {
 /* replace 0.15 with 0.4 */
 --svg-opacity--0-16: 0.4;
}

Example customising colors in Freehand color icons:

csssvg {
 /* replace blue color */
 --svg-color--0c6fff: red;
 /* replace black color */
 --svg-color--020202: currentColor;
}

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.

SVG + CSS components for SolidJS 6 Mar

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:

jsximport GithubIcon from "@iconify-solid/ri/github-line";

function GithubLink() {
 return (
   <a href="https://github.com/iconify">
     <GithubIcon height="1em" />
   </a>
 );
}

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

SVG + CSS components for React 4 Mar

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:

jsximport GithubIcon from "@iconify-react/ri/github-line";

function GithubLink() {
 return (
   <a href="https://github.com/iconify">
     <GithubIcon height="1em" />
   </a>
 );
}

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