---
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 offers the Stylish List block for creating visually appealing lists on WordPress websites.
- Stylish List block includes two layout types: Vertical and Horizontal.
- PRO version of Nexter Blocks unlocks features like tooltips and hover backgrounds for icon list items.
- Users can design the Stylish List block from scratch or import pre-designed templates.

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/)

## Frequently Asked Questions

**Q: What should I do if the Stylish List block isn't showing up?**
A: If the Stylish List block isn't appearing, ensure that the Nexter Blocks plugin is installed and activated. You also need to activate the Stylish List block specifically by navigating to Nexter u2192 Blocks, searching for 'Stylish List', and turning on the toggle. This step is crucial for accessing the block's features.

**Q: How do I add a tooltip to an icon list item?**
A: To add a tooltip to an icon list item, you need to enable the Tooltip feature, which is available in the PRO version of Nexter Blocks. This feature allows you to provide additional context or information when users hover over the list item, enhancing user experience and engagement.

**Q: Are there any limitations with the free version of the Stylish List block?**
A: The free version of the Stylish List block has limitations compared to the PRO version. Features such as tooltips, hover background changes, and the read more toggle are only accessible in the PRO version. Upgrading will unlock these additional functionalities, enhancing your list's interactivity and design.