Use larger explanatory artwork to support a message without replacing essential text or controls.
A pictogram is a simplified illustration used to explain a subject or reinforce a message. It can support an empty state or an introductory panel where a small control icon would not explain enough. Keep the heading, description, and next action understandable without the artwork.
Use a pictogram when it makes an unfamiliar concept easier to recognize or distinguishes a meaningful state. Avoid adding one only to fill empty space. In dense task interfaces, a clear heading and a short explanation may be sufficient.
An icon names an action or object at control scale. A pictogram has more room to explain a concept, but it should remain simpler than a detailed illustration. Use Icons for control glyphs.
Figure in preparation
Artwork that supports an empty state
The message and next action remain complete with or without decorative artwork.
For an empty saved-filter list, the heading “No saved filters” explains the state and “Create a filter to reuse this search” explains the next step. An abstract collection illustration can reinforce that message. It must not be the only indication that the list is empty.
Use decorative alternative text (alt="" for an image) when the artwork only repeats nearby content. When it carries additional information, provide an alternative that explains that information. Keep essential labels in HTML so they can wrap, translate, and remain available to assistive technology.
No dedicated pictogram package, exported Pictogram component, or maintained pictogram collection was verified in the installed packages. Plan custom artwork as an application resource. Do not treat the Icon registry as an automatically scalable illustration family or assume an Apple or Carbon asset collection is bundled.
Agree on a small set of visual decisions: level of detail, stroke or fill treatment, perspective, use of color, and the relationship to adjacent text. Prefer original abstract objects over reproductions of product hardware or existing interface screenshots.
Use vector artwork for precise flat shapes and diagrams. Use a suitably sized raster asset when texture or shading is necessary. Preserve the aspect ratio, provide intrinsic dimensions, and inspect the result at the actual rendered size. Native asset-catalog filename conventions do not automatically select image resolutions in a browser.
For code-driven artwork, derive foregrounds, surfaces, and spacing from relevant Liquidify tokens such as --lq-color-fg-primary, --lq-color-bg-secondary, and --lq-space-24. A standalone raster image does not inherit CSS tokens; review separate light and dark assets if one image cannot work in both contexts.
Ensure the artwork does not push the main message or action out of a narrow viewport. Check it with enlarged text and in both themes. Use sufficient contrast for meaningful details and avoid embedding information in color alone. If motion is added, retain a complete static message and follow Motion.
The EmptyState catalog documents a supported composition for empty content. It does not supply a pictogram collection. Content explains message and recovery design.