How do I copy an icon name?

Simply click on any icon and its name will be automatically copied to your clipboard. You can then paste it into your code using Ctrl+V (Windows/Linux) or Cmd+V (Mac).

How do I use Lucide icons in React?

Install lucide-react with npm install lucide-react, then import the icon: import { User } from "lucide-react". Use it in your JSX: . You can customize size, color, and other props.

How do I use Lucide icons in Vue?

Install lucide-vue-next with npm install lucide-vue-next, then import the icon: import { User } from "lucide-vue-next". Use it in your template: .

Can I customize the icon size and color?

Yes! Lucide icons accept props like size, color, strokeWidth, and className. For example: .

Are Lucide icons free?

Yes! Lucide is completely free and open-source under the ISC License. You can use it in personal and commercial projects without any restrictions.

What's the difference between Lucide and Feather Icons?

Lucide is a fork of Feather Icons with more icons, active maintenance, and better framework support. It maintains the same design principles while expanding the icon collection.

Can I use Lucide with TypeScript?

Yes! Lucide has full TypeScript support with type definitions included. All icon components are fully typed.

How do I use Lucide icons in vanilla JavaScript?

Install lucide with npm install lucide, then use createIcons to render icons: import { createIcons, User } from "lucide"; createIcons({ icons: { User } });

Is my data sent to a server?

No! This tool runs entirely in your browser. No data is sent to any server. All icon browsing and copying happens locally on your device.

Does this work offline?

Yes! Once the page is loaded, you can use the icon library completely offline. All icons and functionality are available without an internet connection.

Lucide Icon Library - DevToolBox

Size:

Lucide Icon Library Tool Introduction

A comprehensive Lucide icon library featuring all Lucide icons organized by category. Lucide is a beautiful, consistent icon set designed for modern web applications. Whether you're building a React app, Vue project, or any web interface, our icon reference makes it easy to find and copy any Lucide icon name instantly.

Perfect for web developers, UI/UX designers, front-end engineers, and anyone working with modern icon libraries. Lucide icons are designed with consistency, clarity, and simplicity in mind, making them ideal for professional applications.

Our Lucide icon library includes detailed information for each icon, including its name, visual preview, and usage examples. Simply click any icon to copy its name to your clipboard, or use the search function to quickly find specific icons by name or keyword.

All icons are displayed with live previews, ensuring you can see exactly how they will appear in your project. The tool works completely offline once loaded, with no data sent to any server.

Lucide Icon Library User Guide

Getting Started

Using the Lucide Icon Library is simple and intuitive:

Basic Usage

Browse Icons: Scroll through the complete collection of Lucide icons.
Search Icons: Use the search box to find icons by name or keyword. For example, search "user" to find all user-related icons.
Copy Icon Name: Click on any icon to instantly copy its name to your clipboard. A confirmation message will appear.
View Details: Hover over an icon to see its name and usage information.

How to Use Lucide Icons

React

Install: npm install lucide-react
Import: import { User } from 'lucide-react'
Use: <User size={24} />

Vue

Install: npm install lucide-vue-next
Import: import { User } from 'lucide-vue-next'
Use: <User :size="24" />

HTML/SVG

Install: npm install lucide
Import: import { createIcons, User } from 'lucide'
Use: createIcons({ icons: { User } })

Key Features

Complete Collection: All Lucide icons in one place
Beautiful Design: Consistent, modern, and professional icon design
Quick Search: Find icons instantly by name or keyword
One-Click Copy: Copy any icon name to clipboard with a single click
Live Preview: See exactly how icons will look in your project
Framework Support: Works with React, Vue, Angular, and vanilla JavaScript
Responsive Design: Works perfectly on desktop, tablet, and mobile devices
Open Source: Free and open-source icon library

Tips & Tricks

Use the search function to quickly find icons when you know what you're looking for
Lucide icons are designed to be consistent in size and style
Icons can be customized with size, color, and stroke width props
All icons are tree-shakeable, so you only bundle what you use
Lucide is a fork of Feather Icons with more icons and active maintenance

Related Tools

HTML Color Code Reference

Complete HTML color code reference with HEX, RGB, HSL values. Browse web-safe colors, named colors, and copy codes instantly for web development.

FontAwesome Icon Library

Complete FontAwesome icon reference with search, preview, and copy functionality. Browse thousands of free icons for web development and design projects.

ASCII Keycode Reference

Complete ASCII and keyboard keycode reference table. Find character codes, key codes, and special key values for web development and programming.

MIME Type Reference

Complete MIME type and file extension reference. Find correct MIME types for file uploads, HTTP headers, and content type declarations.

Common Spider User Agents

Complete reference of common web crawler and spider user agent strings. Identify search engine bots, scrapers, and automated tools accessing your website.

Random Password Generator

Generate strong, secure random passwords with customizable length and character types. Support bulk generation and password strength analysis.

Lucide Icon Library