Pixmora

Иконка солнца для светлой темы

Солнце Lucide для оформления: полный диск с лучами, приглушённый свет и комбинированный знак день/ночь. Для кнопки светлой темы.

Как применить иконку «Солнце»

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

Солнце (sun): Диск и длинные лучи по кругу. Светлая тема, день, яркость.

Приглушённый свет (sun-dim): Короткие штрихи-точки вместо длинных лучей. Снижение яркости или мягкий дневной режим.

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

В переключателе темы 20 px. В блоке погоды 24–32. Не обещайте автоматическую смену темы одной картинкой без скрипта.

Это пример разметки без обработчиков. Смену темы и aria-pressed подключите в коде. Замените путь к SVG. Через img цвет от родителя не наследуется: скачайте нужный цвет или используйте inline.

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

Файлы SVG

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

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

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

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

<button type="button" aria-pressed="true" aria-label="Светлая тема">
  <img src="lucide-sun.svg" width="20" height="20" alt="">
</button>

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

Чем sun отличается от sunrise?

sunrise - солнце у горизонта со стрелкой вверх. Для темы интерфейса обычно достаточно sun.

Нужен ли отдельный файл для тёмной кнопки?

Для img скачайте светлый или тёмный SVG. currentColor через img не наследуется.