Style Guidelines

Many people are doing incredible work globally to improve various food systems, but too many of those are siloed within specialized frameworks.
The Foodicons Challenge is a crowdsourced competition to collaboratively design an extensive system of open-sourced icons of critical food terms and concepts that can be used globally by professionals and consumers alike.

All artists participating in the Foodicons Challenge will retain ownership of their work, whether used or not in the final set of icons. Additionally, entrants whose icons are accepted into the final icon family will agree to grant the royalty-free, perpetual, non-exclusive, worldwide right for their work to be shared under a CC BY 4.0 Creative Commons License. Learn more about CC BY 4.0. Read our full eligibility and submission requirements.

Resources

Everything you’ll need, from templates to important metaphors, and more, to successfully create a Foodicon design.

Design

Foodicons use an outline icon style, also commonly called linear icons. This style is clean, modern and simple to create.
The elements use monochromatic lines that can have subtle empty spaces, separating different sections of the composition. This icon style uses unique hexagon shapes, which highlights the icon’s identity and represent different meanings. These different hexagon styles help to give the design system more flexibility, while maintaining a unified look and feel.
While simple, the style is effective, and when used in smaller sizes and can easily be put into clusters that enable storytelling in relation to food systems.

Canvas: 100px

Please follow the Icon Template .Ai file

Grid

The grid simply specifies directions on how and where to place inner elements. Use the grid system during the design process to place the elements inside the hexagon.

.Ai TEMPLATE

Make the layer ‘Grid-Inner_Element’ visible to apply the grid on the .Ai template.

Basic Steps

Hexagon Styles

The Foodicon design has unique hexagon shapes to represent different meanings. The different styles help to give the design system more flexibility while maintaining a coherent look and feel.

.Ai TEMPLATE

Please do not modify the default hexagons presented in this guideline. If your food term requires a different meaning and hexagon shape, submit that with your icon proposal.

See examples

Hexagon Styles

The Foodicon design has unique hexagon shapes to represent different meanings. The different styles help to give the design system more flexibility while maintaining a coherent look and feel.

Please do not modify the default hexagons presented in this guideline. If your food term requires a different meaning and hexagon shape, submit that with your icon proposal.

.Ai TEMPLATE

See examples

Inner Element

Corner Radius

Outline style – Rounded Corner Stroke 4px.

Inner elements would have rounded corners as follow.
Use the corner radius that helps to translate better the metaphor.

Inner Element

Outline style – Rounded Corner Stroke 4px.

Corner Radius

Inner elements would have rounded corners as follow.
Use the corner radius that helps to translate better the metaphor.

Gap

We recommend adding a gap of 4px between two elements when there is a need to increase contrast and legibility. The gap can also create a sense of space and depth between the objects.

Modifiers

Modifiers are default elements, placed at the bottom right. They can help translate and add more meaning to some food terms.

For example: add the “Checkmark” modifier to an icon to represent “ready”. Or an “Add” metaphor to show the additional amount of a substance or element.

The Modifiers are only available for the default hexagon shape.
Use the icon template to choose the right modifier for your icon, and remember not to alter its position.

Modifiers

Modifiers are default elements, placed at the bottom right. They can help translate and add more meaning to some food terms.

For example: add the “Checkmark” modifier to an icon to represent “ready”. Or an “Add” metaphor to show the additional amount of a substance or element.

The Modifiers are only available for the default hexagon shape.
Use the icon template to choose the right modifier for your icon, and remember not to alter its position.

Examples

How to Start!

Questions we could ask ourselves before designing

What is the Subject category:

For example ‘Agriculture’ , this will be indicated at the beginning of the name when you choose a term.

Agriculture: Seed Bank / Library

What is the ‘Noun’:

Identify any types of people, i.e. Farmers, or places or things, i.e. Water, Soil, etc

Agriculture: Farmers: Markets

What is the ‘Verb’:

Identify if there is action, state, or occurance within the term, i.e. Trade, Fair, or Perennial.

Agriculture: Perennial Crops

Adjectives:

Naming an attribute of a noun, such as sweet or clean.

Nutrition: Protein: Clean Meat

Technical Guidelines

How to finish your design

SVG and .Ai

Save your icons in SVG (scalable vector graphics) file format.

We also kindly ask you to share the production file in .Ai (Illustrator) format, and with editable Strokes.

Naming

It’s important to give your icons appropriate names. Name the final icon as your chosen term.

Black

All icons should be create with 100% Black (#000000).

When using the filled hexagon, please create the inner element in White (#FFFFFF).

Upload

First Round: Foodtbd Community

Final Icon: .Ai File Google Drive

Tonality

Requirements to follow when designing Food Icons

Gender Neutral

We create accessible designs. Most food terms should use a gender-neutral shape, unless specified by the food term. You can find basic human shapes in our library.

Keep it simple

Technically outlined shapes in icons are complex and are more challenging for users to recognize. Maintain readability inside the hexagon by limiting elements to 2 or 3.

Friendly and approachable

Together we will curate a collection of food icons empowering people all over the world to better tell their stories around food production, cycles, and industry terms.
Our aim is for a friendly and approachable look to stay engaged in extensive stories around food.

Are you a designer interested in joining the challenge? Sign up here.

By entering, all entrants (designers) retain ownership of their work, whether used or not in the final set of icons. Additionally, entrants whose icons are accepted into the final icon family, posted to The Noun Project, grant a royalty-free, perpetual, non-exclusive, worldwide right Foodicons.org and those who download the icons from The Noun Project to edit, adapt, modify, reproduce, promote, publish, and otherwise use the entrant’s submission and/or its contents in any way and in any media for educational, promotional, and/or any other purposes (including commercial uses), under the Creative Commons 4.0 BY license, without having to seek permission from, and without consideration or notification to any participant or any third party. Entrants also agree that the entry may, at Foodicons.org‘s sole discretion, be posted online at the contest website and/or any other website as determined by Foodicons.org, for visitors to the website(s) to view, download, and use as they see fit.

Style Guidelines

Select Term

Sketch

Common Shapes

Select Hexagon Style

Create Inner Element

Share for Review

Sponsors & Partners

In support of

Terms of Use

Privacy

Cookie policy

Sign-up to receive the latest updates