GitHub
  1. Icon Monks
  2. Web components

Icons as a web component

One dependency-free <icon-monks> element gives any page access to all 5,518 icons, with no framework required.

Install

npm install @icon-monks/web

// once, anywhere in your app
import '@icon-monks/web';

Use an icon

<icon-monks name="house"></icon-monks>
<icon-monks name="heart" weight="fill" size="32" color="crimson" label="Favorite"></icon-monks>

Attributes

name, weight, size, color, mirrored and label. Icons are hidden from screen readers unless you set label, which becomes the accessible name.

Popular icons

Browse all 5,518 iconsBrowse by category

Frequently asked questions

Does it work in Angular?

Yes. Add CUSTOM_ELEMENTS_SCHEMA to the module or standalone component that uses it, then use the element in templates.

Can I use it in WordPress?

Yes. Load the script once in your theme, then use the element in any block that accepts HTML.

How big is the script?

About 3 KB. Each icon is fetched the first time a page uses it, about 1 KB per icon and weight, and cached. For offline use, import @icon-monks/web/all, which holds every icon up front.

Other platforms