---
id: "packages/active-ui/brand-icons"
title: "Brand icons"
description: "The marks of Google, Microsoft, GitHub, LinkedIn and Facebook, for sign-in buttons."
url: "/packages/active-ui/brand-icons"
locale: "en"
revision: "8f298426830707a1"
---

# Brand icons

Five brand marks for buttons that sign in with an external provider. Each is an SVG component that
takes the props of `<svg>`, is hidden from assistive technology, and sizes with a class.
`GithubIcon` takes the text colour; the other four keep their brand colours.

**Example: Sign-in buttons with brand marks**

Client: Runs entirely in your browser. Source: `examples/ui/brand-icons.tsx`.

```tsx
// apps/docs/examples/ui/brand-icons.tsx
import {
  FacebookIcon,
  GithubIcon,
  GoogleIcon,
  LinkedinIcon,
  MicrosoftIcon,
} from '@workspace/active-ui/components/icons';
import {Button} from '@workspace/active-ui/components/primitives/button';

const PROVIDERS = [
  {name: 'Google', Icon: GoogleIcon},
  {name: 'Microsoft', Icon: MicrosoftIcon},
  {name: 'GitHub', Icon: GithubIcon},
  {name: 'LinkedIn', Icon: LinkedinIcon},
  {name: 'Facebook', Icon: FacebookIcon},
];

/**
 * Sign-in buttons with the providers' marks. The mark is decoration; the
 * button's text names it. The buttons do nothing.
 */
export default function BrandIconsExample() {
  return (
    <div className="grid w-full max-w-xs gap-2">
      {PROVIDERS.map(({name, Icon}) => (
        <Button key={name} variant="outline">
          <Icon className="size-4" />
          Sign in with {name}
        </Button>
      ))}
    </div>
  );
}
```

## Usage

```tsx
import {GoogleIcon} from '@workspace/active-ui/components/icons/google';

<Button variant="outline">
  <GoogleIcon className="size-4" />
  Sign in with Google
</Button>;
```

All five are also exported from `@workspace/active-ui/components/icons`.

## What your application provides

- The button text that names the provider: the mark is decoration.
- The use of each mark according to its owner's brand guidelines.

## API

**GoogleIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

GoogleIcon has no props of its own.

**MicrosoftIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MicrosoftIcon has no props of its own.

**GithubIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

GithubIcon has no props of its own.

**LinkedinIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

LinkedinIcon has no props of its own.

**FacebookIcon**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

FacebookIcon has no props of its own.