Icon element

The icon element let you display information in a visual and easy-to-grasp way. In the list of editorial elements you can find it as 'icons'. We built it in a light way that helps your site speed. You can add as many icons as you want. On desktop in a 100 row four icons will be in one row, on mobile up to two icons will be shown in each row.

Required fields:

  • Icon image - we currently support svg files for that. They have a couple of advantages: First, they are very lightweight (usually around 1kb). Second, since svgs are vectors, they will be displayed in a sharp way on all resolutions. Third, we can control their appearance (e.g. make them white on colored background). If you want to convert existing png images to svgs, you can find a couple of free converters online, e.g. here. However, we recommend you to use original svgs, e.g. from FontAwesome
  • Color: The color of the icon. On colored background, all icons will be white. If you use more than one icon in the element, we strongly recommend you to use the same color for all icons in the element.

Optional fields:

  • Headline: We recommend less than 30 characters
  • Subline: We recommend less than 50 characters.
  • Link

Example

Children can go to school
Education
Children can go to school
Children can stay healthy.
Health
Children can stay healthy.
Children get access to clean water.
Water
Children get access to clean water.
Children can eat healthy food.
Nutrition
Children can eat healthy food.
Children can go to school
Education
Children can go to school
Children can stay healthy.
Health
Children can stay healthy.
Children get access to clean water.
Water
Children get access to clean water.
Children can eat healthy food.
Nutrition
Children can eat healthy food.