Icons Product

A cross-platform React product icons package containing Xsolla product and service symbols for use in dashboards, documentation, and marketing materials.

Installation

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

Demo

All Product Icons

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

export default function AllProducts() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <PayStation size={32} />
      <Login size={32} />
      <InGameStore size={32} />
      <Launcher size={32} />
    </div>
  );
}

Different Sizes

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

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

With Custom Color

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

export default function CustomColor() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Login size={32} color="#6366F1" />
      <InGameStore size={32} color="#10B981" />
    </div>
  );
}

Anatomy

import { PayStation } from '@xsolla/xui-icons-product';

<PayStation
  size={24}                  // Size in pixels
  color="#000"               // Icon color
  className="product-icon"   // CSS class
  style={{ margin: 4 }}      // Inline styles
  aria-label="Pay Station"   // Accessible label
/>

Examples

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: 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>
  );
}

Product Dashboard Cards

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

export default function DashboardCards() {
  const products = [
    { icon: PayStation, name: 'Pay Station', status: 'Active' },
    { icon: Login, name: 'Login', status: 'Active' },
    { icon: InGameStore, name: 'In-Game Store', status: 'Setup Required' },
    { icon: Launcher, name: 'Launcher', status: 'Not Configured' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
      {products.map(({ icon: Icon, name, status }) => (
        <div
          key={name}
          style={{
            padding: 16,
            border: '1px solid #e0e0e0',
            borderRadius: 8,
            display: 'flex',
            alignItems: 'center',
            gap: 12,
          }}
        >
          <Icon size={40} />
          <div>
            <strong>{name}</strong>
            <p style={{ margin: 0, fontSize: 12, color: '#666' }}>{status}</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 menuItems = [
    { 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 }}>
      {menuItems.map(({ id, icon: Icon, label }) => (
        <button
          key={id}
          onClick={() => setSelected(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'} />
          <span style={{ color: selected === id ? '#1976D2' : '#333' }}>{label}</span>
        </button>
      ))}
    </nav>
  );
}

API Reference

Product Icon Components

Each product icon component accepts the same props:

ProductIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Size in pixels. | | color | string | - | Icon color (uses original colors if not set). | | 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 | 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 payments | | PlayerInventory | Player Inventory | | Publisher | Publisher Account | | SiteBuilder | Site Builder | | Subscriptions | Subscriptions |

Tree Shaking

Import individual icons for optimal bundle size:

// Good - only imports needed icons
import { PayStation, Login } from '@xsolla/xui-icons-product';

// Avoid - imports all icons
import * as ProductIcons from '@xsolla/xui-icons-product';

Accessibility

• Icons are hidden from screen readers by default (aria-hidden="true")
• Use aria-label when the icon conveys meaningful information
• When used in navigation or buttons, the parent element should have the accessible label
• For decorative product badges, keep the default hidden behavior