import Props from '@ionic-internal/component-api/v8/avatar/props.md'; import Events from '@ionic-internal/component-api/v8/avatar/events.md'; import Methods from '@ionic-internal/component-api/v8/avatar/methods.md'; import Parts from '@ionic-internal/component-api/v8/avatar/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/avatar/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/avatar/slots.md';

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.

import Basic from '@site/static/usage/v8/avatar/basic/index.md';

import Chip from '@site/static/usage/v8/avatar/chip/index.md';

import Item from '@site/static/usage/v8/avatar/item/index.md';

import CSSProps from '@site/static/usage/v8/avatar/theming/css-properties/index.md';