Brand Marks

The real Google, GitHub, Microsoft and Apple logos, for sign-in buttons and anywhere else a provider's mark shows.

Installation

npx shadcn@latest add https://ui.mattdowney.com/r/brand-marks.json

Usage

import { GoogleMark, GitHubMark, MicrosoftMark, AppleMark } from "@/components/ui/brand-marks"

Examples

In a sign-in button

Pass the mark to iconStart and the button sizes it. Keep the button neutral: Google's rules require the four-color G, so there is no one-color version for a colored button.

All four

Google and Microsoft keep their brand colors. GitHub and Apple take the text color, so they switch with the theme.

API Reference

Prop	Type	Default	Description
...props	React.ComponentProps<"svg">	-	Every `<svg>` prop. Size it with `className` (`size-4`) when it is not inside a Button. Hidden from screen readers; the label beside it names the provider.

...propsReact.ComponentProps<"svg">Every `<svg>` prop. Size it with `className` (`size-4`) when it is not inside a Button. Hidden from screen readers; the label beside it names the provider.

import * as React from "react"

/**
 * Provider logos for sign-in buttons and anywhere else a provider's mark
 * shows: Simple Icons path data (CC0), inlined because Google and Microsoft are
 * fixed-fill multicolor marks a monochrome icon set cannot draw. Google and
 * Microsoft keep their brand fills; GitHub and Apple take `currentColor`, so
 * they follow the text of the button they sit in. Each takes every `<svg>`
 * prop and is `aria-hidden`, since the button's label already names the
 * provider. No "use client": pure SVG, safe in a Server Component and as
 * `iconStart={<GoogleMark />}` on a Button.
 */

// There is deliberately no one-color Google mark. Google's sign-in branding
// rules require the four-color G, so on a colored button the fix is a neutral
// button, never a recolored G.

// @component GoogleMark
// @use-when a sign-in or "continue with" button, or any place that shows a
// sign-in provider's logo (Google, GitHub, Microsoft, Apple). Import the real
// mark here instead of drawing your own.
function GoogleMark(props: React.ComponentProps<"svg">) {
  return (
    <svg viewBox="0 0 48 48" aria-hidden="true" {...props}>
      <path
        fill="#4285F4"
        d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"
      />
      <path
        fill="#34A853"
        d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"
      />
      <path
        fill="#FBBC05"
        d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"
      />
      <path
        fill="#EA4335"
        d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"
      />
    </svg>
  )
}

function GitHubMark(props: React.ComponentProps<"svg">) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path
        fill="currentColor"
        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
      />
    </svg>
  )
}

function MicrosoftMark(props: React.ComponentProps<"svg">) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path fill="#F25022" d="M1 1h10v10H1z" />
      <path fill="#7FBA00" d="M13 1h10v10H13z" />
      <path fill="#00A4EF" d="M1 13h10v10H1z" />
      <path fill="#FFB900" d="M13 13h10v10H13z" />
    </svg>
  )
}

function AppleMark(props: React.ComponentProps<"svg">) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path
        fill="currentColor"
        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.56-1.702"
      />
    </svg>
  )
}

export { GoogleMark, GitHubMark, MicrosoftMark, AppleMark }

Badge Breadcrumb