22 icônes · licence MIT

Icônes animées de réseaux sociaux

Logos des réseaux sociaux et des outils sur lesquels développeurs et designers partagent leur travail : X, Instagram, YouTube, Discord, Telegram, Figma et d’autres. Ils s’animent au survol, ce qui rend les liens du footer et des profils visiblement cliquables.

Sur les 22 icônes, 3 se jouent au survol et reviennent en arrière quand le pointeur s’en va, 9 se jouent une fois au survol et 10 bouclent pendant le survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes de réseaux sociaux

Où les utiliser

Liens sociaux dans le footer du site
Boutons de partage sur les articles de blog
Liens vers les profils des auteurs et de l’équipe
Boutons d’invitation aux serveurs de discussion d’une communauté
Connexion avec un compte social ou développeur

Par interaction

Icônes animées au survol · 3
Se joue vers l’avant sur mouseenter et en sens inverse sur mouseleave. Instagram, YouTube, YouTube V2.
Icônes animées à lecture au survol · 9
Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Icônes animées en boucle au survol · 10
Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « boucle au survol ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez github par le nom indiqué sur leur page.

npm install react-useanimations

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

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

<AnimatedGithub size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de réseaux sociaux sont incluses ?

22 icônes : Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram et 10 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de réseaux sociaux dans React ?

Installez react-useanimations, ajoutez import github from 'react-useanimations/lib/github' et affichez <UseAnimations animation={github} size={32} />. L’icône joue son interaction « boucle au survol » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/github.json.

Puis-je utiliser ces icônes animées de réseaux sociaux sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/github.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Twitter utilise des expressions After Effects : sur le web, il lui faut donc la version complète de lottie-web.