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

Другие анимированные иконки

Иконки, которые не входят в более крупные группы: смайлики для отзывов, чашка кофе, часы, линия пульса и подсказка «листайте вниз». Иконка прокрутки вниз — привычная подсказка в hero-блоке, что ниже есть ещё контент.

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

Все иконки категории «Другое»

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

Подсказки «листайте вниз» внизу hero-блока
Весёлый, нейтральный и грустный смайлики в виджетах отзывов
Индикаторы активности и аптайма
Часы работы и выбор времени
Ссылки «Купить кофе» и поддержки автора

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

Иконки с циклической анимацией · 4
Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Activity, Arrow down, Arrow up, Scroll down.
Иконки с разовой анимацией при наведении · 6
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Clock, Coffee, Frown, Meh, Smile, Tool.

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

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json

import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown size={24} />

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

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

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

10 иконок: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile и Tool. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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