Checkout Payment Icon Library | Cashfree Payments

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.

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');

<script src="https://cdn.jsdelivr.net/gh/cashfree/payments-icons-library@latest/dist/image-library.js"></script>

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"}, ...]

// Fetch a single icon
let sbiIcon = paymentsIcons.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] = paymentsIcons.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 = paymentsIcons.getModesIcons('cardbanks', 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]

Payments

Payment Gateway

Checkout

International Payments

Flowwise

RiskShield

Subscription

Other Products

Developer updates

Payment Icons

Demo

Installation

Import the library

Usage

​Demo

​Installation

​Import the library

​Usage

Demo

Installation

Import the library

Usage