Pixmora

Иконка батареи для уровня заряда

Горизонтальный аккумулятор Lucide: нейтральный корпус, молния зарядки и низкий уровень. Цифру процента держите текстом рядом.

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

Сценарий страницы: Индикатор заряда в статусе устройства. Основной вариант - lucide:battery, набор Lucide, автор Lucide Contributors, лицензия ISC.

Батарея (battery): Пустой корпус с контактом справа, без делений. Общий знак питания или неизвестный уровень.

Зарядка (battery-charging): Молния внутри разъёма корпуса: идёт заряд. Устройство подключено к питанию.

Низкий заряд (battery-low): Одно вертикальное деление слева: заряд на исходе. Предупреждение о скорой разрядке.

В статус-баре 20–24 px. В карточке устройства 24–32. Не вшивайте цифру процента в SVG на каждый шаг: меняйте текст.

Это пример разметки без обработчиков. Процент обновляйте текстом в своём коде. Для низкого заряда можно сменить src на lucide-battery-low.svg. Через img цвет родителя не наследуется.

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

Файлы SVG

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

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

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

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

<p role="status">
  <img src="lucide-battery.svg" width="24" height="24" alt="">
  Заряд 20%
</p>

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

Где battery-full и battery-medium?

Они есть в каталоге Lucide с двумя и тремя делениями. На странице три опорных состояния: база, зарядка, low.

Чем battery отличается от plug?

battery - запас энергии в устройстве. plug - подключение к розетке или адаптеру.