Icon Finder Online Free

Browse and copy Lucide icons — 1000+ free SVG icons

Size:

Showing 0 of 0 icons

How to use Lucide icons in React/Next.js:

import { Home, User, Settings } from "lucide-react";

<Home className="w-6 h-6" />

lucide.dev

Icon Finder Online Free - Browse 1000+ Lucide Icons

Browse and copy Lucide icons online free. Search 1000+ SVG icons by name, filter by category, and copy JSX code with one click. Choose from 4 size options (16px, 20px, 24px, 32px). Includes the npm install command and a link to the official Lucide documentation. Perfect for React, Next.js, Vue, and Svelte developers who use Lucide as their icon library.

Key Features

1000+ Lucide icons available

Search icons by name

Multiple size options (16px, 20px, 24px, 32px)

Copy JSX code with one click

Shows 60 icons at a time

npm install command included

Link to official lucide.dev documentation

Hover tooltip shows copy action

Free, no registration required

Why Use Lucide Icons?

Lucide is the most popular open-source icon library for React and Next.js, with 1000+ clean, consistent SVG icons. It's the default icon library for shadcn/ui, the most popular React component library. Lucide icons are tree-shakeable — you only import the icons you use, keeping bundle size minimal. Each icon is a React component that accepts className, size, color, and strokeWidth props for easy customization.

Benefits

•1000+ consistent, high-quality SVG icons
•Tree-shakeable — only import what you use
•TypeScript support out of the box
•MIT license — free for commercial use
•Works with React, Next.js, Vue, Svelte
•Customizable size, color, and stroke width

How to Find and Use Icons

1Search for the icon you need using the search box
2Browse the icon grid and click an icon to copy its JSX code
3Install Lucide: npm install lucide-react
4Import the icon in your component file
5Use the JSX code: <IconName className='w-6 h-6' />
6Customize with className for size and color

Customizing Lucide Icons

Lucide icons accept several props: size (number, default 24), color (string, default 'currentColor'), strokeWidth (number, default 2), className (string for Tailwind classes). Examples: <Home size={32} /> for larger icon. <Home color='blue' /> for colored icon. <Home className='w-6 h-6 text-blue-500' /> with Tailwind. <Home strokeWidth={1.5} /> for thinner strokes. The default color 'currentColor' inherits the text color from the parent element.

Frequently Asked Questions

Are Lucide icons free to use commercially?

Yes, Lucide is MIT licensed and free for both personal and commercial use.

How do I install Lucide?

Run: npm install lucide-react (or yarn add / pnpm add). Then import icons: import { Home } from 'lucide-react'

Can I change the icon size and color?

Yes. Use className='w-6 h-6 text-blue-500' or pass size and color props: <Home size={24} color='blue' />.

How many icons does Lucide have?

Lucide has 1000+ icons and is actively maintained with new icons added regularly.

Can I use Lucide icons in Vue or Svelte?

Yes, Lucide has packages for Vue (lucide-vue-next), Svelte (lucide-svelte), and other frameworks. Check lucide.dev for all packages.

Related Keywords

icon finder onlinelucide iconsreact iconssvg icons freeicon library onlinelucide react iconsnext.js iconsshadcn icons

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.