HyLogo

Usage examples on this page are written for Lit / plain HTML (<hy-logo>). The same component ships as HyLogo in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A logo component that switches between light and dark variants based on theme property. Provides a simple, performant way to display logos with theme-aware switching.

Key Features

• Manual theme control via theme property ('light' or 'dark')
• Accessibility support with proper alt text
• Optional link wrapper functionality
• Optimized for SSR/CSR consistency

Styling

This component uses design system tokens for consistent theming:

• Focus outline color: --hy-focus-ring-color

Available CSS classes for custom styling:

• .logo-container - Main wrapper element that contains the logo
• .logo-img - The actual logo image element

CSS Variables:

• --hy-focus-ring-color - Color for focus outline (used for accessibility)

Examples

Basic usage

<hy-logo light-src="/logo-light.svg" dark-src="/logo-dark.svg" alt="Company Logo" theme="light">
</hy-logo>

With custom link

<hy-logo
  light-src="/logo-light.svg"
  dark-src="/logo-dark.svg"
  alt="Brand Logo"
  href="/home"
  theme="dark"
>
</hy-logo>

With fixed dimensions

<hy-logo
  light-src="/logo-light.svg"
  dark-src="/logo-dark.svg"
  alt="Company Logo"
  width="200"
  height="60"
  theme="light"
>
</hy-logo>

Custom styling via CSS

hy-logo {
  --hy-focus-ring-color: var(--hy-background-brand-rest);
}

API

Properties

Property	Attribute	Type	Default	Description
lightSrc	light-src	string	''	The URL for the light theme logo.
darkSrc	dark-src	string	''	The URL for the dark theme logo.
alt	alt	string	'Logo'	The alternative text for the logo image.
href	href	string | undefined	—	The href of anchor wrapping the logo.
width	width	string | undefined	—	The width of the logo image. Bare numbers are treated as px. Applied as the HTML width attribute (intrinsic aspect-ratio hint) plus an inline inline-size, so it wins over the responsive default sizing. Set one dimension and the other follows the image's intrinsic aspect ratio.
height	height	string | undefined	—	The height of the logo image. Bare numbers are treated as px. Applied as the HTML height attribute (intrinsic aspect-ratio hint) plus an inline block-size, so it wins over the responsive default sizing. Set one dimension and the other follows the image's intrinsic aspect ratio.
theme	theme	'light' | 'dark'	'light'	The theme to use for the logo. Determines which image source to display.