9 icônes · licence MIT

Icônes animées de développement

Chevrons de code, terminal, branches, commits, merges et pull requests Git, ainsi que serveurs et bases de données. Pensées pour les outils de développement, les sites de documentation et les pages de statut, où le vocabulaire de Git et de l’infrastructure fait partie de l’interface.

Sur les 9 icônes, 1 boucle en continu et 8 se jouent une fois au 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 développement

Où les utiliser

Statut des pull requests, merges et branches dans les outils de développement
Boutons d’extrait de code et d’intégration dans la documentation
Sections terminal et CLI des pages d’accueil
Santé des serveurs et des bases de données sur les pages de statut
Raccourcis clavier avec la touche Commande

Par interaction

Icônes animées en boucle · 1
Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Terminal.
Icônes animées à lecture au survol · 8
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. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

En ajouter une à votre app

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/git-branch.json

import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch 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 développement sont incluses ?

9 icônes : Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server et Terminal. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de développement dans React ?

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

Puis-je utiliser ces icônes animées de développement 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/git-branch.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). Aucune n’utilise d’expressions : la version light de lottie-web suffit.