Brand

Logo BW

The BW monogram, for tight spaces: navbars, avatars, favicons. It fills its box, so the container sets the size.

packages/design-system/components/logo-bw.tsx

Examples

Navbar size, 32px tall
On black

Anatomy

  1. 01B, drawn
  2. 02W, drawn
  3. 03fill: currentColor, viewBox 103 by 62

Usage

import LogoBW from "@repo/design-system/components/logo-bw";

<div className="h-8 w-14">
  <LogoBW />
</div>

Guidance

Do

  • Use it where the full wordmark would drop below 120px wide.

Don't

  • Set both the logo and the monogram side by side.

Where it's used