Three styles, one silhouette.
Outline for interfaces, solid for active states, duotone for warmth. The shape stays identical across styles, so switching never shifts your layout.
Free Personal & commercial use · credit required
Icons, crafted like jewellery.
IconLi is a premium icon library drawn on a precise 24px grid. Every glyph comes in outline, solid and duotone. Customise it in the browser, copy it in a click, or drop it into any site by name.
- —Icons
- —Categories
- 3Styles
- 24pxGrid
Why IconLi
Every detail, considered.
IconLi started as a hand-drawn Signature set in Figma and grew into a full system. One set of rules keeps every icon consistent, whether you take one icon or the whole library.
Pixel-honest 24px grid.
A 2px safe area, a 1.5px stroke, and round caps and joins. Objects sit at 19–20px and glyphs at 12px, so every icon carries the same optical weight.
Customise live.
Set size, stroke weight, colour, gradient, background, corner radius and padding, and preview every change instantly.
Copy anything.
Copy SVG, JSX or a PNG straight to your clipboard. You can also download SVG or PNG at any size, from 12px to 512px.
Use by name.
Add one script, then write <iconli-icon name="heart">. No downloading and no uploading assets. Icons inherit your text colour.
A Signature set at its heart.
About 380 originals were drawn by hand in Figma, and they are marked with a gold dot. Every new icon is measured and checked against them, so the library reads as a single hand.
Accessible by default.
Decorative icons are hidden from screen readers automatically. Add a label and an icon is announced as an image. Everything works with a keyboard and respects reduced motion.
Playground
Feel the difference.
Switch styles, change the stroke and try a colour. This is how the whole library responds.
Categories
From interface to the stars.
24 categories, organised the way designers think. Pick one to open it in the library.
For developers
One script. Every icon.
Add the IconLi library once and use any icon by its token name, such as heart, heart-solid or heart-duotone. Icons render as crisp inline SVG, scale with your font, and take your CSS colour.
<!-- 1. Add once, before </body> --> <script src=""></script> <!-- 2. Use any icon by name --> <iconli-icon name="heart"></iconli-icon> <iconli-icon name="rocket" variant="duotone" size="32"></iconli-icon> <iconli-icon name="crown-solid" color="#f2d6a2" label="Premium"></iconli-icon>
<i data-iconli="bell"></i> <i data-iconli="planet-duotone" data-size="28"></i> <button><i data-iconli="download"></i> Download</button>
// Get an SVG string anywhere: React, Vue, Svelte, server templates… const svg = IconLi.svg('wallet-solid', { size: 24, stroke: 1.5, color: '#8f7bff' }); document.querySelector('#pay').innerHTML = svg; IconLi.tokens(); // → ['home', 'home-solid', 'home-duotone', …]
Live result
Download
The complete library, in one ZIP.
Choose styles and formats. SVGs use currentColor, so they inherit your text colour. The ZIP also includes iconli.js and the token list.
License
Free forever. Just say thanks.
IconLi is released under CC BY 4.0.
- Use it in websites, apps, products, client work, print and merchandise.
- Modify, recolour and remix it, for personal or commercial use, with no fees.
- Don't resell it as your own icon set.
- Credit is required, in your credits, footer, about page or README.
FAQ
Good questions.
Is IconLi really free for commercial work?
Yes. Personal and commercial use are both free under CC BY 4.0. The one requirement is a visible credit, for example in your footer, credits screen or README.
How do I credit IconLi?
Copy this line: . Put it wherever you list third-party resources.
Do I have to download icons to use them?
No. Add the IconLi script once and write <iconli-icon name="heart">. If you prefer files, the icons page lets you copy SVG, JSX or PNG, and the ZIP has everything.
Can I change colours and stroke weight?
Yes. Icons use currentColor, so they follow your CSS. In the browser you can also set any colour, a gradient, a stroke from 0.5 to 3px, a background, corner radius and padding.
Will it work with React, Vue or Svelte?
Yes. <iconli-icon> is a standard web component that works in any framework, and IconLi.svg('name') returns SVG markup you can render anywhere.
Can I request an icon?
Absolutely. The library grows one category at a time. Tell the author what you need and it may land in the next drop.