TfL Roundel

The official roundel is trademarked. This component renders it only when you opt in via env. Otherwise you get a filled, rounded placeholder of the same size — hover for the enable instructions.

Current render

Mode: placeholder (flag off)

Line colour override

Enable the official mark

# .env.local (Next.js)
NEXT_PUBLIC_ALLOW_TFL_ROUNDEL=true

# Vite
VITE_ALLOW_TFL_ROUNDEL=true

Setting the flag means your app accepts trademark responsibility. This package only delivers the SVG.

pnpm dlx shadcn@latest add https://tfl-components.vercel.app/r/tfl-roundel.json