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

Kostenlose Mond- und Dark-Mode-Icons (SVG)

48 kostenlose Mond- und Dark-Mode-Icons aus Open-Source-Sets. Klicke eins an, um Größe, Farbe und Strichstärke anzupassen, und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

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

Mond- und Dark-Mode-Icons verwenden

Ein Mond (oft zusammen mit einer Sonne) ist der Hell-/Dunkel-Schalter, den Besucher heute erwarten.

Alle Icons hier folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen. Ein SVG funktioniert so auf hellen und dunklen Hintergründen, in Links und in Buttons. Lege eine feste width und height fest (oder passe die Größe per CSS mit 1em an), damit sich das Layout nicht verschiebt, während die Seite lädt.

Barrierefreie Icons

Wenn das Icon dekorativ ist oder neben sichtbarem Text steht, füge aria-hidden="true" hinzu. Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Mond und Dark Mode“.

Lizenzen

Diese Mond- und Dark-Mode-Icons stammen von Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons und Carbon. Es sind Open-Source-Sets unter den Lizenzen MIT, ISC oder Apache 2.0, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle über 70.000 Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Mond- und Dark-Mode-Icons kostenlos für die kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter den Lizenzen MIT, ISC oder Apache 2.0, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Mond- und Dark-Mode-Icons?
Die SVGs verwenden currentColor. Setze also die CSS-Farbe des übergeordneten Elements, oder öffne das Icon im Finder und wähle vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze Copy to Webflow (fügt ein Code Embed ein) oder Copy JSX für eine React-Komponente.