IconsBrand

160+ company and platform logos, each available in colored and mono variants and rendered as scalable SVGs.

Installation

npm install @xsolla/xui-icons-brand

Imports

import { Github, Discord, Steam, BaseIcon, type BrandIconProps, type IconVariant } from '@xsolla/xui-icons-brand';

Quick start

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

export default function QuickStart() {
  return <Github size={32} aria-label="GitHub" />;
}

Switch the visual treatment with variant:

<Github variant="colored" />  {/* default */}
<Github variant="mono" />

API Reference

Brand icon components (<Github>, <Discord>, <Steam>, ...)

All brand icons accept the same props (BrandIconProps).

| Prop | Type | Default | Description | | --- | --- | --- | --- | | variant | "colored" \| "mono" | "colored" | Renders the colour or monochrome glyph. Mono inherits the surrounding color. | | size | number | 24 | Pixel size (square). | | 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.

<BaseIcon>

Internal wrapper exported for advanced use cases (custom brand icons built from raw SVG strings). Most consumers should use the named icon components instead.

Available icons (160+)

Social and 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

Payments and finance

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

Tech and productivity

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 and entertainment

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

Xsolla

XsollaLine, XsollaSolid

For the full list, see packages/foundation/icons-brand/src/index.ts.

Examples

Variants

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

export default function Variants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', gap: 16 }}>
        <Github size={32} aria-label="GitHub" />
        <Discord size={32} aria-label="Discord" />
        <Steam size={32} aria-label="Steam" />
        <Twitch size={32} aria-label="Twitch" />
      </div>
      <div style={{ display: 'flex', gap: 16, color: '#333' }}>
        <Github size={32} variant="mono" aria-label="GitHub" />
        <Discord size={32} variant="mono" aria-label="Discord" />
        <Steam size={32} variant="mono" aria-label="Steam" />
        <Twitch size={32} variant="mono" aria-label="Twitch" />
      </div>
    </div>
  );
}

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/example', label: 'Facebook' },
    { Icon: Twitter, url: 'https://twitter.com/example', label: 'Twitter' },
    { Icon: Instagram, url: 'https://instagram.com/example', label: 'Instagram' },
    { Icon: Linkedin, url: 'https://linkedin.com/company/example', label: 'LinkedIn' },
    { Icon: Youtube, url: 'https://youtube.com/@example', 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} aria-hidden />
        </a>
      ))}
    </div>
  );
}

Platform login buttons

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} aria-hidden />}>Continue with Google</Button>
      <Button variant="secondary" iconLeft={<Apple size={20} aria-hidden />}>Continue with Apple</Button>
      <Button variant="secondary" iconLeft={<Steam size={20} aria-hidden />}>Continue with Steam</Button>
      <Button variant="secondary" iconLeft={<Discord size={20} aria-hidden />}>Continue with Discord</Button>
    </div>
  );
}

Accessibility

• Icons are hidden from screen readers by default.
• Set aria-label whenever a brand logo carries meaning (e.g. as a stand-alone link).
• Within a labelled control (link/button), keep the icon aria-hidden and label the control.