Skip to content

22 icons · MIT licensed

Animated social media icons

Brand icons for social networks and the tools developers and designers share work on: X, Instagram, YouTube, Discord, Telegram, Figma and more. They animate on hover, which makes footer and profile links feel clickable.

Of the 22 icons, 3 play on hover and reverse on mouse leave, 9 play once on hover and 10 loop while hovered. 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 social media icons

Where to use them

  • Social links in a site footer
  • Share buttons on blog posts
  • Author and team profile links
  • Community invite buttons for chat servers
  • Sign-in with a social or developer account

By interaction

  • Hover animated icons · 3

    Plays forward on mouseenter and backward on mouseleave. Instagram, YouTube, YouTube V2.

  • 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. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.

  • Hover loop animated icons · 10

    Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Add one to your app

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

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

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

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

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

<AnimatedGithub 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 social media icons are included?

22 icons: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram and 10 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 social media icons in React?

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

Can I use these animated social media icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/github.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. Twitter uses After Effects expressions, so on the web it needs lottie-web's full build.