5 ícones · licença MIT

Ícones animados de alerta

Triângulos de aviso, círculos de alerta e placas de pare que pulsam só o bastante para chamar a atenção, sem piscar. Use-os ao lado de um campo de formulário com erro, no início de um banner de erro ou numa coluna de status, onde um ícone estático passa despercebido na rolagem.

Dos 5 ícones, 4 ficam em loop contínuo e 1 toca de novo a cada clique. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de alertas

Onde usar

Erros de validação logo abaixo dos campos de formulário
Banners de erro e de aviso no topo da página
Linhas com falha numa tabela de status de deploys ou jobs
Diálogos de confirmação de ações destrutivas
Páginas de status do sistema durante um incidente

Por interação

Ícones animados em loop · 4
Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Alert circle, Alert octagon, Alert triangle, Error.
Ícones animados no clique · 1
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. X Octagon.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Loop” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque alertTriangle pelo nome que aparece na página do ícone.

npm install react-useanimations

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

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

<AnimatedAlertTriangle size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de alerta estão incluídos?

5 ícones: Alert circle, Alert octagon, Alert triangle, Error e X Octagon. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de alerta no React?

Instale o react-useanimations, adicione import alertTriangle from 'react-useanimations/lib/alertTriangle' e renderize <UseAnimations animation={alertTriangle} size={32} />. O ícone executa a interação “Loop” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/alert-triangle.json.

Posso usar estes ícones animados de alerta sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/alert-triangle.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Error usa expressões do After Effects, então na web precisa do build completo do lottie-web.