Logo

The Origin UI brand mark — a hexagon icon paired with the wordmark. Available in three sizes: sm, default, and lg.

Anatomy

The logo is a flex row containing a rounded icon container (primary background, hexagon icon in primary-foreground) and a semibold wordmark. Icon size, gap, and font size all scale together via the size prop.

Sizes

Three sizes scale the icon, wordmark, and gap proportionally.

size="sm"
size="default"
size="lg"

Contexts

The logo has self-contained light and dark mode styles — it switches automatically when the theme changes, with no additional props required.

Design Guidelines

Do

  • Use the predefined sizes. The three size variants maintain correct proportions between icon and wordmark.
  • Use in navigation headers and footers. The logo is most at home in site-level navigation bars.
  • Use className for positioning only. Pass a className for margins or flex alignment, not for overriding brand colors.

Don't

  • Don't alter the icon or wordmark colors. The primary/primary-foreground pairing is intentional and ensures contrast compliance.
  • Don't scale with custom font or icon classes. Use the size prop to resize — manual overrides break the proportional balance.
  • Don't use as a generic icon. The hexagon icon carries brand meaning; use a separate icon from Lucide for other purposes.

Developer Reference

Props

  • size — "sm" | "default" | "lg" (default: "default"). Controls icon size, gap, and wordmark font size together.
  • className — applied to the outer flex container. Use for margins and alignment.

Usage

import { OriginUiLogo } from "@/components/branding/origin-ui-logo"

<OriginUiLogo size="sm" />
<OriginUiLogo />           {/* default */}
<OriginUiLogo size="lg" />

// In a nav header
<nav className="flex items-center justify-between px-6 py-4">
  <OriginUiLogo />
  {/* ...nav items */}
</nav>