{"id":16367735,"date":"2026-05-20T12:00:00","date_gmt":"2026-05-20T12:00:00","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16367735"},"modified":"2026-05-20T16:08:13","modified_gmt":"2026-05-20T16:08:13","slug":"icon-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/icon-block\/","title":{"rendered":"Icon block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/a><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Add an Icon block<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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

You can also use a (\/) slash command by typing \/icon<\/code> in the editor.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Block Toolbar<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Transform to <\/h3>\n\n\n\n
\"Icon<\/figure>\n\n\n\n

Click on the Transform button to convert the Icon block into a Columns, Details, or Group block.<\/p>\n\n\n\n

Block moving tools<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Get more information about moving a block within the editor<\/a><\/p>\n\n\n\n

Align<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

Use the change alignment tool to align the Icon block. Choose one of the following options:<\/p>\n\n\n\n