Allergen icons

Every allergen carries an icon, and the icon is what guests actually read. On a phone, at a table, in low light, nobody reads sixteen words — they scan symbols.

Where icons are set

In the allergen library: Settings → Restaurant settings → Content settings → Allergens. Each row has an icon picker beside its title and description.

The seeded allergens arrive with icons already chosen. A custom allergen you add has none until you pick one.

Where icons appear

One icon choice therefore drives five surfaces.

Dish icons in the supplied digital-menu templates use a 24 × 24 px box with 8 px of spacing after each icon. The image fits inside that box without distortion. Custom menu styles can override this presentation; the allergen information panel, filters and PDF retain their own sizing.

Choosing icons that work

• Distinguishable at small size. The icons are rendered small beside dish names. Two symbols that differ only in detail become the same symbol on a phone.
• Conventional. Guests recognize the standard food-allergen symbols. An inventive icon set is a worse menu.
• Consistent in style. Do not mix filled and outlined, circular and square. The seeded set is a single family; keep additions in the same style.
• Readable on your background. A dark menu and a dark icon is a common and avoidable failure.

Custom allergens

When you add an allergen of your own — spicy, pork, coriander — choose its icon at the same time. An allergen without an icon has nothing to fall back on unless its name matches one of the built-in allergens, so a custom entry can end up with no symbol at all beside the dish.

Showing and hiding icons on the menu

Guests can turn the icons off. The public menu carries a Show allergens in dishes switch, and its state is remembered in the guest's own browser.

That is a display preference, not a filter: turning icons off does not change which dishes are shown. See Remembered filter preferences.

Icons in the PDF

The PDF generator has two independent switches per menu type:

• Display allergen label — the allergen name beside each icon;
• Display allergen icon — the icon itself.

Printed menus are read at a fixed size, so icons alone can be too small on a dense card. Enabling both is the safer default for print, even when the digital menu shows icons only.

After changing icons

1. Save the library and confirm the success message.
2. Open a menu signed out, on a phone, and check the icons beside dishes at real size.
3. Open the allergen information panel and confirm each icon matches its name.
4. Check the filter tags.
5. Regenerate any PDF in circulation.