# 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

```bash
npm install @xsolla/xui-icons
```

## Imports

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

## Quick start

```tsx
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

```tsx
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

```tsx
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

```tsx
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.