Skip to main content
The Payments icons library provides standardised payment method icons that you can use when building custom payment pages. This library supports various payment methods including cards, net banking, wallets, and UPI, available in multiple sizes and formats.
American ExpressVisaDiners ClubMaestroMastercardRuPay

Demo

You can view all available payment icons and explore the library’s capabilities on the demo page.

Installation

Install the Payments icons library using npm:
npm
npm i payments-icons-library

Import the library

You can import the library using npm or include it directly in your HTML using a CDN.
var Icons = require('payments-icons-library');

Usage

The library provides methods to fetch individual icons, multiple icons, or all icons for a specific payment mode.
import icons from "payments-icons-library";

// Fetch a single icon
let sbiIcon = icons.getIcon('sbi', 'sm');
//{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}

// Fetch multiple icons
let [sbiIcon, auIcon] = icons.getIcons(['sbi', 'au'], 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]

// Fetch all icons for a payment mode
let banksLogo = icons.getModesIcons('cardbanks', 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]