---
title:  Icon
description: "The ShapeBlock Icon Block lets you display a single icon on your page. You can customize its alignment, size, color, background, border, shadow, rotation, and hover animation. You can also link the icon to another URL. ## How to Add…"
url: "https://shapekode.com/product/shapeblock/docs/icon/"
updated: "2026-10-15"
category: Content Block
---

#  Icon

The ShapeBlock Icon Block lets you display a single icon on your page. You can customize its alignment, size, color, background, border, shadow, rotation, and hover animation. You can also link the icon to another URL.

## How to Add an Icon Block

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

### Step 1: Add the Icon Block

1. Open the page or post where you want to add the Icon Block.
2. Click the **+ (Add Block)** button in the Gutenberg editor.
3. Search for **Icon** in the block search field.
4. Select the **Icon** block from the ShapeBlock category.
5. The Icon Block will be added to your page.
6. Select the block to configure its icon, layout, and styling.

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

### Step 2: Configure the Icon Block

Select the Icon Block to access its settings in the block inspector. The available tabs are:

- **Settings Tab:** Choose an icon and configure its link.
- **Layout Tab:** Adjust the icon alignment and size.
- **Style Tab:** Customize the icon view, shape, padding, colors, background, rotation, border, shadow, and hover animation.
- **Advanced Tab:** Configure the block's padding, margin, and background.

## Settings Tab

The Settings tab contains one panel: Content.

### 1. Content

Use this panel to select an icon and optionally add a link.

- **Icon:** Choose an icon using the icon picker.
- **Link URL:** Enter the URL where visitors should be directed when they click the icon.
- **Open in new tab:** Enable this option to open the linked URL in a new browser tab. This option appears when a URL is entered.
- **Add nofollow:** Enable this option to add the `nofollow` relationship to the link. This option appears when a URL is entered.

## Layout Tab

The Layout tab contains one panel: Alignment & Size.

### 1. Alignment & Size

Use this panel to control the icon's alignment and size.

- **Alignment:** Choose the horizontal alignment of the icon.
  - Left
  - Center
  - Right
- **Size (px):** Set the icon size in pixels. Responsive values can be configured for desktop, tablet, and mobile.

## Style Tab

The Style tab contains one panel: Icon.

### 1. Icon

Use this panel to customize the icon's appearance and hover effects.

- **View:** Choose how the icon is displayed.
  - Default
  - Stacked
  - Framed
- **Shape:** Choose the shape used with the Stacked or Framed view.
  - Circle
  - Rounded
  - Square
- **Padding:** Adjust the space inside the icon container. Responsive values can be configured for desktop, tablet, and mobile.
- **Color:** Set the icon color.
- **Background:** Set the icon background color or gradient.
- **Rotation (deg):** Rotate the icon by a specified number of degrees.
- **Border:** Customize the icon container's border, including its width, color, and style.
- **Box Shadow:** Customize the shadow around the icon container.
- **Border Radius:** Adjust the corner radius of the icon container.
- **Color (Hover):** Set the icon color when visitors hover over it.
- **Background (Hover):** Set the hover background color or gradient.
- **Border (Hover):** Customize the border when visitors hover over the icon.
- **Rotation Hover (deg):** Set the icon's rotation on hover.
- **Hover Animation:** Choose the animation displayed when visitors hover over the icon.
  - None
  - Grow
  - Shrink
  - Float
  - Sink
  - Rotate
  - Pulse
  - Pop
  - Bob
  - Hang
  - Wobble Horizontal
  - Wobble Vertical
  - Buzz
  - Spin
- **Animation Speed (ms):** Set the hover animation speed in milliseconds. This option appears when a hover animation is selected.

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

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

## Advanced Tab

The Advanced tab contains two panels for configuring the spacing and background of the entire block.

### 1. Spacing

Use this panel to adjust the space around and inside the Icon Block.

- **Padding:** Set the inner spacing on the top, right, bottom, and left. Responsive values can be configured for desktop, tablet, and mobile.
- **Margin:** Set the outer spacing on the top, right, bottom, and left. Responsive values can be configured for desktop, tablet, and mobile.

### 2. Background

Use this panel to customize the background behind the entire Icon Block.

- **Background:** Set the background color or gradient.