Pixmora

Иконка луны для тёмной темы

Луна Lucide для ночного оформления: серп, серп со звездой и комбинированный sun-moon. Для кнопки тёмной темы.

Как применить иконку «Луна»

Луна Lucide для ночного оформления: серп, серп со звездой и комбинированный sun-moon. Для кнопки тёмной темы.

Сценарий страницы: Переключатель тёмной темы. Основной вариант - lucide:moon, набор Lucide, автор Lucide Contributors, лицензия ISC.

Луна (moon): Серп без дополнительных звёзд. Тёмная тема, ночной режим.

Луна со звездой (moon-star): Серп и звезда: «ночь» выразительнее. Сон, ночные уведомления, «не беспокоить».

День и ночь (sun-moon): Комбинация лучей и серпа в одном знаке. Одна кнопка переключения темы.

Рядом с sun в одном переключателе ставьте тот же размер, обычно 20 px. В иллюстрации ночного режима 32.

Это пример разметки без обработчиков. Логику темы подключите сами и синхронизируйте aria-pressed. Замените путь к SVG.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Тёмная тема. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-pressed="false" aria-label="Тёмная тема">
  <img src="lucide-moon.svg" width="20" height="20" alt="">
</button>

Частые вопросы

Должна ли луна быть заливной?

Нет, в этом наборе контур Lucide с fill="none". Выбор цвета меняет обводку. Для заливки отдельно измените fill в скачанном SVG или inline-разметке и проверьте форму серпа. Переключатель цвета не создаёт заливной файл.

Чем moon отличается от cloud-moon?

cloud-moon - погода. moon - тема оформления или ночь без облака.