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 SVG 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 an inline SVG keyframe player.

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 dense inline content where continuous motion could distract from adjacent task flows.

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 renders the animated BY mark in blue for light mode and white for dark mode. Its motion is replayed from the original BY mark Lottie-derived SVG keyframes without shipping a Lottie runtime.

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 SVG BY mark. Reads the ThemeProvider color context — dark renders the white animation, all other values render the blue animation. The motion is derived from the retained LogoAnimatedWhite.json and LogoAnimatedBYBlue.json source assets and replayed as inline SVG path, opacity, translate, rotate, and scale keyframes. It respects prefers-reduced-motion by rendering a static BY mark without the looping effect. speed={1} preserves the original source timing, and higher values increase playback speed.

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) includes a built-in prefers-reduced-motion fallback that disables the loop and renders a static BY mark. The animation is decorative by default; pair it with an aria-hidden wrapper or a visible label as appropriate. Keep the retained JSON assets as motion-reference source files until a dedicated cleanup removes them.

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