Gutenberg Icon Block Tutorial

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.

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

  • 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.
  • Loop Option for Lottie Animation: Switch it on to have the Lottie animation repeat indefinitely.
  • Reverse Option for Lottie Animation: 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.
gutenberg icon block icon style: hover effect, size, color on hover and normal state
Gutenberg Icon Block – Icon Style
  • 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.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks