Skip to main content


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.


<ion-thumbnail>  <img src=""></ion-thumbnail>
<ion-item>  <ion-thumbnail slot="start">    <img src="">  </ion-thumbnail>  <ion-label>Item Thumbnail</ion-label></ion-item>

CSS Custom Properties#

--border-radiusBorder radius of the thumbnail
--sizeSize of the thumbnail
View Source