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

Kostenlose Kreditkarten-Icons (SVG)

48 kostenlose Kreditkarten-Icons aus Open-Source-Sets – klick einen an, um Größe, Farbe und Strichstärke zu ändern und ihn als SVG, JSX, Data-URI oder CSS zu kopieren.

Aktualisiert am

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

Kreditkarten-Icons verwenden

Kartensymbole kennzeichnen Checkout, Zahlungsmethoden und Abrechnungseinstellungen.

Alle Icons folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen – ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Setz eine explizite width und height (oder skaliere sie per CSS mit 1em), damit sich das Layout beim Laden der Seite nicht verschiebt.

Barrierefreie Icons

Ist das Icon dekorativ oder steht es neben sichtbarem Text, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Kreditkarte“.

Lizenzen

Diese Kreditkarten-Icons stammen aus Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons – Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle über 70.000 Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Kreditkarten-Icons für die kommerzielle Nutzung kostenlos?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Kreditkarten-Icons?
Die SVGs nutzen currentColor, also setz die CSS-Farbe des übergeordneten Elements – oder öffne das Icon im Finder und wähle vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze „Copy to Webflow“ (fügt ein Code Embed ein) oder „Copy JSX“ für eine React-Komponente.