How To Use

How To Use Icon List Block

Quickly set up your icon list with an intuitive interface—add icons, text, and links in just a few clicks. Customize layout, spacing, and styles easily to match your design and display your content perfectly.

You can follow the steps below to use the Icon List Block.

Add to the Page:

Find and select the Icon List block from the block library, then click it into your desired section on the page.

Then you can see the default theme on the display. And you can see here the features and controls.

Customization:

Fully customize every part of your icon list—icons, colors, sizes, spacing, and typography—to perfectly match your brand and design style, without writing any code.

Icon Type:

Choose from multiple icon types, including font icons or custom images, to match your design style and create visually consistent icon lists.

Custom Icon:

Upload and use your own custom icons to create a unique look that perfectly fits your brand, giving you full control over style and appearance.

Set the URL:

Easily assign a custom link to each icon or list item, allowing users to navigate to any page, section, or external website with a single click.

Add New List:

Quickly add new list items with icons and text in one click, making it easy to expand and manage your icon list as your content grows.

Remove & Duplicate:

Easily remove unwanted list items or duplicate existing ones to create similar entries faster, saving time while managing your icon list.

Choose Themes:

Select from 7 beautifully designed themes to instantly change the look of your icon list and match different layouts, styles, and design needs with ease.

Open Link in New Tab:

Enable this option to open list item links in a new browser tab, allowing users to visit links without leaving the current page.

Show URL Icon:

Enable this option to display a clickable icon next to each list item, indicating a link and enhancing user interaction and navigation.

Width:

Control the overall width of the icon list to fit your layout perfectly, ensuring a balanced and responsive design across all devices.

Background:

Customize the background with colors or gradients to enhance visual appeal and make your icon list stand out while matching your site’s design.

Padding:

Adjust inner spacing easily to give your icon list a clean, well-balanced look and improve readability without affecting the layout.

Border:

Add and customize borders around your icon list or individual items—set style, width, and color to enhance separation and highlight content elegantly.

Shadow:

Apply subtle or bold shadows to your icon list or items to create depth and make your content visually pop on the page.

Header Styles:

Fully customize your icon list header by controlling the title display, margins, typography, and color. Style the description text, and choose to show, hide, or design a separator to create a polished and cohesive look.

List Item Styles:

Customize each list item’s icon, text, spacing, color, typography, and alignment to create a visually consistent and engaging icon list that matches your design perfectly.

Publish & Go:

Once your icon list is ready, simply publish it, and it’s live—fully functional and styled—so you can focus on content without any extra setup.

Preview:

ShortCode Usage:

If you prefer, you can embed your icon list anywhere on your site using a shortcode, allowing you to insert the block into pages, posts, or widgets without recreating it.

Add New Item ShortCode:

First, you go to the dashboard menu. Click the Add New menu.

After that, you redirect to the block editor page. You can customize to your choice and click the save button.

After that, you go back to the dashboard menu.

When you go back to the dashboard menu, you see the shortcode.

Copy The ShortCode:

Just click now on the shortcode button.

Insert ShortCode & Preview:

Copy and insert the shortcode into any page, post, or widget area, then preview it instantly to see how your icon list appears on the live site before publishing.

After that, you can publish or save the setting and visit your website to see the current preview.

That’s it.