Skip to content
On this page
You're viewing the docs for the main branch of Codex, which may contain features that have not been released yet. Codex users should visit the official docs.


A small preview of an image.

The placeholder icon will display until thumbnail image loads, or if a thumbnail image is not provided.



Reading direction


The placeholder serves two purposes:

  1. To display while a thumbnail image is loading, improving the experience of those with slower connections
  2. To display when a thumbnail image is not provided

The second case may occur in a group of components, like Cards or MenuItems, when some items have a thumbnail image but some do not. In this case, the placeholder icon helps maintain a consistent layout for all items. See the MenuItem demo for an example.

Default placeholder

Custom placeholder icon

To customize the placeholder icon, use the placeholderIcon prop.



Prop nameDescriptionTypeDefault
thumbnailThumbnail data.Thumbnail|nullnull
placeholderIconThumbnail placeholder icon.IconcdxIconImageLayoutFrameless