In today’s Zoom session, I streamed the design and creation process for creating a new Avatar component for G2. This Avatar goes beyond air-bending an image in a circle. Earlier on in the session (but also throughout), we detailed some flexible, intelligent, and DX (designer/developer experience) features, including:
- Name to initial rendering (e.g. Eileen V. to EV)
- A range of default (preferred) sizes, which can be customized
- A set of shape variations (e.g. Circle or Rounded Square)
- The ability to render a “status dot” in the top corner
- Tooltip that appears to display the full user name
- An AvatarGroup that will stack and layer Avatars within

Thanks to G2’s core systems and the existing component set, in a short amount of time, we were able to prototype an Avatar component that could accommodate a wide range of use-cases (noted above):
The next step is to refactor the prototype code to create the Avatar component for real!
Zoom Session
Here is an upload of today’s Zoom session. A huge thanks to Eileen for collaborating and pairing the entire time!
Update
The Avatar component has been recoded and released! Here are the docs for the new Avatar component.