Payment Icons

Download standardised Cashfree payment icons for cards, netbanking, wallets, and UPI in multiple sizes and formats to build polished custom checkout pages.

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.

npm

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.

ES6

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

Related topics

• Payment Icons Demo
• Element Introduction
• Checkout Integration
• Payment Lifecycle
• NPM Package