Skip to main content


Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.

Avatars can be used by themselves or inside of any element. If placed inside of an ion-chip or ion-item, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to start or end, respectively.


<ion-avatar>  <img src=""></ion-avatar>
<ion-chip>  <ion-avatar>    <img src="">  </ion-avatar>  <ion-label>Chip Avatar</ion-label></ion-chip>
<ion-item>  <ion-avatar slot="start">    <img src="">  </ion-avatar>  <ion-label>Item Avatar</ion-label></ion-item>

CSS Custom Properties#

--border-radiusBorder radius of the avatar and inner image
View Source