Avatar

Design

Interface guidelines Octicons Prototyping Presentations

Development

Primer CSS Primer Components

About

Table of contents

Default example
System props
Component props

Table of contents

Default example
System props
Component props

Avatars are images used to represent users and organizations on GitHub. They typically are squares with rounded edges.

Default example

<Avatar mb={4} src="https://avatars.githubusercontent.com/primer" size={128} />

<Avatar mb={4} src="https://avatars.githubusercontent.com/primer" size={128} />

To create a Parent + Child avatar combination, wrap Avatars in AvatarPair:

<AvatarPair my={4}>
  <Avatar src="https://avatars.githubusercontent.com/github"/>
  <Avatar src="https://avatars.githubusercontent.com/primer"/>
 </AvatarPair>

<AvatarPair my={4}>
  <Avatar src="https://avatars.githubusercontent.com/github"/>
  <Avatar src="https://avatars.githubusercontent.com/primer"/>
 </AvatarPair>

System props

Avatar components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Name	Type	Default	Description
alt	String		Passed through to alt on img tag
isChild	Boolean		adds the `avatar-child` class if present
size	Number	20	adds the `avatar-small` class if less than 24
src	String		The source url of the avatar image

Edit this page on GitHub

2 contributors

Last edited by ashygee on June 8, 2020