Avatar | Components

Avatar

A graphical representation of a user's profile image to visually identify them in different contexts.

styleKeys: avatar

UsageAPI

To display anything other than a user’s profile picture, e.g. a thumbnail, an image preview, an icon

ReactVanilla

<Avatar src="https://vista.design/example-images/avatar.webp" />

<Avatar src="https://vista.design/example-images/avatar.webp" />

<div class="swan-avatar"></div>

<div class="swan-avatar"></div>

Size

size="mini" is deprecated in SWAN v3.31.0

Use size="small" instead, which behaves the same, but better aligns with the larger API surface of SWAN.

Use size="small" to reduce the size of the Avatar.

ReactVanilla

<Avatar size="mini" src="https://vista.design/example-images/avatar.webp" />

<Avatar size="mini" src="https://vista.design/example-images/avatar.webp" />

<div class="swan-avatar swan-avatar-mini"></div>

<div class="swan-avatar swan-avatar-mini"></div>

The Avatar image needs an alt attribute of some kind. Refer to Alt Text guidelines.

Avatar

See core props for additional props that can be applied to this component.

prop	type	required	default
`size` The size variation	`"standard" \| "small" \| "mini" \| null`	false	standard
`src` URL of the avatar image	`string \| null`	false	null
`alt` A label to use to describe the avatar to assistive devices.	`string \| null`	false	null