Lucide Icons

UI/UX

UI/UXMiễn phíĐộ khó: Dễ

Lucide Icons

4.5/5Đánh giá của 2dm

Bộ icon gọn, nhất quán, miễn phí.

Bộ icon nét mảnh mã nguồn mở, dùng được cho web, React và thiết kế.

Mở trang chính thức Xem cách dùng

Giới thiệu

Lucide là thư viện icon mã nguồn mở do cộng đồng phát triển, cung cấp các biểu tượng SVG có nét vẽ đồng nhất. Tại thời điểm kiểm tra, công cụ tìm kiếm trên trang chủ hiển thị hơn 1.800 icon, phát hành theo giấy phép ISC.

Mỗi icon có thể chỉnh màu, kích thước và độ dày nét. Thư viện hỗ trợ tree-shaking, tức là khi build chỉ đóng gói những icon thực sự được import, giúp trang nhẹ hơn.

Lucide có gói riêng cho nhiều nền tảng như JavaScript thuần, React, React Native, Vue, Svelte, Solid, Angular, Preact và Astro, nên phù hợp với hầu hết dự án web và app hiện nay.

Tính năng nổi bật

Phong cách đồng nhất

Các icon tuân theo bộ quy tắc thiết kế chặt chẽ, đặt cạnh nhau vẫn hài hòa.

Tùy chỉnh linh hoạt

Đổi màu, kích thước, độ dày nét, có cả tùy chọn giữ nét không co giãn.

Nhẹ và sắc nét

Icon là SVG đã tối ưu, phóng to thu nhỏ không bị vỡ.

Tree-shakable

Chỉ những icon được import mới nằm trong bản build.

Hỗ trợ nhiều framework

Có gói cho React, Vue, Svelte, Angular, Astro, React Native và dạng file SVG tĩnh.

Giấy phép ISC

Mã nguồn mở với giấy phép dễ dùng cho dự án cá nhân và thương mại.

Dùng để làm gì

Menu và thanh điều hướng

Dùng icon nét mảnh cho menu website, trang quản trị để giao diện gọn, chuyên nghiệp.

Nút hành động

Gắn icon vào nút thêm, sửa, xóa, tải xuống giúp người dùng nhận biết nhanh.

Ứng dụng di động

Dùng gói React Native để giữ cùng bộ icon giữa web và app.

Thiết kế thống nhất thương hiệu

Chỉnh màu và độ dày nét theo bộ nhận diện để mọi màn hình đồng bộ.

Cách dùng

1
Chọn gói theo framework
Xác định dự án dùng React, Vue, Svelte hay JavaScript thuần để chọn đúng gói.
2
Cài gói cho React
Với dự án React, cài gói lucide-react.
$npm install lucide-react
3
Tìm icon trên trang chủ
Dùng ô tìm kiếm trên lucide.dev để tìm icon theo từ khóa tiếng Anh.
4
Import và đặt vào giao diện
Import đúng icon cần dùng theo tên, sau đó chỉnh size, color, strokeWidth.

Video hướng dẫn

Lucide Icons in React / Next.js project with lucide-react
Tutorend

These Icon Libraries Are Made In Heaven
Josef Bender

Ví dụ thực tế

Tình huống minh hoạ

Một agency marketing nhỏ ở Đà Nẵng đang làm lại trang quản lý chiến dịch cho khách hàng. Trước đây mỗi màn hình dùng icon từ nhiều nguồn khác nhau nên trông lộn xộn. Đội dev chuyển sang Lucide, cài gói lucide-react, thống nhất một độ dày nét và kích thước chung cho toàn bộ menu, nút và thẻ thống kê. Nhờ tree-shaking, bản build chỉ chứa những icon thật sự dùng tới.

Mẹo & lưu ý

Thống nhất độ dày nét
Chọn một giá trị strokeWidth cho toàn dự án để giao diện đồng bộ.
Import từng icon
Import theo tên icon cụ thể để tận dụng tree-shaking.
Dùng gói static khi không có framework
Gói lucide-static cung cấp file SVG, sprite và icon font cho trang tĩnh.