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 componnent 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

📦 Usage

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

....

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

Types and Formats

Available types and their images:

If the type does not exist, the default setting is generic.

Type	Image
alipay
amex
diners
discover
elo
hiper
hipercard
jcb
maestro
mastercard
mir
paypal
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.