For text Avatars, use one to two letters (any additional will be clipped) or an emoji. For images, the image should be the same size as the avatar chosen and include any padding you want (30px, 40px, or 50px—scaled up 2x for retina resolution).

```jsx
import Flex from '@ui/components/Flex';
import avatarImg from './avatar.png';

<Flex justify="around">
  <Avatar circular size="sm">OB</Avatar>
  <Avatar hexColor="#f7c543"><span aria-label="owl" role="img">🦉</span></Avatar>
  <Avatar circular imgSrc={avatarImg} size="lg" />
</Flex>;
```