Easy Tech TutsHow to Make Simple Buttons With Icons in Webflow Easily 2026
By Impran M N
Pairing an icon with your button text, like an arrow next to 'Learn More', gives a CTA extra visual polish, but aligning them properly takes flexbox know-how. This guide covers nesting a text element and an SVG icon inside a Link Block and using flexbox to keep everything centered and evenly spaced. It's for designers who want interactive buttons without writing custom CSS.
01Add a Link Block
Open the Add Elements panel and drag a Link Block onto the canvas to serve as your button container.
02Nest a text block and icon
Add a Text Block for the button label and upload or embed a small SVG icon inside the same Link Block.
03Turn on flexbox layout
In the right sidebar style panel, apply a horizontal flexbox layout preset to the Link Block so its children sit in a row.
04Center align and add spacing
Set vertical alignment to center so the text and icon line up, then add a small gap between them for visual breathing room.
05Style hover states and finalize
Apply a hover state transition for interactivity, assign the styling to a reusable global class, then test across breakpoints.
Frequently asked questions
Why aren't my text and icon aligning vertically?
This usually means flexbox alignment isn't set to center on the parent Link Block, so check that setting first.
Can I reuse this button style elsewhere on my site?
Yes, assigning a global class to the Link Block lets you apply the same button design consistently across pages.
What file type should my icon be?
SVG is the recommended format since it scales cleanly at any size without losing quality.
How do I add a hover effect to the button?
Use Webflow's built-in hover state in the style panel to adjust color, spacing, or a subtle transition on mouse-over.
Watch the full walkthrough
The same steps, demonstrated on screen from start to finish.
