Illustrations - Bellhop Design System

When to use

Use illustrations to add visual interest and communicate concepts that benefit from imagery.

Empty States

Make empty states more engaging and less sterile with relevant illustrations.

Onboarding

Guide users through features with illustrative explanations.

Error Messages

Soften error experiences with friendly, contextual illustrations.

When not to use

For functional icons—use icon component
When real images convey the message better
In data-dense interfaces where illustrations add clutter
When illustration style doesn't match brand

Sizes

Illustrations come in seven sizes from small to 4XL.

Small (120x120)

Medium

Large

Best Practices

Follow these guidelines when using illustrations.

Do

Choose illustrations that match the context and message
Use consistent illustration style across your app
Provide alt text for accessibility
Size illustrations appropriately for the space
Pair with clear, helpful text when needed
Use illustrations to clarify or enhance messages

Don't

Don't use illustrations that are unrelated to content
Don't make illustrations too large or overwhelming
Don't use different illustration styles together
Don't rely solely on illustrations to convey critical info
Don't forget alt text for screen readers

Availability

Illustrations component is available across all our supported frameworks.

React

Available View in Storybook →

Angular

Available View in Storybook →

Web Components

Available View in Storybook →