# What is Iconify?
There are many excellent icon sets available. Each icon set has its own custom syntax, some are available only as fonts. Unfortunately, almost all of them load an entire set, even if you are displaying just a few icons. This makes it hard to use different icon sets.
Iconify tries to unify all icon sets. You can use the same code no matter what icon set you choose. You can mix icons from multiple icon sets on the same page.
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 150,000 icons.
- Embed icons in HTML with Iconify icon web component and components for various front-end frameworks.
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
For more information visit [https://iconify.design/](https://iconify.design/).
# IconifyIcon web component
Iconify Icon web component renders icons.
Add this line to your page to load IconifyIcon (you can add it to `` section of the page or before ``):
```html
```
or
```html
```
or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project:
```js
import 'iconify-icon';
```
To add any icon, write something like this:
```html
```
That is it. Change `icon` attribute to the name of the icon you want to use. There are over 150,000 premade icons to choose from, including Material Symbols, Photphor, Remix Icons, Carbon, Unicons, Bootstrap Icons and even several emoji sets.
Do you want to make your own icon sets? Everything you need is [available on GitHub](https://github.com/iconify): tools for creating custom icon sets, Iconify API application and documentation to help you.
## Advantages
What are advantages of using IconifyIcon web component?
Advantages of using Iconify components:
- No need to pre-bundle icons. Pass icon name as parameter, component will load data for icon from public API and render it.
- Huge choice of icons, no icon fonts!
- Easy to style. All monotone icons use font color for color (`currentColor`) and font size for size (height is set to `1em`), making it easy to change color and size.
Main advantage of web component over other implementations is shadow DOM. Using shadow DOM instead of inlining SVG has the following advantages:
- Document's styles do not affect content of shadow DOM, so there are no conflicting styles.
- HTML served from server does not contain long code for icons. It only contains `` tags, which reduces document size. Frameworks that use SSR and hydration, using web component for icons means same HTML code generated on server and rendered in client, preventing potential hydration errors. Actual icon code is hidden in shadow DOM.
## Full documentation
Below is a shortened version of documentation.
Full documentation is [available on Iconify documentation website](https://iconify.design/docs/iconify-icon/).
## How does it work?
Iconify icon script registers a web component `iconify-icon`.
Web component uses the following logic to render icon:
1. Retrieves icon name from `icon` attribute.
2. Checks if icon exists. If not, it sends a request to Iconify API to retrieve icon data.
3. Renders icon in shadow DOM in web component.
### Vertical alignment
Usually, icon fonts do not render like normal images, they render like text. Text is aligned slightly below the baseline.
Visual example to show the difference:
You can change that behavior by applying style:
```html
```
Web component also has `inline` attribute that does the same, to make it easier for developers:
```html
```
## Render modes
Web component has several render modes, which can be changed by passing `mode` property:
- `svg`: renders icon as `