# Animated social media icons
> 22 free animated social media icons, including Behance, Chrome and Codepen. For React, shadcn/ui and Lottie JSON, MIT licensed.
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.
## Icons
- [Behance](https://useanimations.com/icons/behance) (`behance`, hover-loop)
- [Chrome](https://useanimations.com/icons/chrome) (`chrome`, hover-replay)
- [Codepen](https://useanimations.com/icons/codepen) (`codepen`, hover-loop)
- [Codesandbox](https://useanimations.com/icons/codesandbox) (`codesandbox`, hover-replay)
- [Discord](https://useanimations.com/icons/discord) (`discord`, hover-loop)
- [Dribbble](https://useanimations.com/icons/dribbble) (`dribbble`, hover-loop)
- [Facebook](https://useanimations.com/icons/facebook) (`facebook`, hover-loop)
- [Figma](https://useanimations.com/icons/figma) (`figma`, hover-replay)
- [Framer](https://useanimations.com/icons/framer) (`framer`, hover-replay)
- [Github](https://useanimations.com/icons/github) (`github`, hover-loop)
- [GitLab](https://useanimations.com/icons/gitlab) (`gitlab`, hover-replay)
- [Instagram](https://useanimations.com/icons/instagram) (`instagram`, hover)
- [Linkedin](https://useanimations.com/icons/linkedin) (`linkedin`, hover-loop)
- [Pocket](https://useanimations.com/icons/pocket) (`pocket`, hover-loop)
- [Slack](https://useanimations.com/icons/slack) (`slack`, hover-replay)
- [Telegram](https://useanimations.com/icons/telegram) (`telegram`, hover-loop)
- [Trello](https://useanimations.com/icons/trello) (`trello`, hover-replay)
- [Twitch](https://useanimations.com/icons/twitch) (`twitch`, hover-replay)
- [Twitter](https://useanimations.com/icons/twitter) (`twitter`, hover-loop)
- [Twitter X](https://useanimations.com/icons/twitter-x) (`twitterX`, hover-replay)
- [YouTube](https://useanimations.com/icons/youtube) (`youtube`, hover)
- [YouTube V2](https://useanimations.com/icons/youtube-v2) (`youtube2`, hover)
## 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](https://useanimations.com/interactions/hover) (3): Plays forward on mouseenter and backward on mouseleave.
- [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.
- [Hover loop animated icons](https://useanimations.com/interactions/hover-loop) (10): Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.
## Code
```jsx
import UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';
```
```bash
npx shadcn@latest add https://useanimations.com/r/github.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 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 . 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/.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.
## 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 communication icons](https://useanimations.com/categories/communication) (13)
- [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)
- [More animated icons](https://useanimations.com/categories/other) (10)
HTML version: https://useanimations.com/categories/social-media