React SVG Card Payment Icons

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

A collection of SVG based credit card logo icons. Cross-platform React components with TypeScript support — works in both React (web) and React Native.

Live Demo

💿 Installation

React (Web)

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

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

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

React Native

Install the package along with react-native-svg:

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

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

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

Note: For Expo projects, use npx expo install react-native-svg to ensure compatibility.

📦 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

React Native Usage

The package is cross-platform. React Native bundlers (Metro) automatically resolve the native entry via the "react-native" export condition — you use the same imports as web:

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

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

All options (unified icons, format-specific, vendor imports) work identically:

// Unified icons
import { VisaIcon } from 'react-svg-credit-card-payment-icons';

// Format-specific path imports
import { Visa } from 'react-svg-credit-card-payment-icons/icons/flat-rounded';

You can also use the explicit /native imports if needed:

// Explicit native entry
import { PaymentIcon } from 'react-svg-credit-card-payment-icons/native';

// Explicit native format-specific imports
import { Visa } from 'react-svg-credit-card-payment-icons/native/icons/flat';

Requirements: react-native-svg must be installed in your project. The native components use <Svg>, <Path>, <G>, etc. from react-native-svg instead of DOM <svg> elements.

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 (web) or SvgProps (React Native).
If an invalid type is provided, the default setting is generic.
On React Native, components use react-native-svg elements and accept SvgProps from that package.

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

react-svg-credit-card-payment-icons

React SVG Card Payment Icons

Live Demo

💿 Installation

React (Web)

React Native

📦 Usage

Option 1: PaymentIcon Component

Option 2: Unified Icon Components with Format and Variant Props

Option 3: Format-Specific Icon Components (Recommended)

Option 4: Vendor-Specific Imports

Option 5: Format-Specific Path Imports (Legacy)

React Native Usage

Card Variants and Aliases

🔧 Card Utilities

Available Utility Functions

Complete Example with Card Input

Tree-Shakeable Example

Types and Formats

Available `types` and their images

Available `formats`

Contributing

Development Setup

Readme

Keywords

react-svg-credit-card-payment-icons

React SVG Card Payment Icons

Live Demo

💿 Installation

React (Web)

React Native

📦 Usage

Option 1: PaymentIcon Component

Option 2: Unified Icon Components with Format and Variant Props

Option 3: Format-Specific Icon Components (Recommended)

Option 4: Vendor-Specific Imports

Option 5: Format-Specific Path Imports (Legacy)

React Native Usage

Card Variants and Aliases

🔧 Card Utilities

Available Utility Functions

Complete Example with Card Input

Tree-Shakeable Example

Types and Formats

Available types and their images

Available formats

Contributing

Development Setup

Readme

Keywords

Available `types` and their images

Available `formats`