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

Бесплатные иконки луны и тёмной темы (SVG)

48 бесплатных иконок луны и тёмной темы из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

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

Использование иконок луны и тёмной темы

Луна (часто в паре с солнцем) — это переключатель светлой и тёмной темы, который посетители сейчас ожидают увидеть.

Все иконки здесь следуют currentColor, поэтому они принимают цвет текста того элемента, в котором находятся: один SVG одинаково хорошо смотрится на светлом и тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или задайте размер в CSS через 1em), чтобы вёрстка не смещалась во время загрузки страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Луна и тёмная тема».

Лицензии

Эти иконки луны и тёмной темы взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons, Carbon — это наборы с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Эти иконки луны и тёмной темы бесплатны для коммерческого использования?
Да. Они взяты из наборов иконок с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Как изменить цвет иконки луны или тёмной темы?
SVG используют currentColor, поэтому задайте CSS-свойство color у родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Копировать для Webflow» (вставит Code Embed) или «Копировать JSX» для React-компонента.