An icon list collection is made up of 1–4 lists with icons as bullets. You can use a section heading and description to contextualize content.

When using multiple icon lists, it is recommended to use an icon list heading over each list.

You can choose the icon for each icon list item; a great use case is using check marks and x marks to denote what to do and not to do. Do not use these icons as stand-ins for implied text, such as “no” or “do not”. Rather, they should support the content as a decorative element. All list item content should still be clear in message, even without the icons. Be careful not to over use icon list collections with too many different icons, making a cluttered, confusing user experience.

Each icon list item can have a description. If you use a description on one icon list item, it is recommended to add a description to all icon list items in the component.

Icon List Collection Single List

An icon list collection with a single list is a variation of an icon list collection. It contains one HTML list that can span over one, two or three columns. You can use a section heading and description to contextualize content.

Full Icon List Collection Single List Documentation

Example Icon List Collection Single List

Icon List Collection Multiple Lists

An icon list collection with multiple lists is a variation of an icon list collection. It contains two-to-four HTML lists that can span over two or three columns, depending on the number of lists. Each list should have its own heading over it to clearly show the differences between lists. You can use a section heading and description to contextualize content.

Full Icon List Collection Multiple List Documentation

Example Icon List Collection Multiple List

Keep Learning

Learn about the Link List Collection in Aggie UX 101 Module 5 Chapter 11.

Go to Chapter 11