Tabler Payments

Over 160 payment provider logos, from Visa and PayPal to local methods, in light and dark versions for checkout pages and payment forms.

Tabler Payments is a collection of 169 payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions - light and dark - so it looks right on any background.

<span class="payment payment-lg payment-provider-visa"></span>
<span class="payment payment-lg payment-provider-mastercard"></span>
<span class="payment payment-lg payment-provider-paypal"></span>
<span class="payment payment-lg payment-provider-shopify"></span>
<span class="payment payment-lg payment-provider-amazon"></span>

You can use the logos in two ways:

• CSS plugin: add the payment and payment-provider-* classes to a <span>. Works with plain HTML and any framework, and needs only one extra stylesheet.
• Libraries: render logos as native, tree-shakable components in React, Vue, Preact or Astro, with type-checked props and no separate CSS file.

Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes.

Quick start

For the CSS plugin, include the stylesheet from a CDN and add a <span> with the provider's class:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-payments.min.css" />

<span class="payment payment-provider-visa"></span>

For a framework project, install the package for your stack and import the providers you need - only the logos you import end up in your bundle:

import { PaymentVisa } from '@tabler/payments-react';

<PaymentVisa size={32} />

The CSS plugin page documents all classes, sizes and the full provider list; each library page covers installation and props for its framework.