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

Icônes lune et mode sombre gratuites (SVG)

48 icônes lune et mode sombre issues de jeux d'icônes open source. Cliquez sur l'une d'elles pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, data URI ou CSS.

Mis à jour le

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

Utiliser les icônes lune et mode sombre

Une lune (souvent associée à un soleil) est le bouton de bascule clair/sombre que les visiteurs attendent désormais.

Toutes les icônes ici suivent currentColor, elles prennent donc la couleur de texte de l'élément dans lequel elles se trouvent. Un seul SVG fonctionne ainsi sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne bouge pas pendant le chargement de la page.

Icônes accessibles

Si l'icône est purement décorative ou se trouve à côté d'un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d'un bouton ou d'un lien, donnez à cet élément un aria-label tel que « Lune et mode sombre ».

Licences

Ces icônes lune et mode sombre proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons et Carbon. Ce sont des jeux open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage personnel et commercial. Besoin d'autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.

Questions fréquentes

Les icônes lune et mode sombre sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de jeux d'icônes open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage commercial. Conservez la mention de licence si vous redistribuez les fichiers d'icônes eux-mêmes.
Comment changer la couleur d'une icône lune et mode sombre ?
Les SVG utilisent currentColor : définissez donc la couleur CSS de l'élément parent, ou ouvrez l'icône dans le finder et choisissez une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez Copy to Webflow (colle un Code Embed) ou Copy JSX pour un composant React.