Icons

A cross-platform React icon component library based on Lucide icons. Provides theme-aware icons that automatically adapt to the current theme colors.

Installation

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

Demo

Basic Usage

Icons are exported as named components. Import and use them directly:

import * as React from 'react';
import { Home, Settings, User, Search } from '@xsolla/xui-icons';

export default function BasicIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Home />
      <Settings />
      <User />
      <Search />
    </div>
  );
}

Icon Sizes

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

export default function IconSizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Bell size={12} />
      <Bell size={16} />
      <Bell size={20} />
      <Bell size={24} />
      <Bell size={32} />
    </div>
  );
}

Custom Colors

import * as React from 'react';
import { Check, AlertCircle, X } from '@xsolla/xui-icons';

export default function ColoredIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Check color="#2ecc71" />
      <AlertCircle color="#f39c12" />
      <X color="#e74c3c" />
    </div>
  );
}

Anatomy

Import icons as named exports and use them as components:

import { Home, Settings, Check } from '@xsolla/xui-icons';

<Home
  size={24}            // Size in pixels (default: 24)
  color="#color"       // Custom color (uses theme default if not specified)
/>

Examples

Navigation Icons

import * as React from 'react';
import { ArrowLeft, ArrowRight, Menu, X } from '@xsolla/xui-icons';

export default function NavigationIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <ArrowLeft />
      <ArrowRight />
      <Menu />
      <X />
    </div>
  );
}

Action Icons

import * as React from 'react';
import { Check, X, Minus, Copy } from '@xsolla/xui-icons';

export default function ActionIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Check />
      <X />
      <Minus />
      <Copy />
    </div>
  );
}

Status Icons

import * as React from 'react';
import { Check, AlertCircle } from '@xsolla/xui-icons';

export default function StatusIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Check color="#2ecc71" />
      <AlertCircle color="#f39c12" />
    </div>
  );
}

With Button

import * as React from 'react';
import { ArrowRight, ArrowLeft } from '@xsolla/xui-icons';
import { Button } from '@xsolla/xui-button';

export default function IconWithButton() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button iconLeft={<ArrowLeft />}>Back</Button>
      <Button iconRight={<ArrowRight />}>Continue</Button>
    </div>
  );
}

API Reference

Icon Components

Each icon is exported as a named component with the following props:

Icon Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Icon size in pixels. | | color | string | Theme default | Icon color. |

Available Icons

The @xsolla/xui-icons package exports a curated set of commonly used icons:

• Check - Checkmark icon
• X - Close/remove icon
• Copy - Copy to clipboard icon
• Eye - Visibility on icon
• EyeOff - Visibility off icon
• ArrowLeft - Left arrow icon
• ArrowRight - Right arrow icon
• Settings - Settings/gear icon
• Minus - Minus/subtract icon
• AlertCircle - Alert/warning circle icon
• CreditCard - Credit card icon
• Menu - Hamburger menu icon
• Bell - Notification bell icon
• User - User profile icon
• Search - Search/magnifying glass icon
• Home - Home icon
• ShoppingCart - Shopping cart icon
• Upload - Upload icon
• File - File icon

Extended Icon Sets

For additional icons, use the specialized icon packages:

• @xsolla/xui-icons-base - Comprehensive icon library with 400+ icons organized by category (controls, communication, files, finance, etc.)
• @xsolla/xui-icons-brand - Brand and company logos (160+ brands)
• @xsolla/xui-icons-flag - Country flag icons
• @xsolla/xui-icons-payment - Payment method icons
• @xsolla/xui-icons-currency - Currency icons
• @xsolla/xui-icons-product - Product-specific icons

Using icons-base

import { ChevronDown, ChevronUp, Calendar, Clock } from '@xsolla/xui-icons-base';

// Use like any other icon
<ChevronDown size={16} />
<Calendar color="#333" />

Theming

Icons use the design system theme for default color:

// Default color from theme
theme.colors.content.primary  // Default icon color

Accessibility

• Icons are decorative by default (aria-hidden="true")
• When using icons alone without text, provide an aria-label on the parent element
• For icon buttons, use the IconButton component which requires aria-label