Icon List

The icon list block allows you to highlight important calls to action by adding graphical elements to the page. It should be used when there are multiple calls to action or resources for a user to choose from, not just a single option.

Maximum of 5 items

You can add up to 5 icons when the block is displayed in a horizontal row.

Link can appear to the right of icon

In the right-hand block editor, you have the option to put link to the right of the icon as seen below. This is useful in filling horizontal space when there is 1-3 icons or if each icon has limited link text. Select the icon list block as a whole and click the “Toggle link to the right of the icon” button to enable this layout change across all icons in the block.

Single item has less impact

It is generally best to use the Icon List block when displaying multiple links. If only one is used, it is wise to place the block within a column and toggle the link to the right. Below is how it will appear if the block is used on its own with only one item.

Block can be placed within column

Icon list blocks that are placed inside columns automatically display the link to the right of the icon. This helps to create a consistent look and enable the links to be more easily scanned by users. It is also a great option when pairing the links with other content side-by-side for context.

How to use the icon list block

1. Insert the icon list block on the page where you’d like it to span the width of the page.
   • Icons typically go horizontally across the page.
   • If the block is added inside of a column, the icons will stack vertically.
2. Select your desired icon.
   • There is an icon that appears by default, so you can see where it is placed. In the right-hand block editor, you can use the dropdown to choose a different icon to better suit your purpose. See all of the icon options in the set below.
3. Add the link text in the appropriate field below the dropdown.
   • The link text and arrow typically appear under the icon. However, in the right-hand block editor, you have the option to put link to the right of the icon as seen above. Click the “Toggle link to the right of the icon” button to change the layout in this way. If you select this option for the first icon, all the icons in that row will have the same format.
   • Icon list blocks that are placed inside columns automatically put the link to the right.
4. Add the link URL in the following field.
   • Note: If no URL is entered in this field, the link text will not appear until one is added.
5. If you’d like to add another List Item, select the icon list block again, and click on the small black plus sign that appears to the right of the first icon. You can add up to 5 icons in a horizontal row.

Icon options within the block

There are many icon options to choose from within this block that can provide visual interest to the link. Please try to use each icon for one specific instance in order to remain consistent across your site. Using the same icon for multiple links may cause confusion and lead to inaccurate recall by the user. Below are all of the options that are currently available.