Company logo
A company's mark on a square: its logo, else its site's favicon, else its first letter. Every company reference starts with one.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { CompanyLogo } from '@/ui/company-logo';<CompanyLogo name="Halcyon Bank" />Sizes
The same sizes as Avatar, so a company and a person in one list line up: 16px with a 4px radius (xsmall) only inside a record chip in Flo's text; 20px with a 4px radius (small, the default) for table cells, record chips, pickers and menus; 24px with a 6px radius (medium) for row lists; 32px with an 8px radius (large) for the Company record header and hover previews. Square, never round.
import { CompanyLogo } from '@/ui/company-logo';
export default function CompanyLogoSizes() {
return (
<div className="flex items-end gap-400">
<span className="flex items-center gap-050 text-body leading-body font-medium">
<CompanyLogo name="Halcyon Bank" src="/examples/halcyon-bank.svg" size="xsmall" />
Halcyon Bank
</span>
<span className="flex items-center gap-075 text-body-small leading-body-small font-medium">
<CompanyLogo name="Halcyon Bank" src="/examples/halcyon-bank.svg" size="small" />
Halcyon Bank
</span>
<span className="flex items-center gap-100 text-body leading-body font-medium">
<CompanyLogo name="Halcyon Bank" src="/examples/halcyon-bank.svg" size="medium" />
Halcyon Bank
</span>
<span className="flex items-center gap-150 text-heading-small leading-body font-semibold">
<CompanyLogo name="Halcyon Bank" src="/examples/halcyon-bank.svg" size="large" />
Halcyon Bank
</span>
</div>
);
}Logo
Looked up by the company's website domain, never by its name. Pass src when the app already has the logo's URL.
import { CompanyLogo } from '@/ui/company-logo';
export default function CompanyLogoLogo() {
return (
<span className="flex items-center gap-100 text-body font-medium">
<CompanyLogo name="Halcyon Bank" src="/examples/halcyon-bank.svg" size="medium" />
Halcyon Bank
</span>
);
}Favicon
When no logo is found, the site's own icon, contained and never stretched.
import { CompanyLogo } from '@/ui/company-logo';
export default function CompanyLogoFavicon() {
return (
<span className="flex items-center gap-100 text-body font-medium">
<CompanyLogo name="Orbital Freight" src="/examples/orbital-freight.svg" size="medium" />
Orbital Freight
</span>
);
}Letter
With no domain, or when both lookups fail, the first letter of name on the grey tile.
import { CompanyLogo } from '@/ui/company-logo';
export default function CompanyLogoLetter() {
return (
<div className="flex items-end gap-400">
<span className="flex items-center gap-075 text-body-small leading-body-small font-medium">
<CompanyLogo name="Northbridge Talent" size="small" />
Northbridge Talent
</span>
<span className="flex items-center gap-100 text-body leading-body font-medium">
<CompanyLogo name="Northbridge Talent" size="medium" />
Northbridge Talent
</span>
<span className="flex items-center gap-150 text-heading-small leading-body font-semibold">
<CompanyLogo name="Northbridge Talent" size="large" />
Northbridge Talent
</span>
</div>
);
}While an image loads the slot stays empty at its full size, so the name beside it never moves.
Chart
Three plain SVG shapes, each drawn from numbers the page already shows: a line over the period, an ordered split as one bar, and a few months as bars. A chart never disagrees with the figure above it.
Date label
A date written the way people say it: words near today, a short date this year, month and year before that. In the agency's time zone and date order.