---
title: "ion-avatar"
---
import Props from '@ionic-internal/component-api/v7/avatar/props.md';
import Events from '@ionic-internal/component-api/v7/avatar/events.md';
import Methods from '@ionic-internal/component-api/v7/avatar/methods.md';
import Parts from '@ionic-internal/component-api/v7/avatar/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md';
import Slots from '@ionic-internal/component-api/v7/avatar/slots.md';
ion-avatar: Circular Application Avatar Icon Component
import EncapsulationPill from '@components/page/api/EncapsulationPill';
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.
## Basic Usage
import Basic from '@site/static/usage/v7/avatar/basic/index.md';
## Chip Avatar
import Chip from '@site/static/usage/v7/avatar/chip/index.md';
## Item Avatar
import Item from '@site/static/usage/v7/avatar/item/index.md';