Company Logo

A container for company/brand marks. Renders a real logo image with an initials fallback. Comes in 5 sizes, two shapes (square & rectangle), and 4 radius options.

Real logos

Pass a src URL — the component will render the image and automatically fall back to initials if it fails to load.

Stripe
GitHub
Figma
Notion
Vercel
Linear
Slack
Spotify
Airbnb
Shopify
Discord
Loom

Initials fallback

Omit src (or let it 404) and the component renders a coloured initials tile using the color prop.

AB
PRIMARY
SECONDARY
TERTIARY
X1
X2
X3
X4
X5
X6
X7
X8

Sizes

Five sizes: xs · sm · md · lg · xl.

Stripe
xs
Stripe
sm
Stripe
md
Stripe
lg
Stripe
xl

Shapes

square (equal sides) or rectangle (landscape, 2× wider than tall) — both use the same height from the size scale.

Figma
square
Figma
rectangle

Radius

Four options: none · sm · md (default) · lg.

GitHub
none
GitHub
sm
GitHub
md
GitHub
lg

Rectangle sizes

All 5 sizes in rectangle shape — useful for horizontal brand lockups.

Slack
xs
Slack
sm
Slack
md
Slack
lg
Slack
xl

In context — job board card

Typical usage paired with company name and title text.

Stripe

Stripe

Senior Designer

GitHub

GitHub

Senior Designer

Figma

Figma

Senior Designer

Notion

Notion

Senior Designer