Content display / The visual dictionary
Thumbnail.
A small preview of a larger visual item.
Also calledpreview imagethumb
01
UI illustrationSee it in context
Coastal walk
Forest trail
Evening walk
02
What it is
A thumbnail helps users recognize a photo, video, or document before opening it. Preserve the subject within the crop and provide a text label when the preview alone is ambiguous.
When to use it
Use in galleries, search results, and media lists.
Know the difference
A thumbnail previews another item; an avatar identifies a person or account.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinuxtvOSAndroid TVvisionOS
iOS · iPadOS · macOS · tvOS · visionOS
Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.
Web · Android · Windows · Linux · Android TV
Use semantic content structures on the web. Touch, pointer, and remote layouts need different target spacing even when the same information is shown.
04
Go to the source
Primary documentation for the pattern and its platform conventions.