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

Анимированные иконки соцсетей

Логотипы соцсетей и сервисов, где разработчики и дизайнеры делятся работами: X, Instagram, YouTube, Discord, Telegram, Figma и другие. Они анимируются при наведении, и ссылки в футере и профиле сразу выглядят кликабельными.

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

Все иконки категории «Соцсети»

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

Ссылки на соцсети в футере сайта
Кнопки «Поделиться» в статьях блога
Ссылки на профили автора и команды
Кнопки приглашения в сообщество на чат-серверах
Вход через соцсеть или аккаунт разработчика

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

Иконки с анимацией при наведении · 3
Проигрывается вперёд на mouseenter и назад на mouseleave. Instagram, YouTube, YouTube V2.
Иконки с разовой анимацией при наведении · 9
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Иконки с циклической анимацией при наведении · 10
Проигрывается в цикле, пока на иконку наведён курсор, после mouseleave доигрывает текущий цикл, а при уменьшении движения остаётся статичной. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

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

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

npm install react-useanimations

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

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

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

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

import { AnimatedGithub } from '@/components/animations/github';

<AnimatedGithub size={24} />

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

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

Какие анимированные иконки соцсетей есть в наборе?

22 иконки: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram и ещё 10. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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