New

Brand Logo

A URL image → icon → initials fallback chain for external entities — job sources, integrations, and companies — where a reliable logo isn't guaranteed at render time.

Preview

NECL

Fallback chain

Three tiers, evaluated in order: a remote src image (favicon or CDN logo), then a passed-in icon, then initials derived from name. An onError handler on the image demotes to the next tier automatically — no network status tracking required.

image
icon
NEinitials
image → initials

Sizes

sm
md
lg

Shape

Use rounded (default) for companies and integrations; use circle for people or informal brand marks.

ACrounded
ACcircle

Implementation

BrandLogo.tsx
tsx
import { BrandLogo } from "@/components/ui/BrandLogo";

// Image, falls back to initials if the URL 404s
<BrandLogo src="https://logo.clearbit.com/acme.com" name="Acme Corp" />

// No image — icon fallback
<BrandLogo name="Slack" icon={<SlackIcon />} />

// No image, no icon — initials fallback
<BrandLogo name="Netflix" />

// Sizes and shape
<BrandLogo name="Acme Corp" size="sm" />
<BrandLogo name="Acme Corp" size="lg" shape="circle" />

Props

PropTypeDefaultDescription
name*string—Entity name. Used as the accessible label and to derive the initials fallback.
srcstring—Image URL — a favicon, CDN logo, or uploaded asset. Falls through to icon/initials on load failure.
iconReactNode—Icon rendered when src is absent or fails to load, before falling back to initials.
size"sm" | "md" | "lg""md"Controls the box dimensions and initials font size.
shape"rounded" | "circle""rounded"rounded for app/company logos, circle for people or informal brands.

Accessibility

  • →The outer element carries role=img and aria-label=name — screen readers announce the entity name regardless of which fallback tier rendered.
  • →The inner <img> has an empty alt ("") to avoid double-announcing the name via both the image and the container label.
  • →Icon and initials fallbacks are purely visual; they inherit the same aria-label from the container.
  • →Don't rely on logo colour alone to distinguish entities in a list — pair it with the name in adjacent text.