Icon List

This block allows you to place an icon in a list format. Easily create a bulleted list using the Gutenberg Icon List block.

How To Add The Icon List Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Icon List or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get one Icon List. You can add more icon lists by clicking on the plus ‘+‘ icon.

How To Configure The Icon List Block #

Configure Parent Block #

General #

Layout – Decide the layout of the list to be displayed from the two options; horizontal, vertical.

Hide Labels – You can display or hide the text from here.

Gap between Items and Gap between Icon and Label option is to manage the space for the icon list.

Font Family – Choose the font family for the text from various options provided in the dropdown.

Labels Font Size – You can increase or decrease the font size of the text from here. You can also set the responsive values for the Mobile and Tablet view.

Labels Font Weight – Choose the font weight for the text from the various options provided in the dropdown.

Labels Line Height – Set the line height for the text from here. The Gap between Icon and Label option is to manage the space for the icon list.

Icon Alignment – This manages the Icon Position with respect to the Label.

Icon Size – Increase or decrease the size of the icon from here. You can also set the responsive values for Mobile and Tablet view.

Background Size – Increase or decrease the size of the icon’s background. You can also set the responsive values for Mobile and Tablet view.

Border – Set the border width of the icon from here.

Border Radius – You can give border-radius to the box from here.

Style Parent Block #

Label Typography– You can set the typography options such as Font Family, Font Size, Font Weight, Line Height for Labels.

Configure Child Block #

Icon Settings #

Select Source – Choose an icon or an image to display in the block.

Icon – Choose an icon for an individual item from a number of options.

List Item Link #

Disable Link – Add or Remove link to the list item by using this toggle button.

Upon Enabling link i.e. keeping the toggle in OFF state, the following options will appear.

URL – Add URL of the link you want to add to the list item.

Open in New Tab – Decide whether to open a link in the new tab or the current one using this toggle button.

Style Child Block #

Icon Color Settings #

Under this tab, color options are available for Text, Icon, Icon Background, Icon Border.

Color can be selected for two different categories: Normal and Hover.