IconsProduct

Xsolla product and service icons for dashboards, documentation, and marketing surfaces. Each icon has a colour glyph by default and switches to a single-colour glyph when a color prop is supplied.

Installation

npm install @xsolla/xui-icons-product

Imports

import { PayStation, Login, InGameStore, Launcher, BaseIcon, type ProductIconProps } from '@xsolla/xui-icons-product';

Quick start

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

export default function QuickStart() {
  return <PayStation size={32} aria-label="Pay Station" />;
}

Pass color to render the monochrome variant in that colour:

<PayStation size={32} color="#6366F1" />

API Reference

Product icon components (<PayStation>, <Login>, ...)

All product icons accept the same props (ProductIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | size | number | 24 | Pixel size (square). | | color | string | — | When set, renders the monochrome variant in this colour. When omitted, renders the colour variant. | | className | string | — | CSS class on the wrapper. | | 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.

<BaseIcon>

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

Available icons

| Component | Product | | --- | --- | | Accelerator | Xsolla Accelerator | | AntiFraud | Anti-Fraud protection | | BuyButton | Buy Button widget | | Documentation | Documentation portal | | Funding | Game funding | | Gip | Game Inventory Platform | | InGameStore | In-Game Store | | Launcher | Game Launcher | | Login | Login & authentication | | PartnerNetwork | Partner Network | | PayStation | Pay Station | | PlayerInventory | Player Inventory | | Publisher | Publisher Account | | SiteBuilder | Site Builder | | Subscriptions | Subscriptions |

Examples

Colour vs custom-colour

import * as React from 'react';
import { Login, InGameStore } from '@xsolla/xui-icons-product';

export default function Colours() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Login size={32} aria-label="Login (default colour)" />
      <Login size={32} color="#6366F1" aria-label="Login (indigo)" />
      <InGameStore size={32} aria-label="In-Game Store (default colour)" />
      <InGameStore size={32} color="#10B981" aria-label="In-Game Store (emerald)" />
    </div>
  );
}

Product feature list

import * as React from 'react';
import { PayStation, Login, InGameStore, AntiFraud, Subscriptions } from '@xsolla/xui-icons-product';

export default function FeatureList() {
  const features = [
    { Icon: PayStation, name: 'Pay Station', desc: 'Payment processing' },
    { Icon: Login, name: 'Login', desc: 'User authentication' },
    { Icon: InGameStore, name: 'In-Game Store', desc: 'Virtual goods' },
    { Icon: AntiFraud, name: 'Anti-Fraud', desc: 'Payment protection' },
    { Icon: Subscriptions, name: 'Subscriptions', desc: 'Recurring payments' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {features.map(({ Icon, name, desc }) => (
        <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icon size={32} aria-hidden />
          <div>
            <strong>{name}</strong>
            <p style={{ margin: 0, color: '#666' }}>{desc}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Navigation menu

import * as React from 'react';
import { PayStation, InGameStore, PlayerInventory, Documentation } from '@xsolla/xui-icons-product';

export default function NavigationMenu() {
  const [selected, setSelected] = React.useState('paystation');
  const items = [
    { id: 'paystation', Icon: PayStation, label: 'Pay Station' },
    { id: 'store', Icon: InGameStore, label: 'Store' },
    { id: 'inventory', Icon: PlayerInventory, label: 'Inventory' },
    { id: 'docs', Icon: Documentation, label: 'Documentation' },
  ];
  return (
    <nav style={{ width: 240, padding: 8 }}>
      {items.map(({ id, Icon, label }) => (
        <button
          key={id}
          type="button"
          onClick={() => setSelected(id)}
          aria-pressed={selected === id}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            width: '100%',
            padding: '12px 16px',
            border: 'none',
            borderRadius: 8,
            background: selected === id ? '#E3F2FD' : 'transparent',
            cursor: 'pointer',
            textAlign: 'left',
          }}
        >
          <Icon size={20} color={selected === id ? '#1976D2' : '#666'} aria-hidden />
          <span style={{ color: selected === id ? '#1976D2' : '#333' }}>{label}</span>
        </button>
      ))}
    </nav>
  );
}

Accessibility

• Icons are hidden from screen readers by default.
• When the icon stands alone, set aria-label to the product name.
• Within a labelled control, keep the icon aria-hidden and label the control.