Where to Find the Icon Option in GenerateBlocks 2.0 (& How to Style It)

I’ve been deep into GenerateBlocks 2.0 over the past month, learning all the changes and new features as I build out websites. One thing that initially frustrated me was trying to find the icon option in the new interface.

Previously, in GenerateBlocks 1.9 and earlier, adding an icon to a headline was easy—it was right in the Styles Panel. But in 2.0, it seemed to have disappeared. After searching for about 15 minutes, I finally found it. So today, I’m going to show you exactly where it is and how to style it.

Where to Find the Icon Option in GenerateBlocks 2.0

1. Insert a Headline Block (the new GB 2.0 version)
2. Go to the Settings Panel on the left
   • Instead of looking in Styles, switch to the Settings Panel on the left.
   • Below the Tag Name, you’ll find the Icon Section.

Note: Personally, I think the icon option belongs in Styles, but for now, it’s in Settings, so that’s where we’ll access it.

How to Add an Icon to a Headline in GenerateBlocks 2.0

1. Click on the Icon Section as pointed out in the Settings panel
   • Open the GenerateBlocks Icon Library.
   • Choose one of the built-in icons or paste in a custom SVG.
2. Using a Custom SVG for an icon
   • One of my go-to resources for free icons is https://icones.js.org/.
   • Find the icon you want, copy the SVG snippet, and paste it into the Custom SVG Field.
3. Once Inserted, you can adjust the Icon’s Color right there in the Settings panel as well
   • The color settings appear after the icon is added.

How to Style the Icon Separately

Once you have added your icon, you’ll probably want to customize its size, spacing, and alignment.

1. Go to your Heading Block, and visit the Styles Panel on the right
2. Select the Icon
   • Under Selectors, you’ll see an Icon Selector.
   • Click this to target the icon separately from the headline.
3. Adjust the Size
   • The default size is 1em x 1em.
   • Reduce it to 0.5em if you want a smaller icon, or 2em if you want a larger icon.
4. Control the Spacing
   • Adjust top margin to push it up or down.
   • Example:
     • 20px from the top will push it down quite a bit.
     • 8px from the top will slightly push it down.

How to Change the Icon on Hover

If you want the icon to change color on hover, follow these steps:

1. Go to the Styles Panel
2. Click the “More” Dropdown under the Selectors
   • You’ll see an option for Hovered Icon.
3. Set the Hover Color
   • Go to Typography and change the color (e.g., blue).
   • Now, when you hover over the heading, the icon will turn blue.

Icons in the New Button Block

The Button Block in GenerateBlocks 2.0 also has an icon option in the same location:

1. With the Button block selected, you’ll find the Icon Option in the Settings Panel.
2. Choose an Icon and set its position:
   • Before or After the Button Text
   • As a Standalone Icon
3. Style it Separately Using the Icon Selector in the Style Panel.
4. Customize Hover Effects Using the “More” Dropdown.

Final Thoughts

I know this might seem like a simple fix, but it took me 15 minutes to find the icon option when I first started using GenerateBlocks 2.0.

If you’re struggling with the new UI, I hope this guide helps you quickly find, add, and style icons in your headlines and buttons.

I’ll be sharing more tutorials on GenerateBlocks 2.0, so stay tuned for upcoming posts!