README

Payment Provider Icons with almost kinda font-awesome-style markup. Demo: https://jaspervandermeer.com/payment-icons/

TODO
~~Make it responsive~~
~~Make icons stack or display inline(-block)~~
Optimize the SVG
Add multiple icon sizes with an extra css class

Description

This provides an easy way to include payment provider icons in your website or app. It's always a hassle to get a list of supported payment providers so we usually resort to Google Images to steal somebody else's work - And I know you did that, just like I did.

Since stealing is wrong, I decided to stop stealing icons from Google Images and instead steal utilize somebody's creative work from Behance which in turn consists of artwork stolen from companies providing payment services with expensive lawyers and all that. So please, read the disclaimer below. It's all for a good cause: Getting more people to use your payment services.

Installation

Easy mode: Composer:

Install through composer: composer require tweemeterstudio/payment-icons

Check if this line exists in your composer.json file:

{
    "require": {
        "tweemeterstudio/payment-icons": "0.*"
    }
}

Also quite easy mode: Manual download:

Download the zip of this repo, extract its folder to your project.

Integration in your project

Include the following line in the <head> of your document:

<link href="/path/to/payment-icons/payment-icons.min.css">

You need to mind the /path/to/ part when including the payment-icons.min.css file. The css file and /assets folder should reside in the same directory!

Usage

To use the payment icons you can simply include

<ins class="pi-payment-icons">
    <i class="pi pi-paypal"></i>
    <i class="pi pi-mastercard"></i>
    <i class="pi pi-ideal"></i>
</ins>

to your page, where the classes of the <i> as children of the <ins> decide which payment provider icons are shown. The full list of available payment providers are mentioned below.

List of available payment providers and its corresponding CSS class

Payment Provider	CSS Class
PayPal	`paypal`
Apple Pay	`apple-pay`
Google Pay	`google-pay`
Alipay	`alipay`
Mastercard	`mastercard`
Visa	`visa`
American Express	`american-express`
Diner's Club	`diners-club`
Maestro	`maestro`
VPay	`vpay`
Girocard	`girocard`
Klarna	`klarna`
Giropay	`giropay`
iDeal	`ideal`
Przelewy24	`przelewy24`
Bitcoin	`bitcoin`
Etherereum	`ethereum`
Ripple	`ripple`

Disclaimer

Thank you 💙

tweemeterstudio / payment-icons

Maintainers

Details