Get Started

Icon Box

5 min read

0:00 6:49

The Icon Box Block lets you display an icon, number, or image with a title and description. You can customize the layout, styling, background, border, spacing, and hover effects. You can also add an optional button with a link and icon.

How to Add an Icon Box Block

Follow these steps to add and configure the Icon Box Block in the WordPress Gutenberg editor.

Step 1: Add the Icon Box Block

  1. Open the page or post where you want to add the Icon Box Block.
  2. Click the + (Add Block) button in the Gutenberg editor.
  3. Search for Icon Box in the block inserter.
  4. Select the Icon Box block from the ShapeBlock category.
  5. The Icon Box block will be added to your page.
  6. Select the block to configure its settings using the sidebar.

Step 2: Configure the Icon Box Block

Select the Icon Box Block to access its configuration options in the sidebar. The available options are organized into four tabs:

  • Settings: Configure the icon, number or image, title, description, and optional button.
  • Layout: Control the icon position, content alignment, vertical alignment, and spacing between the icon and content.
  • Style: Customize the icon box, icon, title, description, and button appearance, including colors, backgrounds, borders, typography, and hover effects.
  • Advanced: Configure the block’s padding, margin, and background.

Settings Tab

The Settings tab contains the Content and Button panels for configuring the Icon Box Block’s content and button behavior.

1. Content

  • Icon: Enable or disable the icon, number, or image displayed in the box.
  • Type: Choose the content type:
    • Icon
    • Number
    • Image
  • Icon: Select an icon from the icon picker. This option appears when the Type is set to Icon.
  • Number: Enter the number to display. This option appears when the Type is set to Number.
  • Select Image: Choose an image from the WordPress Media Library. This option appears when the Type is set to Image. You can replace the selected image.
  • Title: Enter the title displayed in the icon box.
  • Description: Enter the description displayed below the title.
  • Title HTML Tag: Choose the HTML tag used for the title:
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
    • P
    • DIV
    • SPAN

2. Button

  • Show a button: Enable or disable the button in the icon box.
  • Button Text: Enter the text displayed on the button. You can also edit the button text directly in the block preview. Leave the text empty and select a button icon to create an icon-only button.
  • Link: Enter the destination URL for the button.
  • Open in New Tab: Open the linked page in a new browser tab. This option appears when a link is entered.
  • Add Nofollow: Add the nofollow attribute to the button link. This option appears when a link is entered.
  • Button Icon (optional): Select an icon to display inside the button.
  • Icon Position: Choose where the button icon appears when an icon is selected:
    • After the Text
    • Before the Text

Layout Tab

The Layout tab contains the Layout panel for controlling the position and alignment of the icon box content.

1. Layout

  • Icon Position: Choose the position of the icon relative to the content. This option is available when the icon is enabled:
    • Icon Left
    • Icon Top
    • Icon Right
  • Content Alignment: Set the alignment of the content:
    • Left
    • Center
    • Right
  • Vertical Alignment: When the icon is positioned on the left or right, choose how the icon aligns vertically with the content:
    • Top
    • Middle
    • Bottom
  • Gap (px): Adjust the spacing between the icon and the content.

The Icon Position, Content Alignment, and Gap controls support responsive settings for desktop, tablet, and mobile devices.

Style Tab

The Style tab contains separate panels for customizing the icon box, icon, title, description, and button. Some controls are available only when the corresponding element is enabled.

1. Icon Box

  • Normal: Configure the default appearance of the icon box:
    • Background: Set a background color or gradient.
    • Border: Customize the border.
    • Box Shadow: Add a shadow around the icon box.
  • Hover: Configure the appearance when the user hovers over the icon box:
    • Background: Set the hover background color or gradient.
    • Border Color: Set the border color on hover.
    • Box Shadow: Customize the shadow on hover.
    • Lift the box on hover: Enable or disable the lift effect when hovering over the box.
  • Border Radius: Customize the rounding of the icon box corners.
  • Padding: Set the inner spacing of the icon box. Responsive settings are available for desktop, tablet, and mobile.
  • Margin: Set the outer spacing of the icon box. Responsive settings are available for desktop, tablet, and mobile.

2. Icon

This panel appears when the icon, number, or image is enabled.

  • Icon View: Choose how the icon is displayed:
    • Default
    • Frame
    • Stacked
  • Shape: Choose the icon shape when Frame or Stacked is selected:
    • Rounded
    • Square
    • Circle
    • Square Rotate
  • Size (px): Adjust the icon size.
  • Box Size (px): Adjust the size of the icon’s surrounding box.
  • Padding: Set the inner spacing around the icon. Responsive settings are available for desktop, tablet, and mobile.
  • Color: Set the icon or number color.
  • Background: Set a background color or gradient for the icon box.
  • Box Shadow: Add a shadow to the icon box.
  • Border: Customize the icon box border.
  • Border Radius: Adjust the rounding of the icon box corners.

3. Title

  • Color: Set the title text color.
  • Typography: Customize the title typography. Responsive settings are available for desktop, tablet, and mobile.
  • Padding: Adjust the inner spacing around the title. Responsive settings are available for desktop, tablet, and mobile.

4. Description

  • Color: Set the description text color.
  • Typography: Customize the description typography. Responsive settings are available for desktop, tablet, and mobile.

5. Button

This panel appears when Show a button is enabled in the Settings tab.

  • Button Style: Choose the button appearance:
    • Button
    • Text Link
  • Normal: Configure the default button appearance:
    • Text Color: Set the button text color.
    • Background: Set the button background color or gradient. Available for the Button style.
    • Border: Customize the button border. Available for the Button style.
  • Hover: Configure the button appearance on hover:
    • Text Color: Set the hover text color.
    • Background: Set the hover background color or gradient. Available for the Button style.
    • Border Color: Set the hover border color. Available for the Button style.
  • Border Radius: Adjust the rounding of the button corners. Available for the Button style.
  • Typography: Customize the button text typography. Responsive settings are available for desktop, tablet, and mobile.
  • Button Size: Set the width and height of an icon-only button. This option appears when the button has an icon but no text.
  • Padding: Adjust the inner spacing of the button. Responsive settings are available for desktop, tablet, and mobile. This option is available for the Button style when the icon-only button size control is not being used.
  • Space Above: Set the spacing above the button.
  • Icon Size: Adjust the size of the button icon when an icon is selected.
  • Space Between Icon and Text: Adjust the spacing between the button icon and text when both are present.

Advanced Tab

The Advanced tab contains the Spacing and Background panels for controlling the outer spacing and background of the entire block.

1. Spacing

  • Padding: Set the inner spacing around the entire Icon Box Block. Responsive settings are available for desktop, tablet, and mobile.
  • Margin: Set the outer spacing around the entire Icon Box Block. Responsive settings are available for desktop, tablet, and mobile.

2. Background

  • Background: Set a background color or gradient for the entire Icon Box Block.

Updated on October 15, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.