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

Анимированные иконки медиаплеера

Воспроизведение и пауза, громкость, микрофон, камера, перемотка и перемешивание для аудио- и видеоплееров. Иконки-переключатели меняют одно состояние на другое — play на паузу, микрофон на выключенный, — поэтому кнопка всегда показывает, что произойдёт по клику.

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

Все иконки категории «Медиа»

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

Кнопки play и паузы в аудио- и видеоплеерах
Включение и выключение микрофона в видеозвонках
Включение и выключение камеры в приложениях для встреч
Управление плейлистом: перемотка, повтор и перемешивание
Кнопки трансляции и AirPlay
Управление в приложениях для подкастов и музыки

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

Иконки с циклической анимацией · 1
Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Airplay.
Иконки-переключатели с анимацией по клику · 10
Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Иконки с анимацией по клику · 6
Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Иконки с разовой анимацией при наведении · 11
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

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

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/play-pause.json

import { AnimatedPlayPause } from '@/components/animations/play-pause';

<AnimatedPlayPause size={24} />

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

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

Какие анимированные иконки медиаплеера есть в наборе?

28 иконок: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 и ещё 16. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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