13 иконок · лицензия MIT

Анимированные иконки связи и общения

Телефоны, облачка чата, кнопки отправки, голосовая почта и RSS. Иконки звонков покрывают все состояния, которые нужны журналу вызовов: входящий, исходящий, пропущенный и переадресованный, а иконка отправки по клику красиво провожает сообщение.

Из 13 иконок 1 переключается между двумя состояниями по клику, 3 проигрываются заново при каждом клике и 9 проигрываются один раз при наведении. Каждая доступна в виде React-компонента, компонента shadcn/ui, анимации Lottie JSON и статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Связь и общение»

Где их использовать

Кнопка отправки в чатах и формах комментариев
Журнал вызовов с входящими, исходящими и пропущенными звонками
Кнопки связи и поддержки
Кнопки запуска чат-виджета
Поля для упоминаний и адресов email

По взаимодействию

Иконки-переключатели с анимацией по клику · 1
Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Phone Off.
Иконки с анимацией по клику · 3
Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Phone, Phone Call, Send.
Иконки с разовой анимацией при наведении · 9
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Повтор по клику»). Все иконки этой категории подключаются так же — замените send на имя со страницы нужной иконки.

npm install react-useanimations

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

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

С shadcn/ui готовый компонент добавляется через CLI:

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

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

<AnimatedSend size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

Частые вопросы

Какие анимированные иконки связи и общения есть в наборе?

13 иконок: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send и ещё 1. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки связи и общения в React?

Установите react-useanimations, добавьте import send from 'react-useanimations/lib/send' и отрендерите <UseAnimations animation={send} size={32} />. Иконка проигрывает своё взаимодействие («Повтор по клику») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/send.json.

Можно ли использовать эти анимированные иконки связи и общения без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/send.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.