Icons Payment

A cross-platform React payment icons package containing logos for major credit cards and payment providers. Renders as scalable SVGs.

Installation

npm install @xsolla/xui-icons-payment
# or
yarn add @xsolla/xui-icons-payment

Demo

Credit Card Icons

import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Discover } from '@xsolla/xui-icons-payment';

export default function CreditCardIcons() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Visa size={40} />
      <Mastercard size={40} />
      <AmericanExpress size={40} />
      <Discover size={40} />
    </div>
  );
}

Payment Providers

import * as React from 'react';
import { Paypal, Unionpay, Jcb, Maestro } from '@xsolla/xui-icons-payment';

export default function PaymentProviders() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Paypal size={40} />
      <Unionpay size={40} />
      <Jcb size={40} />
      <Maestro size={40} />
    </div>
  );
}

Icon Sizes

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

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

Anatomy

import { Visa } from '@xsolla/xui-icons-payment';

<Visa
  size={40}                    // Size in pixels
  className="payment-icon"     // CSS class
  style={{ margin: 4 }}        // Inline styles
  aria-label="Visa"            // Accessible label
/>

Examples

Accepted Payment Methods

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

export default function AcceptedPayments() {
  return (
    <div>
      <p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
        We accept
      </p>
      <div style={{ display: 'flex', gap: 8 }}>
        <Visa size={32} aria-label="Visa" />
        <Mastercard size={32} aria-label="Mastercard" />
        <AmericanExpress size={32} aria-label="American Express" />
        <Discover size={32} aria-label="Discover" />
        <Paypal size={32} aria-label="PayPal" />
      </div>
    </div>
  );
}

Payment Method Selector

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

export default function PaymentSelector() {
  const [selected, setSelected] = React.useState('visa');

  const methods = [
    { id: 'visa', name: 'Visa', Icon: Visa },
    { id: 'mastercard', name: 'Mastercard', Icon: Mastercard },
    { id: 'amex', name: 'American Express', Icon: AmericanExpress },
    { id: 'paypal', name: 'PayPal', Icon: Paypal },
  ];

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {methods.map(({ id, name, Icon }) => (
        <button
          key={id}
          onClick={() => setSelected(id)}
          style={{
            padding: '12px 16px',
            border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
            borderRadius: 8,
            background: 'white',
            cursor: 'pointer',
          }}
          aria-pressed={selected === id}
        >
          <Icon size={40} aria-label={name} />
        </button>
      ))}
    </div>
  );
}

Card Input Display

import * as React from 'react';
import { Visa, Mastercard, AmericanExpress } from '@xsolla/xui-icons-payment';
import { Input } from '@xsolla/xui-input';

export default function CardInputDisplay() {
  const [cardNumber, setCardNumber] = React.useState('');

  const getCardIcon = () => {
    if (cardNumber.startsWith('4')) return <Visa size={24} />;
    if (cardNumber.startsWith('5')) return <Mastercard size={24} />;
    if (cardNumber.startsWith('3')) return <AmericanExpress size={24} />;
    return null;
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <Input
        value={cardNumber}
        onChange={(e) => setCardNumber(e.target.value)}
        placeholder="Card number"
        style={{ flex: 1 }}
      />
      {getCardIcon()}
    </div>
  );
}

API Reference

Payment Icon Components

Each payment icon component accepts the same props:

PaymentIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Size in pixels. | | 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 Icons

| Component | Payment Method | | :-------- | :------------- | | AmericanExpress | American Express | | Aura | Aura | | CartesBancaires | Cartes Bancaires | | Cirrus | Cirrus | | Dankort | Dankort | | Dinersclub | Diners Club | | Discover | Discover | | Elo | Elo | | Hipercard | Hipercard | | Jcb | JCB | | Maestro | Maestro | | Mastercard | Mastercard | | Mir | Mir | | Naranja | Naranja | | Paypal | PayPal | | Sodexo | Sodexo | | Uatp | UATP | | Unionpay | UnionPay | | Visa | Visa |

Tree Shaking

Import individual icons for optimal bundle size:

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

// Avoid - imports all icons
import * as PaymentIcons from '@xsolla/xui-icons-payment';

Accessibility

• Icons are hidden from screen readers by default
• Use aria-label when the icon conveys meaningful information
• For decorative payment badges, keep the default hidden behavior
• When used in buttons/links, the parent element should have the accessible label