IconsBase

A comprehensive collection of functional UI icons (500+) organised by category. Each icon renders through a shared BaseIcon wrapper and supports solid and line variants via the variant prop.

Installation

npm install @xsolla/xui-icons-base

Imports

import { Home, Star, Heart, Bell, Search, BaseIcon, type BaseIconProps, type IconVariant } from '@xsolla/xui-icons-base';

Quick start

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

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

Each icon is a single component (e.g. Home, Star, Heart). Switch its appearance via variant:

<Home variant="line" />   {/* default */}
<Home variant="solid" />

API Reference

Icon components (<Home>, <Star>, <Heart>, ...)

All exported icon components accept the same props (BaseIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | variant | "solid" \| "line" | "line" | Renders the solid (filled) or line (outlined) glyph. | | size | number \| string | 24 | Pixel size, or any CSS length (e.g. "100%" to fill its container). | | color | string | "currentColor" | Icon colour. Inherits from CSS color by default. | | className | string | — | Additional class on the wrapper element. | | style | CSSProperties | — | Inline styles on the wrapper element. | | 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; icons inherit colour from the surrounding text via currentColor.

<BaseIcon>

Internal wrapper. Exported for advanced use cases (e.g. building custom icon components from raw SVG strings). Most consumers should use the named icon components instead.

Examples

Variant toggle

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

export default function Toggle() {
  const [liked, setLiked] = React.useState(false);
  return (
    <button
      type="button"
      onClick={() => setLiked((v) => !v)}
      aria-pressed={liked}
      aria-label={liked ? 'Unlike' : 'Like'}
      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
    >
      <Heart variant={liked ? 'solid' : 'line'} color={liked ? '#e74c3c' : 'currentColor'} aria-hidden />
    </button>
  );
}

Sizing

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Star size={16} aria-hidden />
      <Star size={20} aria-hidden />
      <Star size={24} aria-hidden />
      <Star size={32} aria-hidden />
      <Star size="100%" aria-hidden />
    </div>
  );
}

Status indicators

import * as React from 'react';
import { Check, Warning, InfoCr, RemoveCr } from '@xsolla/xui-icons-base';

export default function Statuses() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <Check variant="solid" color="#2ecc71" aria-hidden /> Saved
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <Warning variant="solid" color="#f39c12" aria-hidden /> Verify details
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <RemoveCr variant="solid" color="#e74c3c" aria-hidden /> Failed
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <InfoCr variant="line" color="#3498db" aria-hidden /> More info
      </span>
    </div>
  );
}

Icon-only button

import * as React from 'react';
import { IconButton } from '@xsolla/xui-button';
import { Settings } from '@xsolla/xui-icons-base';

export default function SettingsButton() {
  return (
    <IconButton aria-label="Open settings">
      <Settings />
    </IconButton>
  );
}

Available icons

The package exports 500+ icons grouped by category. Categories include:

alignments-layouts, bookmarks, chart-graphs, communication, controls, date-time, design, devices-electronics, files-folders, finance-payment, formatting, games, media-controls, navigation-travel, shopping-ecommerce, specialized, user-interface.

Common examples: Home, Search, User, Users, Settings, Bell, Heart, Star, Eye, EyeOff, Lock, LockOpen, Edit, TrashCan, Plus, Minus, Check, Warning, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Copy, Mail, Phone, Calendar, Clock, Image, File, Folder, ShoppingCart, ShoppingBag, BankCard, Wallet.

For the full list, see the package barrel file at packages/foundation/icons-base/src/index.ts.

Accessibility

• Icons render aria-hidden="true" by default — pair them with visible text.
• When an icon stands alone, set aria-label so it is exposed as role="img".
• For interactive icon-only controls, prefer IconButton from @xsolla/xui-button, which enforces an accessible label.