Skip to content



Avatars is used to render one or more ProfilePreviews in a grid, e.g., authors of a blog posts or speakers at an event. It is an alternative to using Names.


In the first example we render a few avatars with default alignment start (left):

Note that the components provided through the name prop need to align with Avatars aligment.

In this example we align center:

In this example we align end (right):

This is an example with many avatars:

System props

Avatars supports space props and color props from Styled System.

Component props

valuesArray of AvatarSee below.
alignstart, center or endstartAlignment of profile (responsive).


This is a subset of Profile from ProfilePreview plus id and href:

idStringIdentifier, e.g., the node ID generated by Gatsby.
avatarNodeAvatar image (composition pattern).
nameNodeFull name (composition pattern). You need to make sure that this component aligns with above align prop.
hrefStringPath to which the avatar should link.


Avatars does not support variants. If you customize Theme UI Link via styles.a, this will also affect all links in Avatars.

Visual regression testing

The following URLs can be used for visual regression testing: