Icon Finder - Tìm Icon Lucide

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

• Lọc tức thì theo chuỗi con trong tên icon, không cần bấm nút tìm
• Lưới xem trước hiển thị icon ở đúng cỡ bạn chọn, từ 16 đến 64 pixel
• Nút JSX sao chép sẵn thẻ dạng <TenIcon /> để dán vào chỗ đang viết code
• Nút Name sao chép riêng tên icon dùng cho dòng import
• Đếm và hiển thị số kết quả đang xem trên tổng số icon có trong thư viện
• Giới hạn 100 kết quả mỗi lần lọc để lưới không bị chậm khi bỏ trống ô tìm
• Đọc trực tiếp danh sách icon từ gói lucide-react cài trong dự án, không gọi API ngoài
• Chạy hoàn toàn phía trình duyệt, không cần đăng nhập hay tải file về

Vì sao cần một trang tra icon riêng thay vì mở tài liệu thư viện

Lúc đang viết giao diện, thứ bạn cần không phải là trang tài liệu đầy đủ mà là câu trả lời cho đúng một câu hỏi: icon này tên gì để gõ vào dòng import. Lucide đặt tên theo PascalCase và nhiều icon có tên không giống điều bạn nghĩ trong đầu, nên đoán mò rồi để trình biên dịch báo lỗi là cách mất thời gian nhất. Trang tra cứu tách riêng giải quyết chuyện đó trong vài giây: gõ vài chữ, nhìn hình, bấm sao chép. Điểm thứ hai là xem trước ở đúng cỡ. Một icon nhìn rất rõ ở 48 pixel có thể mất chi tiết hẳn ở 16 pixel vì các nét mảnh dính vào nhau, và bạn chỉ phát hiện điều đó khi thấy nó ở kích thước thật. Ô chỉnh cỡ ở đây cho phép so nhanh vài phương án trước khi quyết định, thay vì sửa code rồi tải lại trang để xem.

Lợi ích khi sử dụng

• •Biết chính xác tên icon trước khi viết import, không phải sửa lỗi biên dịch
• •Nhìn được nét icon ở kích thước thật thay vì đoán từ ảnh cỡ lớn
• •So sánh nhiều icon cùng chủ đề trong một lưới để chọn cái hợp mạch giao diện
• •Sao chép nhanh giữa lúc đang code, không phải chuyển qua lại nhiều tab tài liệu
• •Dùng được trên máy không cài sẵn môi trường phát triển, tiện khi chỉ cần tra tên

Cách tra icon và lấy code

1. 1Gõ một phần tên icon bằng tiếng Anh vào ô tìm kiếm, ví dụ gõ user để thấy toàn bộ nhóm icon liên quan tới người dùng.
2. 2Chỉnh ô Size sang đúng kích thước bạn định dùng trong giao diện để đánh giá độ rõ của nét.
3. 3Nhìn lưới kết quả và đối chiếu hình với tên hiển thị bên dưới mỗi ô.
4. 4Đưa chuột vào ô icon để hiện hai nút, bấm JSX nếu muốn lấy sẵn thẻ component hoặc bấm Name nếu chỉ cần tên.
5. 5Dán tên vào dòng import từ lucide-react rồi dán thẻ JSX vào vị trí cần hiển thị trong giao diện.

Lucide dựng trên lưới 24 nhân 24 và nét dày 2 pixel

Mọi icon Lucide đều vẽ trong khung viewBox 0 0 24 24, không tô nền, chỉ có nét viền với stroke-width mặc định bằng 2, đầu nét và góc nối đều bo tròn. Đây là lý do một bộ giao diện dùng toàn Lucide trông đồng nhất kể cả khi ghép icon từ nhiều nhóm chủ đề khác nhau. Thuộc tính màu đặt là currentColor nên icon tự lấy màu chữ của phần tử cha, bạn đổi màu bằng CSS hoặc bằng lớp tiện ích kiểu text-red-500 mà không cần chạm vào file SVG. Ba prop hay dùng nhất là size, strokeWidth và color, trong đó size ghi bằng số sẽ đặt cả chiều rộng lẫn chiều cao. Khi thu icon xuống 16 pixel, nét 2 pixel chiếm tỷ lệ khá lớn khiến hình bết lại, nên thực tế nhiều nhóm giao diện hạ strokeWidth xuống 1.5 ở cỡ nhỏ và nâng lên 2 ở cỡ từ 24 pixel trở lên. Ngược lại icon vẽ ở 48 pixel với nét 2 sẽ trông mảnh và yếu, lúc đó tăng lên 2.5 cho cân.

Import đúng cách để tree shaking thật sự có tác dụng

