# Animated communication icons
> 13 free animated communication icons, including At Sign, Message Circle and Message Square. For React, shadcn/ui and Lottie JSON, MIT licensed.
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.
## Icons
- [At Sign](https://useanimations.com/icons/at-sign) (`atSign`, hover-replay)
- [Message Circle](https://useanimations.com/icons/message-circle) (`messageCircle`, hover-replay)
- [Message Square](https://useanimations.com/icons/message-square) (`messageSquare`, hover-replay)
- [Phone](https://useanimations.com/icons/phone) (`phone`, click-replay)
- [Phone Call](https://useanimations.com/icons/phone-call) (`phoneCall`, click-replay)
- [Phone Forwarded](https://useanimations.com/icons/phone-forwarded) (`phoneForwarded`, hover-replay)
- [Phone Incoming](https://useanimations.com/icons/phone-incoming) (`phoneIncoming`, hover-replay)
- [Phone Missed](https://useanimations.com/icons/phone-missed) (`phoneMissed`, hover-replay)
- [Phone Off](https://useanimations.com/icons/phone-off) (`phoneOff`, click-toggle)
- [Phone Outgoing](https://useanimations.com/icons/phone-outgoing) (`phoneOutgoing`, hover-replay)
- [RSS](https://useanimations.com/icons/rss) (`rss`, hover-replay)
- [Send](https://useanimations.com/icons/send) (`send`, click-replay)
- [Voicemail](https://useanimations.com/icons/voicemail) (`voicemail`, hover-replay)
## 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](https://useanimations.com/interactions/click-toggle) (1): Toggles between two states on click, or switches immediately when reduced motion is preferred.
- [Click animated icons](https://useanimations.com/interactions/click-replay) (3): Replays once from the start on every click unless reduced motion is preferred.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (9): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.
## Code
```jsx
import UseAnimations from 'react-useanimations';
import send from 'react-useanimations/lib/send';
```
```bash
npx shadcn@latest add https://useanimations.com/r/send.json
```
Every icon is also a Lottie JSON file at `https://useanimations.com/icons/.json`: [Lottie icons](https://useanimations.com/lottie-icons).
## 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 . 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/.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.
## More categories
- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)
HTML version: https://useanimations.com/categories/communication