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

import EncapsulationPill from '@components/page/api/EncapsulationPill';

Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.

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

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

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

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