Iconify Updates 2022
All icon components updated
All icon components have been updated!
This release fixes a bug in icon loading function, which could cause Promise instance to hang, if user tries to load icon that does not exist.
New Iconify API software with icon search engine
Iconify API has been rewritten using a modern development process and is now running on Iconify public API servers.
This is a huge release that has been in development for a long time.
API features
The new version is fully open source, written in TypeScript. It can:
- Serve icon data to icon components and dynamically generate SVG.
- Provide a list of icon sets and list of icons.
- Search icons.
- Import icon sets from various sources and automatically keep them up to date without restarting the server (no documentation yet, but code is there).
It is a Node.js HTTP server, does not require installing any additional software. All you need to do is install NPM dependencies, build it, optionally configure it and start server.
API documentation
See Iconify API software documentation.
New documentation includes documentation for API queries, including search engine documentation. Developers can use it to create various projects that allow users to search and select icons, for example, icon pickers for website builders or theme customiers.
Host your own Iconify API with open source icon sets or your own icons! Build applications for searching, browsing and selecting icons, integrate them in various tools! Everything you need is finally available.
If you have any questions, please join discord server or ask them at API source repository.
Icon web component updated
IconifyIcon web component has been updated!
This version fixes few bugs and opens up shadow root for external access, allowing developers to mess with icon content.
New major versions of icon components, utils, tools
After several months of hard work, new major versions of many packages have been released:
- Iconify Icon web component version 1.0.0.
- SVG framework version 3.0.0.
- New major versions of all icon components.
- Iconify Utils version 2.0.0.
- Iconify Types version 2.0.0.
Additionally, a new minor version of Iconify Tools has been published, which uses updated utils and types packages.
What's new:
- In types, new properties for the icon set were added: lastModified that shows last modification time, tags for icon set information that can be used to filter icon sets by tags instead of categories.
- Web component is finally stable. It is intended to replace old SVG framework and framework's specific components. Unlike older icon components, web component works extremely well with server side rendering.
- Alignment properties have been removed from all icon components. Alignment seemed like a good idea a while ago, but in reality it is not used and just bloat package for no reason. If you do use alignment, web component supports preserveAspectRatio property that is passed to <svg>.
- Render modes for icon components, though not all components support it.
- Many internal changes everywhere, designed to improve performance and reduce bundle size.
Next major version of icon components
Big update for icon components!
New web component has been published as a beta version. New major versions of old icon components have been published, using @next tag.
What's new?
- Web component.
- New icon rendering modes.
- Many internal changes, resulting in faster components and smaller bundle size.
Web component
Unlike other icon components, web component renders icon in shadow DOM. This means:
- The icon is separate from the main document, resulting in better performance and shallower DOM tree.
- It works great with server side rendering! All UI frameworks see is <iconify-icon /> tag, actual icon is rendered only in browser independent of the UI framework used.
Web component can be used without any UI framework, performing better than SVG framework.
It can also be used with most UI frameworks:
- Svelte, Vue 2, Vue 3, Ember, Lit (and SSR frameworks that use those frameworks) work with the web component as is, do not require any custom wrappers.
- React can work as is, but with few caveats, such as class instead of className. There is a wrapper for React that allows using className and provides typings: @iconify-icon/react.
- SolidJS currently has issues working with web components and requires custom wrapper. See @iconify-icon/solid.
Rendering modes
Web component and almost all old icon components now support rendering modes. Icon can be rendered as SVG, as SPAN with a background or as SPAN with a mask.
This is mostly done to fix browser issues with SVG animations. If an icon is rendered as SVG, animations do not start until an entire document is loaded, which can be broken by small things like ad or tracker failing to load. If icon is rendered as a background or mask, animations work as expected.
See rendering modes documentation.
Alignment
Older versions of icon components had alignment attributes. They could be used to control alignment of icon content, when both width and height of icon were set and did not match the width/height ratio of icon content. It was basically a wrapper for SVG preserveAspectRatio attribute.
In the new version of the icon components, alignment attributes are no longer supported. They weren't widely used, but they did increase bundle size by a significant amount.
If you do need to use alignment attribute, web component supports preserveAspectRatio attribute, which works exactly as in SVG. So switch to the web component and adjust your code.
Update for Sketch plug-in
New version of Iconify plug-in for Sketch has been published.
This update cleans up animations in icons before importing, allowing icons that use SVG animations to be imported to Sketch.
Download is available on GitHub repository for plug-in.
Twitter and Discord
Support for Iconify is now available on:
- Anthony Fu's discord server in #iconify channel.
- You can find me on Twitter.
Iconify Icon web component
New <iconify-icon /> web component has been released.
See NPM package description for details.
This is a major milestone for the Iconify project. It drastically improves developer experience by proving a modern web component to render icons.
Example usage:
<script src="https://code.iconify.design/iconify-icon/0.0.2/iconify-icon.min.js"></script><iconify-icon icon="material-symbols:account-circle"></iconify-icon>It is as easy to use as the SVG framework, but without extra hassle of watching DOM for placeholders. It also works with any component framework.
Why is it better than existing SVG framework and icon components?
Shadow DOM
Unlike SVG framework and older components, <iconify-icon /> renders icon in shadow DOM. What does it mean? It means the icon is separate from the parent HTML document.
Advantages of using shadow DOM:
- No conflicts with the document's stylesheet.
- Works perfectly with SSR.
Server side rendering is becoming more common. The hydration process can be messy, especially when icons supposed to contain unique ids. This has been a big headache for icon components for a while. With web component, server script simply renders <iconify-icon />, without actual icon code and during hydration frameworks such as React do not check icon content. Which means several things: rendering actual icon on the server side is no longer required, no need to generate unique ids for things like masks, web component can load icon data from API without caring about what framework thinks of it because as far as frameworks are concerned, they only render one simple tag.
Render modes
SVG 2 animations have not been popular, and for a good reason: currently in the browsers, animations do not start until an entire document is loaded. Small things like slow loading ad can prevent animation from working.
How to solve it? It can be solved by rendering icon as background image or as mask image. Background and mask images are not affected by document's timers.
<iconify-icon /> supports several render modes to solve this issue. Icon can be rendered as <svg /> or as <span /> with inline style (article about it will be added soon to documentation).
<span /> is used to render icons with SVG 2 animations. In addition to solving animation delay issue, SVG 2 animations perform much better when used as a background or mask.
However, without animations icons perform better as <svg />, so both modes are supported and can be toggled using mode attribute.
Mode can be toggled by using mode attribute.
SVG Framework and icon components updated
SVG framework and icon components have been updated!
This release includes the following changes:
- Replaced code that used optional chaining introduced in the previous update. Unfortunately, some developers still use outdated build tools that cannot parse modern JavaScript, mostly Vue 2 developers.
- Replaced unnecessary complex function that validated icon sets with a simpler function. This change resulted in smaller bundle size for all icon components. Difference is about 5% - 8%, depending on component.
SVG Framework and icon components updated
SVG framework and icon components have been updated!
This release is mostly internal changes, which do not affect functionality:
- Support for ancient browsers, such as the Internet Explorer, has been dropped.
- Many packages have switched to Vitest for unit testing and Unbuild for building code.
- Fixed bug that caused loadIcon() to not reject Promise instance when icon was not found.
Vue and React components updated
This update addresses the following issues:
- Fixes SSR rendering in the Vue 3 component.
- Fixes imports for offline icon components.
Major icon sets restructuring
Iconify icon sets repository received the biggest update.
Icon sets are updated automatically every few days by an automated script. Until now, the script was using old code that didn't do proper validation. With the release of Iconify Tools 2, it is now possible to properly analyse and validate icons.
Update script has been rewritten, all icon sets have been re-checked, which resulted in a major update of icon sets repository. Every single icon set file was affected.
Additionally, there are few other changes:
Unmaintained icon sets
Icon sets that are no longer maintained by their authors have been moved to new "Archive / Unmaintained" category.
Removed icon sets
15 icon sets were removed.
When Iconify project development started several years ago, there were very few good icon sets. Many icon sets were designed as fonts. Icons in those icon sets were usually very badly designed, alignment was way off, and today they are no longer maintained.
Removed icon sets will not appear on Iconify website and will not show up in search results.
However, icon data is still available on both NPM and API, so anyone using those icons can continue using them without interruption. Icon sets and icons are never removed from Iconify, they are just marked as hidden but continue to be usable.
New icon sets
Several new icon sets were added.
Newly added icon sets include FontAwesome version 6, several icon sets with flags.
Because FontAwesome version 6 redesigned most of the icons, it was added separately from FontAwesome version 5, so both versions are available.
Around.co sponsorship
Huge thanks to Around for sponsoring Iconify plugin for Figma!
Around is an excellent collaboration tool designed for developers. Check them out!.
Working on Iconify is a full time job, and servers cost money, while open source development does not pay, so sponsorships are very welcome. Thanks to Around for reaching out and offering to help out.
You can contribute too! If you are using Iconify in your projects, please consider supporting Iconify.
SVG Framework and icon components updated
SVG framework and icon components have been updated!
This version introduces new function: loadIcon(). It is a simple-to-use function that uses Promise class to load icon data asynchronously.
See SVG framework documentation or icon component documentation for details.
New website
Welcome to the new iconify.design website!
The website has been rebuilt from the ground up. Some parts still require minor updates, but overall it is a massive improvement over the old website.
If you notice any bugs, please open a ticket at Iconify documentation repository.