Icon block

Go back to the list of 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

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.

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

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

Block moving tools

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

Align

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

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

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

Block Settings

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

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

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

Color

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

See this guide for more information about changing colors

Dimensions

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

Learn more about dimension controls

Border

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

Learn more about border settings