Fourteen allergens,
from one CMS field.
The 14 allergens of Regulation (EU) No 1169/2011 as a Framer component. Type names, codes or numbers into a text field and every dish gets its icons, in five languages and four styles.
Free for client work
Free
Copy it from the Framer Marketplace and paste it into any project, personal or commercial.
The 14 allergens of Regulation (EU) No 1169/2011, Annex II, in the order and numbering menus use. Line style shown; Solid, Circle and Badge below.
What it is, and how it works.
Restaurants in the EU must tell guests which of 14 allergens every dish contains. EU Allergen Icons puts them on your Framer menu: you write them as text in the CMS, it draws the icons, names them for screen readers and keeps them in line with your type.
1 · You write
Allergens · CMS text field
gluten, milk, eggs
2 · It reads
EU Allergen Icons
Names in 5 languages, codes or 1–14
3 · Guests see
Screen readers: “Allergens: Gluten, Milk, Eggs”
On every dish
Inside a collection list, each dish shows its own row of icons, read from its own field.
On a dish page
A full row with names beside the icons, in the language of the page.
As the allergen key
The full legend, numbered as in Annex II, at the foot of the menu or on its own page.
Try it on a real menu.
€
14
Horseradish cream, pickled cucumber, dill oil
Allergens field:
fish, gluten, milk, mustard
€
12
Hazelnut romesco, aged sherry vinegar
Allergens field:
nuts, sulphites
€
19
Celery, shallot, grilled sourdough
Allergens field:
Mo, Ce, Su, Gl
€
21
Cured egg yolk, brown butter, parmesan
Allergens field:
1, 3, 7
€
24
Soy glaze, crushed peanuts, lime
Allergens field:
fish, sesame, soy, peanuts
€
16
Brown crab mayonnaise, chervil
Allergens field:
crustáceos, gluten, huevos, leche
Four decisions behind it.
It reads what the kitchen writes
Names in five languages, the short codes kitchens use and the Annex II numbers. No lookup table to fill in: the field stays the way your client already writes the menu.
Filled shapes, drawn twice
Solid isn’t an outline inside a circle. Every icon has a filled version with its details cut out, so it still reads at 16 px on a busy menu.
44 px and 16 px, same drawing
Accessible by default
Each icon carries its name for screen readers and a tooltip on hover. A list announces “Allergens: Gluten, Milk”, and labels can sit to the right or below.
Screen readers hear: “Allergens: Gluten, Eggs, Fish, Milk”
Follows your site’s language
Set Language to Auto and labels and tooltips switch with Framer Localization. Or fix English, Spanish, French, German or Italian per instance.
Español
Deutsch
Italiano
Set it up in three steps.
01
Add a text field
Give your menu collection a plain text field called Allergens. Write what the kitchen gives you: “gluten, milk”, “Gl, Mi” or “1, 7”.
02
Drop it in the list
Put EU Allergen Icons inside your collection list and connect its Allergens property to that field. Every dish gets its own row.
03
Choose the look
Pick a style, size and colour. Leave Language on Auto and labels and tooltips follow your site’s locale.
Single icon, List from a text field, or the full Legend.
The text to read. Connect it to a CMS field.
List in a row that wraps, or in a column.
Auto (site locale), English, Español, Français, Deutsch or Italiano.
Line, Solid, Circle or Badge.
12 to 64 px, any colour, stroke from 1 to 2.5. Cut-out colour for Solid and Badge.
None, to the right, or below each icon.
The allergen’s name on hover, with its own colours.
Annex II number before each name.
Layout of lists and the legend.
Text shown when a dish has no allergens, like “Allergen-free”.
Before you buy
Yes. Copy it from the Framer Marketplace and use it in personal and client projects. The line icons are also on miguelrecio.es as SVG.
One click on the Framer Marketplace copies it into your project.