Status
Avatar
A photo or initials in Figtree.
Preview
Props
| Prop | Type | Description |
|---|---|---|
nameRequired | string | |
src | string | |
size | number | |
shape | 'circle' | 'square' | |
tone | 'neutral' | 'accent' | Categorical | 'bold' | |
className | string |
Guidelines
A photo or initials in Figtree. People are circles; brands are squares with 8px corners.
Provide: name (always: it is the accessible label and the initials), src for a photo or logo file, size in px (24, 32, 40, 56, 72), shape (circle or square), and tone for initials (neutral, accent, cyan, orange, yellow, bold).
- Use the brand's real logo file when you have it; never redraw a company's mark.
- Keep one tone per brand everywhere it appears so it becomes recognizable.