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.