> ## Documentation Index
> Fetch the complete documentation index at: https://cashfreepayments-d00050e9-theme-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Icons

> Build your payment page using standard payment icons provided by Cashfree.

Payments-icons-library can help you fetch icons for most of the payment methods in different sizes and format. Icons can be fetched individually or in bulk format. You can use this library when you are building your own payments page.

<Frame>
  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/amex.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/visa.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/diners.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/maestro.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/mastercard.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/mastercard.svg" />

  <img height="40" src="https://cashfreelogo.cashfree.com/assets_images/pg/card/svg/rupay.svg" />
</Frame>

### Demo

Please visit [this page](https://cashfree.github.io/payments-icons-library/).

### Installation

```shell npm
npm i payments-icons-library
```

### How to import

<CodeGroup>
  ```javascript npm
  var Icons = require('payments-icons-library');
  ```

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

### How to use

<CodeGroup>
  ```javascript ES6
  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"}, ...]

  ```

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

  ```
</CodeGroup>