WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.
How to Add a WordPress Icon Box to Your Content (4 Free Plugins)
Want to add a WordPress icon box to your site? Or a feature box, as they’re sometimes known? Icon boxes are a design staple that makes it easy to show off your product’s features, services, skills, etc.
In this post, we’ll show you how to add a flexible icon box to your WordPress site with almost no code required. You’ll be able to easily choose from hundreds of icons, and customize the text to your liking.
If you’re not sure what we’ve been talking about, here’s a quick example of the type of icon box that you’ll be able to create by the time you complete this tutorial:
To help you discover the best method for your site, we’ll show you how to set up your icon box using four different methods, all of which are free:
- The Elementor page builder plugin
- SiteOrigin’s Page Builder plugin
- The native WordPress block editor
- The older “Classic” WordPress editor (TinyMCE)
How to Add an Icon Box With Elementor
For the most flexible way to set up a WordPress feature box/icon box, you can use the free Elementor page builder plugin, which is the page builder plugin that we use here at WPLift.
Elementor is a little ‘overkill’ if you just want to add an icon box as a small part of a regular WordPress page.
However, if you’re building a landing page, or other type of styled page, I think that you’ll love the drag-and-drop flexibility that Elementor offers. Basically, in that situation, all the other stuff beyond the icon box is helpful.
To get started:
- Install and activate the free Elementor plugin from WordPress.org.
- Open the WordPress editor for the post or page where you want to add your icon box.
- Click on the ‘Edit with Elementor‘ button to launch Elementor’s visual, drag-and-drop design interface.
In the Elementor interface, you should see a live preview of your content on the right and a sidebar on the left. To add your box, search for “icon box” in the sidebar and then drag the Icon Box widget onto your live preview:
Typically, you’ll want to display icon boxes in some type of grid, which Elementor makes easy. All you need to do is click the plus icon and select however many columns you want. Then, you can add multiple Icon Box widgets to create an effect like this:
In the Icon Box widget settings in the sidebar, you can:
- Choose different icons from Font Awesome
- Change the text
- Link your box to somewhere else
- Change up all the style and layout options
While the icon box feature is available in the free version of Elementor, Elementor Pro adds tons of other useful features – you can learn about them in our full Elementor review.
Creating a Feature Box with Page Builder by SiteOrigin
Elementor isn’t the only WordPress page builder you can use to create an icon box. Page Builder by SiteOrigin is a freemium plugin compatible with most WordPress themes.
However, the plugin doesn’t have the feature box element by default, and you must install the SiteOrigin Widgets Bundle to create an icon box.
The first thing you’ll need to do is install and activate the Page Builder and Widgets Bundle. Both plugins are in the WordPress repository, and you can install them from your site’s dashboard.
Create a new page, or open an existing page to which you want to add a feature box. Click on the Page Builder tab to access the Edit Page window, and then click on the Add Widget button.
Find the SiteOrigin Features widget, click on it, and then click the widget’s ‘Edit button’. Proceed to add as many features as you want, specify the maximum number of features per row, and select the container shape and icon size.
Click ‘Choose Icon’ button to select one of Font Awesome’s icons for each feature you added to the widget. Optionally, you can use images from the WordPress Media Library instead of icons.
Add a title for each feature you want to include in the icon box, and write a description. Hit the Publish button to see how the element you created looks on your site’s front end.
How to Add an Icon Box Using the WordPress Block Editor
If you don’t want to rely on the full Elementor page builder for your icon box, you can also find dedicated icon box block plugins for the WordPress block editor.
These blocks make it easy to add an icon box to your regular content. If you combine them with the Columns block, you can easily create your own features section.
There’s no icon block in the core editor, but you can find several plugins that add dedicated icon box blocks.
For this tutorial, we’re going to use the free Ultimate Addons for Gutenberg plugin because it’s the most popular, and comes from the same developer as the popular Astra theme.
However, some of the other free icon box block plugins include:
- Getwid
- Gutentor
- GutenBee
- Ultimate Blocks (with the “Styled Box” block)
If you prefer the looks of one of those other plugins, feel free to use it. The basic steps will be pretty much the same – the name of the block just might be different.
To get started, install and activate the free Ultimate Addons for Gutenberg plugin from WordPress.org (or whichever plugin you chose).
Open the editor for the post or page where you want to add your box and click the plus icon to open the block inserter. Then, search for “Info Box”, which is what the plugin calls the block:
And voila! You have an icon box:
- To customize the text, you can click and type.
- To customize the icon, colors, and other design elements, you can use the Block sidebar.
If you want to add multiple icon boxes in a grid, you can nest them inside the native Columns block. Or, Ultimate Addons for Gutenberg also includes its own columns block that gives you a little more flexibility called “Advanced Columns”:
Here’s how to create an icon box with the Columns block.
Open the page you want to edit in the WordPress block editor and click the + (Add Block) icon.
Type Columns into the Search Bar and then click on this block to add it to a page. Select a 50/50, 33/33/33, or any other column variation and proceed to add icons to it.
I recommend using Font Awesome plugin, but you can also try IcoMoon or Genericons.
Click the + button on the column you created, and use shortcodes to add icons to each column’s section. Don’t forget to replace ‘bus’ with the icon’s name in the code.
Moreover, you can save icons as pictures and use Image blocks to add them to a column. When done, add a paragraph block to the column and place it below the icon shortcode.
Give each feature a name and write a brief description. Moreover, you can add links or tags to each feature before publishing the icon box you created.
How to Add an Icon Box Using the Classic WordPress Editor
Finally, what if you don’t want to use Elementor and you’re still using the older Classic TinyMCE editor?
In that case, the best option that I’ve found is the free Service Box Showcase plugin.
Once you install and activate the plugin, you can go to Service Box → Add New Service Box in your dashboard.
There, you can choose between two different layouts (in the free version – more in Pro). Below that, you can customize the content and icon for each box. The plugin uses Font Awesome for its icons, which gives you lots of flexibility.
You can also use the settings in the sidebar to customize the colors and style of your boxes:
Below that, the plugin gives you a shortcode that you can add to the Classic editor (or anywhere else on your site):
If you feel limited by the plugin’s design options, you might want to circle back and use Elementor instead as it will give you a lot more flexibility.
Frequently Asked Questions about WordPress Icon Boxes
How Do I Add an Icon Box in WordPress?
All methods involve installing a plugin. In case you decide to create an icon box with Elementor, you’ll have to install the page builder and then use its Icon Box widget and icon library to create this element.
On the other hand, you must install the Ultimate Addons for Gutenberg or a similar plugin if you want to build a content box with this block builder. Using Gutenberg’s Columns block is also an option, but I don’t recommend following this path unless you feel comfortable using shortcodes.
Don’t forget to keep feature descriptions short and informative.
How Do I Add an Icon to a Button in Elementor?
The easiest way to add an icon to a button in Elementor is to use the Icon Pointer Button Widget.
Open the page you’d like to edit in Elementor and use the search bar to find the widget. Drag the element from the widget library and drop it on a page.
The Settings menu will appear on the left side of the screen and you can easily change the button text, choose a new icon, or try different alignment options to find a perfect position for the widget.
You can experiment with different icon background colors, make the icon smaller or bigger and adjust the button typography settings.
Create Your Own WordPress Icon Box Today
And there you have it! Four free ways that you can add an icon box to your WordPress site.
Here’s how I would sum up these options:
- Elementor – the best option if you want total design flexibility for both your icon box and the rest of your content. It’s perfect for landing pages or other important pages.
- Page Builder by SiteOrigin – Ideal for novice website designers that don’t want to meddle with the theme’s code. The Page Builder and Widgets Bundle are free, so you don’t have to spend a dime to build an icon box.
- Ultimate Addons for Gutenberg – the best option if you want something that will work in the new WordPress block editor.
- Service Box Showcase – a solid option if you’re still using the Classic TinyMCE editor and don’t want to use Elementor. Overall, I don’t find it to be as flexible as the other two methods, though.
Using a page builder is probably the quickest way to add a stylish and informative feature box to a website. Still, you don’t have to install a plugin because creating an icon box is relatively simple.
Do you have any other questions about how to add an icon box to your WordPress site? Ask away in the comments section!
Hey Joe,
Thanks for featuring my plugin (WP SVG Icons) in your tutorial. I’m so glad that you were able to find a great use for it! Nothing makes me happier than seeing my work used by (and helping) people , both on personal and client projects.
I released an update last night that actually allows you to download ANY icons off of the icomoon font library, and import it directly into the plugin for use on your site. Now you are no longer limited to the icons that come pre-packaged with the plugin.
Thanks again for mentioning the plugin in this post!
Evan
Hi Joe,
Thanks for recommending our plugin – Icon Box for Visual Composer. Our focus while developing this plugin was a novice user who doesn’t understand code. That’s why we have used Visual Composer as a base and developed our plugin on it.
See how easy it is to use – https://plugins.sharkslab.com/icon-box/screencast/
Again, thank you very much recommending our plugin. We appreciate you taking time and reviewing it.
Regards,
Sujay