Icons
Icons carry more of a digital menu than most people expect: each menu type has one, each contact dock option shows one, each price format has one, and each allergen has one. Consistency across all four sets is what makes a menu look designed.
The four sets
| Set | Where it is chosen | Where it appears |
|---|---|---|
| Menu type icons | Content settings → Content settings, per type | The contact dock, and navigation between menus |
| Contact dock toggle icon | Content settings → Content settings, per type | The floating dock button |
| Price format icons | Built in | Beside each price, on the menu and in the PDF |
| Allergen icons | Content settings → Allergens | Beside dishes, in the filter, in the information panel, in the PDF |
Price format icons are fixed: full portion, half portion, unit, glass, shot, bottle, Magnum, Benjamin, menu price and pairing price each have their own, with drink-specific variants for cocktails and beverages.
Menu type icons
Every menu type has a sensible default — cutlery for the à la carte menu, a croissant for breakfast, a wine glass for the wine list, a beer for the bar menu and beverages, a cocktail glass for cocktails, a star for desserts, a menu sheet for tasting and set menus.
Change one when the default does not match the house. Keep every replacement in the same visual family as the rest; one detailed illustration among nine line icons is more noticeable than a wrong metaphor.
The dock toggle icon
The floating button carries its own icon, separate from the menu type icons. The default is a menu-style icon that reads as "open this".
Choose something that says navigate, not something decorative. It is the only control a guest uses to leave the menu they are on.
Allergen icons
The most functional icon set on the site, and the one guests actually decode. Covered in Allergen icons.
Two rules carry most of the weight: use conventional symbols, and make sure a custom allergen you add gets an icon — an allergen with none can end up with no symbol beside the dish.
Choosing icons that survive a phone
- Small size is the real test. Icons render beside dish names and inside a narrow navigation bar.
- Silhouette over detail. A shape that reads at 16 pixels beats an illustration that reads at 64.
- One family. Do not mix filled and outlined, or square and rounded.
- Contrast against your background. A dark icon on a dark menu is invisible in a dark room.
Turning icons off
The contact dock has a Show icons next to each option switch per menu type. Turning it off leaves text-only destinations, which is a legitimate choice for a dock with long menu names.
The allergen icons can be hidden by guests themselves, through the Show allergens in dishes switch on the menu.
Icons in the PDF
The printable menu has separate switches for the allergen icon and the allergen label. Price format icons are rendered as part of the price presentation.
Because print is read at a fixed size and cannot be zoomed, enabling both the icon and the label is the safer choice on paper.
Check it
- [ ] Every menu type has an icon that suits it.
- [ ] All icons come from one visual family.
- [ ] Icons are legible at real size on a phone.
- [ ] Icons have contrast against the background, in the room's lighting.
- [ ] Every custom allergen has an icon.
- [ ] The dock toggle icon reads as a navigation control.
- [ ] The PDF shows the icon detail you intended.