Avatar

The v-avatar component is used to control the size and border radius of responsive images, typically used to show profile pictures.

Usage

The avatar has a dynamic size that can be scaled for any situation. A tile variation is available for displaying an avatar without border radius.

API

v-avatar
Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
size
Default
48
Type
number | string

Sets the height and width of the element

Name
tile
Default
false
Type
boolean

Removes border radius

Examples

Advanced usage

Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.

Icon and text

An avatar also accepts the v-icon component or text. Mix and match functionality to create something unique.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore