Pular para o conteúdo
PT

4 ícones · licença MIT

Ícones animados de sino de notificação

Sinos que tocam quando há novidades ou que alternam entre sino e sino silenciado. Um balanço curto do sino leva o olhar até o contador de não lidas, e as versões que alternam servem também como controle para silenciar um canal ou uma conversa.

Dos 4 ícones, 2 ficam em loop contínuo e 2 alternam entre dois estados no 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 notificações

Onde usar

  • Botão da central de notificações no cabeçalho do app
  • Badge de não lidas que toca quando chega uma nova mensagem
  • Botão para silenciar e reativar um canal ou uma conversa
  • Configurações de notificações por e-mail e push
  • Botões de inscrição em lembretes e alertas

Por interação

  • Ícones animados em loop · 2

    Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Notification V3, Notification V4.

  • Ícones animados que alternam no clique · 2

    Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Notification, Notification V2.

Adicione um ao seu app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/notification.json
import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification 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 sino de notificação estão incluídos?

4 ícones: Notification, Notification V2, Notification V3 e Notification V4. 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 sino de notificação no React?

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

Posso usar estes ícones animados de sino de notificação sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/notification.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). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.