IconsPayment

Logos for major credit cards and payment providers, rendered as scalable SVGs with a fixed 4:3 aspect ratio (width = round(size × 4/3) × height = size).

Installation

npm install @xsolla/xui-icons-payment

Imports

import { Visa, Mastercard, AmericanExpress, Paypal, PaymentIcon, type PaymentIconProps } from '@xsolla/xui-icons-payment';

Quick start

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

export default function QuickStart() {
  return <Visa aria-label="Visa" />;
}

The size prop sets the icon height; width is automatically computed as round(size × 4/3) to preserve the card aspect ratio.

API Reference

Payment icon components (<Visa>, <Mastercard>, ...)

All payment icons share the same props (PaymentIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | size | number | 18 | Height in pixels. Width is auto-computed as round(size × 4/3). | | className | string | — | CSS class on the wrapper (web only). | | style | CSSProperties | — | Inline styles. | | data-testid | string | — | Test ID (web). | | testID | string | — | Test ID (React Native). | | aria-label | string | — | Accessible label. When set, the icon is exposed as role="img". | | aria-hidden | boolean | true if no aria-label | Hide from assistive tech. |

This package does not consume ThemeOverrideProps; payment logos render with their brand colours.

<PaymentIcon>

Internal wrapper exported for advanced use (custom payment-icon components built from raw SVG strings). Most consumers should use the named icon components.

Available icons

| Component | 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 |

Examples

Accepted payment methods

import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Discover, Paypal } 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}
          type="button"
          onClick={() => setSelected(id)}
          aria-pressed={selected === id}
          style={{
            padding: '12px 16px',
            border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
            borderRadius: 8,
            background: 'white',
            cursor: 'pointer',
          }}
        >
          <Icon size={32} aria-label={name} />
        </button>
      ))}
    </div>
  );
}

Sizing

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Visa size={18} aria-label="Visa, small" />
      <Visa size={24} aria-label="Visa, medium" />
      <Visa size={40} aria-label="Visa, large" />
      <Visa size={56} aria-label="Visa, extra large" />
    </div>
  );
}

Accessibility

• Icons are hidden from screen readers by default.
• Set aria-label whenever the logo conveys meaning (e.g. listing accepted methods).
• For decorative badges within a labelled control, keep the default hidden behaviour and label the control instead.