Skip to content

9 icons · MIT licensed

Animated developer icons

Code brackets, a terminal, Git branches, commits, merges and pull requests, plus servers and databases. Made for developer tools, documentation sites and status pages where Git and infrastructure terms are part of the interface.

Of the 9 icons, 1 loops continuously and 8 play once on hover. 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 development icons

Where to use them

  • Pull request, merge and branch status in developer tools
  • Code snippet and embed buttons in documentation
  • Terminal and CLI sections on landing pages
  • Server and database health on status pages
  • Keyboard shortcut hints with the command key

By interaction

  • Looping animated icons · 1

    Plays continuously; stays on the static first frame when reduced motion is preferred. Terminal.

  • Hover-to-play animated icons · 8

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Add one to your app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/git-branch.json
import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch 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 developer icons are included?

9 icons: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server and Terminal. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated developer icons in React?

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

Can I use these animated developer icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/git-branch.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.