Logo

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

The Logo family is a set of independent SVG components — there is no parent wrapper:

Logo            (full horizontal lockup: wordmark + BY mark)
LogoTagline     (wordmark + tagline)
LogoStacked     (stacked BY mark + wordmark)
LogoPlus        (BY mark icon only)
LogoBY          (BY initials — social / avatar contexts)
LogoBYAnimation (animated Lottie BY mark — light/dark aware)

Each SVG variant renders a single <svg> element and accepts all standard SVG attributes alongside the Experience System size and dataTestId props. LogoBYAnimation renders a <div> wrapper around a Lottie animation.

Usage

import { Logo, LogoBY, LogoBYAnimation, LogoPlus, LogoStacked, LogoTagline } from '@by/experience-system';

Logo and the SVG variants are client components ('use client'). Use them inside a Client Component or a dynamic import when using the Next.js App Router.

<Logo />

Control height with the size prop (sm = 16 px, md = 20 px default, lg = 24 px) or pass a className to override with any Tailwind height utility:

<Logo size="lg" />
<Logo className="h-12" />

When to use

• Logo — default choice for headers, navigation bars, and most product surfaces.
• LogoTagline — when horizontal space allows and communicating brand purpose is valuable.
• LogoStacked — when horizontal space is limited but vertical space is available.
• LogoPlus — compact icon-only placement (favicons, app icons, constrained layouts).
• LogoBY — social profiles, avatars, or other square contexts.
• LogoBYAnimation — loading screens, splash views, or brand moments requiring motion.

When not to use

• Do not alter, recolor, or reconstruct any logo variant. Always use the components as provided.
• Do not use LogoBYAnimation in performance-critical inline content — the Lottie bundle adds weight.

Examples

Overview

All six logo variants at a glance.

Secondary logos

LogoTagline, LogoStacked, and LogoPlus for space-constrained or supplemental placements.

Sizes

The size prop maps to fixed heights. Pass a className for arbitrary values or responsive widths.

Animated BY mark

LogoBYAnimation reads the ThemeProvider color context and plays the blue Lottie animation in light mode and the white animation in dark mode.

API Reference

The Logo components are custom Blue Yonder Experience System exports with no upstream Radix primitive. The tables below describe the full public surface.

Logo

Renders the full horizontal Blue Yonder lockup (wordmark + BY mark) as an SVG.

Also accepts all standard SVGProps<SVGSVGElement> HTML attributes.

LogoBY

Renders the BY initials mark — suited for social profiles and avatar-sized placements.

Also accepts all standard SVGProps<SVGSVGElement> HTML attributes.

LogoStacked

Renders the stacked BY mark + wordmark layout for limited horizontal space.

Also accepts all standard SVGProps<SVGSVGElement> HTML attributes.

LogoTagline

Renders the wordmark with tagline for spacious brand placements.

Also accepts all standard SVGProps<SVGSVGElement> HTML attributes.

LogoPlus

Renders the icon-only BY plus mark for compact or constrained layouts.

Also accepts all standard SVGProps<SVGSVGElement> HTML attributes.

LogoBYAnimation

Renders an animated Lottie BY mark. Reads the ThemeProvider color context — dark plays the white animation, all other values play the blue animation.

Also accepts all standard HTMLAttributes<HTMLDivElement> attributes.

Accessibility

Logo components render SVG graphics. When placed without adjacent visible text, add a descriptive aria-label on the parent container or a visually hidden label so screen readers can identify the logo.

<a href="/" aria-label="Blue Yonder home">
  <Logo />
</a>

The animated variant (LogoBYAnimation) renders a Lottie animation. If it plays automatically, include a prefers-reduced-motion media query or pause mechanism in context where motion may be disruptive. The animation is decorative by default; pair it with an aria-hidden wrapper or a visible label as appropriate.

Source in the repo: packages/experience-system/src/components/Logo/Logo.tsx. Agent-oriented contracts: packages/experience-system/src/components/Logo/Logo.instructions.md.