Thumbnail
A thumbnail is a small, scaled-down image that represents a larger piece of content, such as a photo, video, document, or profile.
Philosophy
Thumbnails provide visual previews that help users recognize and choose content quickly.
They act as entry points into larger media or detailed views.
They aid scannability in collections (grids, lists, carousels).
They must be clear, consistent, and optimized for performance.
Anatomy
Variants
Placeholder
Placeholder or symbolic preview if no image exists.
Avatar
Displays the first letter of name and it’s colorful.
Image
A visual preview or uploaded media.
Icon
Symbolic preview
Group
Groups a set of images together.
States
Idle
Static preview.
Usage tips
Dos
Maintain consistent aspect ratios across a collection.
Provide fallbacks (icons, placeholders) when images are missing.
Optimize file size for fast loading.
Don’ts
Don’t use inconsistent sizing — it disrupts rhythm in grids/lists.
Don’t rely on thumbnails alone — pair with labels when needed.
Don’t overload overlays with too many actions.
Real-world example
