Pixmora

Иконка банковской карты для оплаты

Пластиковая карта Lucide: базовый способ оплаты, успех и отклонение. Логотипы платёжных систем на страницу не входят.

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

Сценарий страницы: Выбор оплаты картой на checkout. Основной вариант - lucide:credit-card, набор Lucide, автор Lucide Contributors, лицензия ISC.

Карта (credit-card): Прямоугольник с магнитной полосой и коротким полем. Способ оплаты картой.

Оплата прошла (credit-card-check): Карта и галочка: платёж подтверждён в UI. Успешный статус оплаты. Не заменяет ответ платёжного шлюза.

Оплата отклонена (credit-card-x): Карта и крестик: отказ или ошибка. Сообщение об отклонённом платеже.

В списке способов оплаты 24 px. В истории платежей 20. Не подменяйте логотипы Visa/Mir этой нейтральной картой как «брендом».

Это пример разметки без обработчиков. Замените name/value и путь к SVG. Реквизиты карты в статическом примере не показывайте; для тестов используйте TEST.

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

Файлы SVG

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

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

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

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

<label>
  <input type="radio" name="pay" value="card" checked>
  <img src="lucide-credit-card.svg" width="24" height="24" alt="">
  Банковская карта
</label>

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

Чем credit-card отличается от wallet?

credit-card - одна карта. wallet - кошелёк или баланс целиком.

Можно ли вставить логотип банка?

Не в этом наборе. Здесь только нейтральный Lucide без брендов.