Rich Icon

A cross-platform React component for displaying icons, images, or text content in a styled container with customizable shapes and sizes.

Installation

npm install @xsolla/xui-rich-icon
# or
yarn add @xsolla/xui-rich-icon

Demo

With Icon

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

export default function WithIcon() {
  return (
    <RichIcon size="md" variant="rounded">
      <RichIcon.Icon>
        <Star size={20} />
      </RichIcon.Icon>
    </RichIcon>
  );
}

With Image

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';

export default function WithImage() {
  return (
    <RichIcon size="lg" variant="circle">
      <RichIcon.Icon src="https://example.com/avatar.jpg" />
    </RichIcon>
  );
}

With Text

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';

export default function WithText() {
  return (
    <RichIcon size="md" variant="rounded">
      <RichIcon.Icon>
        <RichIcon.Text>AB</RichIcon.Text>
      </RichIcon.Icon>
    </RichIcon>
  );
}

Anatomy

import { RichIcon } from '@xsolla/xui-rich-icon';

<RichIcon
  size="md"              // s, m, l, xl
  variant="rounded"     // rounded, circle, square
>
  <RichIcon.Icon
    src={imageUrl}      // Image source URL
    component={<Icon />} // Custom component
  >
    {children}          // Or render children
  </RichIcon.Icon>
</RichIcon>

Examples

Different Variants

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';
import { User } from '@xsolla/xui-icons-base';

export default function Variants() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <RichIcon size="lg" variant="square">
        <RichIcon.Icon><User size={24} /></RichIcon.Icon>
      </RichIcon>
      <RichIcon size="lg" variant="rounded">
        <RichIcon.Icon><User size={24} /></RichIcon.Icon>
      </RichIcon>
      <RichIcon size="lg" variant="circle">
        <RichIcon.Icon><User size={24} /></RichIcon.Icon>
      </RichIcon>
    </div>
  );
}

Different Sizes

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <RichIcon size="sm" variant="rounded">
        <RichIcon.Icon><Heart size={14} /></RichIcon.Icon>
      </RichIcon>
      <RichIcon size="md" variant="rounded">
        <RichIcon.Icon><Heart size={18} /></RichIcon.Icon>
      </RichIcon>
      <RichIcon size="lg" variant="rounded">
        <RichIcon.Icon><Heart size={24} /></RichIcon.Icon>
      </RichIcon>
      <RichIcon size="xl" variant="rounded">
        <RichIcon.Icon><Heart size={32} /></RichIcon.Icon>
      </RichIcon>
    </div>
  );
}

User Initials

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';

export default function UserInitials() {
  const users = [
    { name: 'John Doe', initials: 'JD' },
    { name: 'Alice Smith', initials: 'AS' },
    { name: 'Bob Wilson', initials: 'BW' },
  ];

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {users.map(({ name, initials }) => (
        <RichIcon key={name} size="md" variant="circle" aria-label={name}>
          <RichIcon.Icon>
            <RichIcon.Text>{initials}</RichIcon.Text>
          </RichIcon.Icon>
        </RichIcon>
      ))}
    </div>
  );
}

Feature Icons

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';
import { Shield, Zap, Globe } from '@xsolla/xui-icons-base';

export default function FeatureIcons() {
  const features = [
    { icon: <Shield size={24} />, title: 'Secure' },
    { icon: <Zap size={24} />, title: 'Fast' },
    { icon: <Globe size={24} />, title: 'Global' },
  ];

  return (
    <div style={{ display: 'flex', gap: 32 }}>
      {features.map(({ icon, title }) => (
        <div key={title} style={{ textAlign: 'center' }}>
          <RichIcon size="xl" variant="rounded">
            <RichIcon.Icon>{icon}</RichIcon.Icon>
          </RichIcon>
          <p style={{ marginTop: 8 }}>{title}</p>
        </div>
      ))}
    </div>
  );
}

Game Platform Icons

import * as React from 'react';
import { RichIcon } from '@xsolla/xui-rich-icon';
import { Steam, Playstation, Xbox } from '@xsolla/xui-icons-brand';

export default function PlatformIcons() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <RichIcon size="lg" variant="rounded">
        <RichIcon.Icon component={<Steam size={24} />} />
      </RichIcon>
      <RichIcon size="lg" variant="rounded">
        <RichIcon.Icon component={<Playstation size={24} />} />
      </RichIcon>
      <RichIcon size="lg" variant="rounded">
        <RichIcon.Icon component={<Xbox size={24} />} />
      </RichIcon>
    </div>
  );
}

API Reference

RichIcon

RichIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | RichIcon.Icon child component. | | variant | "rounded" \| "circle" \| "square" | "rounded" | Container shape. | | size | "sm" \| "md" \| "lg" \| "xl" | "md" | Container size. |

RichIcon.Icon

RichIconIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | src | string | - | Image URL (displays as background). | | component | ReactNode | - | Custom icon component. | | children | ReactNode | - | Child content (icon or text). | | color | string | - | Icon color override. |

RichIcon.Text

RichIconTextProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | string | - | Text content (typically initials). |

Size Specifications

| Size | Dimensions | Font Size | | :--- | :--------- | :-------- | | sm | 24x24 | 10px | | md | 32x32 | 12px | | lg | 40x40 | 14px | | xl | 64x64 | 18px |

Variant Shapes

| Variant | Border Radius | | :------ | :------------ | | square | 0px | | rounded | 8px | | circle | 1000px |

Use Cases

• User avatars: Display profile pictures or initials
• Feature icons: Highlight features with styled icons
• Category icons: Visual indicators for categories
• Platform badges: Display platform or service icons
• Status indicators: Combined with status icons

Accessibility

• Use aria-label on the RichIcon when conveying meaning
• For decorative icons, content is hidden from screen readers
• Text content (initials) is accessible to screen readers
• Ensure sufficient color contrast for text content