12 иконок · лицензия MIT

Анимированные иконки устройств

Телефоны, планшеты, мониторы, часы и принтеры, а также индикаторы подключения рядом с ними: Wi-Fi, Bluetooth и батарея. Подходят для выбора устройства, переключателей адаптивного превью и статуса подключения.

Из 12 иконок 1 переключается между двумя состояниями по клику, 1 проигрывается заново при каждом клике и 10 проигрываются один раз при наведении. Каждая доступна в виде React-компонента, компонента shadcn/ui, анимации Lottie JSON и статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Устройства»

Где их использовать

Переключатели превью: мобильный, планшет, десктоп
Статус подключения Wi-Fi и Bluetooth
Индикаторы заряда и зарядки батареи
Списки устройств в настройках безопасности аккаунта
Кнопки печати в счетах и отчётах

По взаимодействию

Иконки-переключатели с анимацией по клику · 1
Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Wifi Off.
Иконки с анимацией по клику · 1
Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Printer.
Иконки с разовой анимацией при наведении · 10
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Повтор при наведении»). Все иконки этой категории подключаются так же — замените wifi на имя со страницы нужной иконки.

npm install react-useanimations

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

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

С shadcn/ui готовый компонент добавляется через CLI:

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

import { AnimatedWifi } from '@/components/animations/wifi';

<AnimatedWifi size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

Частые вопросы

Какие анимированные иконки устройств есть в наборе?

12 иконок: Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Printer, Smartphone, Tablet, Watch, WiFi и Wifi Off. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки устройств в React?

Установите react-useanimations, добавьте import wifi from 'react-useanimations/lib/wifi' и отрендерите <UseAnimations animation={wifi} size={32} />. Иконка проигрывает своё взаимодействие («Повтор при наведении») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/wifi.json.

Можно ли использовать эти анимированные иконки устройств без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/wifi.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.