Icons
the one glyph vocabulary every component draws from; not an element of its own
Not placed on a page at all — this piece is used by other pieces and is offered nowhere.
Inputs
Section titled “Inputs”A page sets nothing on this piece.
Events
Section titled “Events”This piece raises no events.
Nothing goes inside this piece.
Styling hooks
Section titled “Styling hooks”This piece honours no design tokens of its own.
Methods
Section titled “Methods”| Name | Description | Arguments |
|---|---|---|
makeIcon() |
Build one glyph and hand back a fresh <svg>. A fresh one each time, so the same mark can be drawn in several places at once. It is stroked with currentColor and sized by whatever holds it. |
name: IconName |
intentIcon() |
Build the glyph that stands for an intent — success, warning, danger, and info for anything else. error is accepted as an alias of danger. This is what the intent-carrying pieces call so that the same meaning gets the same mark everywhere. |
intent: string |
drawIcons() |
Fill every data-icon placeholder under an element from this vocabulary. For a piece that builds its shadow tree from a markup template and so cannot call makeIcon mid-string: the template writes an empty <span data-icon="log-out"> and this fills it afterwards, through the DOM. A name the vocabulary does not carry leaves the holder empty rather than drawing a blank box. |
scope: ParentNode |
isIconName() |
Whether a string is a mark this vocabulary draws. For the case where the name arrives as data — from metadata, from a manifest — so an unknown one can be skipped rather than drawn blank. | name: string |
Readable state
Section titled “Readable state”Nothing on this piece can be read back.
Styling parts
Section titled “Styling parts”This piece exposes none of its insides to a stylesheet.
When to use it
Section titled “When to use it”Whenever a component needs a glyph. It draws from this one vocabulary and never introduces its own — a second icon set is how the same idea ends up with two marks, and how a rebrand only half lands. If the mark you need is not here, ADD IT HERE rather than drawing it locally: one name, one path, one place, and every surface gets it.
What to use instead
Section titled “What to use instead”- StatusDot — The mark is standing for a state rather than a thing, and a coloured dot says it more plainly than a glyph.
- Tag — The thing needs a word beside it, not a mark on its own.
- ProvenanceMarker — The mark is saying where a value came from — that vocabulary is already chosen and carries its own meaning.
Accessibility
Section titled “Accessibility”A glyph carries no text and no title, so it is DECORATIVE by default and the caller is responsible for that being true. Mark the element holding it aria-hidden="true" and make sure the words are somewhere a screen reader can reach them — the label beside it, or an accessible name on the control. An icon-only control needs that name explicitly; every piece in this library that draws a bare glyph gives it one. What the vocabulary does handle for you is contrast: currentColor means a mark can never end up a colour its surroundings did not choose.
Where the artwork comes from
Section titled “Where the artwork comes from”Verified 2026-09-24 — checked against every workspace manifest, which names no icon dependency. No icon package is installed anywhere in the platform and none is shipped; what is here is path data, in one file, built through the DOM. Many of these outlines are lucide’s own, typed in; the rest are drawn in the same idiom so that one vocabulary reads as one vocabulary. lucide is published under the ISC Licence — Copyright (c) 2026 Lucide Icons and Contributors, carrying forward Copyright (c) 2013-present Cole Bemis from Feather. ISC permits use and redistribution and requires that the copyright notice and the permission notice appear in all copies, which is why they are recorded here and beside the paths themselves rather than inferred from the visual resemblance; the full text is at https://github.com/lucide-icons/lucide/LICENSE. Nothing here is taken from any incumbent product’s icon set. Where a surface wants a CONCEPT that also appears in one of theirs — a trend, a score, a strength meter — the concept belongs to nobody and we draw our own mark or adopt a freely licensed one. It is the artwork that would be theirs, never the idea.
Examples
Section titled “Examples”Every mark, named
Section titled “Every mark, named”The whole vocabulary drawn from the list itself, each mark under the name you would type to get it — so a glyph added to the list appears here without anybody editing this page.
The page around it: draws the sheet — one cell per name in the vocabulary, read at the moment the page renders. A placement stores values; enumerating a list is not something it can carry.
Cannot be shown as a page placement: The same sheet with a filter over it, because the NAME is what a component author has to type and a wall of marks does not tell you one. Type a fragment — “chevron”, “trend”, “layout” — and see what matches. The page around it: draws the filter box and re-draws the sheet as you type, counting the matches against the size of the vocabulary rather than against a number written down anywhere. Cannot be shown as a page placement: Find one by name
Section titled “Find one by name”