A fully customizable icon component that represents your user

Live Demo

When to use

The <Avatar /> component renders an avatar icon showing the profile picture of the user ID you have given as an input. If your user doesn't have a profile picture, it will render an icon with the first letter of the user's name capitalized, in a white font and black background.

Adding avatars and profile pictures to your app helps build social context. It can make it clear who sent a message, who is present on a page, or give any other social cue, that makes your users feel connected.

You can even combine avatars to do something like creating your own facepile. Let's say some of your users have a profile picture, but others don't, and you don't want to use the avatar and facepile's default fallback. You could render a series of Avatar components for users who have a profile picture, and then your own fallback for ones that don't -- or even build your own wrapper around this component that would do that.

How to use

import { Avatar } from "@cord-sdk/react";

export const Example = () => (
  <Avatar userId={'my-awesome-user-id'} />



The user ID for the avatar you want to render.
Warning! If you provide an empty string or an ID that does not exist, the component will fail silently, rendering no avatar.


When true, a tooltip with the user's name will appear on top of the Avatar. The default value is false

CSS Variables

Name Default Value
var(--cord-space-3xs, 4px);
var(--cord-color-base, #FFFFFF);
var(--cord-color-brand-primary, #121314);