Gutenberg Icon Block Tutorial By Premium Blocks

Introduction

Use Gutenberg Icon Block to easily add and customize icons on your website. Pick from a different selection of icons or upload your image, SVG code, or Lottie animation element. Align them left, center, or right, and link them if needed. Personalize their look with simple color and size adjustments, and set spacing to your liking. Check out the demo to see how it works. It’s straightforward professional icons that fit your site’s style.

Visit Demo Page

Free Download

Requirements

Before you start with Gutenberg Icon Block in WordPress, make sure the required plugin is installed and turned on.

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Icon Block?

Go to the editor’s menu, select Gutenburg Icon Block, select the icon you want, and then adjust its features and position on your webpage

General Settings

You can configure the main elements of your text block.

Type: Choose the type of icon. Options include a standard icon, an image, SVG, or a Lottie animation.
Link: Toggle to enable or disable a hyperlink for the icon.
URL: Enter the web address you want the icon to link to.
Open link in New Tab: Toggle this to decide whether the linked page should open in a new tab or the current one.
Alignment: Set the icon’s alignment on the page with options for left, center, or right alignment.
Options unique to Lottie:
Loop: Switch it on to have the Lottie animation repeat indefinitely.
Reverse: Switch it on to play the Lottie animation in reverse order.

Gutenberg Icon Block - Icon Settings, link, url, or alignment — Gutenberg Icon Block – Icon Settings

Gutenberg Icon Block Styling Controls

Icon Style

Hover Effect: Choose an effect that will apply to the icon when hovered over.
Size: Adjust the icon size. You can set the size using different units: pixels (PX), ems (EM), or root ems (REM).
Color: Set the icon color on normal or hover state.
Background: Set the icon’s background color. on normal or hover state.
Border: Define the border style of the icon.

Border Radius: Set the roundness of the corners of the icon.
Margin: Control the space around the icon, outside of any defined borders.
Padding: Set the space between the border and the content of the icon.

Gutenberg Icon Block border, margin and padding styling controls. — Gutenberg Icon Block – Icon’s Border Style

Container Style

Background Type: Select the type of background for the icon’s container.
Box Shadow: Add a shadow around the icon’s container to create depth.
Border: Define the border style around the container.
Border Radius: Customize the roundness of the container’s corners.
Margin: Adjust the outer space around the container.
Padding: Control the inner space within the container’s border.

Gutenberg icon block container styling options: background, box shadow, border, etc — Gutenberg Icon Block – Container Style

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Icon Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Icon Block?

General Settings

Gutenberg Icon Block Styling Controls

Icon Style

Container Style

Need Further Help?

Global Features

Help Center

Our Products

About Leap13