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.


  <img src="">

  <ion-thumbnail slot="start">
    <img src="">
  <ion-label>Item Thumbnail</ion-label>
import React from 'react';

import { IonThumbnail, IonItem, IonLabel } from '@ionic/react';

const Example: React.SFC<{}> = () => (
      <img src="" />

      <IonThumbnail slot="start">
        <img src="" />
      <IonLabel>Item Thumbnail</IonLabel>

export default Example;

CSS Custom Properties

Name Description
--border-radius Border radius of the thumbnail
--size Size of the thumbnail