English
简体中文
Español
Português (Brasil)
Deutsch
Français
日本語
한국어
Čeština
Tiếng Việt
Bahasa Indonesia
TürkçeБерут ваши цвета
Иконки используют currentColor: они сами подхватывают цвет текста, hover-состояния и тёмную тему. Цвет можно переопределить пропом, классом или обычным CSS.
v3300 иконок · без зависимостей · MIT→
Иконки, которые оживают.
Бесплатные анимированные иконки для React, shadcn/ui и Lottie
300 микроанимаций ручной работы со встроенными микровзаимодействиями: при наведении, по клику и в цикле. Используйте их как React-компонент, добавляйте через shadcn или скачивайте SVG и Lottie JSON. Лицензия MIT.
Проведите курсором по полю.
- анимированных иконок
- 300
- анимированных иконок
- встроенных взаимодействий
- 6
- встроенных взаимодействий
- размер плеера (gzip)
- 8 kB
- размер плеера (gzip)
- зависимостей
- 0
- зависимостей
Встроенные взаимодействия
Каждая иконка знает, как двигаться.
Каждая иконка поставляется со взаимодействием, для которого её нарисовали. Вставьте её в разметку — и всё работает, а другое поведение задаётся одним пропом. Попробуйте:
Библиотека
300 бесплатных анимированных иконок
Наведите курсор или кликните, чтобы запустить анимацию. Откройте иконку, чтобы получить код и файлы: Lottie JSON, SVG и ZIP.
300 иконок
Как вам удобно
Установили, импортировали, готово.
React-компонент без зависимостей, shadcn-реестр, файлы для скачивания по постоянным URL и каталог, который умеют читать ИИ-агенты.
Читать документацию →import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';
export function MenuButton({ open, onToggle }) {
return (
<UseAnimations
animation={menu}
active={open}
onClick={onToggle}
size={28}
/>
);
}npx shadcn@latest add https://useanimations.com/r/menu.json
# затем: <AnimatedMenu size={24} /># Каждая иконка в виде SVG, анимации (Lottie JSON) и ZIP-архива с тем и другим
https://useanimations.com/icons/menu/menu.svg
https://useanimations.com/icons/menu.json # Lottie JSON
https://useanimations.com/icons/menu.zip # Lottie JSON + static SVGsconst { icons } = await fetch('https://useanimations.com/icons.json').then((r) => r.json());
const icon = icons.find((i) => i.keywords.includes('hamburger'));
icon.react.import; // "import menu from 'react-useanimations/lib/menu';"Маленькие, доступные и легко стилизуются.
Минимальный вес
8 kB
Встроенный плеер и ноль зависимостей. Каждая иконка — отдельный модуль на 2 КБ.
Доступность из коробки
Учитывают настройку уменьшения движения, проигрывают hover-анимации при фокусе с клавиатуры и не мешают скринридерам, пока вы не добавите подпись.
Готовы к серверному рендерингу
Клиентский компонент, который без проблем рендерится в Next.js, Remix и Astro. Иконки — это обычные данные, их можно импортировать где угодно.
Сделаны для ИИ-агентов
Типизированный каталог с ключевыми словами для каждой иконки, icons.json, llms.txt и документация в Markdown.
Найдите подходящую микроанимацию.
Вопросы
Что такое микроанимации и анимированные иконки?
Микроанимации — это короткие движения с одной задачей, которые отвечают на действие пользователя: иконка меню превращается в кнопку закрытия, сердечко заполняется, когда вы лайкаете пост, колокольчик звенит при новом уведомлении. Анимированные иконки — самый распространённый их вид. С ними интерфейс ощущается отзывчивым, а смена состояния видна без лишнего текста.
Чем файлы Lottie отличаются от SVG?
Файл Lottie JSON содержит всю анимацию и проигрывается в любом Lottie-плеере, в том числе во встроенном плеере react-useanimations. Файлы SVG — это статичные изображения иконки в покое, по одному на состояние (например, eye и eye-off), для мест, где ничего не должно двигаться: писем, документов, графических редакторов или фолбэка без JavaScript.
Работает ли это с Next.js и серверным рендерингом?
Да. Компонент помечен 'use client' и рисует анимацию только в браузере, поэтому рендерится из серверных компонентов и SSR-фреймворков вроде Next.js, Remix и Astro без динамического импорта. Модули иконок — обычные данные: серверные компоненты могут их импортировать и передавать как пропсы. Next.js и серверный рендеринг →
Можно ли использовать иконки в коммерческих проектах?
Да. Иконки и пакет react-useanimations распространяются по лицензии MIT: их можно использовать, изменять и распространять в личных и коммерческих проектах. Указывать авторство не обязательно, но мы будем благодарны. Лицензия и условия →
Можно ли использовать иконки без React?
Да. Каждая иконка — это стандартный файл Lottie JSON, поэтому она проигрывается через lottie-web на чистом JavaScript, во Vue, Svelte, Angular или CMS, а также в Lottie-плеерах для iOS, Android и Flutter. На странице «Lottie-иконки» есть URL файлов и готовые сниппеты lottie-web для каждого взаимодействия. Lottie-иконки →
Насколько иконки увеличат бандл?
Плеер в react-useanimations 3.1.1 весит около 8 КБ в gzip и не имеет зависимостей, а каждая иконка — отдельный модуль от 1 до 15 КБ (медиана — 2 КБ), так что в бандл попадают только те иконки, которые вы импортировали.