devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки кредитных карт (SVG)

48 бесплатных иконок кредитных карт из наборов с открытым исходным кодом. Нажмите на иконку, чтобы изменить её размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

credit-card
Lucidecredit-card
Tablercredit-card
Heroiconscredit-card
Phosphorcredit-card
Bootstrap Iconscredit-card
Iconoircredit-card-clock-20-filled
Fluent UIcredit-card
Material Symbolscredit-card
Material Design Iconscredit-card-x
Lucidecredit-card-filled
Tablercredit-card-16-solid
Heroiconscredit-card-bold
Phosphorcredit-card-fill
Bootstrap Iconscredit-card-solid
Iconoircredit-card-clock-20-regular
Fluent UIcredit-card-outline
Material Symbolscredit-card-outline
Material Design Iconscredit-card-plus
Lucidecredit-card-off
Tablercredit-card-20-solid
Heroiconscredit-card-duotone
Phosphorcredit-card-2-back
Bootstrap Iconscredit-card-slash
Iconoircredit-card-clock-24-filled
Fluent UIcredit-card-outline-sharp
Material Symbolscredit-card-off
Material Design Iconscredit-card-check
Lucidecredit-card-pay
Tablercredit-card-solid
Heroiconscredit-card-fill
Phosphorcredit-card-clock-24-regular
Fluent UIcredit-card-sharp
Material Symbolscredit-card-off-outline
Material Design Iconscredit-card-minus
Lucidecredit-card-hand
Tablercredit-card-light
Phosphorcredit-card-clock-28-filled
Fluent UIcredit-card-off
Material Symbolscredit-card-chip
Material Design Iconscredit-card-reader
Lucidecredit-card-refund
Tablercredit-card-thin
Phosphorcredit-card-clock-28-regular
Fluent UIcredit-card-off-outline
Material Symbolscredit-card-chip-outline
Material Design Iconscredit-card-clock-32-filled
Fluent UIcredit-card-off-outline-rounded
Material Symbols

Использование иконок кредитных карт

Иконки карт обозначают оформление заказа, способы оплаты и настройки выставления счетов.

Все иконки здесь следуют currentColor, поэтому они берут цвет текста того элемента, в котором находятся. Один SVG работает и на светлом, и на тёмном фоне, в ссылках и в кнопках. Задайте явные width и height (или размеры в CSS через 1em), чтобы верстка не смещалась во время загрузки страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Банковская карта».

Лицензии

Эти иконки кредитных карт взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols и Material Design Icons. Это наборы с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки кредитных карт в коммерческих целях бесплатно?
Да. Они взяты из наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если вы перераспространяете сами файлы иконок.
Как изменить цвет иконки кредитной карты?
SVG используют currentColor, поэтому задайте CSS-свойство color у родительского элемента. Или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте кнопку Copy to Webflow (вставит Code Embed) или Copy JSX для React-компонента.