IconsTagLabel

Xsolla tag-label icons (20px glyphs) for entity, rarity, status, and merch tags. Separate from @xsolla/xui-tag-label, which is the tag component itself.

Each icon has a colour glyph by default and switches to a single-colour glyph when a color prop is supplied.

Installation

npm install @xsolla/xui-icons-tag-label

Imports

import { EntityAccount, tagLabelIcons, BaseIcon, type TagLabelIconProps } from '@xsolla/xui-icons-tag-label';

Quick start

import * as React from 'react';
import { EntityAccount, tagLabelIcons } from '@xsolla/xui-icons-tag-label';

export default function QuickStart() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <EntityAccount size={20} aria-label="Account" />
      <tagLabelIcons.RarityRare size={20} aria-label="Rare" />
    </div>
  );
}

Pass color to render the monochrome variant in that colour:

<EntityAccount size={20} color="#6366F1" />

API Reference

Tag-label icon components (<EntityAccount>, tagLabelIcons, ...)

All tag-label icons accept the same props (TagLabelIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | size | number | 20 | Pixel size (square). | | color | string | — | When set, renders the monochrome variant in this colour. When omitted, renders the colour variant. | | className | string | — | CSS class on the wrapper. | | style | CSSProperties | — | Inline styles. | | 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.

tagLabelIcons

Map of every tag-label icon, keyed by component name.

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

export default function TagLabelGrid() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <tagLabelIcons.EntityProduct size={20} aria-hidden />
      <tagLabelIcons.StatusSale size={20} aria-hidden />
    </div>
  );
}

<BaseIcon>

Internal wrapper exported for advanced use (custom tag-label icons built from raw SVG strings). Most consumers should use the named icon components.

Available icons

| Component | Kind | | --- | --- | | EntityAccount | Entity — account | | EntityBackpack | Entity — backpack | | EntityCurrency | Entity — currency | | EntityDiscount | Entity — discount | | EntityItem | Entity — item | | EntityProduct | Entity — product | | MerchEvent | Merch — event | | RarityDefault | Rarity — default | | RarityNew | Rarity — new | | RarityRare | Rarity — rare | | RarityRedeemed | Rarity — redeemed | | StatusInactive | Status — inactive | | StatusMaintenance | Status — maintenance | | StatusSale | Status — sale |

Accessibility

• Icons are hidden from screen readers by default.
• When the icon stands alone, set aria-label to the tag meaning.
• Within a labelled control, keep the icon aria-hidden and label the control.