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. Create checklists, feature lists, or any other list and display your items clearly.

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 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.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.

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.

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.

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

Upon Enabling link i.e. keeping toggle in OFF state, 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.

Last updated