Tìm Icon SVG

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ặc background-image trong CSS mà không cần tệp riêng.
CSS mask — icon kế thừa currentColor từ 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.

Biểu tượng phổ biến

Bộ sưu tập biểu tượng SVG miễn phí cho các ký hiệu giao diện phổ biến nhất:

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

Các icon này có miễn phí cho mục đích thương mại không?

Có. Tất cả bộ icon được liệt kê đều là mã nguồn mở theo giấy phép MIT, ISC hoặc Apache 2.0, cho phép dùng thương mại. Hãy giữ thông báo giấy phép nếu bạn phân phối lại chính các tệp icon.

Tôi có cần ghi nguồn tác giả icon không?

Không bắt buộc khi dùng icon trong website hoặc ứng dụng theo các giấy phép này. Nếu bạn phát hành icon dưới dạng tệp — ví dụ trong template hay gói icon — hãy kèm giấy phép của bộ icon đó.

currentColor có tác dụng gì?

Nó khiến icon dùng màu chữ của phần tử chứa icon, nhờ vậy một SVG có thể tự thích ứng với nút, liên kết và chế độ tối thông qua CSS.

Tôi có thể đổi độ dày nét không?

Có, với các icon dạng viền như Lucide, Tabler, Feather và Iconoir. Icon đặc không có nét để thay đổi.

Nội dung tìm kiếm của tôi có được bảo mật không?

Từ khóa tìm kiếm được gửi tới API Iconify công khai, nơi lưu trữ các bộ icon. Không có dữ liệu nào khác rời khỏi trình duyệt của bạn, và bạn không cần tài khoản.

Tôi có thể cài Tìm Icon SVG như một ứng dụng web và dùng khi không có mạng không?

Có. Tìm Icon SVG là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.