4 иконки · лицензия MIT

Анимированные иконки уведомлений

Колокольчики, которые звенят при новой активности или переключаются между «колокольчиком» и «перечёркнутым колокольчиком». Короткое покачивание привлекает внимание к счётчику непрочитанного, а версии-переключатели заодно служат кнопкой, отключающей уведомления канала или ветки.

Из 4 иконок 2 непрерывно проигрываются в цикле и 2 переключаются между двумя состояниями по клику. Каждая доступна в виде React-компонента, компонента shadcn/ui, анимации Lottie JSON и статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Уведомления»

Где их использовать

Кнопка центра уведомлений в шапке приложения
Бейдж непрочитанного, который звенит при новом сообщении
Включение и отключение уведомлений канала или ветки
Настройки email- и push-уведомлений
Кнопки подписки на напоминания и оповещения

По взаимодействию

Иконки с циклической анимацией · 2
Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Notification V3, Notification V4.
Иконки-переключатели с анимацией по клику · 2
Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Notification, Notification V2.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Переключение по клику»). Все иконки этой категории подключаются так же — замените notification на имя со страницы нужной иконки.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import notification from 'react-useanimations/lib/notification';

<UseAnimations animation={notification} size={32} />

С shadcn/ui готовый компонент добавляется через CLI:

npx shadcn@latest add https://useanimations.com/r/notification.json

import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

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

Какие анимированные иконки уведомлений есть в наборе?

4 иконки: Notification, Notification V2, Notification V3 и Notification V4. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки уведомлений в React?

Установите react-useanimations, добавьте import notification from 'react-useanimations/lib/notification' и отрендерите <UseAnimations animation={notification} size={32} />. Иконка проигрывает своё взаимодействие («Переключение по клику») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/notification.json.

Можно ли использовать эти анимированные иконки уведомлений без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/notification.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.