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

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

Анимированные иконки для интернет-магазина

Тележки, сумки, ценники, подарки, банковские карты и грузовики доставки для интернет-магазинов. Анимация добавления в корзину подтверждает клик без всплывающего уведомления, а грузовик и коробка немного оживляют статус заказа.

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

Все иконки категории «Интернет-магазин»

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

  • Кнопки «В корзину» на карточках товаров
  • Кнопка корзины в шапке магазина
  • Оформление заказа и выбор способа оплаты
  • Бейджи скидок, промокодов и распродаж
  • Этапы доставки и отслеживания заказа
  • Подарочные карты и подарочная упаковка

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

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

    Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Shopping Cart.

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

    Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck.

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

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/shopping-cart.json
import { AnimatedShoppingCart } from '@/components/animations/shopping-cart';

<AnimatedShoppingCart size={24} />

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

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

Какие анимированные иконки для интернет-магазина есть в наборе?

11 иконок: Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Shopping Cart, Tag и Truck. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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