Pixmora

Иконка корзины для покупок

Три знака покупки Lucide: тележка, сумка и корзина. Ниже пример разметки кнопки со счётчиком товаров и доступным именем.

Как применить иконку «Тележка»

Сценарий страницы: Добавление товара и счётчик корзины. Основной вариант - lucide:shopping-cart, набор Lucide, автор Lucide Contributors, лицензия ISC.

Тележка (shopping-cart): Классическая корзина на колёсах для интернет-магазина. Шапка магазина и переход в корзину заказа.

Сумка (shopping-bag): Пакет без колёс, мягче по смыслу «покупки». Бутик, каталог услуг или кнопка «Купить» без метафоры тележки.

Корзина (shopping-basket): Ручная корзина, ближе к продуктовому сценарию. Продукты, быстрый набор товаров, краткий список покупок.

В шапке магазина обычно 24 px. Для кнопки «В корзину» рядом с текстом хватит 16–20. Счётчик рисуйте отдельно текстом, не вшивайте цифру в SVG.

Это пример разметки без обработчиков. Замените путь к SVG и подключите обновление счётчика в своём коде. Если на кнопке только иконка и число, полное имя действия передайте через aria-label, включая количество.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Корзина, товаров: 3. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-label="Корзина, товаров: 3">
  <img src="lucide-shopping-cart.svg" width="24" height="24" alt="">
  <span aria-hidden="true">3</span>
</button>

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

Где показывать число товаров?

Рядом с иконкой отдельным текстом или бейджем. Не редактируйте path SVG под каждую цифру.

Есть ли готовые брендовые версии магазинов?

В этой странице только нейтральные Lucide. Логотипы площадок сюда не входят.