Icon List

This component is ideal for presenting lists of information, features, or key points on a page paired with an icon.

Icon List pattern
When to use

The Icon List component is commonly used in sections such as feature highlights, product benefits or service offerings. To maintain consistency within the list, keep the text concise and scannable to improve readability. Consider using the Icon List with three times for optimal visual balance but can spread up to six items when needed and comes in three themes of Light, Neutral and Forest Green. When the component has more than uses its full capacity of 6 icons, we show a maximum of 3 icons on mobile and 4 on tablet, before a ‘Show more’ button is presented to the user.

Icon List pattern in its minimum state
Min state
Icon List pattern in its middle state
Middle state
Icon List pattern in its max state
Max state
Icon List pattern in Light theme
Icon List pattern in Neutral theme
Icon List pattern in Forest Green theme
Forest Green
Icon list pattern on tablet with a show more button
Show more
Icon List pattern on tablet with a show less button
Show less

To ensure maximum accessibility for our users, use plain language in accordance with our tone of voice for an inclusive reading experience. The text should be precise and informative. Ensure that images are accompanied by appropriate alternative text (alt text) for screen readers. An ideal alt text is descriptive and concise to convey the meaning and purpose of the image to users who may not be able to see it.

Lock icon to signify security
Example alt text

Lock icon to signify security

Content & localisation

To ensure that the Icon List component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Icon List component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

Icon List pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Icon List component across different screen sizes.

Icon List pattern on mobile
Mobile - 390px
Icon List pattern on tablet
Tablet - 768px
Icon List pattern on desktop
Desktop - 1440px