Iconify

Icon names

Every icon is iconoven: plus the icon name, such as iconoven:bell or iconoven:credit-card. Add -sharp for the sharp corners: iconoven:bell-sharp. Browse the whole set on Iconify. The set is free under the MIT licence.

React

The icon loads from the Iconify API the first time it shows, so there's nothing else to install.

npm i @iconify/react

import { Icon } from "@iconify/react";

<Icon icon="iconoven:bell" width="24" />

Vue and Svelte work the same way, with @iconify/vue and @iconify/svelte.

Any web page

<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>

<iconify-icon icon="iconoven:bell" width="24"></iconify-icon>

Tailwind CSS

The plugin builds the icons into your CSS from the @iconify-json/iconoven package, so nothing loads at run time. Icons take the text colour.

npm i -D @iconify/tailwind4 @iconify-json/iconoven

/* In your CSS */
@import "tailwindcss";
@plugin "@iconify/tailwind4";

<span class="icon-[iconoven--bell] size-6"></span>

Plain SVG

The Iconify API serves any icon as an SVG file:

https://api.iconify.design/iconoven/bell.svg

More styles

Iconify carries the free Stroke style. The Pro styles come from the Pro npm packages.