Cách dùng Tìm Icon SVG
- Nhập thứ bạn cần — home, arrow right, shopping cart — rồi chọn một bộ icon, hoặc tìm trong tất cả.
- Nhấp vào một icon để mở. Đặt kích thước, giữ currentColor để icon theo màu chữ, hoặc chọn màu tùy chỉnh; điều chỉnh nét với icon dạng viền.
- Sao chép dưới dạng SVG, JSX cho React, data URI, CSS mask, hoặc dán vào Webflow — hoặc tải SVG hay PNG.
- Nhấp ☆ Lưu để giữ các icon bạn hay dùng; lần sau chúng sẽ hiện trong mục ★ Đã lưu.
Icon miễn phí bạn thực sự dùng được
Mọi icon ở đây đều đến từ bộ mã nguồn mở với giấy phép thoáng, nên bạn có thể dùng cho website và ứng dụng cá nhân lẫn thương mại. Giấy phép và tác giả được hiển thị cùng từng icon:
| Bộ icon | Giấy phép | Kiểu dáng |
|---|---|---|
| Lucide | ISC | Nét viền, lưới 24 px |
| Tabler Icons | MIT | Nét viền và đặc |
| Heroicons | MIT | Nét viền, đặc, mini |
| Phosphor | MIT | Sáu độ đậm |
| Bootstrap Icons | MIT | Đặc và nét viền |
| Feather, Iconoir | MIT | Nét viền |
| Fluent UI System Icons | MIT | Phong cách Microsoft |
| Material Symbols, Material Design Icons, Carbon | Apache 2.0 | Phong cách Google, Pictogrammers và IBM |
Giấy phép MIT, ISC và Apache 2.0 yêu cầu bạn giữ lại thông báo bản quyền và giấy phép khi phân phối lại chính các tệp icon (ví dụ trong một gói icon). Dùng icon trong website hoặc ứng dụng là trường hợp thông thường mà các giấy phép này hướng tới.
Vì sao currentColor quan trọng
Icon có fill hoặc stroke là currentColor sẽ lấy color CSS của phần tử cha, nên cùng một SVG có thể thành màu trắng trên nút tối, xanh trong liên kết và xám khi bị vô hiệu hóa — mà không cần sửa tệp. Hãy dùng currentColor cho icon trong giao diện và nút; chọn màu cố định cho minh họa và favicon.
Nên sao chép định dạng nào
- SVG — dán trực tiếp vào HTML, một Webflow Embed hoặc tệp
.svg. - JSX — thuộc tính sẵn sàng cho React (
strokeWidth,className) để đưa vào component. - Data URI — dùng cho
<img src>hoặcbackground-imagetrong CSS mà không cần tệp riêng. - CSS mask — icon kế thừa
currentColortừ CSS, hữu ích trong pseudo-element. - Sao chép vào Webflow — dán một Code Embed chứa SVG vào Webflow Designer.
Tối ưu SVG của riêng bạn bằng SVG Optimizer hoặc chuyển một SVG thành favicon với Favicon Generator.
Cũng được tìm dưới tên: icon svg, icon svg miễn phí, tìm icon, tìm kiếm icon svg, icon mã nguồn mở, lucide icons, heroicons, tabler icons.
Các công cụ dùng kèm tốt với Tìm Icon SVG
- Chuyển SVG sang PNG — Xuất đồ họa vector SVG thành ảnh PNG sắc nét, đúng kích thước bạn cần, dùng cho app store, mạng xã hội, email hoặc tài liệu.
- Ảnh sang Base64 — Chuyển PNG, JPEG, SVG, WebP hoặc GIF thành Base64 data URI với mã CSS và HTML sẵn sàng sao chép, hoặc dán chuỗi Base64 để xem trước và tải ảnh về.
- Trình tạo CSS Mask — Làm cho ảnh và khối nội dung mờ dần thay vì kết thúc đột ngột: làm mờ một cạnh, trên và dưới, cả bốn cạnh, vignette tròn hoặc đèn sân khấu, cắt phần tử thành các dải sọc — hoặc che phần tử bằng một hình dạng (ngôi sao, trái tim, lục giác, mũi tên…) với viền mềm, mờ dần mà clip-path không làm được.
- Tạo mã vạch — Tạo mã vạch quét được cho sản phẩm, kho hàng, vận chuyển và thư viện.