Icons Brand

A cross-platform React brand icons package containing 160+ company and platform logos. Each icon supports colored and monochrome variants.

Installation

npm install @xsolla/xui-icons-brand
# or
yarn add @xsolla/xui-icons-brand

Demo

Colored Icons (Default)

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

export default function ColoredIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Github size={32} />
      <Discord size={32} />
      <Steam size={32} />
      <Twitch size={32} />
    </div>
  );
}

Monochrome Icons

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

export default function MonoIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Github size={32} variant="mono" />
      <Discord size={32} variant="mono" />
      <Steam size={32} variant="mono" />
      <Twitch size={32} variant="mono" />
    </div>
  );
}

Different Sizes

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Google size={16} />
      <Google size={24} />
      <Google size={32} />
      <Google size={48} />
    </div>
  );
}

Anatomy

import { Github } from '@xsolla/xui-icons-brand';

<Github
  size={24}                // Size in pixels
  variant="colored"        // colored or mono
  className="brand-icon"   // CSS class
  style={{ margin: 4 }}    // Inline styles
  aria-label="GitHub"      // Accessible label
/>

Examples

Social Media Links

import * as React from 'react';
import { Facebook, Twitter, Instagram, Linkedin, Youtube } from '@xsolla/xui-icons-brand';

export default function SocialLinks() {
  const socials = [
    { Icon: Facebook, url: 'https://facebook.com', label: 'Facebook' },
    { Icon: Twitter, url: 'https://twitter.com', label: 'Twitter' },
    { Icon: Instagram, url: 'https://instagram.com', label: 'Instagram' },
    { Icon: Linkedin, url: 'https://linkedin.com', label: 'LinkedIn' },
    { Icon: Youtube, url: 'https://youtube.com', label: 'YouTube' },
  ];

  return (
    <div style={{ display: 'flex', gap: 12 }}>
      {socials.map(({ Icon, url, label }) => (
        <a key={label} href={url} aria-label={label}>
          <Icon size={24} />
        </a>
      ))}
    </div>
  );
}

Platform Login Options

import * as React from 'react';
import { Google, Apple, Steam, Discord } from '@xsolla/xui-icons-brand';
import { Button } from '@xsolla/xui-button';

export default function LoginOptions() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Button variant="secondary" iconLeft={<Google size={20} />}>
        Continue with Google
      </Button>
      <Button variant="secondary" iconLeft={<Apple size={20} />}>
        Continue with Apple
      </Button>
      <Button variant="secondary" iconLeft={<Steam size={20} />}>
        Continue with Steam
      </Button>
      <Button variant="secondary" iconLeft={<Discord size={20} />}>
        Continue with Discord
      </Button>
    </div>
  );
}

Gaming Platforms

import * as React from 'react';
import {
  Steam,
  EpicGamesStore,
  Gog,
  Playstation,
  Xbox,
  BattleNet,
} from '@xsolla/xui-icons-brand';

export default function GamingPlatforms() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Steam size={32} aria-label="Steam" />
      <EpicGamesStore size={32} aria-label="Epic Games Store" />
      <Gog size={32} aria-label="GOG" />
      <Playstation size={32} aria-label="PlayStation" />
      <Xbox size={32} aria-label="Xbox" />
      <BattleNet size={32} aria-label="Battle.net" />
    </div>
  );
}

Themed Footer

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

export default function ThemedFooter() {
  return (
    <footer style={{ background: '#1a1a1a', padding: 24 }}>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
        <Github size={24} variant="mono" style={{ color: '#fff' }} />
        <Twitter size={24} variant="mono" style={{ color: '#fff' }} />
        <Discord size={24} variant="mono" style={{ color: '#fff' }} />
      </div>
    </footer>
  );
}

API Reference

Brand Icon Components

Each brand icon component accepts the same props:

BrandIconProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | size | number | 24 | Size in pixels. | | variant | "colored" \| "mono" | "colored" | Icon style variant. | | className | string | - | CSS class name. | | style | CSSProperties | - | Inline styles. | | data-testid | string | - | Test ID (web). | | testID | string | - | Test ID (React Native). | | aria-label | string | - | Accessible label. | | aria-hidden | boolean | true if no aria-label | Hide from screen readers. |

Available Icons (160+)

Social & Communication

Discord, Facebook, FacebookMessenger, Instagram, Line, Linkedin, Meetup, RedditAlien, Skype, Slack, SnapchatGhost, TelegramPlane, Tiktok, Tumblr, Twitter, Viber, Vk, Wechat, Whatsapp

Gaming Platforms

BattleNet, EaGames, EpicGamesStore, Gog, GooglePlay, GoogleStadia, ItchIo, MinecraftLauncher, MyNintendoStore, NexonLauncher, Oculus, Origin, ParadoxLauncher, Playstation, RiotGames, RobloxClient, RockstarGames, Steam, SteamSymbol, Ubisoft, Viveport, WargamingGameCenter, Xbox

Payment & Finance

AmericanExpress, ApplePay, Btc, CcDinersClub, CcJcb, CcMastercard, CcPaypal, CcVisa, Ethereum, GooglePay, Paypal, Stripe

Tech Companies

Adobe, Amazon, Apple, Atlassian, Dropbox, Ebay, Etsy, Google, GoogleDrive, Meta, Microsoft, Salesforce

Development

Angular, Bitbucket, Bootstrap, Centos, Codepen, Confluence, Css3Alt, Figma, GitAlt, Github, GithubAlt, Gitlab, Html5, Java, Jira, Linux, NodeJs, Npm, Sketch, Trello, Ubuntu, Unity, WordpressSimple

Browsers

Chrome, Edge, FirefoxBrowser, Opera, Safari

Media & Entertainment

Bandcamp, Behance, Deviantart, Dribbble, Flickr, Imdb, ItunesNote, Soundcloud, Spotify, Twitch, Unsplash, VimeoV, Youtube

Xsolla

XsollaLine, XsollaSolid

Tree Shaking

Import individual icons for optimal bundle size:

// Good - only imports needed icons
import { Github, Discord } from '@xsolla/xui-icons-brand';

// Avoid - imports all icons
import * as BrandIcons from '@xsolla/xui-icons-brand';

Accessibility

• Icons are hidden from screen readers by default (aria-hidden="true")
• Use aria-label when the icon conveys meaningful information
• When used in buttons/links, the parent element should have the accessible label
• For decorative brand badges, keep the default hidden behavior