secure-payment-filled  Payments Icons

Get started with Payments Icons

High quality png and svg icons to help you build apps for payments or finances

Select Size

Search

Bank Names/ Short Codes/ IFSC Code
example: sbi, hdfc, state bank of india, bhim, phonepe, idfc

or Select Type

Hover on icons to reveal the JSON object

Documentation

Available Functions
Function Name Usage Output
getIcon 
getIcon("search_string","size");
 
{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"}
getIcons 
getIcons(["search_string1", "search_string2"],"size");
 
[{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"},
{"icon_name": "icon2", "icon_url": "https://example.com/example2.png", "icon_version": "1"}]
getModesIcons 
getModesIcons("mode_type","size");
 
[{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"},
{"icon_name": "icon2", "icon_url": "https://example.com/example2.png", "icon_version": "1"}]
Available sizes
  • sm: 32px by 32px
  • md: 64px by 64px
  • lg: 128px by 128px
  • svg: size it accordingly
Available modeIcons
  • cardbanks: icons for all bank images
  • cardschemes: icons for all card schemes, exaxmple rupay, visa etc
  • paylater: icons for paylater apps
  • upi: icons for upi apps
  • wallet: icons for wallet apps
  • cardless: icons for cardless emi providers
  • aggregators: icons for payment aggregators
Using NPM

Install

npm i payments-icons-library

Usage

import icons from "payments-icons-library";

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"}

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

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

From CDN

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

Usage

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"}

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

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