devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Icon trái tim miễn phí (SVG)

48 icon trái tim miễn phí từ các bộ mã nguồn mở — nhấp vào một icon để đổi kích thước, màu sắc và độ dày nét, rồi sao chép dưới dạng SVG, JSX, data URI hoặc CSS.

Cập nhật

heart
Lucideheart
Tablerheart
Heroiconsheart
Phosphorheart
Bootstrap Iconsheart
Iconoirheart-12-filled
Fluent UIecg-heart
Material Symbolsheart
Material Design Iconsheart-x
Lucideheart-filled
Tablerheart-16-solid
Heroiconsheart-bold
Phosphorheart-fill
Bootstrap Iconsheart-solid
Iconoirheart-12-regular
Fluent UIecg-heart-outline
Material Symbolsheart-outline
Material Design Iconsheart-off
Lucideheart-x
Tablerheart-20-solid
Heroiconsheart-duotone
Phosphorbag-heart
Bootstrap Iconsheart-16-filled
Fluent UIecg-heart-outline-sharp
Material Symbolsheart-box
Material Design Iconsheart-up
Tablerheart-solid
Heroiconsheart-fill
Phosphorbag-heart-fill
Bootstrap Iconsheart-16-regular
Fluent UIecg-heart-sharp
Material Symbolsheart-box-outline
Material Design Iconseye-heart
Tablerheart-light
Phosphorheart-20-filled
Fluent UIdine-heart
Material Symbolsheart-cog
Material Design Iconsheart-cog
Tablerheart-thin
Phosphorheart-20-regular
Fluent UIdine-heart-outline
Material Symbolsheart-cog-outline
Material Design Iconsheart-off
Tablerheart-24-filled
Fluent UIdine-heart-outline-rounded
Material Symbolsheart-off
Material Design Iconsheart-pin
Tabler

Cách dùng icon trái tim

Trái tim thường tượng trưng cho sự thích, yêu thích hoặc lưu lại để xem sau; icon đặc (tô kín) cho trạng thái đang bật và icon viền rỗng cho trạng thái chưa bật là cách làm phổ biến.

Tất cả icon ở đây đều theo currentColor, nên chúng nhận màu chữ của phần tử chứa nó — một file SVG hoạt động tốt trên cả nền sáng lẫn nền tối, trong liên kết lẫn nút bấm. Hãy đặt width và height rõ ràng (hoặc chỉnh kích thước bằng 1em trong CSS) để bố cục không bị xô lệch khi trang đang tải.

Icon dễ tiếp cận

Nếu icon chỉ mang tính trang trí hoặc nằm cạnh chữ hiển thị, hãy thêm aria-hidden="true". Nếu nó là nội dung duy nhất của một nút hoặc liên kết, hãy gán cho phần tử đó aria-label với nội dung như “Trái tim”.

Giấy phép

Các icon trái tim này đến từ Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons — các bộ mã nguồn mở theo giấy phép MIT, ISC hoặc Apache 2.0, cho phép sử dụng cá nhân và thương mại. Cần thứ khác? Tìm trong hơn 70.000 icon ở SVG Icon Finder.

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

Icon trái tim có miễn phí để dùng thương mại không?
Có. Chúng đến từ các bộ icon 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ữ lại thông báo giấy phép nếu bạn phân phối lại chính các file icon.
Làm sao để đổi màu icon trái tim?
Các SVG dùng currentColor, nên bạn chỉ cần đặt màu CSS cho phần tử cha — hoặc mở icon trong công cụ tìm kiếm và chọn một màu cố định trước khi sao chép.
Tôi có dùng các icon này trong Webflow hoặc React được không?
Được. Mở một icon rồi dùng Copy to Webflow (dán vào Code Embed) hoặc Copy JSX để lấy component React.