# Icon Library

> Free tool to browse, customize and edit SVG icons from Lucide, Feather, Bootstrap Icons and Emoji, with a visual icon editor. AI assistants can create an icon and hand it to the user as a link that opens it in the editor, ready to adjust, copy or download. Everything runs in the user's browser; nothing you put in the link is sent to the server.

Site: https://iconlibrary.io — guide: https://iconlibrary.io/about.html — project format schema: https://iconlibrary.io/schema/ile.schema.json

## Give the user an icon as a link

When a user asks you for an icon, answer with the SVG code and also with a link that opens it in the editor. Two link forms are accepted. The icon goes after `#`, and `svg=` / `ile=` must be the last parameter.

### 1. A single SVG (simplest)

```
https://iconlibrary.io/#name=<icon name>&svg=<URL-encoded SVG>
```

Encode the SVG as with JavaScript's `encodeURIComponent` (`<` → `%3C`, `"` → `%22`, space → `%20`, `#` → `%23`…). Base64url of the SVG is also accepted.

Example — a minimal "plus in a circle":

```
https://iconlibrary.io/#name=add-circle&svg=%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M8%2012h8M12%208v8%22%2F%3E%3C%2Fsvg%3E
```

### 2. A project (.ile) — several layered icons, hidden shapes, per-icon groups

```
https://iconlibrary.io/#ile=<base64url of the JSON, or URL-encoded JSON>
```

Minimal project (only `formato`, `versao`, `raiz` and `elementos` are required):

```json
{
  "formato": "icon-library-editor",
  "versao": 1,
  "nome": "starred-heart",
  "raiz": { "xmlns": "http://www.w3.org/2000/svg", "width": "24", "height": "24", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
  "grupos": [{ "nome": "heart" }, { "nome": "star" }],
  "elementos": [
    { "tag": "path", "grupo": 0, "attrs": { "d": "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" } },
    { "tag": "path", "grupo": 1, "attrs": { "d": "m12 8 1.2 2.4 2.6.4-1.9 1.8.5 2.6L12 14l-2.4 1.2.5-2.6-1.9-1.8 2.6-.4Z", "fill": "#dc2626", "stroke": "none" } }
  ]
}
```

Only produce base64url if you can encode it exactly; otherwise URL-encode the JSON text. Links with a broken encoding open with an error message.

## How to draw icons that fit (Lucide style)

- Canvas: `viewBox="0 0 24 24"`, keep shapes inside 1–23 (1 unit of padding).
- Stroke, not fill: `fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"` on the `<svg>`. `currentColor` makes the icon take the color of the surrounding text.
- Coordinates on a 0.5 grid; use whole numbers where possible.
- Use only `path`, `line`, `circle`, `ellipse`, `rect`, `polyline` and `polygon` — these can be reshaped in the editor. `g`, `text`, `use`, `transform` attributes and other elements stay editable only as code.
- Keep it simple: few shapes, at least 2 units between separate shapes, no detail smaller than the stroke.
- A color on a single shape: give it its own `stroke` (or `fill` for filled shapes). It then keeps that color wherever the icon is pasted.
- Never include scripts, event attributes (`onload`…), `javascript:` links or `foreignObject`: they are removed when the icon opens.

Bootstrap Icons use a different style: `viewBox="0 0 16 16"`, `fill="currentColor"`, filled shapes, no stroke.

## Start from a real icon

Icon packages, pinned to the versions the site uses (one SVG per icon, named in kebab-case):

- Lucide (ISC): https://unpkg.com/lucide-static@1.59.0/icons/<name>.svg — e.g. heart, arrow-right, settings
- Feather (MIT): https://unpkg.com/feather-icons@4.29.2/dist/icons/<name>.svg
- Bootstrap Icons (MIT): https://unpkg.com/bootstrap-icons@1.13.2/icons/<name>.svg — e.g. heart-fill

To let the user browse, link a search: `https://iconlibrary.io/?set=lucide&q=<words>` (sets: `lucide`, `feather`, `bootstrap`, `emoji`).

When you base an icon on one of these, keep the license notice of its set (Lucide: ISC; Feather and Bootstrap Icons: MIT).

## What the user can do with the link

The editor shows the icon on a grid. The user can drag points (including curve controls), move, rotate, flip and resize shapes, add another icon on top, set a color and stroke width per shape, undo/redo, edit the SVG code, then copy the SVG, download SVG/PNG, save a `.ile` project, or copy a share link of their own.