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

Анимированные иконки файлов, папок и пользователей

Файлы, папки, книги, почта, вложения и люди. Эти иконки обозначают то, с чем работает пользователь, а варианты с добавлением, удалением и галочкой делают управление списками и командой отзывчивее.

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

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

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

Файловые менеджеры и списки документов
Кнопки вложений и копирования в буфер обмена
Входящие и архив в почтовых клиентах
Списки участников команды с добавлением и удалением пользователей
Меню «Поделиться» для документов и ссылок

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

Иконки с анимацией по клику · 5
Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Иконки с анимацией при наведении · 7
Проигрывается вперёд на mouseenter и назад на mouseleave. Archive, Copy, Mail, Share, User minus, User plus, User X.
Иконки с разовой анимацией при наведении · 10
Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

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

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

npm install react-useanimations

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

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

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

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

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy size={24} />

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

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

Какие анимированные иконки файлов, папок и пользователей есть в наборе?

22 иконки: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image и ещё 10. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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