When you go to add an icon to a headline or text block in GenerateBlocks, it can be a little bit confusing how to align those two together—whether you want the icon on the left, stacked on top, or even just centered in the middle with your headline. So today, I’m going to show you exactly how to set that up properly and arrange them in the different positions as you wish.
Setting Up the Demo
I’ve set up a demo page here using a three-grid card layout. We’re going to be adding an icon to each of our headings in these boxes and arranging them in different positions per box.
Adding the First Icon
First, I’ll go to the first card and add the icon. I’m grabbing this icon from Phosphor Icons. I open the settings panel, expand the icon box, and paste in the SVG snippet.
You’ll now see the icon next to the heading. By default, when you first insert an icon, it’s automatically going to align on the left. You can come in here and choose before or after. Personally, I rarely ever choose after unless I’m adding an icon to a button—like an arrow after the text to signify a link. So, I’ll put this back to before and change the icon color to a blue.
How to Stack the Icon Above the Text
When you jump over to the Styles panel, you’re going to see a new icon selector appear under your options. It might be instinct to go there and start changing the layout, but you actually need to stay within the main selector to arrange the icon with the text properly.
With that main selector chosen, go to Layout. By default, it’s set to inline flex, so the icon stays on the left of your text.
But if we want to stack the icon above the text and left-align it, change it to flex, go under flex layout, and choose column. Then come back to alignment and choose left aligned. Now the icon and text are stacked vertically and aligned left.
It took me a little bit to realize that once you add the icon, the main selector encompasses both the icon and the heading—not just the text itself.
Center Aligning the Icon and Text
Let’s do the same thing on the middle section. I’ll add the icon again and change its color to dark orange. With the main selector still chosen, switch to flex, then column. By default, it aligns to center. So now the icon is centered right above the text, and the text is also centered.
Handling a Two-Line Heading
What if your heading is actually on two lines? Let’s add some text and say: This is a longer heading so it goes onto two lines.
Back in the settings panel, I’ll add our icon again and choose a blue color.
Now you’ll see the icon is center-aligned with the text. Personally, from a design perspective, I never really care for a center-aligned icon on the left. I either like it flush at the top or stacked, like we did in the first card.
To stack it flush with the top of the text, go back into the layout with the main selector still chosen. Keep inline flex, because we still want the icon in line with the heading. But instead of align item: center, change it to align start. Now the icon moves to the top of the heading.
Fine-Tuning with Padding or Margin
Depending on whether you want the icon to be flush with the top or visually centered, you can fine-tune it. Go to the icon selector, scroll down to spacing, and add some padding or margin. I usually go about 2–4 pixels—maybe 3 looks about right—to visually center it with the heading’s line height.
You can also adjust the size of the icon under the sizing panel. If you make the icon bigger, you’ll probably want to adjust its position again using negative margin to push it up and visually center it with the text.
Wrapping Up
That was just a quick overview of how you can manipulate your icon alignment with your text. It’s really pretty simple once you grasp the idea of choosing the main selector instead of jumping over to the icon selector to try to move it.
