Icon block

The Icon block lets you add SVG icons to your site. In this guide, you will learn how to add an icon from the built-in icon library and customize its appearance.

To add an icon to your content, follow these steps:

1. Visit your site’s dashboard.
2. Navigate to the page, post, or template where you want to add an icon and open it for editing.
3. Click the + block inserter and search for “Icon.”
4. Click the Icon block to insert it:

5. Click “Choose icon” in the block toolbar to view the full collection of available SVG icons.
6. Scroll through the icons, or type a keyword into the search field to filter the results (e.g., “star” or “arrow”).
7. Click an icon to insert it.

The selected icon appears in your content. You can customize its color, size, and other settings using the options described in the sections below.

For more information, visit our detailed instructions on adding blocks.

Select the Icon block and open the block settings in the right sidebar to access customization options.

To change the color of your icon, follow these steps:

1. Select the Icon block.
2. In the block settings sidebar, navigate to the Styles tab.
3. Under Color, set the text color (the icon itself) and the background color.
4. Save your changes.

Learn more in Color settings.

To change the size of your icon, follow these steps:

1. Select the Icon block.
2. In the block settings sidebar, open the Dimensions section.
3. Adjust the Width to make the icon larger or smaller. You can also adjust Padding and Margin to control the spacing around the icon.
4. Save your changes.

Learn more in Dimensions settings.

To add a border to your icon, follow these steps:

1. Select the Icon block.
2. In the block settings sidebar, open the Border section.
3. Set the border color, width, and radius.
4. Save your changes.

Learn more in Border settings.

Use the alignment options in the block toolbar to position the icon within your content. You can align the icon to the left, center, or right.

The Icon block includes a Label setting in the block settings sidebar. Use this field to add a short text description of the icon for screen reader users. The label is not visible on the page but helps visitors who use assistive technology understand the icon’s purpose.

To swap an icon for a different one, follow these steps:

1. Select the Icon block.
2. Click Replace in the block toolbar. The icon library opens.
3. Scroll through the collection or search for a different icon.
4. Click the icon to replace the current one.