# IconsBrand

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

## Installation

```bash
npm install @xsolla/xui-icons-brand
```

## Imports

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

## Quick start

```tsx
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`:

```tsx
<Github variant="colored" />  {/* default */}
<Github variant="mono" />     {/* uses theme.colors.content.primary */}
<Github variant="mono" color="#FF7A00" />
```

## 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 uses the active theme `content.primary` token by default. |
| `size` | `number` | `24` | Pixel size (square). |
| `color` | `string` | `theme.colors.content.primary` | Manual color override for the mono variant. |
| `themeMode` | `ThemeMode` | current design-system context | Optional theme mode override used to resolve the default mono color. |
| `themeProductContext` | `ProductContext` | current design-system context | Optional product context override used to resolve the default mono color. |
| `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. |

Mono icons consume `ThemeOverrideProps` so their default color follows the same theme context as the rest of the UI kit. Colored icons keep their original brand fills.

### `<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

```tsx
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 }}>
        <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>
  );
}
```

### Mono color override

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

export default function MonoColorOverride() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Github size={32} variant="mono" color="#FF7A00" aria-label="GitHub" />
      <Discord size={32} variant="mono" color="#5865F2" aria-label="Discord" />
      <Steam size={32} variant="mono" color="#1B2838" aria-label="Steam" />
    </div>
  );
}
```

### Social media links

```tsx
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

```tsx
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.
