Перейти к содержимому
RU

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

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

Глаголы интерфейса: сохранить, удалить, скачать, обновить, лайкнуть, добавить в закладки, найти, открыть настройки. Каждая иконка подтверждает клик или наведение, к которому относится: сердечко заполняется, когда вы лайкаете пост, а крышка корзины приподнимается перед удалением.

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

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

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

  • Кнопки лайка, избранного и закладок на карточках
  • Кнопки скачивания, загрузки и сохранения, подтверждающие действие
  • Переключатель «показать/скрыть пароль» в форме входа
  • Кнопки обновления и синхронизации в дашбордах
  • Кнопки удаления в таблицах и списках файлов
  • Поле поиска, которое превращается в кнопку очистки

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

  • Иконки с циклической анимацией · 2

    Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Checkmark, Help.

  • Иконки-переключатели с анимацией по клику · 14

    Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Иконки с анимацией по клику · 30

    Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Иконки с анимацией при наведении · 11

    Проигрывается вперёд на mouseenter и назад на mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Иконки с разовой анимацией при наведении · 6

    Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Иконки с циклической анимацией при наведении · 1

    Проигрывается в цикле, пока на иконку наведён курсор, после mouseleave доигрывает текущий цикл, а при уменьшении движения остаётся статичной. Flag.

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

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

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

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

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

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

<AnimatedHeart size={24} />

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

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

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

64 иконки: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 и ещё 52. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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