Iconify is the most versatile icon framework.
- Unified icon framework that can be used with any icon library.
- Out of the box includes 100+ icon sets with more than 100,000 icons.
- Embed icons in HTML with SVG framework 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/.
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.
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.
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 100,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.
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!
There are several types of packages, split in their own directories.
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 various icon components.
- API redundancy - library for managing redundancies for loading data from API: handling timeouts, rotating hosts.
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.
Directory iconify-icon-demo
contains demo packages that show usage of iconify-icon
web component.
- Ember demo - demo using web component with Ember. Run
npm run build
to build demo andnpm run start
to start it. - 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.
When using web component with Nuxt 3, you need to tell Nuxt that iconify-icon
is a custom element. Otherwise it will show few errors.
Example nuxt.config.ts
:
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'iconify-icon',
},
},
});
This configuration change is not needed when using Vue with @vitejs/plugin-vue
.
Directory components
contains Iconify icon components and SVG framework.
Package | Usage |
---|---|
SVG Framework | HTML |
React component | React |
Vue 3 component | Vue 3 |
Vue 2 component | Vue 2 |
Svelte component | Svelte |
Ember component | Ember |
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 3 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.
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 3 demo - demo for Vue 3 component. Run
npm run dev
to start demo. - Nuxt 3 demo - demo for Vue 3 component with Nuxt. Run
npm run dev
to start demo. - Vue 2 demo - demo for Vue 2 component. Run
npm run build
to build demo andnpm run serve
to start it. - Svelte demo - demo for Svelte component. Run
npm run dev
to start demo. - Svelte demo with Vite - demo for Svelte component using Vite. Run
npm run dev
to start demo. - Sapper demo - demo for Sapper, using Svelte component on the server and in the browser. Run
npm run dev
to start the demo (deprecated, use SvelteKit instead of Sapper). - SvelteKit demo - demo for SvelteKit, using Svelte component on the server and in the browser. Run
npm run dev
to start the demo. - Ember demo - demo for Ember component. Run
npm run build
to build demo andnpm run start
to start it.
See CONTRIBUTING.md.
Documentation for all packages is available on Iconify documentation website:
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 some kind of open-source or free licence.
Ā© 2020 - 2022 Vjacheslav Trushkin / Iconify OĆ