Skip to content

Foundation

Logo

Beta

Renders the Checkatrade brand mark as either a full wordmark or a square "CAT" mark. Automatically swaps to the reversed (white) variant on any non-neutral Surface tone. Supports three preset sizes and decorative and labelled accessibility modes.

Storybook (React) Storybook (React Native) Jira

Marks

Two marks are available: the full wordmark (full, default) and the square “CAT” mark (icon).

Full wordmark

The default mark. Use as the primary brand representation.

<Logo />

Square mark

The compact square 'CAT' mark. Use in space-constrained contexts such as favicons, app icons, or tight navigation bars.

<Logo mark="icon" />

Sizes

Three sizes are available. The default is md.

Size ramp

All three sizes using the full wordmark.

<div className="flex items-end gap-6 flex-wrap">
<Logo size="sm" label="Checkatrade (sm)" />
<Logo size="md" label="Checkatrade (md)" />
<Logo size="lg" label="Checkatrade (lg)" />
</div>

Surface-aware inverse

On any non-neutral Surface tone the reversed (white) variant is applied automatically. No extra prop is needed.

Inside an inverse Surface

On a non-neutral Surface the Logo shows the reversed (white) variant automatically, so it stays legible on the dark background.

<Surface tone="inverse" className="rounded-lg p-6">
<Logo label="Checkatrade" />
</Surface>

When to use

Use Logo whenever you need to display the Checkatrade brand mark. Choose full (wordmark) as the default and reserve icon (square mark) for contexts where space is limited and the brand is already established.

Marks

  • full — the full horizontal wordmark. Use as the primary representation: headers, footers, marketing pages.
  • icon — the compact square “CAT” mark. Use in tight spaces: favicons, app icons, compact navigation.

Sizes

SizeHeightTypical use
sm24 pxCompact headers, inline brand mentions
md32 pxDefault — most layouts
lg48 pxHero sections, splash screens

Sizes are provisional pending design sign-off.

Inverse / Surface tones

The Logo component reads the surrounding Surface tone via React context. On any non-neutral tone (inverse, brand-primary, brand-secondary) it automatically renders the reversed (white) variant. Use the explicit inverse prop only when you need the reversed mark outside of a Surface.

Accessibility

  • By default, label is 'Checkatrade', exposing the mark as an image with that accessible name.
  • Pass label={null} when the logo is purely decorative — for example, when a visible text heading already reads “Checkatrade” immediately alongside it. The mark will be hidden from assistive technology.

When not to use

  • Icons from the icon set: use the Icon component.
  • Illustrations: use a plain <img> or the Illustration component.
  • Custom partner or co-brand marks: use a plain <img> with an appropriate alt attribute.

Props

Prop Type Default Description
mark 'full' | 'icon' 'full' Which mark to render: 'full' is the horizontal wordmark, 'icon' is the compact square CAT mark.
size 'sm' | 'md' | 'lg' 'md' Sets the height of the mark (24 px / 32 px / 48 px). Width is derived from each mark's intrinsic aspect ratio. Sizes are provisional pending design sign-off.
inverse boolean - Force the variant (true → reversed, false → positive). Defaults to auto, derived from the Surface tone and the light/dark theme — you rarely need this prop.
label string | null 'Checkatrade' Accessible label. Omit (or pass null) to make the mark decorative (aria-hidden). Provide a string to expose it as an image with that accessible name.
className string - Additional CSS classes merged onto the SVG element.

Import

Web

import { Logo } from '@checkatrade/components-web';

Native

import { Logo } from '@checkatrade/components-native';

Basic usage

{/* Default wordmark, labelled */}
<Logo />

{/* Square mark */}
<Logo mark="icon" />

{/* Explicit size */}
<Logo size="lg" />

{/* Decorative — hidden from assistive technology */}
<Logo label={null} />

Inverse on a dark surface

{/* Automatic via Surface context — no prop needed */}
<Surface tone="inverse" className="p-6">
  <Logo />
</Surface>

{/* Manual inverse without a Surface */}
<div style={{ background: 'var(--color-background-surface-brand-primary-default)', padding: '1rem' }}>
  <Logo inverse />
</div>

Platform status

Platform / AreaStatus
Design (Figma) Planned
Web (React) Beta
Native (React Native) Beta
iOS (Swift) Planned
Android (Kotlin) Planned
Accessibility audit Planned

Accessibility

Web

  • Decorative logos set aria-hidden="true" and role="presentation" — completely invisible to assistive technology.
  • Labelled logos set role="img" and aria-label from the label prop (defaults to 'Checkatrade').
  • The SVG inherits dimensions via an inline height style; width is auto to preserve the mark’s intrinsic aspect ratio.

React Native

  • See the native Logo component for accessibility details on mobile.

No releases yet.