Skip to content

12 icons · MIT licensed

Animated device icons

Phones, tablets, monitors, watches and printers, plus the connection indicators around them: wifi, Bluetooth and battery. They work for device pickers, responsive preview switchers and connectivity status.

Of the 12 icons, 1 toggles between two states on click, 1 replays on every click and 10 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 devices icons

Where to use them

  • Responsive preview switchers for mobile, tablet and desktop
  • Wifi and Bluetooth connection status
  • Battery and charging indicators
  • Device lists in account security settings
  • Print buttons on invoices and reports

By interaction

  • Click-to-toggle animated icons · 1

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Wifi Off.

  • Click animated icons · 1

    Replays once from the start on every click unless reduced motion is preferred. Printer.

  • Hover-to-play animated icons · 10

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi.

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 wifi for the name on its page.

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

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

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

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

<AnimatedWifi 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 device icons are included?

12 icons: Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Printer, Smartphone, Tablet, Watch, WiFi and Wifi Off. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated device icons in React?

Install react-useanimations, add import wifi from 'react-useanimations/lib/wifi' and render <UseAnimations animation={wifi} 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/wifi.json instead.

Can I use these animated device icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/wifi.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.