How to Add Feature Boxes With Icons in WordPress

Most visitors scan a page before deciding whether to read it. If your key benefits are buried in paragraphs of text, many people may leave without ever seeing them.

Feature boxes solve this by pairing each benefit with a small icon and a short description, so visitors understand what you offer is at a glance. You can also add a call-to-action button to each box to point readers to more details.

In this guide, we’ll show you how to add feature boxes with icons in WordPress using the built-in block editor or a page builder plugin.

Which Method Should You Use to Add Feature Boxes?

If you’re adding one or two feature sections to an existing page or post, use the block editor method. It’s free, built into WordPress 7.0 and later, and doesn’t require another plugin.

If you’re designing a full landing page from scratch, a page builder is the better choice. You get ready-made templates and more styling options for each icon.

You can use the quick links below to jump straight to the method you want to use:

Method 1: Add Feature Boxes With Icons Using the Block Editor (Free)

The WordPress block editor builds pages out of blocks, which are individual pieces of content like a paragraph, an image, or a button.

WordPress 7.0 added a built-in Icon block that lets you insert SVG icons without a plugin. SVG is an image format made from code, so icons stay sharp at any size and load quickly.

If you’re on an older version of WordPress, you won’t find the Icon block in the editor. You’ll need to update WordPress before following this method.

Step 1: Add a Columns Block

Start by adding a Columns block. First, open the page where you want to add your feature boxes. Then, click the + Add Block icon, search for Columns, and click the Columns block to add it.

WordPress will show you several column layouts. The numbers indicate how much width each column takes up. For example, 50 / 50 creates two columns of equal width.

We’ll select 33 / 33 / 33 to create three equal columns, but you can choose any layout that works for your content.

Step 2: Add Icons to Your Feature Boxes

Next, click the + button in the column and search for Icon. When the Icon block appears, click it to add it.

WordPress will automatically add an Info icon to the column. Click the ‘Replace’ button to choose a different icon.

This opens the icon library. You can type a name, such as photo or store, into the search bar, or scroll through the available icons.

When you find the icon you want, click it to add it to your column.

You can then customize the icon using the block settings. Depending on your theme and setup, you can change the icon color, background color, dimensions, and border. You can also use the toolbar to center the icon.

Step 3: Add Text to Your Feature Boxes

Once your icons are in place, click the + button below the icon in the first column and add a Heading block for the feature name.

Then, add a Paragraph block underneath and add a short description of the feature. One or two sentences are usually enough.

Repeat the same process for the other columns.

Step 4: Create More Rows of Feature Boxes (Optional)

If you want to add more than one row of feature boxes, select the Columns block and click the three-dot menu in the toolbar. Then, select Duplicate.

This creates a copy of the entire row. You can then replace the icons and text with new content using the same steps above.

Step 5: Publish Your Feature Boxes with Icons

When you’re happy with your feature boxes, click the Save or Publish button to make them live.

You can then visit your website to see the feature boxes in action:

Method 2: Add Feature Boxes With Icons Using a Page Builder

The block editor works well when you want to add a feature section to an existing page. But if you’re designing a full landing page and want more control over the layout and styling, a drag-and-drop page builder can give you more flexibility.

We’ll use SeedProd for this method because we use it on our own sites. Most drag-and-drop page builders, like Elementor, offer an icon box element and a built-in icon library. For more information, see our SeedProd review.

Step 1: Install and Set Up the Page Builder

First, you need to install and activate the SeedProd plugin. For more details, see our guide on how to install a WordPress plugin.

Once you activate the plugin, go to SeedProd » Settings and enter your license key. You can find your key by logging in to your SeedProd account.

Step 2: Choose a Landing Page Template

Next, go to SeedProd » Landing Pages and click ‘+ Add New Landing Page.’

Then, enter a name for your page. SeedProd will also use this name to create the page URL, but you can edit the URL if needed.

On the next screen, you’ll choose a template. Each template can be customized with drag and drop, but choosing one that matches your goal can save you some time.

For this guide, we’ll use the Blank Template. Hover over it and click the checkmark icon to select it.

Then, click ‘Save and Start Editing the Page.’

Step 3: Create Your Feature Boxes With Icons

Since we’re starting with a blank template, the first step is to choose a layout. Here, let’s pick the single-column layout to design the header area above your feature boxes.

You can then drag the Headline block from the left-hand menu into the page. Select the block to edit its text and adjust its formatting using the options in the left-hand panel.

Repeat the process with the Text block.

You can also customize the header by adding a background image or changing its formatting. For more options, click the ‘Advanced’ tab to adjust spacing, add a border, add animation effects, and more.

Once you’re done with the header, you can create the feature boxes. Drag the Column block from the left-hand panel into the editor and place it just below the header area.

After that, you can choose a layout. For this example, we’ll use the option with three equal columns.

Then, find the Icon Box block in the left-hand menu and drag it into the first column.

The block includes a default icon, heading, and sample text that you can customize.

To change the icon, find the Icon/Image section in the left-hand panel. Then, hover over the current icon and click the button to replace it.

This opens the icon library. You can search for a specific icon or browse the available options. When you find one you like, click it to add it to your feature box.

Once you’ve selected an icon, click it to open its settings in the left-hand menu. Here, you can change its alignment, size, and color.

Step 4: Customize Your Feature Box Content

Next, select the text in your Icon Box to open its settings in the left-hand menu.

You can replace the sample heading and description with your own feature text. You can also add links or change the text alignment and color.

Repeat these steps for the other columns, adding a different icon and feature text to each one.

Step 5: Publish Your Landing Page

If you want to add another row of feature boxes, hover over the section and click the Duplicate Row button. Then, replace the icons and text with your new content.

You can also customize the rest of your landing page by adding images, call-to-action buttons, or other blocks. The process is similar: drag the block you want into the editor and customize it from the left-hand panel.

When you’re happy with your landing page, click the ‘Save’ button and then select ‘Publish’ to make it live. You can now see the landing page in action:

FAQs About Feature Boxes With Icons

Here are some common questions about adding feature boxes with icons in WordPress:

How do I add icons in WordPress?

If you’re on WordPress 7.0 or later, you can use the built-in Icon block, which lets you search the WordPress icon library by name. For larger icon sets like Font Awesome, you’ll need a plugin or a page builder with its own icon library.

How do I add custom icons to WordPress?

The Icon block only shows icons from the WordPress library, so you can’t upload your own through it. Instead, you can upload your icon as a PNG file using the Image block.

We hope this article helped you learn how to add feature boxes with icons in WordPress. You may also want to see our guide on how to customize colors on your WordPress site and ways to create a mobile-friendly WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.