Icons Currency

A cross-platform React virtual currency icons package containing Xsolla game currency symbols. Each icon supports colored and monochrome variants.

Installation

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

Demo

All Currency Icons

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

export default function AllCurrencies() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <PlayTime size={32} />
      <XsollaGold size={32} />
      <XsollaPoint size={32} />
      <XsollaTicket size={32} />
    </div>
  );
}

Colored vs Monochrome

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' }}>
      <div>
        <p>Colored:</p>
        <XsollaGold size={32} variant="colored" />
      </div>
      <div>
        <p>Mono:</p>
        <XsollaGold size={32} variant="mono" />
      </div>
      <div>
        <p>Custom color:</p>
        <XsollaGold size={32} variant="mono" color="#FFD700" />
      </div>
    </div>
  );
}

Different Sizes

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

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

Anatomy

import { XsollaGold } from '@xsolla/xui-icons-currency';

<XsollaGold
  size={24}                  // Size in pixels
  variant="colored"          // colored or mono
  color="currentColor"       // Color (mono variant only)
  className="currency-icon"  // CSS class
  style={{ margin: 4 }}      // Inline styles
  aria-label="Gold"          // Accessible label
/>

Examples

Currency 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: Icon, amount, label }) => (
        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon size={24} aria-hidden />
          <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} />
      <span style={{ fontWeight: 600 }}>500</span>
    </div>
  );
}

Shop Item Card

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

export default function ShopItem() {
  return (
    <div style={{
      padding: 16,
      border: '1px solid #e0e0e0',
      borderRadius: 8,
      width: 200,
    }}>
      <img
        src="https://example.com/item.png"
        alt="Sword of Fire"
        style={{ width: '100%', height: 120, objectFit: 'cover' }}
      />
      <h3 style={{ margin: '12px 0 8px' }}>Sword of Fire</h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 12 }}>
        <XsollaGold size={20} />
        <span style={{ fontWeight: 600 }}>1,500</span>
      </div>
      <Button size="sm" fullWidth>Buy Now</Button>
    </div>
  );
}

Reward Notification

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

export default function RewardNotification() {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 16,
      padding: 16,
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: 12,
      color: '#fff',
    }}>
      <div style={{ fontSize: 24 }}>Congratulations!</div>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <XsollaGold size={24} />
          <span>+100</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <XsollaTicket size={24} />
          <span>+1</span>
        </div>
      </div>
    </div>
  );
}

API Reference

Currency Icon Components

Each currency icon component accepts the same props:

CurrencyIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Size in pixels. | | variant | "colored" \| "mono" | "colored" | Icon style variant. | | color | string | "currentColor" | Icon color (mono variant only). | | 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 | Description | | :-------- | :---------- | | PlayTime | Time-based game currency | | XsollaGold | Gold coin currency | | XsollaPoint | Points/credits currency | | XsollaTicket | Ticket/voucher currency |

Tree Shaking

Import individual icons for optimal bundle size:

// Good - only imports needed icons
import { XsollaGold, XsollaPoint } from '@xsolla/xui-icons-currency';

// Avoid - imports all icons
import * as CurrencyIcons from '@xsolla/xui-icons-currency';

Accessibility

• Icons are hidden from screen readers by default (aria-hidden="true")
• Use aria-label when the currency icon conveys meaningful information
• When displaying amounts, ensure the currency type is communicated to screen readers
• Consider adding visually hidden text for accessibility: "1,500 Gold coins"