React SVG Card Payment Icons

SVG Credit Card & Payment Icons: 6 Styles, 80 Icons for React ⚛️

A collection of SVG based credit card logo icons. React component with Typescript support.

Live Demo

💿 Installation

1. Install this package:

npm install react-svg-credit-card-payment-icons

or

yarn add react-svg-credit-card-payment-icons

or

pnpm add react-svg-credit-card-payment-icons

📦 Usage

Option 1: PaymentIcon Component

import { PaymentIcon } from 'react-svg-credit-card-payment-icons';

const App = () => {
  return <PaymentIcon type="Visa" format="flatRounded" width={100} />;
};

Note: The PaymentIcon component bundles all icons. For better tree-shaking and smaller bundle sizes, use Option 2-4.

Option 2: Unified Icon Components with Format and Variant Props

Import individual icon components that accept a format prop for dynamic style selection:

import { VisaIcon, MastercardIcon } from 'react-svg-credit-card-payment-icons';

const App = () => {
  return (
    <>
      <VisaIcon format="flatRounded" width={100} />
      <MastercardIcon format="logo" width={100} />
    </>
  );
};

Available formats: flat, flatRounded, logo, logoBorder, mono, monoOutline

Option 3: Format-Specific Icon Components (Recommended)

Import format-specific components for the smallest bundle size and best TypeScript IntelliSense:

import {
  VisaFlatRoundedIcon,
  MastercardLogoIcon,
} from 'react-svg-credit-card-payment-icons';

const App = () => {
  return (
    <>
      <VisaFlatRoundedIcon width={100} />
      <MastercardLogoIcon width={100} />
    </>
  );
};

Available component suffixes: FlatIcon, FlatRoundedIcon, LogoIcon, LogoBorderIcon, MonoIcon, MonoOutlineIcon

Option 4: Vendor-Specific Imports

Import all icon variants for a specific payment network:

import { VisaFlatIcon, VisaLogoIcon, VisaMonoIcon } from 'react-svg-credit-card-payment-icons/visa';
import { MastercardFlatRoundedIcon, MastercardLogoIcon } from 'react-svg-credit-card-payment-icons/mastercard';

const App = () => {
  return (
    <>
      <VisaFlatIcon width={100} />
      <MastercardFlatRoundedIcon width={100} />
    </>
  );
};

Option 5: Format-Specific Path Imports (Legacy)

Import from format-specific paths:

import {
  Visa as VisaIcon,
  Mastercard as MastercardIcon,
} from 'react-svg-credit-card-payment-icons/icons/flat-rounded';

const App = () => {
  return (
    <>
      <VisaIcon width={100} />
      <MastercardIcon width={100} />
    </>
  );
};

Available import paths:

• react-svg-credit-card-payment-icons/icons/flat
• react-svg-credit-card-payment-icons/icons/flat-rounded
• react-svg-credit-card-payment-icons/icons/logo
• react-svg-credit-card-payment-icons/icons/logo-border
• react-svg-credit-card-payment-icons/icons/mono
• react-svg-credit-card-payment-icons/icons/mono-outline

Card Variants and Aliases

Some payment cards have multiple visual styles or go by different names. The package supports both through variants and aliases:

Type Aliases - Alternative names for the same card:

<PaymentIcon type="Amex" />           // Resolves to AmericanExpress
<PaymentIcon type="CvvBack" />        // Resolves to Code (back CVV)
<PaymentIcon type="Diners" />         // Resolves to DinersClub

Variant Aliases - Different visual styles of the same card network:

// Method 1: Use the variant alias directly (recommended)
<PaymentIcon type="Hiper" format="flatRounded" />

// Method 2: Use explicit variant prop with base type
<PaymentIcon type="Hipercard" variant="hiper" format="flatRounded" />

The Hiper and Hipercard cards share the same IIN ranges but have distinct branding:

• Hiper - Shows the Hiper-branded logo (orange/yellow colors)
• Hipercard - Shows the Hipercard-branded logo

Format-Specific Components with Variants:

import { HipercardFlatRoundedIcon } from 'react-svg-credit-card-payment-icons';

// Default Hipercard branding
<HipercardFlatRoundedIcon width={80} />

// Hiper variant branding
<HipercardFlatRoundedIcon variant="Hiper" width={80} />

Direct Imports with Variants:

import { Hiper, Hipercard } from 'react-svg-credit-card-payment-icons/icons/flat-rounded';

<Hiper width={80} />      // Hiper-branded variant
<Hipercard width={80} />  // Hipercard-branded variant

Unified Icon Components with Variants:

import { HipercardIcon } from 'react-svg-credit-card-payment-icons';

<HipercardIcon format="flatRounded" width={80} />
<HipercardIcon format="logo" variant="Hiper" width={80} />

🔧 Card Utilities

As of version 4, the package includes powerful card detection and validation utilities:

import {
  getCardType,
  detectCardType, // deprecated - use getCardType instead
  validateCardNumber,
  formatCardNumber,
  maskCardNumber,
  isCardNumberPotentiallyValid,
} from 'react-svg-credit-card-payment-icons';

