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

Icon Filter Miễn Phí (SVG)

48 icon filter miễn phí từ các bộ mã nguồn mở — nhấn vào một icon để thay đổ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

filter
Tablerfilter
Bootstrap Iconsfilter
Iconoirfilter-12-filled
Fluent UIfilter
Material Symbolsfilter
Material Design Iconsfilter
Carbonfilter-filled
Tablerfilter-solid
Iconoirfilter-12-regular
Fluent UIfilter-outline
Material Symbolsfilter-outline
Material Design Iconsfilter-filled
Carbonfilter-2
Tablerfilter-16-filled
Fluent UIfilter-outline-rounded
Material Symbolsfilter-1
Material Design Iconsfilter-x
Tablerfilter-16-regular
Fluent UIfilter-outline-sharp
Material Symbolsfilter-2
Material Design Iconsfilter-up
Tablerfilter-20-filled
Fluent UIfilter-rounded
Material Symbolsfilter-3
Material Design Iconsfilter-20-regular
Fluent UIfilter-sharp
Material Symbolsfilter-4
Material Design Iconsfilter-24-filled
Fluent UIfilter-1
Material Symbolsfilter-5
Material Design Iconsfilter-24-regular
Fluent UIfilter-1-outline
Material Symbolsfilter-6
Material Design Iconsfilter-28-filled
Fluent UIfilter-1-outline-rounded
Material Symbolsfilter-7
Material Design Iconsfilter-28-regular
Fluent UIfilter-1-outline-sharp
Material Symbolsfilter-8
Material Design Iconsfilter-32-filled
Fluent UIfilter-1-rounded
Material Symbolsfilter-9
Material Design Iconsfilter-32-light
Fluent UIfilter-1-sharp
Material Symbolsfilter-32-regular
Fluent UIfilter-2
Material Symbolsfilter-2-outline
Material Symbols

Cách dùng icon filter

Biểu tượng phễu mở ra bộ lọc trên danh sách sản phẩm, bảng dữ liệu và kết quả tìm kiếm.

Tất cả icon ở đâ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 trên nền sáng lẫn nền tối, trong liên kết và trong nút. Hãy đặt width và height rõ ràng (hoặc chỉnh 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 một nút hoặc liên kết, hãy gán cho phần tử đó một aria-label như “Lọc” hoặc “Filter”.

Giấy phép

Các icon filter này đến từ Tabler, Bootstrap Icons, Iconoir, Fluent UI, 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 biểu tượng khác? Tìm trong hơn 70.000 icon tại SVG Icon Finder.

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

Icon filter 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. Nếu bạn phân phối lại chính các file icon, hãy giữ nguyên thông báo giấy phép.
Làm sao để đổi màu icon filter?
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ó thể dùng các icon này trong Webflow hoặc React 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.