---
title: Icon Box
description: 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…
url: "https://shapekode.com/product/shapeblock/docs/icon-box/"
updated: "2026-10-15"
category: Content Block
---

# Icon Box

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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-45.png)

### 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

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-46.png)

## 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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-47.png)

## 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.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-48.png)

## 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.