// Detect card type from number (recommended)
const cardType = getCardType('4242424242424242');  // Returns 'Visa'
const amexType = getCardType('378282246310005');   // Returns 'AmericanExpress'
const dinersType = getCardType('30569309025904');  // Returns 'DinersClub'

// Legacy function (deprecated but still works)
const legacyType = detectCardType('378282246310005'); // Returns 'Americanexpress'

// Validate card number using Luhn algorithm
const isValid = validateCardNumber('4242424242424242'); // Returns true

// Format card number with appropriate spacing
const formatted = formatCardNumber('4242424242424242'); // Returns '4242 4242 4242 4242'

// Mask card number (shows only last 4 digits)
const masked = maskCardNumber('4242424242424242'); // Returns '**** **** **** 4242'

// Check if card number is potentially valid (correct length, etc.)
const isPotentiallyValid = isCardNumberPotentiallyValid('4242424242424242'); // Returns true

Available Utility Functions

| Function | Description | Example | | ------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------- | | getCardType(cardNumber) | Detects card type from number | getCardType('4242...') // 'Visa' | | | Returns canonical type names | getCardType('3782...') // 'AmericanExpress' | | detectCardType(cardNumber) (deprecated) | Legacy card type detection | detectCardType('3782...') // 'Americanexpress' | | validateCardNumber(cardNumber) | Validates using Luhn algorithm | validateCardNumber('4242...') // true | | formatCardNumber(cardNumber) | Formats with appropriate spacing | formatCardNumber('4242...') // '4242 4242 4242 4242' | | maskCardNumber(cardNumber) | Masks all but last 4 digits | maskCardNumber('4242...') // '**** **** **** 4242' | | isCardNumberPotentiallyValid(cardNumber) | Checks if potentially valid | isCardNumberPotentiallyValid('4242') // false | | validateCardForType(cardNumber, type) | Validates for specific card type | validateCardForType('4242...', 'Visa') // true | | getCardLengthRange(cardType) | Gets min/max length for card type | getCardLengthRange('Visa') // {min: 13, max: 19} | | sanitizeCardNumber(cardNumber) | Removes non-digit characters | sanitizeCardNumber('4242-4242') // '42424242' |

Complete Example with Card Input

import React, { useState } from 'react';
import {
  PaymentIcon,
  detectCardType,
  validateCardNumber,
  formatCardNumber,
} from 'react-svg-credit-card-payment-icons';

function CardInput() {
  const [cardNumber, setCardNumber] = useState('');
  const cardType = detectCardType(cardNumber);
  const isValid = validateCardNumber(cardNumber);

  return (
    <div>
      <input
        type="text"
        value={cardNumber}
        onChange={(e) => setCardNumber(e.target.value)}
        placeholder="Enter card number"
      />
      <PaymentIcon type={cardType} width={40} />
      <div>Type: {cardType}</div>
      <div>Valid: {isValid ? 'Yes' : 'No'}</div>
      <div>Formatted: {formatCardNumber(cardNumber)}</div>
    </div>
  );
}

Tree-Shakeable Example

For better bundle optimization, import only the cards you need:

import { Visa, Mastercard } from 'react-svg-credit-card-payment-icons/icons/flat-rounded';
import { detectCardType } from 'react-svg-credit-card-payment-icons';

function PaymentForm() {
  const cardType = detectCardType(cardNumber);

  return (
    <div>
      {cardType === 'Visa' && <Visa width={40} />}
      {cardType === 'Mastercard' && <Mastercard width={40} />}
    </div>
  );
}

Types and Formats

Available types and their images

If the type does not exist, the default setting is generic. Type names are case-insensitive but PascalCase is recommended.

| Type | Image | | ------------ | ----------------------------------------------------------------------------------------------- | | Alipay | | | AmericanExpress | | | DinersClub | | | Discover | | | Elo | | | Hiper | | | Hipercard | | | Jcb | | | Maestro | | | Mastercard | | | Mir | | | Paypal | | | Swish | | | Unionpay | | | Visa | | | Generic | | | Code | | | CodeFront | |

Images from aaronfagan/svg-credit-card-payment-icons

Available formats

If the format is not specified, the default setting is flat.

| Format | Image | | ------------- | -------------------------------------------------------------------------------------------------------- | | flat | | | flatRounded | | | logo | | | logoBorder | | | mono | | | monoOutline | |

• Specify either width or height; there's no requirement to define both. The aspect ratio is preset at 780:500 for SVGs. If neither width nor height is defined, width will default to 40.

• The component also allows all the properties (props) of the Svg component, including attributes like style.

• If an invalid type is provided, the default setting is generic.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

Development Setup

This project uses pnpm as its package manager for local development and CI/CD.

# Install pnpm if you don't have it
npm install -g pnpm

# Install dependencies
pnpm install

# Run linting
pnpm run lint

# Build the project
pnpm run build