IconsCurrency

Xsolla virtual-currency icons (PlayTime, XsollaGold, XsollaPoint, XsollaTicket) with colored and mono variants.

Installation

npm install @xsolla/xui-icons-currency

Imports

import { PlayTime, XsollaGold, XsollaPoint, XsollaTicket, BaseIcon, type CurrencyIconProps, type IconVariant } from '@xsolla/xui-icons-currency';

Quick start

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

export default function QuickStart() {
  return <XsollaGold size={24} aria-label="Xsolla Gold" />;
}

API Reference

Currency icon components (<XsollaGold>, <PlayTime>, ...)

All currency icons accept the same props (CurrencyIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | variant | "colored" \| "mono" | "colored" | Renders the colour or monochrome glyph. | | size | number | 24 | Pixel size (square). | | color | string | "currentColor" | Icon colour. Applies only to the mono 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 cases (custom currency icons built from raw SVG strings). Most consumers should use the named icon components.

Available icons

| Component | Description | | --- | --- | | PlayTime | Play-time game currency. | | XsollaGold | Gold-coin currency. | | XsollaPoint | Points/credits currency. | | XsollaTicket | Ticket/voucher currency. |

Examples

Variants

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

export default function Variants() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <XsollaGold size={32} aria-label="Gold, colour" />
      <XsollaGold size={32} variant="mono" aria-label="Gold, monochrome" />
      <XsollaGold size={32} variant="mono" color="#FFD700" aria-label="Gold, custom colour" />
    </div>
  );
}

Balance display

import * as React from 'react';
import { XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';

export default function BalanceDisplay() {
  const balances = [
    { Icon: XsollaGold, amount: 1250, label: 'Gold' },
    { Icon: XsollaPoint, amount: 500, label: 'Points' },
    { Icon: XsollaTicket, amount: 3, label: 'Tickets' },
  ];
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      {balances.map(({ Icon, amount, label }) => (
        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon size={24} aria-hidden />
          <span>
            <span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap' }}>{label}: </span>
            {amount.toLocaleString()}
          </span>
        </div>
      ))}
    </div>
  );
}

Price tag

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

export default function PriceTag() {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 4,
        padding: '4px 12px',
        background: '#FFF8E1',
        borderRadius: 16,
      }}
    >
      <XsollaGold size={20} aria-hidden />
      <span style={{ fontWeight: 600 }}>500 Gold</span>
    </div>
  );
}

Accessibility

• Icons are hidden from screen readers by default.
• When standing alone, set aria-label on the icon.
• When paired with a number (e.g. price), make sure the currency name is conveyed in surrounding text or a visually hidden label.