Greenhouse Design System

Avatar

Avatars represent a person or entity. They support images, initials, and a generic icon fallback.

Sizes

Three sizes are available — sm, md, and lg. The default is md.

Shapes

Use circle for people and square for entities like plants, teams, or organisations.

Fallbacks

When no image is provided, Avatar falls back to initials. When neither is provided, it shows a generic person icon.

Greenhouse examples

Avatars work well in lists of team members or plant profiles where a visual identifier helps with scanning.

Aditya Patel

Houseplant enthusiast

Monstera Deliciosa

Chlorophyll collector

Invited member

Pending acceptance

Usage

Pass src and alt for an image avatar. Pass initials as a fallback when no image is available. If neither is provided, a generic person icon is shown. Use size to control dimensions and shape to switch between circle and square.