Biểu tượng giỏ hàng miễn phí (SVG)

48 biểu tượng giỏ hàng miễn phí từ các bộ mã nguồn mở — nhấn vào một biểu tượng để đổi kích cỡ, màu và độ nét, rồi sao chép dưới dạng SVG, JSX, data URI hoặc CSS.

Cập nhật

Cách dùng biểu tượng giỏ hàng

Biểu tượng giỏ hàng hoặc túi xách thường mở giỏ mua sắm trong các cửa hàng trực tuyến, thường kèm một huy hiệu nhỏ hiển thị số lượng sản phẩm.

Tất cả biểu tượng ở đây đều theo currentColor, nên chúng nhận màu chữ của phần tử chứa chúng — một SVG dùng được cho 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 đặt kích cỡ bằng CSS với 1em) để bố cục không bị xô lệch khi trang đang tải.

Biểu tượng dễ tiếp cận

Nếu biểu tượng chỉ mang tính trang trí hoặc đứng cạnh văn bản hiển thị sẵn, 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 như “Giỏ hàng”.

Giấy phép

Các biểu tượng giỏ hàng này đến từ Lucide, Tabler, Heroicons, Phosphor, Material Symbols, Material Design Icons, Carbon — 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 biểu tượng tại SVG Icon Finder.

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

Các biểu tượng giỏ hàng này có miễn phí cho mục đích thương mại không?
Có. Chúng đến từ các bộ biểu tượng mã nguồn mở theo giấy phép MIT, ISC hoặc Apache 2.0, cho phép sử 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 biểu tượng.
Làm cách nào để đổi màu biểu tượng giỏ hàng?
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ở biểu tượng 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ó thể dùng các biểu tượng này trong Webflow hoặc React không?
Có. Mở một biểu tượng rồi dùng Copy to Webflow (dán vào Code Embed) hoặc Copy JSX cho một component React.