Lucide line icons: search by name, ship in Vue or React

Tool powered by . Uwarp embeds the original tool; terms and exports are defined on the publisher site.

Browse and customize Lucide icons on lucide.dev. Search by name, tune stroke and size, then follow official React, Vue, or SVG docs. ISC licensed.

What is Lucide?

Lucide is the ISC-licensed line icon library on lucide.dev. Many informational searches pair a glyph with words like icon or symbol, and the publisher maps those intents to detail URLs under lucide.dev/icons/ instead of a single static page. The browser includes categories, search, and a customizer for stroke, size, and color before you copy SVG. Official packages cover React, lucide-vue-next for Vue 3, Svelte, and other stacks—follow install paths on lucide.dev rather than this embed. This Uwarp page embeds lucide.dev/icons/ so you can explore named icons and return to upstream docs for imports.

What you can do with Lucide

The embed mirrors lucide.dev search patterns: many high-volume queries land on specific icon routes, not only the grid home.

  1. Jump from search to publisher detail pages: Head terms such as globe icon, bell icon, or squircle-style UI marks often resolve on lucide.dev icon URLs; use the embedded search to open the same canonical pages without hand-building paths.
  2. Preview before you paste SVG: Change stroke width, pixel size, and color to match the token story your system already uses.
  3. Use consistent names in code and design: Kebab-style icon names on the site align with the strings many component wrappers expect in Git.
  4. Rely on active maintenance and docs: Changelog, license, and contribution links on lucide.dev support upgrades and support questions.
  5. Pair with accessible markup: Icons still need labels and focus rules in the host component; the set does not replace accessibility work.

How to use this embedded icon browser

A small loop keeps a huge catalog from bloating your interface.

  1. List icon roles in your surface: Write navigation, status, and action needs before you search so you are not re-solving the same slot.
  2. Set one stroke scale per density: Lock default sizes for toolbars, tables, and inline text so a single import story stays predictable.
  3. Reconcile design and package versions: When Lucide releases a major, align Figma and npm so renamed icons do not split across files.
  4. Test at production sizes: Legibility on 16 px rows beats how the glyph looks in a 48 px artboard only.

Tips for large icon systems

More icons means more need for rules, not more freedom.

  1. Avoid mixing stroke families on one bar: If you need emphasis, use weight or size steps from the same system, not a second library.
  2. Prefer verbs for actions, nouns for objects: Naming matches with microcopy make handoff to engineering easier to search.
  3. Update icon maps when routes change: Dead names in a sprite file confuse everyone during the next design-system audit.
  4. Document the lab or experimental set separately: When a build uses optional icon subsets, make that explicit so production bundles stay predictable.

Who this set is great for

Teams that want one maintained default across web frameworks.

  1. Product and system designers: Standardize a single line language that engineering can import the same way in each repo.
  2. Open source and indie maintainers: Ship permissive, well-documented defaults so contributors are not stuck picking random SVG sets.
  3. Full-stack and component authors: Publish Storybook and docs with icon names that match the Lucide page without a mapping table sprawl.
  4. Accessibility reviewers: Pair consistent shapes with the team’s text and focus plan instead of ad hoc one-offs.

Benefits of using Lucide

A community-backed set cuts debate when many libraries already agree on Lucide in examples.

  1. Predictable look across stacks: The same design language in React, Vue, and Svelte makes cross-app work easier to read.
  2. Faster from search to import: Clear categories and a strong search bar shorten the time from idea to a named import in code.
  3. Room to grow with the ecosystem: New icons land with documented releases instead of a private folder only one person can edit.
  4. Shared vocabulary with many tutorials: Docs and community examples often use Lucide names, which shortens onboarding for new front-end staff.

Technical notes

This page embeds https://lucide.dev/icons/. Uwarp does not host the SVGs or packages.

  1. Embed source: The iframe loads the public Lucide icons path on lucide.dev, including the site’s customizer UI.
  2. Licensing: The project is released under the ISC License; read the license file in the official repository for redistribution details.
  3. Versioning: The public banner may reference v1 and legacy v0; pick the path your stack supports before you pin versions.
  4. Uwarp role: Uwarp only embeds the site and adds educational context; it does not change build or import behavior.

Frequently Asked Questions

Have questions? We have answers.

More tools from Icons.