Brand icons

The marks of Google, Microsoft, GitHub, LinkedIn and Facebook, for sign-in buttons.

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.

Sign-in buttons with brand marksClient

Full source examples/ui/brand-icons.tsx

// apps/docs/examples/ui/brand-icons.tsximport {  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#

Parts that take only their element’s attributes

GoogleIcon: the attributes of its element, with className and ref.

Parts that take only their element’s attributes

MicrosoftIcon: the attributes of its element, with className and ref.

Parts that take only their element’s attributes

GithubIcon: the attributes of its element, with className and ref.

Parts that take only their element’s attributes

LinkedinIcon: the attributes of its element, with className and ref.

Parts that take only their element’s attributes

FacebookIcon: the attributes of its element, with className and ref.