iconify

Iconify is a versatile icon framework that unifies icon usage across any icon library. It includes over 200 icon sets with more than 250,000 icons out of the box. The framework allows embedding icons in HTML via the Iconify Icon web component or through components for various front-end frameworks, and it supports design tools like Figma, Sketch, and Adobe XD with plugins. Additionally, it offers Iconify Icon Finder for adding icon search functionality to applications.

The project is structured into multiple parts, with this repository containing reusable packages, the iconify-icon web component (and its framework wrappers), and native components for frameworks like React, Vue, and Svelte. Iconify components load icon data on-demand from the Iconify API, which hosts data for over 200,000 open-source icons with global redundancy for reliability.

Key Components:

• Iconify Icon Components: Render icons by name using the Iconify API, available as a web component or native framework components.
• CSS Icon Components: Render SVG with CSS, using the API as a fallback for Safari.

Framework Support:

• The iconify-icon web component works with many frameworks, including Svelte, without custom wrappers. Wrappers are provided for React and SolidJS to address framework-specific nuances.
• Native components are available for React, Vue, and Svelte, but the web component is recommended for better interoperability, SSR compatibility, and unified usage across frameworks.

Packages:

• Core utilities and types in the packages directory support icon components and other Iconify projects.
• The iconify-icon directory houses the web component and its wrappers.
• Plugins, such as for Tailwind CSS, are included but some have moved to separate repositories.

Deprecation Note: Native components in the components directory are being phased out in favor of the iconify-icon web component, which offers advantages like consistent event handling and improved SSR.

For more details, visit the Iconify documentation.