Icons

A small curated set of icons backed by lucide-icon-platform and rendered through the cross-platform <Icon> primitive from @xsolla/xui-primitives. Each icon scales with its container.

Installation

npm install @xsolla/xui-icons

Imports

import { Home, Settings, Search, Check, Bell } from "@xsolla/xui-icons";

Quick start

import * as React from "react";
import { Home } from "@xsolla/xui-icons";

export default function QuickStart() {
  return <Home aria-hidden />;
}

For most product surfaces prefer @xsolla/xui-icons-base (500+ icons with solid/line variants). This package exists as a lightweight, primitive-backed alternative for primitives-aligned consumers.

API Reference

Icon components (<Home>, <Settings>, <Check>, ...)

Each icon is a thin wrapper around <Icon> from @xsolla/xui-primitives containing a Lucide glyph rendered at size="100%". Props are forwarded to <Icon>; refer to the primitives package for the authoritative prop list. Common props:

| Prop | Type | Default | Description | | ------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | size | number \| string | inherited from <Icon> | Outer icon size. The inner SVG always fills the container. | | color | string | theme default | Icon colour. | | aria-label | string | — | Accessible label. | | aria-hidden | boolean | — | Mark as decorative. |

Additional props supported by <Icon> (e.g. className, style, test IDs) are passed through.

This package does not consume ThemeOverrideProps directly; theme awareness is handled by the underlying <Icon> primitive.

Available icons

Check, X, Copy, Eye, EyeOff, ArrowLeft, ArrowRight, Settings, Minus, AlertCircle, CreditCard, Menu, Bell, User, Search, Home, ShoppingCart, Upload, File, Info.

Examples

Basic usage

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

export default function Basic() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <Home aria-hidden />
      <Settings aria-hidden />
      <User aria-hidden />
      <Search aria-hidden />
    </div>
  );
}

Coloured icons

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

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

With a button

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

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

Extended icon sets

For a wider palette, use the family-specific packages:

• @xsolla/xui-icons-base — 500+ functional icons (solid/line).
• @xsolla/xui-icons-brand — brand and platform logos.
• @xsolla/xui-icons-flag — country flags (ISO 3166-1 alpha-2).
• @xsolla/xui-icons-payment — payment-method logos.
• @xsolla/xui-icons-currency — Xsolla virtual-currency icons.
• @xsolla/xui-icons-product — Xsolla product icons.

Accessibility

• Mark decorative icons with aria-hidden.
• For meaningful icons, set aria-label on the icon or its parent.
• Use IconButton from @xsolla/xui-button for interactive icon-only controls.