> ## Documentation Index
> Fetch the complete documentation index at: https://telr-docs.cashfree.com/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 Telr.

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 theme={null}
npm i payments-icons-library
```

### How to import

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

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

### How to use

<CodeGroup>
  ```javascript ES6 theme={null}
  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 theme={null}
  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>