13 ícones · licença MIT

Ícones animados de comunicação

Telefones, balões de chat, botões de enviar, correio de voz e RSS. Os ícones de chamada cobrem os estados de que um histórico de ligações precisa (recebida, efetuada, perdida e encaminhada), e o ícone de enviar dá à mensagem uma pequena despedida no clique.

Dos 13 ícones, 1 alterna entre dois estados no clique, 3 tocam de novo a cada clique e 9 tocam uma vez no hover. 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 comunicação

Onde usar

Botão de enviar em formulários de chat e comentários
Histórico de chamadas recebidas, efetuadas e perdidas
Botões de contato e suporte
Botões que abrem o widget de chat
Campos de menção e de endereço de e-mail

Por interação

Ícones animados que alternam no clique · 1
Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Phone Off.
Ícones animados no clique · 3
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Phone, Phone Call, Send.
Ícones animados que tocam no hover · 9
Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Adicione um ao seu app

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

npm install react-useanimations

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

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

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

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

import { AnimatedSend } from '@/components/animations/send';

<AnimatedSend 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 comunicação estão incluídos?

13 ícones: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send e mais 1. 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 comunicação no React?

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

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

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/send.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.