# Avatars

The v-avatar component is typically used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. A tile variation is available for displaying an avatar without border radius.

# Usage

Avatars in their simplest form display content within a circular container.

# Anatomy

The recommended placement of elements inside of v-avatar is:

  • Place a v-img or v-icon component within the default slot
  • Place textual content within the default slot

Element / AreaDescription
1. ContainerThe Avatar container that typically holds a v-icon or v-img component


v-avatarPrimary Component

# Examples

# Props

# Size

The size prop allows you to change the height and width of the avatar.

# Tile

The rounded prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar.

# Slots

# Default

The v-avatar default slot allows you to render content such as v-icon components, images, or text. Mix and match these with other props to create something unique.

# Misc

# Advanced usage

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

Another example combining avatar with menu.

# Profile Card

Using the tile prop, we can create a sleek hard-lined profile card.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.