How to Search For and Use Icons on Icônes (icones.js.org)

Icônes is a browser-based icon explorer that lets you search across many open-source icon sets at once, preview any icon, and copy it out in the format your project needs. To use it, open icones.js.org, type a keyword into the search field, optionally narrow the results to one icon set, then copy the icon's name, its raw SVG, or a ready-made code snippet for your framework. No account or install is required to browse and copy — everything happens in the page.

Searching by keyword

The search box is the fastest way in. Type a plain word that describes what you want — home, user, arrow, settings, cart — and results update as you type.

A few things worth knowing about how the search behaves:

• It matches icon names, not concepts. Searching delete may miss an icon literally named trash, so try synonyms when a term returns little.
• Results span every bundled icon set at once, which is why a single query like arrow can return hundreds of matches.
• Spelling matters. These are English identifiers, so colour won't find color.

If a keyword returns nothing useful, switch to a broader term (chevron instead of chevron-double-left) or browse the set directly.

Browsing and filtering by icon set

Icônes aggregates many independent libraries — Material Design Icons, Font Awesome, Tabler, Phosphor, Lucide, Bootstrap Icons, and others. Each is a separate "set" with its own visual style and naming conventions.

To narrow things down:

1. Open the icon set list (usually shown as a sidebar or a picker on the main page).
2. Select a set to browse it in isolation, or use it as a filter on top of your search.
3. Scroll or keep typing to move through that set's icons.

Filtering by set is the practical way to keep a project visually consistent. Mixing a rounded set like Phosphor with a sharp one like Material Symbols tends to look unintentional, so pick one set early and stay in it.

Copying an icon into your project

Click any icon to open its detail view. From there you can take the icon in whichever form fits your stack:

The exact buttons and labels vary by icon and by set, but the pattern is consistent: select the icon, choose the output format, copy.

A concrete example

Say you need a shopping cart icon for a React navbar:

1. Search cart.
2. Filter to the set your project already uses (for example, Lucide).
3. Click the icon that matches your design.
4. Copy the React/JSX snippet.
5. Paste it into your component and adjust size, color, or stroke-width through the props the snippet exposes.

If you'd rather not add a dependency, copy the raw SVG instead and inline it — same visual result, no package.

Downloading and referencing icons

Beyond copy-paste, Icônes lets you grab the underlying asset. You can download an individual SVG, and in many cases pull the icon directly from its source package (for example, via npm) if you'd rather manage icons as a dependency than as pasted markup.

Two practical notes:

• Check the license of the source set, not just Icônes. Icônes is an explorer; each bundled library carries its own license terms. If you're shipping commercially, confirm the set you chose permits it.
• Downloaded SVGs are static. They won't respond to currentColor or CSS the way an inlined or component-based icon will, so pick the format based on whether you need to restyle it later.

Common snags

• "My search returns too much." Add the set filter, or use a more specific noun.
• "The icon I want isn't there." Icônes only shows sets it has indexed; a niche or brand-new library may not be included yet.
• "The copied code doesn't render." Framework snippets assume the matching package is installed — check that the import path resolves before debugging the markup.
• "It looks different in my app." Size, stroke width, and color are usually set by you, not baked into the icon; match those to your design tokens.