Pixmora

Иконка колокола для новых событий

Колокол Lucide открывает ленту событий. Точка или число непрочитанных рисуйте рядом текстом: в самом SVG счётчика нет.

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

Сценарий страницы: Новые события. Основной вариант - lucide:bell, набор Lucide, автор Lucide Contributors, лицензия ISC.

Колокол (bell): Спокойный колокол без волн. Центр уведомлений в шапке.

Звонящий колокол (bell-ring): Колокол с дугами звука: активное оповещение. Акцент «есть новое» или анимация появления события.

Уведомления выключены (bell-off): Колокол с перечёркиванием. Режим «не беспокоить» или канал отключён.

В шапке 22–24 px. В мобильной нижней навигации 24. Бейдж числа - отдельный элемент поверх или рядом.

Это пример разметки без обработчиков. Обновление счётчика и выпадающий список подключите в коде. Путь к SVG замените. Полное имя с числом держите в aria-label.

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

Файлы SVG

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

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

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

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

<button type="button" aria-label="Уведомления, непрочитанных: 3">
  <img src="lucide-bell.svg" width="24" height="24" alt="">
  <span aria-hidden="true">3</span>
</button>

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

Как обозначить непрочитанные?

Числом или точкой рядом и фразой в aria-label. Не надейтесь, что пользователь заметит только смену цвета img.

bell или mail для входящих?

mail - письма. bell - смешанные события продукта (заказы, комментарии, системные).