--- 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-09-17 lang: en author: "Aditya Sharma" description: "A bullet point is a dot. An icon is a promise about what the point actually is. The Stylish List block pairs each line of text with its own icon,..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Icon-List-in-WordPress_-1024x519.jpg word_count: 474 --- # How to Add an Icon List in WordPress? ## Key Takeaways - Stylish List block pairs each line of text with its own icon and adds hover backgrounds, pinned Hint labels, tooltips, and a Read More toggle for long lists. - Nexter Blocks free and Nexter Blocks Pro include Stylish List, and the block is switched on under Nexter > Blocks in the WordPress dashboard. - Interactive Links dims every other item while one item is hovered, and setting it to Global connects several separate Stylish List blocks on the same page. A bullet point is a dot. An icon is a promise about what the point actually is. The Stylish List block pairs each line of text with its own icon, and adds interactive touches most plain lists don't have — hover backgrounds, small pinned labels, tooltips, and a Read More toggle for long lists. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-stylish-list/) ## Before You Start - **Edition:** Free — the Stylish List block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Stylish List, switched on under **Nexter > Blocks** in your WordPress dashboard. https://www.youtube.com/watch?v=fPOeRDeSyJA ## Steps - Add the **Stylish List** block and add a row for each item, with its own text and icon. ![The Layout Type options](https://nexterwp.com/wp-content/uploads/2026/09/sl-layouttype.webp) - Pick an icon for each row — a Font Awesome icon, an uploaded image, or an SVG. - Add a link if a row should be clickable. > *Layout Type switches the whole list between a vertical stack and a horizontal row.* ## What Each Item Can Carry | Feature | What it adds | Guide | | ------- | ------------ | ----- | | Hint | A small pinned label badge on that row | [Pin Hint labels](https://nexterwp.com/docs/add-label-tab-to-wordpress-icon-list/) | | Tooltip | Text that appears on hover | [Item tooltips](https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-icon-list-item/) | | Read More | Collapses a long list to a few items | [Read More button](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/) | ## How It Behaves - **Hint Text alone does nothing.** Measured: filling in Hint Text without switching on **Hint** for that row rendered no label at all. Switch Hint on first.- **Background Hover Effect starts with the first item already highlighted**, before any hover happens — measured. Hovering another item moves the highlight there instead. See the [hover background guide](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/).- **Interactive Links dims every other item while you hover one** — measured as computed opacity, the hovered item stays fully visible and the rest fade to partial opacity. Set to Global and it can connect several separate list blocks. **Global reaches other Stylish List blocks on the same page.** Measured with two separate blocks sharing the same Global ID: hovering an item in one dimmed items in **both**, even though only one was ever touched. See the [interactive footer links guide](https://nexterwp.com/docs/create-interactive-footer-links-in-wordpress/).- Each row's icon can be a Font Awesome icon, an uploaded image, or an SVG — a per-row choice, not a block-wide one. ## Limitations - Hint Text needs the Hint toggle switched on for that row, or it never appears — measured.- The global Interactive Links connection only reaches other Stylish List blocks, not other block types.- SVG icons render as an embedded object, not inline markup, which limits how far their colours can be styled through the block's own controls. ## Troubleshooting ### My hint label isn't showing Check **Hint** is switched on for that row, not just Hint Text filled in — measured, the text alone does nothing. ### The wrong item looks highlighted before I've hovered anything That is expected with Background Hover Effect — the first item starts highlighted by design, measured. ### The block is missing from the inserter Switch **Stylish List** on under **Nexter > Blocks**. ![Stylish List switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/sl-admin-enable.webp) ## Related Docs - [Pin Hint labels](https://nexterwp.com/docs/add-label-tab-to-wordpress-icon-list/)- [Item tooltips](https://nexterwp.com/docs/add-a-tooltip-to-a-wordpress-icon-list-item/)- [Hover background](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/)- [Interactive footer links](https://nexterwp.com/docs/create-interactive-footer-links-in-wordpress/)- [Read More button](https://nexterwp.com/docs/add-read-more-button-to-the-wordpress-icon-list/) ## Frequently Asked Questions **Q: Why is my hint label not showing in the WordPress icon list?** A: Hint Text by itself does nothing. The row only shows a pinned label when Hint is switched on for that specific item, so the toggle matters more than the text field. Nexter Blocks measures this behavior directly, and the same rule applies whether you are using Nexter Blocks free or Pro. If the label is missing, the fix is to enable Hint on that row first, then add the text. **Q: How do I add clickable items to an icon list in WordPress?** A: Each row in Stylish List can carry its own link, so the list works for navigation as well as decoration. That matters when you want one item to open a page while other rows stay plain text. Nexter Blocks also lets each row use its own icon, so clickable and non-clickable items can live together in the same list without changing the whole block. **Q: What icon formats can I use for each item in a Stylish List?** A: Each row can use a Font Awesome icon, an uploaded image, or an SVG. That per-row choice is useful because one list can mix simple icons with custom artwork instead of forcing a single style across every item. The page also notes that SVG icons render as an embedded object, which limits how far their colours can be styled through the block’s own controls. **Q: How does Background Hover Effect behave on an icon list?** A: Background Hover Effect starts with the first item already highlighted before any hover happens. That is measured behavior, not a bug, so the first row can look active even when nothing has been touched yet. When you hover another item, the highlight moves there instead. If you want that interaction pattern, use the [hover background guide](https://nexterwp.com/docs/change-wordpress-list-item-background-on-hover/). **Q: Can one icon list control hover effects in another list on the same page?** A: Interactive Links can connect multiple separate Stylish List blocks when they share the same Global ID. In that setup, hovering one item dims every other item while keeping the hovered one fully visible, and the connection reaches other Stylish List blocks on the same page. That makes it useful for linked groups of lists, but it only works across Stylish List blocks, not other block types. See [interactive footer links guide](https://nexterwp.com/docs/create-interactive-footer-links-in-wordpress/). **Q: Why is the Stylish List block missing from the WordPress inserter?** A: The block appears only after Stylish List is switched on under Nexter > Blocks in your WordPress dashboard. Nexter Blocks provides this block in both free and Pro editions, so missing it usually points to the block being disabled rather than unavailable. Once it is enabled, you should be able to add it from the inserter like any other Gutenberg block.