Avatar

Use Avatars to represent users, organizations, bots, or teams. On GitHub, Avatars are either rounded squares or circles.

React examples

Default

Copy

Reset

Open in StackBlitz

<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

<Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

Show full code

Custom size

Avatars start at 16px and increment by base-4 until 32px. At 32px, the scale switches to base-8 up to 48px. 64px is the largest size in this scale.

Copy

Reset

Open in StackBlitz

<Avatar size={48} src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

<Avatar size={48} src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

Show full code

Square shape

Avatars appear as two different shapes, each with their own functional purpose.

• Circle Avatars represent individual people.
• Square Avatars represent non-human entities, such as bots, teams, or organizations

Shape guidelines

Copy

Reset

Open in StackBlitz

<Avatar square src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

<Avatar square src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="Mona user avatar" />

Show full code

More code examples

See the Avatar Storybook stories.

Props