Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
On this page

Avatar

On this page
Stable
32 variants
Edited by Lukas Oppermann on 6 Jan 2023
Figma

Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder. Use to visually identify a human (circle), or other entity (square) such as an organization, bot, or team.

Playground

si,,,z,,,e: 16px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 16px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 20px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 20px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 24px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 24px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 28px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 28px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 32px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 32px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 40px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 40px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 48px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 48px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 64px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 64px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: false
si,,,z,,,e: 20px, sq,,,u,,,a,,,r,,,e: false, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: true
si,,,z,,,e: 20px, sq,,,u,,,a,,,r,,,e: true, st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,, ,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]: true
sq,,,u,,,a,,,r,,,e
st,,,a,,,c,,,k,,,a,,,b,,,l,,,e,,,,,,[,,,D,,,E,,,P,,,R,,,E,,,C,,,A,,,T,,,E,,,D,,,]
si,,,z,,,e

Props

NameTypeValuesDefault
si,,,,,,,z,,,,,,,eVariant16px 20px 24px 28px 32px 40px 48px 64px 24px
sq,,,,,,,u,,,,,,,a,,,,,,,r,,,,,,,eVariantfalse true false
st,,,,,,,a,,,,,,,c,,,,,,,k,,,,,,,a,,,,,,,b,,,,,,,l,,,,,,,e,,,,,,,,,,,,,,[,,,,,,,D,,,,,,,E,,,,,,,P,,,,,,,R,,,,,,,E,,,,,,,C,,,,,,,A,,,,,,,T,,,,,,,E,,,,,,,D,,,,,,,]Variantfalse true false

Examples

Size

Use the size prop to set the size of the avatar. The default size is 20px.

si,,,,,,,,,,,,,,,z,,,,,,,,,,,,,,,e: 16px, sq,,,,,,,,,,,,,,,u,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,r,,,,,,,,,,,,,,,e: false, st,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,c,,,,,,,,,,,,,,,k,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,b,,,,,,,,,,,,,,,l,,,,,,,,,,,,,,,e,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,[,,,,,,,,,,,,,,,D,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,P,,,,,,,,,,,,,,,R,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,C,,,,,,,,,,,,,,,A,,,,,,,,,,,,,,,T,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,D,,,,,,,,,,,,,,,]: false

Square

Square allows you to use a square avatar instead of a circle. This is useful to represent organizations, bots, and teams.

si,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,z,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e: 16px, sq,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,u,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,r,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e: false, st,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,c,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,k,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,a,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,b,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,l,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,D,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,P,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,R,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,C,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,A,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,T,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,D,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]: false

Stackable

Stackable allows you to stack multiple avatars on top of each other. This is useful to represent multiple users in a single avatar.

Edit this page on GitHub