Iconify News https://iconify.design/ All popular icon sets, one framework Fri, 10 Jul 2026 06:32:47 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Iconify News https://iconify.design/assets/og/iconify.png https://iconify.design/ Copyright © 2020-PRESENT Iconify OÜ <![CDATA[New milestone]]> https://iconify.design/news/2026.html#new-milestone https://iconify.design/news/2026.html#new-milestone Fri, 10 Jul 2026 00:00:00 GMT New milestone ​

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.

]]> <![CDATA[New Iconify icon sets website]]> https://iconify.design/news/2026.html#icon-sets-website https://iconify.design/news/2026.html#icon-sets-website Thu, 14 May 2026 00:00:00 GMT New Iconify icon sets website ​

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.

]]> <![CDATA[CSS variables in SVG + CSS components]]> https://iconify.design/news/2026.html#svg-css-vars https://iconify.design/news/2026.html#svg-css-vars Thu, 30 Apr 2026 00:00:00 GMT CSS variables in SVG + CSS components ​

This change applies to all SVG + CSS component packages:

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:

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

Example customising opacity in two tone Google Material Icons:

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

Example customising opacity in two tone IconaMoon:

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

Example customising colors in Freehand color icons:

svg {
 /* 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.

]]> <![CDATA[SVG + CSS components for SolidJS]]> https://iconify.design/news/2026.html#svg-css-solid https://iconify.design/news/2026.html#svg-css-solid Fri, 06 Mar 2026 00:00:00 GMT SVG + CSS components for SolidJS ​

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:

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

]]> <![CDATA[SVG + CSS components for React]]> https://iconify.design/news/2026.html#svg-css-react https://iconify.design/news/2026.html#svg-css-react Wed, 04 Mar 2026 00:00:00 GMT SVG + CSS components for React ​

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:

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

]]> <![CDATA[Update for multiple packages]]> https://iconify.design/news/2025.html#update-11 https://iconify.design/news/2025.html#update-11 Fri, 28 Nov 2025 00:00:00 GMT Update for multiple packages ​

New minor versions of several Iconify packages have been published:

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.

]]> <![CDATA[Iconify Tools update]]> https://iconify.design/news/2025.html#tools-5 https://iconify.design/news/2025.html#tools-5 Thu, 27 Nov 2025 00:00:00 GMT Iconify Tools update ​

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:

npm install @iconify/tools@cjs --save

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.

]]> <![CDATA[Figma update]]> https://iconify.design/news/2025.html#figma-api https://iconify.design/news/2025.html#figma-api Wed, 26 Nov 2025 00:00:00 GMT Figma update ​

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.

]]> <![CDATA[Iconify Tools removes axios]]> https://iconify.design/news/2025.html#tools-axios https://iconify.design/news/2025.html#tools-axios Tue, 25 Nov 2025 00:00:00 GMT Iconify Tools removes axios ​

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:

import axios from "axios";
import { setFetch } from "@iconify/tools";

const fetchAxios = axios.create({
 adapter: "fetch",
});

setFetch(fetchAxios);
]]> <![CDATA[Iconify Unplugin]]> https://iconify.design/news/2025.html#unplugin https://iconify.design/news/2025.html#unplugin Tue, 18 Nov 2025 00:00:00 GMT Iconify Unplugin ​

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:

Unplugin Iconify demo

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.

]]>