Add custom icons

Introduction #

This article provides instructions for creating custom icons for allergens and dietary options. Icons enhance the user experience by providing visual cues for important food information.

Creating Custom Icons #

Create an Icon Group #

Before you can create individual icons, you need to establish a group for the icons related to allergens and dietary options.

Create a new icon group in your application by navigating to the custom icon management section and selecting ‘New Icon Group‘. Select the group type, name the group appropriately, for example, ‘Dietary Icons’ or ‘Allergen Icons’ and add a short description for your reference.

Create Icons #

Add New Icons #

Once your icon group is created, you can begin adding custom icons.

Choose Icon Colours #

Select distinct colours for each icon for clarity and recognition. Consider using:

  • Green: Vegan
  • Red: Contains Nuts
  • Yellow: Made without Gluten
  • Blue: Made without Dairy

Define Abbreviations #

Create simple abbreviations for each icon to make them easily recognisable. Suggested abbreviations include:

  • VG: Vegan
  • N: Nuts
  • GF: Made without Gluten
  • DF: Made without Dairy

Give your icon a name #

Choose a meaningful name for your icon. You can use more than one word but try to keep the name as short as possible.

Remember, in some territories, the terms Gluten-Free, Dairy-Free or similar may have a legal definition that you would need to meet to classify your food as such.

Write Descriptions #

Add a brief description to each icon. Example descriptions include:

  • Vegan: Contains no animal products.
  • Contains Nuts: May cause allergic reactions.
  • Gluten-Free: Does not contain gluten.
  • Dairy-Free: Does not contain dairy products.

These descriptions will appear at the foot of the customer’s device when they select that icon.

Conclusion #

After creating your icons with specific colours, abbreviations, and descriptions, make sure that they are saved within the designated icon group. Test the icons for clarity and effectiveness in conveying important dietary information.

Was this useful?