Using icons in empty states

An empty inbox, an empty cart, no search results — “empty states” are moments users hit constantly. A friendly icon plus a clear next step turns a dead end into guidance.

What a good empty state has

• A calm, friendly icon or illustration (not an error symbol).
• A one-line explanation of why it's empty.
• A clear primary action — the next thing to do.
• An optional light touch of personality.

Icon choice

Use a soft, often multicolour icon that matches the context — an open box for “no items,” a magnifier for “no results,” a sparkle for “all caught up.” Avoid red or warning iconography; empty isn't broken.

Guide, don't dead-end

Always pair the icon with an action: “Add your first item,” “Browse the catalog,” “Clear filters.” The empty state should move the user forward.

Frequently asked questions