Skip to content

13 icons · MIT licensed

Animated communication icons

Phones, chat bubbles, send buttons, voicemail and RSS. The call icons cover the incoming, outgoing, missed and forwarded states a call log needs, and the send icon gives a message a small send-off on click.

Of the 13 icons, 1 toggles between two states on click, 3 replay on every click and 9 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All communication icons

Where to use them

  • Send button in chat and comment forms
  • Call logs with incoming, outgoing and missed calls
  • Contact and support buttons
  • Chat widget launchers
  • Mention and email address fields

By interaction

  • Click-to-toggle animated icons · 1

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Phone Off.

  • Click animated icons · 3

    Replays once from the start on every click unless reduced motion is preferred. Phone, Phone Call, Send.

  • Hover-to-play animated icons · 9

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Add one to your app

With React, install react-useanimations and import the icon; it plays its click replay interaction on its own. Every icon in this category works the same way: swap send for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

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

<AnimatedSend size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated communication icons are included?

13 icons: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send and 1 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated communication icons in React?

Install react-useanimations, add import send from 'react-useanimations/lib/send' and render <UseAnimations animation={send} size={32} />. The icon plays its click replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/send.json instead.

Can I use these animated communication icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/send.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.