Cài bằng lệnh npm install lucide-react rồi import theo tên: import { Home, Settings } from 'lucide-react'. Cách viết này cho bộ đóng gói loại bỏ những icon không dùng, nên dù thư viện có hơn một nghìn icon thì phần đi vào bundle chỉ là những cái bạn thật sự gọi. Kiểu viết cần tránh là import toàn bộ namespace bằng import * as LucideIcons from 'lucide-react', vì khi đó bộ đóng gói không biết icon nào bị bỏ và có nguy cơ kéo cả thư viện vào. Trang tra cứu này cố tình dùng cách nhập toàn bộ để liệt kê được danh sách tên, đó là ngoại lệ hợp lý cho một trang công cụ chứ không phải mẫu để bắt chước trong sản phẩm. Nếu bạn cần dựng icon theo tên lấy từ dữ liệu chứ không biết trước lúc viết code, hãy tự lập một bản đồ tên đến component chỉ chứa những icon nằm trong tập cho phép, hoặc dùng import động cho từng đường dẫn icon riêng lẻ.

Mẹo tìm khi không nhớ tên icon

Công cụ này khớp chuỗi con trên chính tên icon, không tra theo từ đồng nghĩa, nên gõ nhà sẽ không ra kết quả nào và gõ house cũng không ra Home. Cách hiệu quả là gõ từ gốc ngắn nhất rồi nhìn cả nhóm hiện ra. Nhóm mũi tên có ba họ khác nhau: Arrow là mũi tên có thân, Chevron là dấu góc nhọn dùng cho menu xổ và phân trang, Move là mũi tên hai đầu dùng cho kéo thả. Nhóm hành động thường là động từ tiếng Anh: Plus, Minus, Pencil, Trash, Save, Download, Upload, Search. Nhóm trạng thái hay có hậu tố hình bao ngoài: Check, CheckCircle, CheckSquare cùng một dấu tích nhưng khác khung. Hậu tố Off thường là bản có gạch chéo dùng cho trạng thái tắt, ví dụ EyeOff hay BellOff. Nếu gõ một từ mà lưới trống, thử bỏ bớt ký tự cuối để nới rộng phạm vi khớp, vì tìm theo chuỗi con rất nhạy với một chữ cái thừa.

Tên icon thay đổi giữa các phiên bản và cách sống chung với điều đó

Lucide phát hành rất dày, số phiên bản nhỏ tăng liên tục, và trong quá trình đó có icon được đổi tên cho thống nhất hơn, có icon bổ sung tên thay thế song song với tên cũ. Kết quả thực tế là một dự án nâng phiên bản lucide-react sau nhiều tháng có thể gặp lỗi biên dịch vì một tên import không còn tồn tại. Nhóm icon logo thương hiệu là chỗ dễ vỡ nhất, vì thư viện đã đánh dấu ngừng hỗ trợ mảng này thay vì duy trì lâu dài. Kinh nghiệm xử lý là ghim phiên bản trong package.json thay vì để dấu mũ nới lỏng khi dự án có nhiều màn hình dùng icon, đọc ghi chú phát hành trước khi nâng, và gom toàn bộ icon vào một file trung gian xuất lại để lúc đổi tên chỉ phải sửa một chỗ. Danh sách trên trang này đọc từ đúng phiên bản đang cài trong dự án, nên tên bạn thấy ở đây là tên khớp với phiên bản đó chứ không phải tên mới nhất trên trang chủ thư viện.

Chọn Lucide hay bộ icon khác

Lucide là nhánh phát triển tiếp từ Feather Icons, giữ nguyên tinh thần nét mảnh tối giản nhưng có số lượng icon lớn hơn nhiều và cộng đồng bảo trì tích cực, giấy phép ISC nên dùng thoải mái cho cả dự án thương mại. Heroicons đi kèm hệ sinh thái Tailwind, có sẵn hai biến thể nét viền và tô đặc, số lượng ít hơn nhưng rất hợp nếu giao diện đã theo Tailwind và bạn cần đúng một bộ nhỏ gọn. Phosphor mạnh ở chỗ có sáu độ dày khác nhau trong cùng một bộ, hữu ích khi thiết kế cần nhấn nhá bằng độ đậm nét. Material Symbols của Google hợp với sản phẩm đi theo ngôn ngữ thiết kế Material và có trục biến thiên chỉnh được độ đầy. Font Awesome có kho lớn nhất kể cả logo thương hiệu, nhưng cách nạp theo font hoặc theo gói lớn khiến dung lượng nặng hơn hẳn so với cách nhập từng component. Nguyên tắc chung là chọn một bộ và trung thành với nó, vì trộn hai bộ khác lưới và khác độ dày nét là cách nhanh nhất làm giao diện trông chắp vá.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• icon finder
• tìm icon lucide
• lucide react icons
• danh sách icon lucide
• tên icon lucide react
• copy icon jsx
• thư viện icon cho react
• icon svg miễn phí cho web
• lucide react là gì
• cài lucide react
• feather icons thay thế
• so sánh lucide và heroicons
• icon nét viền 24px
• stroke width icon bao nhiêu
• icon cho next js
• bộ icon mã nguồn mở
• tree shaking icon react
• đổi màu icon svg currentcolor
• icon cho dashboard admin
• tra cứu tên icon online