Repository navigation
Ability to insert the Icon block into the Button block #81089
Description
What problem does this address?
Icons inside buttons are a common pattern in modern web design - think a lock icon on a "Log in" button, a cart icon on "Buy now", or an arrow on a "See pricing" call to action. They act as visual cues that reinforce the button's purpose and improve scannability, and they're widely used across marketing, pricing, and checkout flows.
The Icon block has recently received some nice enhancements in Gutenberg, but it currently can't be inserted inside a Button block. The Button block only supports plain text content, so there is no native way to combine the two. Right now, achieving an icon-in-button design requires workarounds such as custom HTML/SVG markup, third-party block plugins, or CSS hacks - none of which are approachable for regular users, and all of which are fragile compared to a native solution.
It is currently difficult (effectively impossible without custom code) to build this very common design pattern using only core blocks.
What is your proposed solution?
Allow the Icon block to be inserted within a Button block, so users can compose buttons that contain both an icon and a label using core blocks alone.
A few possible approaches:
- Allow the Icon block as inner content of the Button block - the Button block could support the Icon block as an inline/nested element alongside its text, with controls for icon placement (before or after the label) and spacing between the icon and text.
- Alternatively, add an "icon" setting to the Button block itself - a toolbar or sidebar control that lets the user pick an icon (reusing the icon library that powers the Icon block) and choose its position relative to the label.
Either route would let users build icon-adorned buttons for login, pricing, sales, and other calls to action directly in the editor, keeping the pattern accessible, consistent with theme styles (icon inherits button text color, scales with font size), and free of plugin or custom-code dependencies.
Activity
PineDigitalCo commentedon Aug 3, 2026
+1 I’m surprised this isn’t already part of core or at least on the roadmap.
skorasaurus commentedon Aug 3, 2026
thanks for reporting; think we can merge this with #16513 ; at the time that #16513 was created; the icon block didn't exist but I think it's fair that the spirit and meaning are identical.
Please comment if I am misunderstanding.