--- title: "How to Add an Icon List in WordPress?" url: https://nexterwp.com/docs/add-an-icon-list-in-wordpress/ date: 2024-12-10 modified: 2026-04-14 author: "Aditya Sharma" description: "An icon list not only captures attention but also organizes information in a visually appealing manner, making it easier for visitors to digest content quickly. With the Stylish List block..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Icon-List-in-WordPress_-1024x519.jpg word_count: 652 --- # How to Add an Icon List in WordPress? ## Key Takeaways - Nexter Blocks Stylish List block adds an icon list in WordPress with two layout types, Vertical and Horizontal. - Nexter Blocks marks Stylish List as a Freemium block, and the PRO version unlocks Hint, Tooltip, Hover Background, Read More Toggle, and Inverse Hover. - Stylish List block lets the user add list item content, a custom Url, and an Icon Type with either an icon or image. - Style tab controls for Stylish List include List spacing and alignment, Icon style, Content style, Read More Toggle text, Hint Text Style, Tooltip Options, and Extra Options for reverse hover effect. An icon list not only captures attention but also organizes information in a visually appealing manner, making it easier for visitors to digest content quickly. With the Stylish List block from Nexter Blocks, you can show information in a beautiful list format on your WordPress website. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-stylish-list/) ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated. - Make sure the Stylish List block is activated, to verify this visit Nexter → Blocks → and Search for Stylish List and activate. - This is a Freemium block, to unlock the extra features, you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text). ## Learn via Video Tutorial https://www.youtube.com/watch?v=fPOeRDeSyJA ## How to activate the Stylish List Block? Go to  - **Nexter **→ **Blocks ** - **Search **the block name** **and** turn on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/stylish-list-activate-new-1.png) ## Key Features - **Two Layout** - You can select from two layout types, Vertical and Horizontal. - **Hint **(pro)** **- You can easily highlight an icon list item. - **Tooltip **(pro)** **- You can easily [add a tooltip to a WordPress icon list item](https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-icon-list-item/). - **Hover Background** (pro) - You can [change the WordPress icon list item background on hover](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/). - **Read More Toggle **(pro) - You can [add a read more button to show more icon list items](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/). - **Inverse Hover** (pro) - You can easily highlight an item on hover by adding an inverse hover effect on other items. ## How to Use the Stylish List Block? Add the Stylish List block to the page. Then click on the **Design from Scratch** button to design the layout from scratch. ![](https://nexterwp.com/wp-content/uploads/2024/12/stylish-list-design-type-1024x193.png) > *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.* ### List From the **Layout Type** section, you can select the layout type. Here you’ll find two options -  - **Vertical** - To create a vertical icon list. - **Horizontal** - To create a horizontal icon list. Select the option as per your requirement, let’s select Vertical here. Then from the **List Content** section, you have to add the icon list content. By default, you’ll find three items, open one item. In the **Content** section, you can add the description of the list item. In the **Url** field, you can add a custom link to the icon list. From the **Icon Type** section, you can add an icon or image to the icon list. By enabling the **Hint** toggle, you can highlight an icon list item.  Then, from the **Hover Background **toggle, you can change the icon list item background on hover. > *Note: You’ll only see the Hover Background**** ****toggle option when the Interactive Links toggle is enabled from the Extra Options tab.* ### Read More Toggle By enabling the **Read More Toggle**, you can [add a read more button to show more icon list items](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/). ### Extra Options By enabling the **Interactive Links** toggle, you can enable the option to change the icon list item background on hover on each item. ![](https://nexterwp.com/wp-content/uploads/2024/12/stylish-list-extra-options-new.png) Then, from the **Hover Inverse** toggle, you can [add an inverse hover effect on other items](https://nexterwp.com/docs/create-interactive-footer-links-in-wordpress/). ## How to Style the Stylish List Block? To style the Stylish List block, you’ll find all options in the Style tab. **List** - From here, you can manage the icon list item spacing, alignment, separator color, etc. ![](https://nexterwp.com/wp-content/uploads/2024/12/stylish-list-style-new.png) **Icon** - From here, you can manage the icon style. **Content **- From here, you can manage the list content style. **Read More Toggle** - You’ll see this option when Read More Toggle is enabled. From here, you can style the read more text. **Hint Text Style** - From here, you can manage icon list item pin hint style. **Tooltip Options** - From here, you can manage the icon list item tooltip style. **Extra Options** - From here, you can add a reverse hover effect on icon list items. Advanced options remain common for all our blocks, you can explore all it options from here. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)