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

Iconos gratis de luna y modo oscuro (SVG)

48 iconos de luna y modo oscuro gratis de sets de código abierto: haz clic en uno para cambiar su tamaño, color y trazo, y cópialo como SVG, JSX, data URI o CSS.

Actualizado el

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ómo usar iconos de luna y modo oscuro

La luna (a menudo junto a un sol) es el interruptor de modo claro/oscuro que los visitantes esperan hoy.

Todos los iconos aquí siguen currentColor, así que toman el color de texto del elemento en el que están: un solo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o ajústalos en CSS con 1em) para que el diseño no se mueva mientras carga la página.

Iconos accesibles

Si el icono es decorativo o va junto a texto visible, añade aria-hidden="true". Si es el único contenido de un botón o enlace, dale a ese elemento un aria-label como “Luna y modo oscuro”.

Licencias

Estos iconos de luna y modo oscuro provienen de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons y Carbon: sets de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas otra cosa? Busca entre más de 70 000 iconos en el SVG Icon Finder.

Preguntas frecuentes

¿Son gratis para uso comercial estos iconos de luna y modo oscuro?
Sí. Provienen de sets de iconos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los archivos de los iconos.
¿Cómo cambio el color de un icono de luna y modo oscuro?
Los SVG usan currentColor, así que define el color CSS del elemento padre, o abre el icono en el buscador y elige un color fijo antes de copiarlo.
¿Puedo usar estos iconos en Webflow o React?
Sí. Abre un icono y usa Copy to Webflow (pega un Code Embed) o Copy JSX para un componente de React.