Iconify Updates 2026
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.
CSS variables in SVG + CSS components
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:
css
svg {
/* replace 2px stroke width with 1.5px */
--svg-stroke-width--2px: 1.5px;
}
Example customising opacity in two tone Google Material Icons:
css
svg {
/* replace 0.3 with 0.5 */
--svg-opacity--0-3: 0.5;
}
Example customising opacity in two tone IconaMoon:
css
svg {
/* replace 0.15 with 0.4 */
--svg-opacity--0-16: 0.4;
}
Example customising colors in Freehand color icons:
css
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.
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:
jsx
function GithubLink() {import GithubIcon from "@iconify-solid/ri/github-line";
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
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:
jsx
function GithubLink() {import GithubIcon from "@iconify-react/ri/github-line";
return (
<a href="https://github.com/iconify">
<GithubIcon height="1em" />
</a>
);
}
These packages will be automatically updated when Iconify icon sets are updated.