Done
Components
Avatar.
An avatar is a small visual element representing a person, group or entity — an image, an icon, or initials. It personalises the interface where identity matters: profiles, comments, assignment menus and lists. Avatars fall back to initials when an image is not available, and can be combined in size, shape and style.
Type
Icon
Image
Initials
Figma typeReact typeWhen to use
Icon
iconNo person behind it — a team, a company, or a placeholder before anyone is assigned.Image
imageA real photo or logo exists. Always the first choice when the person can be recognised.Initials
initialsThe fallback when no image exists. One or two letters from the name, never three.Type, Size, Shape and Style are independent properties — 36 combinations in all. Pick one shape and one style per surface and keep to it: a mixed set reads as a bug, not as variety.
Shape & style
Circle — people
Rounded — companies, 4px radius
Border — neutral surface
Colour — derived from the name
Size
small · 28px
medium · 38px
large · 48px
Small28px. Dense rows — data grid cells, comment threads, compact lists.
Medium38px. The default. Lists, assignment menus, cards.
Large48px. Profile headers and anywhere the person is the subject, not a detail.
InitialsManrope Regular — 14 / 16 / 20px, matching the three sizes.
Icon24px at Large, scaling with the avatar.
ShapeCircle is a full radius; Rounded is 4px.
Border style1px #CCCCCC on a #F2F2F2 surface. Colour style fills with the brand green and drops the border.
Do & don't
Do — keep the same size, shape and style across a set. One decision, applied everywhere.
Don't — mix sizes, shapes and styles in one group. It reads as a bug, not as variety.
Do — let the image fill the frame at its own aspect ratio, cropped to the centre.
Don't — stretch or squash a photo or logo to fit. Crop it instead — a distorted face is worse than a tight one.
Accessibility
Alt textThe person’s name, not “avatar” or “profile picture”. An avatar that repeats a name already on screen is decorative — give it alt="" instead.
Never aloneAn avatar is not an identifier. Anywhere it carries meaning, the name must be readable as text as well.
InitialsAnnounced as the name, never as letters. Two letters maximum, taken from the name as entered.
ColourColours derived from a name are decoration only — they never encode role, status or team.
ContrastWhite initials on the brand green measure 5.15:1. Any new colour in the set has to clear 4.5:1.
InteractiveIf the avatar is a link or a trigger, it needs a focus ring and a 44px target — the visual can stay 28px.
GroupsA stack of avatars with an overflow count needs one label: "Assigned to Anna Berg and 4 others".
Props (React)
type AvatarProps = {
name: string; // required — drives alt text and initials
src?: string; // falls back to initials, then to the icon
type?: "image" | "initials" | "icon";// inferred from src and name if omitted
size?: "small" | "medium" | "large"; // 28 / 38 / 48px — default medium
shape?: "circle" | "rounded"; // circle for people, rounded for companies
style?: "border" | "color"; // colour is derived from name, decorative only
decorative?: boolean; // renders alt="" when the name is already on screen
onClick?: () => void; // adds a focus ring and a 44px target
};