Iconify Updates 2024
Customise icon stroke width and remove animations
Iconify icon sets website has been updated.
You can now:
- Change stroke width in icons that use stroke.
- Remove animations from animated SVGs.
Removing animations from SVGs is very helpful if you want to use icons in design tools. Currently, all design tools do not support animated SVGs, importing animated icon usually results in broken or empty icon.
By removing animation for design tool, you can use static icon in your design, but animated icon in HTML.
Iconify Icon 2.0.0
Iconify Icon web component version 2.0.0 has been published.
See Iconify Icon 2.0.0 beta announcement that was published earlier for the list of changes.
Deprecation of old packages
Time has come to deprecate some old packages, which are no longer relevant:
These old icon components are no longer updated, their source code has been archived:
- Vue 2 (Vue 3 was released a long time ago, no point in supporting the old version)
- Ember (Ember framework is outdated)
- SVG Framework (the oldest of components, has been replaced by the IconifyIcon web component)
You can still use them in your old projects, but should consider updating to modern alternatives, such as web component.
Customise speed of animated SVGs
Iconify icon sets website has been updated.
You can now change the animation speed of animated SVGs.
It is not a full editor (yet), you can only multiply animation duration values to slow down animations or speed them up.
You can use it with any animated icon, such as icons from:
Iconify Icon 2.0.0-beta.1
Iconify Icon web component version 2.0.0 beta 1 has been published.
This release offers massive improvements in SVG performance: it usesto check if icon is visible to the current visitor, rendering icon only when visible.
As a nice side effect, icons that have fade in animation start animating when it appears in viewport.
New version is used on this website and new Iconify icon sets website.
To install beta version, usetag:
npm install --save iconify-icon@next
New "observe" property
You can change observer behavior by changing observe attribute.
By default, it is enabled. To disable it, set observe to "false".
<iconify-icon icon="mdi:home" observe="false"></iconify-icon>
In an instance of observe property to set/get boolean value.you can use
New website for browsing icons
After many months of hard work, Iconify icon sets website has been fully rebuilt.
New icon sets website is now live. It is now powered by Nuxt!
What is new?
- Advanced filters for icon sets.
- Infinite smart scrolling for icons, showing as many icons as can fit in your browser window.
- Better code samples for icons in various formats.
- You can customise all colors in icons. If an icon has semi-transparent elements, you can customise opacity.
- Dark/light mode, which is useful when browsing icons with hardcoded colors.
More details and screenshots:
Infinite smart scrolling for icons
When browsing any icon set or searching for icons, icons take all available browser space. To show more or less icons, all you have to do is resize your browser window.
You no longer need to click pagination to see more icons, all you have to do is scroll. However, pagination is still available if you, for example, want to quickly go to the last page.
When browsing search results, icon have useful hints, showing icon size and icon set license.
License is not shown when browsing an icon set, it is available above icons in icon set information.
You can now filter icon sets by license, grid, palette.
If you filter icon sets, search has an option to search icons only in icon sets that are visible.
Better code samples
Code samples for icon have been improved.
You can now copy or download code samples for many formats and packages.
Iconify icon components
Old website showed samples for Iconify icon components, new website focuses on full components that you can add to your applications without extra dependencies.
While Iconify icon components are very convenient, they load icon data from API, which costs a lot of money to run, which currently GitHub sponsorships do not cover. Not even close. Therefore, it is better to encourage use of alternative solutions that do not rely on API.
Additionally, if you customise icon, such as change opacity or hardcoded color, Iconify icon components do not have code to do that on demand.
Code samples for Iconify icon components are also still available.
Customise colors and opacity
You can now have more options for customising icon code:
- You can change any color in any icon, not only currentColor.
- Opacity in icons that have transparent elements.
Copy icon name
If all you need is icon name to use in your project, for example, for Iconify icon component or for class name in UnoCSS or Tailwind CSS, you can now choose format of icon name.
Button to copy icon name to clipboard is next to icon name dropdown.
All changes are stored in browser storage, so you do not need to change settings more than once.
Designed for the future
The best part about the new rebuild is, new code is fully reusable.
This code base will be used to:
- Update Iconify plugin for Figma.
- Create new plugins for various design and development software.