---
title: Avatar
category: Images
summary: Avatars are used to show a thumbnail representation of a person.
---

```jsx live
const statuses = {
  default: 'grey-5',
  success: 'green-5',
  error: 'red-5',
}
function App() {
  const [status, setStatus] = React.useState(null)
  const users = useUsers()
  return (
    <StackView alignment="center" spacing={4}>
      <StackView axis="horizontal" alignment="end" spacing={1}>
        {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
          <StackView key={size} spacing={1} alignment="center">
            <Avatar
              size={size}
              status={statuses[status]}
              source={users[index] && users[index].picture.medium}
            />
            <Text fontSize={5} color="grey">
              {size}
            </Text>
          </StackView>
        ))}
      </StackView>
      <StackView
        axis="horizontal"
        alignment="center"
        padding={1}
        spacing={1}
        radius={5}
        backgroundColor="grey-0"
      >
        <Text weight={600}>Status:</Text>
        <Radio
          name="status"
          label="None"
          checked={status === null}
          onChange={() => setStatus(null)}
        />
        <Radio
          name="status"
          label="Default"
          checked={status === 'default'}
          onChange={() => setStatus('default')}
        />
        <Radio
          name="status"
          label="Success"
          checked={status === 'success'}
          onChange={() => setStatus('success')}
        />
        <Radio
          name="status"
          label="Error"
          checked={status === 'error'}
          onChange={() => setStatus('error')}
        />
      </StackView>
    </StackView>
  )
}
render(App)
```

```jsx live
function App() {
  const users = useUsers(3)
  const statuses = ['grey-5', 'success', 'error']
  return (
    <Card axis="horizontal" padding={1} spacing={1} maxWidth={40}>
      {users.map((user, index) => (
        <Avatar
          key={user.name}
          source={user.picture.thumbnail}
          status={statuses[index]}
        />
      ))}
      <Button
        title="View household"
        marginLeft="auto"
        theme="primary"
        variant="outline"
      />
    </Card>
  )
}
render(App)
```