Developers

Use any icon, by name.

Add IconLi once and write <iconli-icon name="heart">. There are no files to download, upload or keep in sync. Icons render as inline SVG, so they scale with your font and inherit your colour.

These icons are rendered by dist/iconli.js on this page.

Install

From the CDN

Add the script once, ideally just before </body>:

<script src=""></script>

Or self-host

Download iconli.js (about 60 KB gzipped, with all 1,200+ icons included) or get it inside the full ZIP. Then serve it from your own site:

<script src="/js/iconli.js"></script>

Web component

<iconli-icon> works in plain HTML and in every framework.

<iconli-icon name="bell"></iconli-icon>
<iconli-icon name="bell" variant="solid" size="32"></iconli-icon>
<iconli-icon name="bell-duotone" stroke="2" color="#8f7bff" label="Notifications"></iconli-icon>

iconli-icon attributes
Attribute	Default	Description
`name`	—	The icon token, for example `heart` or `heart-solid`. Required.
`variant`	`outline`	`outline`, `solid` or `duotone`. This is ignored if `name` already ends with the variant.
`size`	`1.5em`	A number in pixels, or any CSS length such as `1em` or `2rem`.
`stroke`	`1.5`	Stroke weight, from 0.5 to 3. Solid shapes keep their silhouette.
`color`	`currentColor`	Any CSS colour. Leave it out to inherit the text colour.
`label`	—	An accessible name. Without it, the icon is decorative and hidden from screen readers.

Data attribute

Prefer plain elements? Put data-iconli on any tag. Elements added later, for example by your framework, are picked up automatically.

<i data-iconli="download"></i>
<i data-iconli="rocket-duotone" data-size="28" data-stroke="1.75"></i>
<i data-iconli="crown-solid" data-color="#f2d6a2" data-label="Premium"></i>

JavaScript API

IconLi.svg('wallet-solid', { size: 24, stroke: 1.5, color: '#8f7bff' }); // → '<svg …>'
IconLi.svg('star', { gradient: ['#f2d6a2', '#8f7bff'] });            // gradient fill and stroke
IconLi.get('heart-duotone');   // → { name, style, cat, slug, … } or null
IconLi.tokens();               // → every token name
IconLi.hydrate(container);     // re-scan for data-iconli inside a container

Token names

A token is the icon's name in lowercase with dashes, plus a style suffix: arrow-up-right, credit-card-solid, planet-duotone. You can also download the full list as tokens.json. Search below, then click a result to copy its tag.

Styling

Icons use currentColor, so CSS controls them. The component is display: inline-flex and aligns with surrounding text.

iconli-icon { color: #8f7bff; }
.btn iconli-icon { margin-right: .4em; }
.btn:hover iconli-icon { color: gold; transition: color .3s; }

Icons without a label are rendered with aria-hidden="true", which is right for decorative icons next to text.
Icon-only buttons need a name. Put aria-label on the button, or give the icon a label.
With a label, the SVG gets role="img" and that label as its accessible name.

<button aria-label="Close"><iconli-icon name="close"></iconli-icon></button>

Frameworks

React

// Load iconli.js once (index.html or your layout), then:
export function Icon({ name, ...props }) {
  return <iconli-icon name={name} {...props} />;
}

Vue

Tell Vue that iconli-icon is a custom element: compilerOptions.isCustomElement = (tag) => tag === 'iconli-icon'. Then use <iconli-icon name="heart" /> in templates.

Server-side or static

Call IconLi.svg('name') at build time and inline the markup. The output is plain SVG with no runtime dependency.

Credit

IconLi is free for personal and commercial use under CC BY 4.0. Please include this credit line in your credits, footer, about page or README: