Iconify

Overview

Iconify is an open-source icon framework that puts over 300,000 vector icons from more than 200 icon sets behind one syntax. Sets include Material Design Icons, Font Awesome, Lucide, Tabler, Phosphor and many others, and every icon can be browsed and copied from the Iconify site.

For shadcn/ui projects, Iconify is a way to use icons beyond the default Lucide set without adding a dependency per icon library. Icons can be rendered through components for React, Vue, Svelte and Solid, a web component, or Tailwind CSS plugins that turn icons into utility classes. The project also maintains Figma, Penpot and Sketch plugins and the Iconify API that serves icon data on demand.

Features

• 300,000+ icons: Over 200 open-source icon sets in one place
• One syntax: Reference any icon as prefix:name, such as mdi:home or lucide:search
• Framework components: React, Vue, Svelte and SolidJS packages
• Tailwind CSS plugins: Use icons as CSS classes in Tailwind CSS 3 and 4
• Icons on demand: The Iconify API loads only the icons a page uses
• Design plugins: Figma, Penpot and Sketch plugins for designers
• Tooling: Iconify Tools and Utils for importing, cleaning and exporting custom icon sets
• MIT licensed: Most packages are MIT; each icon set keeps its own license

Tech stack

• TypeScript
• React, Vue, Svelte, SolidJS components
• Tailwind CSS and UnoCSS plugins

Getting started

npm install @iconify/react