Gutenberg Icon Block Tutorial

Premium Icon Block for Gutenberg allows you to add any icon from Font Awesome icons and WordPress Dashicons, through a wide range of customization options.

Check Gutenberg Icon Block demo page from here.

Gutenberg Icon Block
Gutenberg Icon Block


Icon Gutenberg Block Layout Settings

  1. Select type of Icon select Icon or upload Image
  2. Select Icon: Select block icon.
  3. Link: Enable to assign link for icon.
    1. URL: Insert icon link.
    2. Open link in new tab: Enable to open the link in new tab.
  4. Alignment: Algin Icon to left, center or right.

Style Settings for Icon Gutenberg Block

Style Icon block icon and container.

Gutenberg Icon Block Style Options
Style Gutenberg Icon Block

Icon Style for Gutenberg Icon Block

  1. Size
  2. Color: Set icon color on normal and hover.
  3. Background Color: Set background icon color on normal and hover.
  4. Border Color: Set border color on hover when border style isn't none.
  5. Hover Effect: Select the effects that affects the icon itself on hover.
  6. Text Shadow
  7. Border
  8. Margin
  9. Padding

Container Style for Gutenberg Icon Block

  1. Background Type
  2. Box Shadow
  3. Border
  4. Margin
  5. Padding

Related Docs: