> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](https://cashfree.github.io/payments-icons-library/).
## Installation
Install the Payments icons library using npm:
```shell npm theme={"dark"}
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.
```javascript npm theme={"dark"}
var Icons = require('payments-icons-library');
```
```javascript vanilla JS theme={"dark"}
```
## Usage
The library provides methods to fetch individual icons, multiple icons, or all icons for a specific payment mode.
```javascript ES6 theme={"dark"}
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"}, ...]
```
```javascript Vanilla JS theme={"dark"}
// 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"}, ...]
```
