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

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

Треугольники с восклицательным знаком, круги с предупреждением и знаки «стоп», которые пульсируют ровно настолько, чтобы их заметили, но не мигают. Ставьте их рядом с полем формы, где произошла ошибка, в начале баннера об ошибке или в колонке статуса — там, где статичную иконку легко пропустить при прокрутке.

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

Все иконки категории «Предупреждения»

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

Ошибки валидации под полями формы
Баннеры с ошибками и предупреждениями вверху страницы
Упавшие строки в таблице статусов деплоя или задач
Диалоги подтверждения необратимых действий
Статус-страницы во время инцидента

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

Иконки с циклической анимацией · 4
Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Alert circle, Alert octagon, Alert triangle, Error.
Иконки с анимацией по клику · 1
Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. X Octagon.

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

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json

import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle size={24} />

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

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

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

5 иконок: Alert circle, Alert octagon, Alert triangle, Error и X Octagon. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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