Uwarp

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

Tool powered by Lucide on Lucide.

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. Use lucide.dev/icons/ to explore named icons and return to upstream docs for imports.

What you can do with Lucide

Lucide 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 Lucide 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 browse icons with Lucide

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.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Icons & Graphics.

View all Icons & Graphics