# @leafygreen-ui/avatar

> LeafyGreen UI Avatar

Latest version **3.3.1** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/avatar
pnpm add @leafygreen-ui/avatar
yarn add @leafygreen-ui/avatar
bun add @leafygreen-ui/avatar
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.3.1 |
| Published | 2026-10-02 |
| First published | 2024-05-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 193.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/avatar
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/avatar
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/avatar

## Dependencies (8)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/logo](https://npm.io/package/@leafygreen-ui/logo.md) ^11.1.1
- [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3

## Recent versions

- 3.3.1 (latest) — 2026-10-02
- 3.3.0 — 2026-01-22
- 3.2.1 — 2026-01-21
- 3.2.0 — 2025-12-17
- 3.1.6 — 2025-11-24
- 3.1.5 — 2025-11-13
- 3.1.4 — 2025-10-31
- 3.1.3 — 2025-10-21
- 3.1.2 — 2025-09-10
- 3.1.1 — 2025-09-03
- 3.1.0 — 2025-07-18
- 3.0.3 — 2025-07-03
- 3.0.2 — 2025-06-30
- 3.0.1 — 2025-06-16
- 3.0.0 — 2025-05-29
- … 15 more at https://npm.io/package/@leafygreen-ui/avatar/versions

## README

# Avatar

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/avatar
```

### Yarn

```shell
yarn add @leafygreen-ui/avatar
```

### NPM

```shell
npm install @leafygreen-ui/avatar
```

## Usage

```tsx
// Text
return <Avatar format={Format.Text} text="AT" size={AvatarSize.Large} />;

// Icon
return <Avatar format={Format.Icon} glyph="PersonGroup" />;

// Logo
return <Avatar format={Format.MongoDB} sizeOverride={56} />;

// Assistant
return <AssistantAvatar size={AvatarSize.Large} />;
```

## Properties

### Avatar

| Prop           | Type                               | Description                                                                     | Default     |
| -------------- | ---------------------------------- | ------------------------------------------------------------------------------- | ----------- |
| `darkMode`     | `boolean`                          | Determines if the component will render in dark mode                            | `false`     |
| `size`         | `"default"`, `"large"`, `"xlarge"` | Determines the size of the avatar                                               | `"default"` |
| `sizeOverride` | `number`                           | If provided, overrides the size prop to a customizable number (in px)           |             |
| `format`       | `"mongo"`, `"user"`, `"default"`   | Determines the Avatar component's variant                                       | `"default"` |
| `text`         | `string`                           | The text to render in the Avatar when `format === 'text'`                       |             |
| `glyph`        | `GlyphName`                        | The LeafyGreen icon glyph name to render in the Avatar when `format === 'icon'` | `"Person"`  |
| `...`          | `HTMLElementProps<'div'>`          | Props spread on the root element                                                |             |

### AssistantAvatar

| Prop       | Type                               | Description                                          | Default     |
| ---------- | ---------------------------------- | ---------------------------------------------------- | ----------- |
| `darkMode` | `boolean`                          | Determines if the component will render in dark mode | `false`     |
| `size`     | `"default"`, `"large"`, `"xlarge"` | Determines the size of the avatar                    | `"default"` |

## `getInitials`

A utility function that returns the initials of the provided string(s).

```ts
getInitials(fullOrGivenName?: string, surname?: string): Initials
```

Accepts one or two strings.
If a a single argument is provided, this string will be assumed to be the full name. If two are provided then the 1st is assumed to be the given name, and the 2nd is the surname.

Returns an `Initials` object.

```ts
interface Initials {
  initials: string | null;
  givenInitial: string | null;
  surnameInitial: string | null;
}
```

### Notes & Known issues:

- Names including characters _other than_ the English alphabet and common Latin accented letters will be ignored, and will return `null` for each property in the returned object. (Includes Letters in Unicode Basic Latin, Latin-1 Supplement and Latin Extended-A. See [Wikipedia: List of Unicode characters](https://en.wikipedia.org/wiki/List_of_Unicode_characters))

- Names with suffixes (e.g. Jr., Sr., etc.) will include the first letter of the suffix in the surname initial (e.g. `getInitials("Robert Downey Jr.") // RDJ`)

---
_Source: https://npm.io/package/@leafygreen-ui/avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._