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

Icon Moon và Dark Mode Miễn Phí (SVG)

48 icon moon và dark mode 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

moon
Lucidemoon
Tablermoon
Heroiconsmoon
Phosphormoon
Bootstrap Iconsmoon-sat
Iconoirweather-moon-12-filled
Fluent UImoon-stars
Material Symbolsmoon-new
Material Design Iconsmoon
Carbonsun-moon
Lucidemoon-filled
Tablermoon-16-solid
Heroiconsmoon-bold
Phosphormoon-fill
Bootstrap Iconshalf-moon
Iconoirweather-moon-12-regular
Fluent UImoon-stars-outline
Material Symbolsmoon-full
Material Design Iconsmoonset
Carbonmoon-star
Lucidemoon-2
Tablermoon-20-solid
Heroiconsmoon-duotone
Phosphorcloud-moon
Bootstrap Iconsweather-moon-16-filled
Fluent UImoon-stars-outline-rounded
Material Symbolsshield-moon
Material Design Iconsmoonrise
Carboncloud-moon
Lucidemoon-off
Tablermoon-solid
Heroiconsmoon-fill
Phosphorcloud-moon-fill
Bootstrap Iconsweather-moon-16-regular
Fluent UImoon-stars-rounded
Material Symbolsshield-moon-outline
Material Design Iconscloud-moon-rain
Lucidesun-moon
Tablermoon-light
Phosphormoon-stars
Bootstrap Iconsweather-moon-20-filled
Fluent UIshield-moon
Material Symbolssun-moon-stars
Material Design Iconshaze-moon
Tablermoon-thin
Phosphormoon-stars-fill
Bootstrap Iconsweather-moon-20-regular
Fluent UI

Cách dùng icon moon và dark mode

Biểu tượng mặt trăng (thường đi kèm mặt trời) là nút chuyển chế độ sáng/tối mà người dùng ngày nay quen thuộc.

Tất cả icon ở đây đều theo currentColor, nên sẽ nhận màu chữ của phần tử chứa nó — một SVG dùng được trên cả nền sáng lẫn nền tối, trong liên kết hay nút bấm. 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 đứng 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 nút hoặc liên kết, hãy gán cho phần tử đó một aria-label như “Moon và Dark Mode”.

Giấy phép

Các icon moon và dark mode này đến từ Lucide, Tabler, Heroicons, Phosphor, 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 dùng cá nhân và thương mại. Cần icon 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 moon và dark mode này có miễn phí cho mục đích 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 cách nào để đổi màu icon moon và dark mode?
Các SVG dùng currentColor, nên bạn chỉ cần đặt thuộc tính color CSS cho phần tử cha — hoặc mở icon trong trình 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 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 cho component React.