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

Ícones Grátis de Lua e Modo Escuro (SVG)

48 ícones de lua e modo escuro de conjuntos open-source — clique em um para mudar tamanho, cor e traço e copie como SVG, JSX, data URI ou CSS.

Atualizado em

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

Como usar ícones de lua e modo escuro

A lua (muitas vezes junto com um sol) é o botão de alternar entre modo claro e escuro que os visitantes esperam hoje.

Todos os ícones aqui seguem currentColor, então herdam a cor do texto do elemento onde estão — um único SVG funciona em fundos claros e escuros, em links e em botões. Defina um width e height explícitos (ou dimensione-os no CSS com 1em) para o layout não pular enquanto a página carrega.

Ícones acessíveis

Se o ícone for decorativo ou estiver ao lado de um texto visível, adicione aria-hidden="true". Se ele for o único conteúdo de um botão ou link, dê a esse elemento um aria-label como “Lua e Modo Escuro”.

Licenças

Estes ícones de lua e modo escuro vêm de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons e Carbon — conjuntos open-source sob as licenças MIT, ISC ou Apache 2.0, que permitem uso pessoal e comercial. Precisa de outra coisa? Pesquise todos os mais de 70.000 ícones no SVG Icon Finder.

Perguntas frequentes

Esses ícones de lua e modo escuro são grátis para uso comercial?
Sim. Eles vêm de conjuntos de ícones open-source sob as licenças MIT, ISC ou Apache 2.0, que permitem uso comercial. Mantenha o aviso de licença se você redistribuir os próprios arquivos de ícone.
Como mudo a cor de um ícone de lua e modo escuro?
Os SVGs usam currentColor, então defina a cor CSS do elemento pai — ou abra o ícone no buscador e escolha uma cor fixa antes de copiar.
Posso usar esses ícones no Webflow ou no React?
Sim. Abra um ícone e use Copy to Webflow (cola um Code Embed) ou Copy JSX para um componente React.