Title: Icon block
Author: Andrea Roenning
Published: May 20, 2026

---

# Icon block

## In this article

 * [Add an Icon block](https://wordpress.org/documentation/article/icon-block/?output_format=md#add-an-icon-block)
 * [Block Toolbar](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-toolbar)
    - [Transform to](https://wordpress.org/documentation/article/icon-block/?output_format=md#transform-to)
    - [Block moving tools](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-moving-tools)
    - [Align](https://wordpress.org/documentation/article/icon-block/?output_format=md#align)
    - [Choose icon / Replace](https://wordpress.org/documentation/article/icon-block/?output_format=md#choose-icon-replace)
    - [More options](https://wordpress.org/documentation/article/icon-block/?output_format=md#more-options)
 * [Block Settings](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-settings)
    - [Label](https://wordpress.org/documentation/article/icon-block/?output_format=md#label)
    - [Advanced](https://wordpress.org/documentation/article/icon-block/?output_format=md#advanced)
    - [Color](https://wordpress.org/documentation/article/icon-block/?output_format=md#color)
    - [Dimensions](https://wordpress.org/documentation/article/icon-block/?output_format=md#dimensions)
    - [Border](https://wordpress.org/documentation/article/icon-block/?output_format=md#border)
 * [Changelog](https://wordpress.org/documentation/article/icon-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/icon-block/?output_format=md#wp--skip-link--target)

[Go back to the list of Blocks](https://wordpress.org/documentation/article/blocks/)

The Icon block lets you easily add icons to your pages, posts, templates, and template
parts. Icons can be resized without losing quality and support custom colors for
both the icon and its background.

## 󠀁[Add an Icon block](https://wordpress.org/documentation/article/icon-block/?output_format=md#add-an-icon-block)󠁿

To add an Icon block, open the Block Inserter tool by clicking the Block Inserter
+ icon in the top toolbar. Look for the Icon block by using the search bar to find
the right block to add. Then, click the icon to insert the Icon block into the editor.

Alternatively, click the Block Inserter (+) icon in the editor, then choose the 
Icon block after searching for it in the pop-up window.

You can also use a (/) slash command by typing `/icon` in the editor.

![Adding the icon block in editor with a slash icon command](https://wordpress.org/
documentation/files/2026/05/Screenshot-2026-05-13-at-5.43.02-PM.png)

## 󠀁[Block Toolbar](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-toolbar)󠁿

Each block has its own block-specific controls that allow you to manipulate the 
block right in the editor. If you hover over the buttons, tooltips will show what
each button does.

### 󠀁[Transform to](https://wordpress.org/documentation/article/icon-block/?output_format=md#transform-to)󠁿

![Icon block transform options](https://wordpress.org/documentation/files/2026/05/
Screenshot-2026-05-13-at-5.45.28-PM.png)

Click on the Transform button to convert the Icon block into a Columns, Details,
or Group block.

### 󠀁[Block moving tools](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-moving-tools)󠁿

![Block moving tools on icon block toolbar](https://wordpress.org/documentation/
files/2026/05/icon-block-toolbar-move.png)

The block-moving tools allow you to move the block in the editor. Use the six dots
icon to drag and drop the block and place it anywhere on the page. Alternatively,
click on the up and down arrows to move the block up or down.

[Get more information about moving a block within the editor](https://wordpress.org/documentation/article/moving-blocks/)

### 󠀁[Align](https://wordpress.org/documentation/article/icon-block/?output_format=md#align)󠁿

![Block toolbar align button](https://wordpress.org/documentation/files/2026/05/
icon-block-toolbar-align.png)

Use the change alignment tool to align the Icon block. Choose one of the following
options:

 * **None – **removes any alignment setting.
 * **Align left – **aligns the block left.
 * **Align center – **aligns the block to the center.
 * **Align right – **aligns the block right.

### 󠀁[Choose icon / Replace](https://wordpress.org/documentation/article/icon-block/?output_format=md#choose-icon-replace)󠁿

If you haven’t selected an icon yet, click **Choose icon** to open the icon library
and browse available options. If an icon is already selected, click **Replace** 
to choose a different one.

### 󠀁[More options](https://wordpress.org/documentation/article/icon-block/?output_format=md#more-options)󠁿

The More options menu represented by three vertical dots on the far right of the
toolbar gives you more features such as the ability to duplicate or remove the block.

[Read about these and other settings](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block Settings](https://wordpress.org/documentation/article/icon-block/?output_format=md#block-settings)󠁿

![Block settings button](https://wordpress.org/documentation/files/2026/05/block-
settings-7-0-1.png)

Every block has specific options in the editor sidebar in addition to the options
found in the block toolbar. If you do not see the sidebar, click on the **Settings
button** next to the Save/Publish button.

### 󠀁[Label](https://wordpress.org/documentation/article/icon-block/?output_format=md#label)󠁿

![Icon settings showing label input box](https://wordpress.org/documentation/files/
2026/05/Screenshot-2026-05-13-at-6.01.51-PM.png)

Add a label to briefly describe the icon to help screen reader users or leave blank
for decorative icons.

### 󠀁[Advanced](https://wordpress.org/documentation/article/icon-block/?output_format=md#advanced)󠁿

The Icon block provides the following Advanced settings options: HTML Anchor, Additional
CSS Class(es), Additional CSS, and Styles.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

### 󠀁[Color](https://wordpress.org/documentation/article/icon-block/?output_format=md#color)󠁿

The Icon block provides Color settings options to change the text and background
colors.

[See this guide for more information about changing colors](https://wordpress.org/documentation/article/colors-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/icon-block/?output_format=md#dimensions)󠁿

The Icon block provides dimension settings options to change padding and margin 
size.

[Learn more about dimension controls](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Border](https://wordpress.org/documentation/article/icon-block/?output_format=md#border)󠁿

The Icon block provides border settings options to add border color, width, and 
radius.

[Learn more about border settings](https://wordpress.org/documentation/article/border-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/icon-block/?output_format=md#changelog)󠁿

 * Created 2026-05-20

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/icon-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Ficon-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

May 20, 2026

Last updated

May 20, 2026