Fourteen allergens,
from one CMS field.
Documentation · Version 1.0
The 14 allergens of Regulation (EU) No 1169/2011 as a free Framer component: how to connect your menu, what it reads, the four styles, five languages and every setting.
01
Start here.
Add it to your project. Copy it from the Framer Marketplace page with one click and paste it into any project, personal or commercial. It’s free.
Add a text field. Give your menu collection a plain text field called Allergens and write what the kitchen gives you: “gluten, milk”, “Gl, Mi” or “1, 7”.
Drop it in the list. Put EU Allergen Icons inside your Collection List item and connect its Allergens property to that field. Every dish gets its own row.
Choose the look. Pick a style, size and colour. Leave Language on Auto and labels and tooltips follow your site’s language.
02
How it works.
Restaurants in the EU must tell guests which of the 14 allergens of Regulation (EU) No 1169/2011 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.
You write gluten, milk, eggs in a CMS text field.
It reads names in five languages, short codes or the Annex II numbers 1 to 14.
Guests see the icons, and screen readers hear “Allergens: Gluten, Milk, Eggs”.
The icons are inline SVG inside the component: no images, no fonts and no requests to load.
03
The 14 allergens.
In the order and numbering of Annex II, the way menus use them:
Gluten
Crustaceans
Eggs
Fish
Peanuts
Soy
Milk
Tree nuts
Celery
Mustard
Sesame
Sulphites
Lupin
Molluscs
Live component in Legend mode. In List mode it reads a CMS text field instead.
04
Three ways to use it.
— Mode List inside a Collection List: each dish shows its own row of icons, read from its own field.
— a full row with names beside the icons, in the language of the page.
— Mode Legend: the full list, numbered as in Annex II, at the foot of the menu or on its own page.
— Mode Single shows one allergen, by name, code or number.
05
What it understands.
It reads what the kitchen writes. There is no lookup table to fill in: the field stays the way your client already writes the menu.
Names in English, Spanish, French, German and Italian: “gluten, milk”, “leche, huevos”.
Short codes kitchens use: “Gl, Mi”, “Mo, Ce, Su”.
Annex II numbers: “1, 3, 7”.
Separate them with commas. Case and accents don’t matter.
A word it doesn’t know shows a dashed circle on the canvas so you spot it; on the published site it is simply left out.
06
Styles
Line, Solid, Circle and Badge, drawn to match.
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. Cut-out sets the colour of those details; match it to your background.
Size from 12 to 64 px, any Color, Stroke from 1 to 2.5.
07
Languages
Set Language to Auto and labels and tooltips switch with Framer Localization. Or fix English, Español, Français, Deutsch or Italiano per instance.
Gluten · Lácteos · Frutos de cáscara
Gluten · Milch · Schalenfrüchte
Glutine · Latte · Frutta a guscio
08
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
— Single icon, List from a text field, or the full Legend.
— Single: a name, a code or the Annex II number.
— List: the text to read. Connect it to a CMS field.
— Auto (site locale), English, Español, Français, Deutsch or Italiano.
— Line, Solid, Circle or Badge.
, Color, Cut-out, Stroke.
— None, to the Right, or Below each icon.
— the allergen’s name on hover, with its own colours (Tooltip bg, Tooltip text).
— the Annex II number before each name.
— a Row that wraps, or a Column.
, Gap, Align — the layout of lists and the legend.
— text shown when a dish has no allergens, like “Allergen-free”.
, Label font.
09
Accessibility
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.
Labels and tooltips follow the page’s language with Framer Localization.
10
Questions
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.
It shows the 14 allergens clearly and gives each one a text name, which helps. The restaurant stays responsible for the information itself, so add the allergen key to the page if local rules ask for it in writing.
A plain text field. Write each dish’s allergens separated by commas, the way the kitchen sends them.
No. The icons are drawn as inline SVG inside the component: no images, no fonts and no requests to load.
No, it ships these 14 drawings. You control size, colour, stroke and one of four styles, so they match your type.
Yes. Each instance has its own style, size, colours, stroke, labels and language.
It was drawn for Lumbre, a hotel and restaurant template for Framer, where it marks every dish on the menu. See it on the Lumbre menu: https://lumbre.framer.website/menu
11
Support
Questions or a bug? Write to info@miguelrecio.es.
Need 16 dietary labels too (vegan, gluten-free, spicy and more) as Framer vectors? Allergen Icons Pro has 120 vectors in the same drawings.
Questions? Get in touch.
Email info@miguelrecio.es with your question and a link to your project.