iconify
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!
Top Related Projects
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
The iconic SVG, font, and CSS toolkit
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Material Design icons by Google (Material Symbols)
Quick Overview
Iconify is a unified icon framework and a massive icon library. It provides a single interface to over 150,000 open-source icons from various icon sets, allowing developers to use icons from different sources in their projects with a consistent API.
Pros
- Huge collection of icons from multiple sources
- Consistent API for using icons across different frameworks and platforms
- Lightweight and optimized for performance
- Supports custom SVG frameworks and icon sets
Cons
- Learning curve for developers new to the Iconify ecosystem
- Dependency on external services for icon loading (can be mitigated with self-hosting)
- May require additional setup for some frameworks or build systems
Code Examples
- Using Iconify with React:
import { Icon } from '@iconify/react';
function MyComponent() {
return <Icon icon="mdi:home" />;
}
- Using Iconify with Vue:
<template>
<Icon icon="fa:user" />
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon
}
}
</script>
- Using Iconify with vanilla JavaScript:
import { addIcon, loadIcon } from '@iconify/iconify';
// Add a custom icon
addIcon('my-icon', {
body: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
width: 24,
height: 24
});
// Load an icon from Iconify API
loadIcon('mdi:account').then(svg => {
document.body.innerHTML += svg;
});
Getting Started
To use Iconify in your project, first install the appropriate package for your framework:
# For React
npm install @iconify/react
# For Vue
npm install @iconify/vue
# For vanilla JavaScript
npm install @iconify/iconify
Then, import and use the Icon component in your code as shown in the examples above. For more detailed instructions and advanced usage, refer to the official Iconify documentation.
Competitor Comparisons
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- Focused collection of high-quality, consistent SVG icons
- Simpler integration for projects not requiring extensive icon sets
- Easier to browse and select icons visually on the project website
Cons of Tabler Icons
- Limited to a single icon set, less versatile for projects needing diverse styles
- Fewer customization options compared to Iconify's extensive API
- May require more manual management for icon updates and additions
Code Comparison
Tabler Icons usage:
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
Iconify usage:
<span class="iconify" data-icon="tabler:user"></span>
The Iconify approach offers a more concise implementation, leveraging its extensive icon management system. Tabler Icons provides direct SVG markup, allowing for easier customization but requiring more verbose code.
Simply beautiful open-source icons
Pros of Feather
- Simple and lightweight icon set with a consistent, minimalist design
- Easy to use and integrate with various frameworks and tools
- Smaller file size and faster loading times for individual icons
Cons of Feather
- Limited icon selection compared to Iconify's vast library
- Less flexibility in customization and icon variations
- Requires manual updates to get new icons or modifications
Code Comparison
Feather:
<script src="https://unpkg.com/feather-icons"></script>
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
Iconify:
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
<span class="iconify" data-icon="feather:circle"></span>
Feather provides a more straightforward implementation for its own icons, while Iconify offers a unified approach to using icons from multiple sets, including Feather icons. Iconify's syntax is slightly more concise but requires familiarity with its data-icon attribute format.
Iconify offers a significantly larger icon library and more advanced features like on-demand loading and easy icon customization. However, Feather excels in simplicity and consistency, making it a good choice for projects that prioritize a cohesive, minimalist design and don't require an extensive icon set.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Specifically designed for GitHub's UI, ensuring consistency with the platform
- Includes SVG and React versions of icons, catering to different development needs
- Smaller, more focused set of icons, potentially easier to navigate
Cons of Octicons
- Limited icon set compared to Iconify's vast collection
- Less flexibility in terms of icon customization and framework support
- Primarily tailored for GitHub-related projects, which may limit its use in other contexts
Code Comparison
Octicons (React):
import { MarkGithubIcon } from '@primer/octicons-react'
function App() {
return <MarkGithubIcon size={24} />
}
Iconify:
import { Icon } from '@iconify/react'
function App() {
return <Icon icon="mdi:github" width="24" />
}
Both libraries offer simple ways to include icons in React applications. Octicons provides specific icon components, while Iconify uses a generic Icon
component with a string identifier for the desired icon. Iconify's approach allows for easier switching between different icon sets without changing the component structure.
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Well-established and widely recognized icon library
- Extensive documentation and community support
- Includes both free and paid (Pro) versions with additional icons
Cons of Font-Awesome
- Limited to a single icon set
- Larger file size when using the entire library
- Less flexibility in customization compared to Iconify
Code Comparison
Font-Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-user"></i>
Iconify:
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
<span class="iconify" data-icon="fa-solid:user"></span>
Key Differences
- Icon Set Variety: Iconify provides access to multiple icon sets, while Font-Awesome focuses on its own set.
- Loading Method: Font-Awesome typically loads entire CSS files, whereas Iconify loads icons on-demand.
- Customization: Iconify offers more flexibility in icon customization and mixing different icon sets.
- File Size: Iconify can result in smaller file sizes due to its on-demand loading approach.
- Integration: Font-Awesome is easier to integrate with traditional CSS workflows, while Iconify requires a JavaScript component.
Both libraries have their strengths, and the choice between them depends on specific project requirements, such as icon variety needs, performance considerations, and integration preferences.
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- Specifically designed for Ionic Framework, ensuring seamless integration
- Includes both iOS and Material Design style icons
- Offers a custom SVG icon system for easy customization
Cons of Ionicons
- Limited to around 1,200 icons, which may not cover all use cases
- Primarily focused on mobile app development, potentially less suitable for web projects
- Requires additional setup for non-Ionic projects
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Iconify usage:
<span class="iconify" data-icon="ion:heart"></span>
Key Differences
- Iconify offers a much larger collection of icons (100,000+) from various icon sets
- Iconify provides a unified API for multiple icon libraries, while Ionicons is a single library
- Iconify allows for more flexible usage across different frameworks and platforms
- Ionicons is more tightly integrated with the Ionic ecosystem
- Iconify requires an additional JavaScript file, while Ionicons can be used with just CSS in some cases
Both libraries offer SVG-based icons and support for custom icons, but Iconify's approach is more versatile for projects outside the Ionic framework.
Material Design icons by Google (Material Symbols)
Pros of Material Design Icons
- Official Google design system, ensuring consistency with Android and other Google products
- High-quality, professionally designed icons with a cohesive style
- Regular updates and additions to the icon set
Cons of Material Design Icons
- Limited to a single icon set, lacking variety in styles and themes
- Larger file size when using the entire icon set, potentially impacting performance
- Less flexibility in customization compared to Iconify's diverse icon sets
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>
Iconify:
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<span class="iconify" data-icon="mdi:face"></span>
Summary
Material Design Icons provides a high-quality, consistent icon set that aligns well with Google's design language. However, it lacks the flexibility and variety offered by Iconify. Iconify supports multiple icon sets, including Material Design Icons, giving developers more options and customization possibilities. While Material Design Icons is excellent for projects closely following Google's design guidelines, Iconify may be more suitable for projects requiring diverse icon styles or cross-platform consistency.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Iconify is the most versatile icon framework.
- Unified icon framework that can be used with any icon library.
- Out of the box includes 150+ icon sets with more than 200,000 icons.
- Embed icons in HTML with Iconify Icon web component or components for front-end frameworks.
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
- Add icon search to your applications with Iconify Icon Finder.
For more information visit https://iconify.design/.
Iconify parts
There are several parts of project, some are in this repository, some are in other repositories.
What is included in this repository?
- Directory
packages
contains main reusable packages: types, utilities, reusable functions used by various components. - Directory
iconify-icon
containsiconify-icon
web component that renders icons. It also contains wrappers for various frameworks that cannot handle web components. - Directory
components
contains older version of icon components that are native to various frameworks, which do not use web component. - Directory
plugins
contains plugins for various frameworks, which generate icons.
Other repositories you might want to look at:
- Data for all icons is available in
iconify/icon-sets
repository. - Tools for parsing icons and generating icon sets are available in
iconify/tools
repository.
Iconify icon components
Main packages in this repository are various icon components.
Why are those icon components needed? Iconify icon components are not just yet another set of icon components. Unlike other icon components, Iconify icon components do not include icon data. Instead, icon data is loaded on demand from Iconify API.
Iconify API provides data for over 200,000 open source icons! API is hosted on publicly available servers, spread out geographically to make sure visitors from all over the world have the fastest possible connection with redundancies in place to make sure it is always online.
Why is API needed?
When you use an icon font, each visitor loads an entire font, even if your page only uses a few icons. This is a major downside of using icon fonts. That limits developers to one or two fonts or icon sets.
If you are using typical icon set that is not a font, you still need to bundle all icons used in your application, even ones that visitor does not need.
Unlike icon fonts and components for various icon sets, Iconify icon components dynamically load icon data from Iconify API whenever it is needed.
This makes it possible to have an unlimited choice of icons!
Packages in this repository
There are several types of packages, split in their own directories.
Main packages
Directory packages
contains main packages that are reusable by all other packages in this repository as well as third party components.
Main packages:
- Iconify types - TypeScript types.
- Iconify utils - common files used by various Iconify projects (including tools, API, etc...).
- Iconify core - common files used by icon components and plugins.
- API redundancy - library for managing redundancies for loading data from API: handling timeouts, rotating hosts. It provides fallback for loading icons if main API host is unreachable.
Web component
Directory iconify-icon
contains iconify-icon
web component and wrappers for various frameworks.
Package | Usage |
---|---|
Web component | Everywhere |
React wrapper | React |
SolidJS wrapper | SolidJS |
Frameworks that are confirmed to work with web components without custom wrappers:
- Svelte.
- Lit.
- Ember.
- Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).
- React, but with small differences, such as using
class
instead ofclassName
. Wrapper fixes it and provides types.
Demo
Directory iconify-icon-demo
contains demo packages that show usage of iconify-icon
web component.
- React demo - demo using web component with React. Run
npm run dev
to start demo. - Next.js demo - demo for web component with Next.js. Run
npm run dev
to start demo. - Svelte demo with Vite - demo for web component with Svelte using Vite. Run
npm run dev
to start demo. - SvelteKit demo - demo for web component with SvelteKit. Run
npm run dev
to start the demo. - Vue 3 demo - demo for web component with Vue 3. Run
npm run dev
to start demo. - Nuxt 3 demo - demo for web component with Nuxt 3. Run
npm run dev
to start demo. Requires custom config, see below. - Vue 2 demo - demo for web component with Vue 2. Run
npm run build
to build demo andnpm run serve
to start it. - SolidJS demo - demo using web component with SolidJS. Run
npm run dev
to start demo. - Lit demo - demo for web component with Lit. Run
npm run start
to start demo.
Nuxt 3 usage
When using web component with Nuxt 3, you need to tell Nuxt that iconify-icon
is a custom element. Otherwise it will show few warnings in dev mode.
Example nuxt.config.ts
:
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'iconify-icon',
},
},
});
This configuration change is not needed when using Vue with @vitejs/plugin-vue
.
Iconify icon components
Directory components
contains native components for several frameworks:
Package | Usage |
---|---|
React component | React |
Vue component | Vue |
Svelte component | Svelte |
Deprecation notice
Components in directory components
are slowly phased out in favor of iconify-icon
web component. Components are still maintained and supported, but it is better to switch to web component.
Functionality is identical, but web component has some advantages:
- No framework specific shenanigans. Events and attributes are supported for all frameworks.
- Works better with SSR (icon is rendered only in browser, but because icon is contained in shadow DOM, it does not cause hydration problems).
- Better interoperability. All parts of applicaiton reuse same web component, even if those parts are written in different frameworks.
Deprecation status:
- SVG Framework: can be replaced with
iconify-icon
. - React component: can be replaced with
iconify-icon
using@iconify-icon/react
wrapper. - Svelte component: can be replaced with
iconify-icon
, does not require Svelte specific wrapper. - Vue 3 component: can be replaced with
iconify-icon
, does not require Vue specific wrapper. - Vue 2 component: can be replaced with
iconify-icon
, does not require Vue specific wrapper. Make sure you are not using Webpack older than version 5. - Ember component: can be replaced with
iconify-icon
, does not require Ember specific wrapper.
To import web component, just import it once in your script, as per iconify-icon
README file.
Demo
Directory components-demo
contains demo packages that show usage of icon components.
- React demo - demo for React component. Run
npm run dev
to start demo. - Next.js demo - demo for React component with Next.js. Run
npm run dev
to start demo. - Vue demo - demo for Vue component. Run
npm run dev
to start demo. - Nuxt demo - demo for Vue component with Nuxt. Run
npm run dev
to start demo. - Svelte demo with Vite - demo for Svelte component using Vite. Run
npm run dev
to start demo. - SvelteKit demo - demo for SvelteKit, using Svelte component on the server and in the browser. Run
npm run dev
to start the demo.
Plugins
Directory plugins
contains plugins.
Package | Usage |
---|---|
Tailwind CSS plugin | Tailwind CSS |
Demo
Directory plugins-demo
contains demo packages that show usage of plugins.
- Tailwind demo - demo for Tailwind CSS plugin. Run
npm run build
to build demo, opensrc/index.html
in browser to see result.
Installation, debugging and contributing
See CONTRIBUTING.md.
Sponsors
Documentation
Documentation for all packages is available on Iconify documentation website:
- Types documentation.
- Utilities documentation.
- Icon components documentation.
- Tailwind CSS plugin documentation.
Licence
Iconify is licensed under MIT license.
SPDX-License-Identifier: MIT
Some packages of this monorepo in previous versions were dual-licensed under Apache 2.0 and GPL 2.0 licence, which was messy and confusing. This was later changed to MIT for simplicity.
This licence does not apply to icons. Icons are released under different licences, see each icon set for details. Icons available by default are all licensed under various open-source licences.
© 2020-PRESENT Vjacheslav Trushkin
Top Related Projects
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
The iconic SVG, font, and CSS toolkit
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Material Design icons by Google (Material Symbols)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot