Icon Wrapper

A cross-platform React container component that provides consistent sizing, alignment, and shapes for small visual elements like icons, labels, images, and avatars.

Installation

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

Demo

Basic Icon Wrapper

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

export default function BasicWrapper() {
  return (
    <IconWrapper>
      <Star size={16} />
    </IconWrapper>
  );
}

Different Sizes

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <IconWrapper size="xxs"><Heart size={12} /></IconWrapper>
      <IconWrapper size="xs"><Heart size={14} /></IconWrapper>
      <IconWrapper size="sm"><Heart size={16} /></IconWrapper>
      <IconWrapper size="md"><Heart size={20} /></IconWrapper>
      <IconWrapper size="lg"><Heart size={24} /></IconWrapper>
      <IconWrapper size="xl"><Heart size={32} /></IconWrapper>
    </div>
  );
}

Different Shapes

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

export default function Shapes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <IconWrapper shape="none" size="lg">
        <User size={24} />
      </IconWrapper>
      <IconWrapper shape="smooth" size="lg">
        <User size={24} />
      </IconWrapper>
      <IconWrapper shape="full" size="lg">
        <User size={24} />
      </IconWrapper>
    </div>
  );
}

Anatomy

import { IconWrapper } from '@xsolla/xui-icon-wrapper';

<IconWrapper
  size="md"                    // Wrapper size
  shape="none"                // Border radius shape
  type="icon"                 // Content type hint
  backgroundColor={color}     // Custom background
  borderColor={color}         // Custom border
>
  <Icon />
</IconWrapper>

Examples

With Avatar

import * as React from 'react';
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
import { Avatar } from '@xsolla/xui-avatar';

export default function AvatarWrapper() {
  return (
    <IconWrapper size="lg" shape="full" type="avatar">
      <Avatar src="https://example.com/avatar.jpg" size="md" />
    </IconWrapper>
  );
}

With Custom Colors

import * as React from 'react';
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
import { Check } from '@xsolla/xui-icons-base';

export default function CustomColors() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <IconWrapper
        shape="full"
        size="lg"
        backgroundColor="#E8F5E9"
        borderColor="#4CAF50"
      >
        <Check size={20} color="#4CAF50" />
      </IconWrapper>
      <IconWrapper
        shape="smooth"
        size="lg"
        backgroundColor="#FFF3E0"
      >
        <Star size={20} color="#FF9800" />
      </IconWrapper>
    </div>
  );
}

Icon Status Indicators

import * as React from 'react';
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
import { Check, Close, AlertTriangle } from '@xsolla/xui-icons-base';

export default function StatusIndicators() {
  const statuses = [
    { icon: <Check size={16} color="#fff" />, bg: '#4CAF50', label: 'Success' },
    { icon: <Close size={16} color="#fff" />, bg: '#F44336', label: 'Error' },
    { icon: <AlertTriangle size={16} color="#fff" />, bg: '#FF9800', label: 'Warning' },
  ];

  return (
    <div style={{ display: 'flex', gap: 16 }}>
      {statuses.map(({ icon, bg, label }) => (
        <IconWrapper
          key={label}
          shape="full"
          size="md"
          backgroundColor={bg}
        >
          {icon}
        </IconWrapper>
      ))}
    </div>
  );
}

With Brand Icons

import * as React from 'react';
import { IconWrapper } from '@xsolla/xui-icon-wrapper';
import { Github, Discord, Twitch } from '@xsolla/xui-icons-brand';

export default function BrandIcons() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <IconWrapper size="lg" shape="smooth" type="brand">
        <Github size={24} />
      </IconWrapper>
      <IconWrapper size="lg" shape="smooth" type="brand">
        <Discord size={24} />
      </IconWrapper>
      <IconWrapper size="lg" shape="smooth" type="brand">
        <Twitch size={24} />
      </IconWrapper>
    </div>
  );
}

API Reference

IconWrapper

IconWrapperProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Content to display inside wrapper. | | size | "xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Wrapper size. | | shape | "none" \| "smooth" \| "full" | "none" | Border radius style. | | type | "icon" \| "label" \| "image" \| "avatar" \| "brand" \| "custom" | "icon" | Content type hint for styling. | | backgroundColor | string | - | Custom background color. | | borderColor | string | - | Custom border color. |

Size Specifications

| Size | Dimensions | | :--- | :--------- | | xxs | 16x16 | | xs | 20x20 | | sm | 24x24 | | md | 32x32 | | lg | 40x40 | | xl | 56x56 |

Shape Behavior

| Shape | Description | | :---- | :---------- | | none | No border radius, transparent background | | smooth | Slightly rounded corners (proportional to size) | | full | Fully circular (border-radius: 999px) |

Use Cases

• Icon containers: Wrap icons with consistent sizing and backgrounds
• Avatar frames: Provide circular or rounded frames for avatars
• Status indicators: Create colored badge-like indicators
• Brand icon containers: Display brand logos with consistent sizing
• Feature icons: Highlight feature icons with backgrounds

Accessibility

• Content inside the wrapper maintains its own accessibility attributes
• Use aria-label on the child element when the icon conveys meaning
• Decorative icons should have aria-hidden="true"