ExperimentalatomData display

BrandMark

A company's logo at icon size: LinkedIn, Google, Microsoft, Apple, WhatsApp, Telegram, Chrome.

import { … } from "@brdgapp/ui/components/brand-mark"

Usage

BrandMark is a company's logo at icon size: LinkedIn, Google, Microsoft, Apple, WhatsApp, Telegram and Chrome. It sits where an icon would, on buttons like “Continue with Google”, beside a link to someone's LinkedIn, or to show where a contact came from. Lucide has no logos, so the apps drew their own, each a little different. The usual mistake is drawing one by hand, or recoloring a logo to match the page.

When to use

On a sign-in or sync button: “Continue with Google”, “Sync contacts from Microsoft”.
Beside a link that goes to that company's site: someone's LinkedIn profile, a WhatsApp chat.
To show where something came from: a contact found through LinkedIn, a message from Telegram.

When not to use

For an action or an idea, even one tied to a company (send, share, message). Use a Lucide icon.
For a person or an organization in your network. Use their photo or logo. Use Avatar instead.
For Bridge's own logo. That belongs to the brand page and the app's shell.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

One icon set, one icon per meaning

Every icon is Lucide at its own 2px line. Each meaning has one icon, listed on Iconography; a meaning that isn't listed gets a Lucide icon nobody else uses, added to the list in the same change. No other icon set, no emoji in the interface, and no hand-drawn company logos: BrandMark draws them.

Anatomy

Logo. The company's logo in its own colors. Apple's follows the text color.
Square. The box the logo sits in: square, 16px by default, the same as an icon, so it lines up with Lucide icons beside it.
Name. Not part of BrandMark: the company's name, written beside it. Because it's there, the logo stays hidden from screen readers.

Examples

The logos

At 16px, the icon size, and 24px. Each in the company's own colors.

Google

Microsoft

Apple

Chrome

On a button

The logo leads and the company's name follows, so the logo stays hidden from screen readers.

In a row of details

In one color (mono), LinkedIn takes the text's color and darkens with it on hover.

Leah Okonkwo

Partner, Saltmarsh Partners

Lagosleah@saltmarsh.vcLinkedIn

States

State	What happens
Color	The default. The logo as the company draws it.
One color	`mono`: LinkedIn, WhatsApp and Telegram in the text's color, for a quiet link in a row of details. Google, Microsoft and Chrome stay in color; Apple is always one color.

Behavior

Sized like an icon: 16px, or set size-3.5, size-5 with className.
Apple's logo follows the text color, so it's dark on a light page and white on a dark one.
LinkedIn's letters stay white in dark mode.

Do and don't

Show the logo in its own colors, at the size an icon would be.

Don't

Tint a logo blue or grey to match the page (except LinkedIn, WhatsApp and Telegram with mono).

Use BrandMark for every logo in this list.

Don't

Paste a logo's SVG into a screen, or write “in” in a blue square.

Content

Write the company's name next to it on a button: “Continue with Google”, not the logo alone.
Spell the names as the companies do: LinkedIn, WhatsApp.

Accessibility

Hidden from screen readers by default, because the name is usually written next to it.
Set label when the logo stands alone, so it's read as the company's name.
A logo alone inside a link or button still needs the link named: “Leah Okonkwo on LinkedIn”.

API reference