Skip to main content

Avatar

Basic​

The Avatar component displays a user profile image.

 
const BasicComponent = () => {
  return (
    <Avatar
        size={"$24"}
        source={{ uri: "https://i.imgur.com/mM9tFLP.png" }}
    />
  );
};

Size​

The Avatar component supports different sizes: sm, md, lg, or custom numeric values.

 
{/* Small avatar */}
<Avatar
  size="sm"
  source={{ uri: "https://i.imgur.com/mM9tFLP.png" }}
/>

{/* Default avatar */}
<Avatar
  size="md"
  source={{ uri: "https://i.imgur.com/mM9tFLP.png" }}
/>

{/* Large avatar */}
<Avatar
  size="lg"
  source={{ uri: "https://i.imgur.com/mM9tFLP.png" }}
/>

{/* Custom size avatar */}
<Avatar
  size={88}
  source={{ uri: "https://i.imgur.com/mM9tFLP.png" }}
/>

Group Basic​

Use Avatar.Group to display multiple avatars together. The max prop limits how many avatars are shown before displaying a "+N" indicator.

+2

 
<Avatar.Group max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/odSZ3Gv.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/rSvwWy3.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/CpKlRgU.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
</Avatar.Group>

Group Size​

Avatar groups support the same size options as individual avatars.

+2

+2

+2

+2

 
{/* Small avatar */}
<Avatar.Group size="sm" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  ...
</Avatar.Group>

{/* Default avatar */}
<Avatar.Group size="md" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  ...
</Avatar.Group>

{/* Large avatar */}
<Avatar.Group size="lg" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  ...
</Avatar.Group>

{/* Custom size avatar */}
<Avatar.Group size={88} max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  ...
</Avatar.Group>

Group Custom Space​

Customize the spacing between avatars in a group using the gap prop.

 
<Avatar.Group gap="$2">
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/odSZ3Gv.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/rSvwWy3.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/CpKlRgU.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
</Avatar.Group>

Group Override Color Mode​

Override the color mode for the avatar group independently of the parent theme.

+2

 
<Avatar.Group colorMode="dark" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/odSZ3Gv.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/rSvwWy3.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/CpKlRgU.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
</Avatar.Group>

Group Override Accent Color​

Change the accent color for the "+N" indicator in avatar groups.

+2

 
<Avatar.Group accentColor="rose" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/odSZ3Gv.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/rSvwWy3.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/CpKlRgU.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
</Avatar.Group>

Group Override Color Mode and Accent Color​

Combine both color mode and accent color overrides for maximum customization.

+2

 
<Avatar.Group colorMode="dark" accentColor="rose" max={4}>
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/odSZ3Gv.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/rSvwWy3.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/CpKlRgU.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
  <Avatar source={{ uri: "https://i.imgur.com/mM9tFLP.png" }} />
</Avatar.Group>