Logos Xsolla

A cross-platform React component for displaying the official Xsolla logo with support for full logo (icon + text), text-only, and icon-only variants in multiple color options.

Installation

npm install @xsolla/xui-logos-xsolla

Demo

Full Logo

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function FullLogo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <Xsolla variant="full" color="brand" />
      <Xsolla variant="full" color="black" />
      <Xsolla variant="full" color="white" />
    </div>
  );
}

Text Only

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function TextOnly() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <Xsolla variant="text" color="brand" />
      <Xsolla variant="text" color="black" />
      <Xsolla variant="text" color="white" />
    </div>
  );
}

Icon Only

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function IconOnly() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <Xsolla variant="icon" color="brand" />
      <Xsolla variant="icon" color="black" />
      <Xsolla variant="icon" color="white" />
    </div>
  );
}

Different Sizes

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function Sizes() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Xsolla size="xs" />
      <Xsolla size="sm" />
      <Xsolla size="md" />
      <Xsolla size={48} />
    </div>
  );
}

Anatomy

import { Xsolla } from "@xsolla/xui-logos-xsolla";

<Xsolla
  variant="full" // full, text, or icon
  color="brand" // brand, black, or white
  size="sm" // xs, sm, md, or custom number
  className="logo" // CSS class
  style={{ margin: 8 }} // Inline styles
  aria-label="Xsolla" // Accessible label
/>;

Examples

Header Logo

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function HeaderLogo() {
  return (
    <header
      style={{
        display: "flex",
        alignItems: "center",
        padding: "16px 24px",
        background: "#1a1a1a",
      }}
    >
      <a href="/" aria-label="Xsolla Home">
        <Xsolla variant="full" color="brand" size="md" />
      </a>
    </header>
  );
}

Footer Logo

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function FooterLogo() {
  return (
    <footer
      style={{
        padding: 24,
        background: "#f5f5f5",
        textAlign: "center",
      }}
    >
      <Xsolla variant="full" color="black" size="sm" />
      <p style={{ marginTop: 8, fontSize: 12, color: "#666" }}>
        Powered by Xsolla
      </p>
    </footer>
  );
}

Favicon/App Icon

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function AppIcon() {
  return (
    <div
      style={{
        width: 48,
        height: 48,
        background: "#1a1a1a",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Xsolla variant="icon" color="brand" size="md" />
    </div>
  );
}

Responsive Logo

import * as React from "react";
import { Xsolla } from "@xsolla/xui-logos-xsolla";

export default function ResponsiveLogo() {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const getVariant = () => {
    if (width < 480) return "icon";
    if (width < 768) return "text";
    return "full";
  };

  return <Xsolla variant={getVariant()} color="brand" size="md" />;
}

API Reference

Xsolla

XsollaLogoProps:

| Prop | Type | Default | Description | | :----------------- | :------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------ | | variant | "full" \| "text" \| "icon" | "full" | Logo variant: full (icon + text), text only, or icon only. | | color | "brand" \| "black" \| "white" | "brand" | Logo color. | | size | "xs" \| "sm" \| "md" \| number | "sm" | Size preset or custom height in pixels. | | className | string | - | CSS class name. | | style | CSSProperties | - | Inline styles. | | data-testid | string | - | Test ID (web). | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | aria-label | string | - | Accessible label. | | aria-hidden | boolean | - | Hide from screen readers. | | accessibilityLabel | string | - | React Native accessibility label. |

Size Presets

| Preset | Height | | :----- | :----- | | xs | 18px | | sm | 24px | | md | 32px |

Color Values

| Color | Hex Code | | :------ | :------- | | brand | #80EAFF | | black | #000000 | | white | #FFFFFF |

Variants

The component supports three variants:

• full - Complete logo with icon and "XSOLLA" text (default)
• text - Text-only "XSOLLA" without the icon (useful for tight spaces or text-heavy layouts)
• icon - Icon only, the distinctive Xsolla "X" symbol (useful for small spaces like favicons or compact headers)

Brand Guidelines

• Use the brand color (cyan) on dark backgrounds for best visibility
• Use black on light backgrounds
• Use white on colored or dark photo backgrounds
• Use the text variant when you need the wordmark without the icon
• Use the icon variant for compact spaces where the full logo won't fit
• Maintain clear space around the logo equal to the height of the "X" icon
• Don't stretch, distort, or apply effects to the logo

Accessibility

• When used as a link, wrap in an anchor tag with aria-label
• For decorative logos, use aria-hidden="true"
• The logo has appropriate contrast ratios for each color variant