← Back to the icons

About Icon Library

Icon Library is a free tool for picking icons for menus, buttons and interfaces. It gathers four popular sets in one searchable page, so you can compare styles side by side and copy exactly what you need — an SVG ready to paste into HTML, a React component, a PNG, or an emoji.

The icon sets

Lucide: Around 1,900 clean outline icons on a 24×24 grid, drawn with a 2px stroke. A community-maintained fork of Feather, and today the most complete of the outline sets. License: ISC.
Feather: The original minimalist outline set, with about 290 icons. Lucide started from it, so the two match in style and most names. License: MIT.
Bootstrap Icons: Over 2,000 icons from the Bootstrap team, many with outline and filled variants (the -fill names). They are drawn as filled shapes on a 16×16 grid. License: MIT.
Emoji (Unicode): All standard emojis, grouped as in the Unicode standard. Unlike the others, emojis are text: how they look depends on the fonts installed on each device.

How to use it

Choose a set in the Select button. Nothing is downloaded until you do, and each set stays cached while the page is open.
Narrow it down with All categories (you can tick several) and the search field, which matches icon names.
Set the style in the Size, Stroke and Color controls. They apply to everything you copy, download or send to the scratchpad, and the preview follows the stroke and color. Stroke only exists in Lucide and Feather; emojis keep their own colors.
Click an icon to copy its SVG (or the emoji character). Right-click copies the alternative: the icon name for vector sets, or the emoji wrapped in an SVG.
Use the buttons on each card:
- + adds the icon to the scratchpad;
- ⋯ opens downloads (SVG, PNG at the chosen size) and Copy as React component;
- the pencil (all vector sets) opens the icon editor.

The icon editor

The pencil on a card opens the icon on a grid, ready to change. The icon arrives with the size, stroke and color you chose.

Reshape: select a shape in the list or on the grid and drag its points. Curves show their control points, linked by dashed lines; moving a point of the curve brings its controls along.
Move: drag a shape, or use the arrow keys or buttons. Points snap to the grid (1, ½ or ¼ unit, or off).
Transform: rotate 90°, flip, and grow or shrink — the selected shape, or the whole icon when nothing is selected.
Add and remove: new lines, circles, rectangles and curves; hide a shape to see the icon without it, or delete it.
Combine icons: + Icon on top searches Lucide, Feather and Bootstrap and lays another icon over the current one, resized to the same grid and keeping its own style — a filled Bootstrap star can sit inside an outline Lucide heart. Each icon gets a heading in the list that selects it whole, to move, rotate or resize it.
Colors: give each shape, or each icon, its own color and stroke width in the Selected panel. Text color goes back to inheriting the color of the surrounding text; shapes with their own color keep it wherever the icon is pasted.
Save and continue later: Save .ile downloads the project as a .ile file — a small text file that keeps what plain SVG loses: which icon each shape came from, hidden shapes and the name. Open it again with Open .ile, in the editor or next to the search on the main page, or drop the file on the editor. Opening a file while editing can be undone.
Code: the SVG code beside the grid follows every change, and you can also type in it. Previews show the result at 16, 24, 32 and 48 pixels.
Undo and Redo (Ctrl+Z, Ctrl+Y), then copy, download or send the edited icon to the scratchpad. Lucide and Feather icons can also be opened in Lucide Studio, an independent online editor with more advanced tools.

The scratchpad

The Scratchpad tab on the right edge opens a drawer where you can collect icons while you browse. Each icon is added as an HTML comment with its name followed by its SVG, so the result is ready to paste into a project. You can also type freely. Copy all copies everything and Clear empties it. The text is kept in your browser, so it is still there next time.

For AI assistants

AI assistants can create an icon and give it to you as a link that opens it here, in the editor, ready to adjust. The icon travels inside the link itself, after the #, so it is never sent to our server. In the editor, Share link makes the same kind of link for your own project. Instructions for AIs: llms.txt.

Sharing a search

The address bar follows what you are looking at — for example ?set=lucide&q=arrow. Copy the address to share a search or bookmark it.

Frequently asked questions

Why are some emojis flagged “without a design”?

The newest emojis are added to the Unicode standard before operating systems ship fonts that draw them. The page checks whether your system font can draw each emoji and flags the ones it cannot. Avoid those in a menu: your visitors would likely see an empty box. Tick Only those with a design on this machine to hide them.

Should I use emojis or vector icons in my interface?

Vector icons look the same everywhere, inherit the text color and scale cleanly. Emojis are quicker to add but change appearance between Windows, macOS, Android and iOS. For product interfaces, vector icons are usually the safer choice.

Why does copying fail?

Browsers only allow copying to the clipboard on secure pages (https://) or on localhost. If you run your own copy of the site, serve it over HTTPS.

Can I use these icons in commercial projects?

Lucide (ISC), Feather (MIT) and Bootstrap Icons (MIT) allow commercial use; keep their license notice in your project. Emoji designs belong to the font vendors (Microsoft, Apple, Google and others) — copying the emoji character is fine, but check the vendor's terms before using their artwork as images.

Credits

Icons belong to their authors and are used under their licenses: Lucide, Feather, Bootstrap Icons and unicode-emoji-json. Icon Library is created and maintained by André M. Ferreira, and is open source: source code on GitHub.