BRAND-ICON
Source: design-system/components/BrandIcon/BrandIcon.tsx. React Server Component, zero client JavaScript. The header, the error pages, the reading views and the design-system bar import it through components/BrandLink.
Props
| Prop | Type | Default | Required |
|---|---|---|---|
Propsize | Typenumber | Default60 | Requiredno |
PropclassName | Typestring | Defaultnone | Requiredno |
Sizes
SOURCE
<BrandIcon />
<BrandIcon size={90} />
<BrandIcon size={40} />size is the width in px. The viewBox is cropped to the glasses, so the height is about 30% of the width.
Colour and glow
The path fills with currentColor, so the colour comes from the parent: --color-primary-500 on a .brand-link. The .brand-icon class adds a static drop-shadow that matches the phosphor text-shadow on headings. Nothing animates, so no MOTION override applies. Print removes the glow.
Accessibility
The SVG is aria-hidden and not focusable. Wrap it in a link or button that has its own accessible name; BrandLink does this with the name erikunha.dev, home (erikunha.dev, início on Portuguese pages) and a 44px minimum target. The header has no visible wordmark: the name lives in that label.