Logo

Display approved logo artwork that follows the page theme.

<Logo mark="logotype" width="66%" />

Usage

Render the current brand’s logotype. Configure artwork, aspect ratios, and alternative text in Logos.

<Logo />

Examples

Show the brandmark

Select brandmark for the symbol alone. Use width to size either mark; its height follows the configured aspect ratio.

<Logo mark="brandmark" width="6rem" />

Choose artwork for the background

Set on="light" or on="dark" to match a fixed panel background. The light and dark panels keep their artwork when you switch the page theme; the automatic example follows it. These neutral shade tokens come from the sample palette; use tokens from your own configuration.

The opening preview uses on="auto", the default, to follow the page theme instead.

<Grid cols={2} colsSm={1}>
  <Panel
    bg="neutral-50"
    fg="neutral-950"
    ratio="5 / 1"
    caption="Artwork for a light background">
    <Logo on="light" width="60%" />
  </Panel>
  <Panel
    bg="neutral-950"
    fg="neutral-50"
    ratio="5 / 1"
    caption="Artwork for a dark background">
    <Logo on="dark" width="60%" />
  </Panel>
  <Panel ratio="5 / 1" caption="Artwork follows the page theme">
    <Logo on="auto" width="60%" />
  </Panel>
</Grid>

Tint a single-color mark

Use a configured CSS token to recolor a single-color SVG.

<Logo tint="var(--primary)" />

Artwork and theme behavior

on="auto" switches between the configured light and dark artwork with the page theme, including the system preference when no explicit theme is selected. It works without JavaScript. on="light" and on="dark" choose artwork for a fixed background; they do not paint that background.

tint takes precedence over on and uses the light-background SVG as a mask. It replaces all artwork colors with one color, so avoid it for multicolor marks. For approved pairings and protected space, see LogoColorways and LogoClearspace.

API reference