Images & Icons

Hosting Recommendations

• It's recommended to load these images from the same servers as the checkout URL.
• If you’re offering a hosted solution to third parties (merchants), you can host the images on a CDN managed by the certified integrator.

Icon Categorie

Git command

Get the Images

git submodule add https://github.com/paynl/payment-images

Update the Images

git submodule update --remote

Manual download

The image pack can be downloaded from:
https://github.com/paynl/payment-images/archive/refs/heads/master.zip

License

The images can be used as long as the organization (merchant or integrator) has an active PAY. membership. Additionally, any payments processed using these images must be handled through PAY.

Download Sample Icons

Payment Method Icons

We recommend using SVG images for online use due to their scalability and quality. For software that does not support SVG, PNG versions are also available.

Example SVG Icons:

<p align="center">
    <img src="payment_methods/1.svg" width="100px"/>
    <img src="payment_methods/2.svg" width="100px"/>
    <img src="payment_methods/3.svg" width="100px"/>
    <img src="payment_methods/4.svg" width="100px"/>
    <img src="payment_methods/8.svg" width="100px"/>
    <img src="payment_methods/132.svg" width="100px"/>
</p>

Payment Method Option (Issuers) Icons

For payment methods that offer multiple options, such as iDEAL, you can enhance the checkout experience by including issuer icons. This helps users quickly identify their bank and streamlines the payment process.

Example SVG Icons:

<p align="center">
    <img src="issuers/1.svg" width="100px"/>
    <img src="issuers/2.svg" width="100px"/>
    <img src="issuers/3.svg" width="100px"/>
    <img src="issuers/5.svg" width="100px"/>
    <img src="issuers/8.svg" width="100px"/>
    <img src="issuers/12.svg" width="100px"/>
</p>

Payment Method Group Icons

To facilitate a smoother checkout experience, payment methods are often grouped together. Icons for these payment method groups can be found in the Payment Method Group folder.

Example SVG Icons:

<p align="center">
    <img src="payment_method_groups/CASH.svg" width="100px"/>
    <img src="payment_method_groups/VOUCHER.svg" width="100px"/>
    <img src="payment_method_groups/BANKTRANSFER.svg" width="100px"/>
    <img src="payment_method_groups/CNP.svg" width="100px"/>
    <img src="payment_method_groups/ONLINEBANK.svg" width="100px"/>
    <img src="payment_method_groups/PHONE.svg" width="100px"/>
    <img src="payment_method_groups/POS.svg" width="100px"/>
    <img src="payment_method_groups/WALLET.svg" width="100px"/>  
</p>

Core data icons

Core data, such as country codes, can also have associated images. When you encounter an image URL in the data response, you can locate the corresponding image in the relevant folder within the image library.

Examples of Core Data Icons:

<p align="center">
    <img src="countries/nl.svg" width="100px"/>
</p>