Logos Brand

A cross-platform React brand logos package containing 500+ payment providers, banks, retail stores, and service logos for checkout and payment method displays.

Installation

npm install @xsolla/xui-logos-brand
# or
yarn add @xsolla/xui-logos-brand

Demo

Payment Provider Logos

import * as React from 'react';
import { Visa, Mastercard, Paypal, ApplePay } from '@xsolla/xui-logos-brand';

export default function PaymentLogos() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Visa size={48} />
      <Mastercard size={48} />
      <Paypal size={48} />
      <ApplePay size={48} />
    </div>
  );
}

Different Sizes

import * as React from 'react';
import { Visa } from '@xsolla/xui-logos-brand';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Visa size={24} />
      <Visa size={32} />
      <Visa size={48} />
      <Visa size={64} />
    </div>
  );
}

Custom Dimensions

import * as React from 'react';
import { GooglePay } from '@xsolla/xui-logos-brand';

export default function CustomDimensions() {
  return (
    <GooglePay width={120} height={48} />
  );
}

Anatomy

import { Visa } from '@xsolla/xui-logos-brand';

<Visa
  size={24}                  // Size in pixels (square)
  width={48}                 // Width override
  height={24}                // Height override
  className="payment-logo"   // CSS class
  style={{ margin: 4 }}      // Inline styles
  aria-label="Visa"          // Accessible label
/>

Examples

Payment Method Selection

import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Paypal, GooglePay, ApplePay } from '@xsolla/xui-logos-brand';

export default function PaymentSelection() {
  const [selected, setSelected] = React.useState<string | null>(null);

  const methods = [
    { id: 'visa', Logo: Visa, label: 'Visa' },
    { id: 'mc', Logo: Mastercard, label: 'Mastercard' },
    { id: 'amex', Logo: AmericanExpress, label: 'American Express' },
    { id: 'paypal', Logo: Paypal, label: 'PayPal' },
    { id: 'gpay', Logo: GooglePay, label: 'Google Pay' },
    { id: 'apple', Logo: ApplePay, label: 'Apple Pay' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
      {methods.map(({ id, Logo, label }) => (
        <button
          key={id}
          onClick={() => setSelected(id)}
          style={{
            padding: 16,
            border: selected === id ? '2px solid #1976D2' : '1px solid #ddd',
            borderRadius: 8,
            background: '#fff',
            cursor: 'pointer',
          }}
          aria-pressed={selected === id}
        >
          <Logo size={40} aria-label={label} />
        </button>
      ))}
    </div>
  );
}

Bank Logos

import * as React from 'react';
import { Hsbc, Bnpparibas, Citibank, Santander } from '@xsolla/xui-logos-brand';

export default function BankLogos() {
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
      <Hsbc size={48} aria-label="HSBC" />
      <Bnpparibas size={48} aria-label="BNP Paribas" />
      <Citibank size={48} aria-label="Citibank" />
      <Santander size={48} aria-label="Santander" />
    </div>
  );
}

E-Wallet Logos

import * as React from 'react';
import { Dana, Ovo, Gopay, ShopeePay } from '@xsolla/xui-logos-brand';

export default function EWalletLogos() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Dana size={40} />
      <Ovo size={40} />
      <Gopay size={40} />
      <ShopeePay size={40} />
    </div>
  );
}

Checkout Footer

import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-logos-brand';

export default function CheckoutFooter() {
  return (
    <div style={{
      padding: 16,
      borderTop: '1px solid #e0e0e0',
      textAlign: 'center'
    }}>
      <p style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
        Secure payment powered by
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <Visa size={32} aria-label="Visa" />
        <Mastercard size={32} aria-label="Mastercard" />
        <AmericanExpress size={32} aria-label="American Express" />
        <Paypal size={32} aria-label="PayPal" />
      </div>
    </div>
  );
}

API Reference

Brand Logo Components

Each brand logo component accepts the same props:

BrandLogoProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Size in pixels (width and height). | | width | number | - | Width override (takes precedence over size). | | height | number | - | Height override (takes precedence over size). | | className | string | - | CSS class name. | | style | CSSProperties | - | Inline styles. | | data-testid | string | - | Test ID (web). | | testID | string | - | Test ID (React Native). | | aria-label | string | - | Accessible label. | | aria-hidden | boolean | true if no aria-label | Hide from screen readers. |

Available Logos (500+)

Credit Cards

Visa, Mastercard, AmericanExpress, Discover, Jcb, Dinersclub, Unionpay, Maestro, Elo, Hipercard

Digital Wallets

Paypal, ApplePay, GooglePay, SamsungPay, Alipay, WechatPay, Dana, Ovo, Gopay, ShopeePay, GrabPay, LinePay, KakaoPay

Banks

Hsbc, Bnpparibas, Citibank, Santander, Barclays, Ing, Rabobank, Commerzbank

Mobile Payments

Boku, Fortumo, Paygarden

Cryptocurrency

Bitpay, Crypto

Buy Now Pay Later

Klarna, Afterpay, Affirm, Zip

Regional Payment Methods

Blik (Poland), Ideal (Netherlands), Bancontact (Belgium), Sofort (Germany), Trustly (Nordics), Pix (Brazil)

Retail Stores

SevenEleven, FamilyMart, Lawson, Ministop, Indomaret, Alfamart

Tree Shaking

Import individual logos for optimal bundle size:

// Good - only imports needed logos
import { Visa, Mastercard } from '@xsolla/xui-logos-brand';

// Avoid - imports all logos
import * as BrandLogos from '@xsolla/xui-logos-brand';

Accessibility

• Logos are hidden from screen readers by default (aria-hidden="true")
• Use aria-label when the logo conveys meaningful information
• For payment method lists, consider adding visible text labels alongside logos
• When used in selection contexts, the parent button should have the accessible label