# nord-avatar > Avatar is used for showing a thumbnail representation of a single user or entity. > Default avatar illustration is displayed when no src is specified. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Use the circle avatar to represent a single user or an animal. - Use the square avatar for organizations or group of animals. - Always add the name of the user, animal, organization, or group of animals using the `name` property. - For the best results, use square images or images cropped into a square. > **Don't:** - Don’t use the circle avatar to represent organizations or group of animals. - Don’t use the square avatar to represent a single user or an animal. - Don’t use an avatar when an icon is more suitable, for example when denoting groups or "things". - Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible. ## Examples ### Basic ```html

``` ### Overview ```html ``` ### Image ```html ``` ### Icon ```html ``` ### Square Single ```html ``` ### Custom Image ```html

``` ### Patients And Clients ```html

Patient

Default (animal) / Uncategorized / Other

Amphibia frog, toad

Arachnida spider, tarantula, scorpion, other insects

Bird parakeets, lovebirds, canaries, parrots

Canine dog, fox, wolf, jackal, coyote

Caprinae sheep, goat, ram, gazelle

Cattle cow, ox, buffalo, bison, bovinae

Equidae horse, donky, mule, zebra

Feline cat, lynx, leopard, ocelot

Fish goldfish, neon tetra, betta fish, clownfish

Leporidae rabbit, hare

Reptilia snake, reptile, turtle, tortoise, lizard, dragons

Rodents mouse, hamster, rat, guinae pig, squirrel

Suidae pig, boar, hog

Client (person)

John Dorian

Sir John Michael Dorian Jr.

John

Mx. Dorian III

J. D.

Use 2 letters: First+Last initial
No middle name
If no first or last name, use 1 letter instead of 2
No titles, suffixes, etc.

Herd or group of animals

Herd name

Client (organization)

Acme Co.

Patient with a photo

Scooby

When to use circle / square

Use circle for individuals or single animal

Use square for organizations or group of animals

``` ### Square ```html

``` ### Users ```html

Users: Staff

Anne Williams

If no photo is uploaded: use initials
If photo is uploaded: use photo

Users: Clinic

Acme Clinic

Blank

When creating a new user, since there are no photos or names attached to the new empty profile, there will be a blank (silhouette) as placeholder until a name is entered or a photo is uploaded.

Similarly, if there are no names for the organization yet (during the creation process) use a blank version of the avatar.

``` ### With Icon ```html

``` ### With Initials ```html

``` ### With Tooltip ```html ``` ## API Reference ### Properties - **size** (`'s' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'`, default: `'m'`) — The size of the avatar. - **src** (`string | undefined`) — The URL of the avatar image uploaded by the user. - **name** (`string`, default: `''`) — The name of the person or entity. - **icon** (`string | undefined`) — The fallback icon. - **variant** (`'default' | 'square'`, default: `'default'`) — The style variant of the avatar. ### CSS Custom Properties - `--n-avatar-color` (default: `var(--n-color-status-highlight)`) — Controls the color of the avatar fallback, using color tokens. - `--n-avatar-size` (default: `var(--n-size-icon-l)`) — Controls the size of the avatar, using icon sizing tokens. - `--n-avatar-box-shadow` (default: `none`) — Controls the box shadow for the avatar. - `--n-avatar-text-color` (default: `var(--n-color-text-on-accent)`) — Controls the color of the avatar’s text and icon, using color tokens. ### Dependencies - `visually-hidden` - `icon`