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

Icon biểu đồ SVG miễn phí

48 icon biểu đồ 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 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

chart-line
Lucidechart-line
Tablerchart-bar
Heroiconschart-line
Phosphorbar-chart
Bootstrap Iconsadd-chart
Material Symbolschart-line
Material Design Iconschart-line
Carbonchart-bar
Lucidechart-bar
Tablerchart-bar-16-solid
Heroiconschart-bar
Phosphorbar-chart-fill
Bootstrap Iconsadd-chart-outline
Material Symbolschart-arc
Material Design Iconschart-3d
Carbonchart-pie
Lucidechart-pie
Tablerchart-bar-20-solid
Heroiconschart-bar-bold
Phosphorbar-chart-line
Bootstrap Iconsadd-chart-outline-rounded
Material Symbolschart-bar
Material Design Iconschart-bar
Carbonchart-area
Lucidechart-pie-filled
Tablerchart-bar-solid
Heroiconschart-bar-duotone
Phosphorpie-chart
Bootstrap Iconsadd-chart-outline-sharp
Material Symbolschart-box
Material Design Iconschart-pie
Carbonfile-chart-line
Lucidechart-ppf
Tablerchart-pie
Heroiconschart-bar-fill
Phosphorpie-chart-fill
Bootstrap Iconsadd-chart-rounded
Material Symbolschart-box-outline
Material Design Iconschart-area
Carbonchart-arcs
Tablerchart-pie-16-solid
Heroiconschart-bar-light
Phosphoradd-chart-sharp
Material Symbolschart-pie
Material Design Iconschart-ring
Carbonchart-area
Tablerchart-pie-20-solid
Heroicons

Cách dùng icon biểu đồ

Icon biểu đồ cột, đường và tròn thường được dùng để đánh dấu phân tích, báo cáo và bảng điều khiể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 dùng được trên cả nền sáng lẫn nền tối, trong liên kết và nút bấm. Hãy đặt width và height rõ ràng (hoặc đặt kích thước bằng CSS với 1em) để 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 icon là nội dung duy nhất của nút hoặc liên kết, hãy gán cho phần tử đó một aria-label như “Biểu đồ”.

Giấy phép

Các icon biểu đồ này đến từ Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, 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 icon tại SVG Icon Finder.

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

Các icon biểu đồ này 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 biểu đồ?
SVG dùng currentColor, nên bạn chỉ cần đặt color trong 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ó thể dùng các icon này trong Webflow hoặc React không?
Có. Mở một icon rồi dùng Sao chép vào Webflow (dán thành Code Embed) hoặc Sao chép JSX để lấy component React.