Tìm và copy icon từ thư viện Lucide React
Hiển thị 0 / 0 icons
Icon Finder là công cụ tìm kiếm và copy icon từ thư viện Lucide React online miễn phí. Hơn 1000+ icons đẹp, nhẹ và nhất quán. Tìm kiếm nhanh theo tên, preview với nhiều kích cỡ, copy JSX component hoặc tên icon với một click. Lucide là fork của Feather Icons với nhiều icons hơn và được maintain tích cực. Hoàn hảo cho các dự án React, Next.js, Vue, Svelte.
Lucide là thư viện icon mã nguồn mở được fork từ Feather Icons với nhiều cải tiến. Ưu điểm: Hơn 1000+ icons (gấp đôi Feather), được maintain tích cực với icons mới hàng tuần, nhẹ (tree-shakeable - chỉ bundle icons bạn dùng), nhất quán về style (24x24, stroke-width 2), hỗ trợ nhiều framework (React, Vue, Svelte, Angular), và hoàn toàn miễn phí. So với Font Awesome, Lucide nhẹ hơn nhiều và không cần load cả font file. So với Material Icons, Lucide có style minimalist hơn, phù hợp với modern UI.
1) Cài đặt: npm install lucide-react. 2) Import icon: import { Home, User, Settings } from 'lucide-react'. 3) Sử dụng: <Home size={24} color='currentColor' strokeWidth={2} />. Props phổ biến: size (number), color (string), strokeWidth (number), className (string). Lucide tự động tree-shake nên chỉ bundle icons bạn import.
Dùng từ khóa tiếng Anh đơn giản: 'home' thay vì 'house', 'user' thay vì 'person'. Thử các biến thể: 'arrow-left', 'arrow-right', 'chevron-left'. Tìm theo category: 'file', 'folder', 'mail', 'phone'. Tìm theo action: 'plus', 'minus', 'edit', 'delete', 'save'. Nếu không tìm thấy, thử từ đồng nghĩa hoặc liên quan.
Đầu tiên cài lucide-react: npm install lucide-react. Sau đó import icon ở đầu file: import { IconName } from 'lucide-react'. Cuối cùng sử dụng như React component: <IconName />. Có thể thêm props như size={24}, color='red', strokeWidth={2}.
Hoàn toàn miễn phí! Lucide là open source với ISC license, cho phép sử dụng trong cả dự án cá nhân và thương mại mà không cần attribution (nhưng được khuyến khích).
Có! Lucide có packages riêng cho nhiều framework: lucide-vue-next (Vue 3), lucide-vue (Vue 2), lucide-svelte (Svelte), lucide-angular (Angular), lucide-preact (Preact). Cách sử dụng tương tự React.
Có! Lucide icons sử dụng currentColor mặc định, nên sẽ inherit màu từ parent. Hoặc bạn có thể set trực tiếp: <Home color='#ff0000' /> hoặc dùng className với Tailwind: <Home className='text-red-500' />.
Để đảm bảo performance, công cụ giới hạn 100 kết quả mỗi lần tìm kiếm. Nếu cần tìm icon cụ thể, hãy nhập từ khóa chính xác hơn để thu hẹp kết quả. Thư viện đầy đủ có hơn 1000+ icons.
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.
