HomeFoundations

Roundel

TfL roundel with mode presets. Official artwork stays off until you allow it.

Primitive

Used byTube & Rail Arrivals Tube & Rail Status Bus Arrivals Cycle hire docks

Preview

Default

Placeholder. Set NEXT_PUBLIC_ALLOW_TFL_ROUNDEL=true to enable the mark.

Mode presets

tfl
underground
dlr
elizabeth
buses
cableCar
coaches
dialARide
overground
river
tram
cycles

Artwork variants

underground
dlr
elizabeth
overground
tram

Installable via shadcn CLI

Installation

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tfl-roundel.json

Licensing

The TfL roundel is trademarked. By default the component renders a filled placeholder with the same footprint so layouts do not jump. Enable the official SVG in your app only if you have permission:

NEXT_PUBLIC_ALLOW_TFL_ROUNDEL=true

Setting the flag shifts trademark responsibility to your application. See TfL brand IP. Without the flag you see the placeholder disc and bar.

Props

Pass explicit colours or a mode preset. It does not fetch TfL data.

import { TfLRoundel } from "@/components/tfl/brand/tfl-roundel"

export default function Page() {
  return (
    <>
      <TfLRoundel />
      <TfLRoundel variant="elizabeth" />
      <TfLRoundel text="MY APP" ringColor="#E32017" barColor="#0019A8" />
    </>
  )
}

Prop	Type	Description
`variant`	mode preset	`underground`, `elizabeth`, `overground`, `dlr`, `tram`, `cycles`
`text`	`string`	Bar label.
`ringColor` / `barColor` / `textColor`	`string`	Custom colours.
`barBorderColor`	`string`	Stroke around the bar. Cycles only, per TfL Basic Elements: white bar plus green border. Omit for other modes.
`artwork`	`boolean`	Use Wikimedia or local SVG artwork when allowed.

Mode presets and logo paths are exported as ROUNDEL_PRESETS, ROUNDEL_LOGO_PATHS, and ROUNDEL_LOGO_SOURCES.

In code

TfL brand licensing · Colours