icon to a button using the Styles creator

Hi there,

Not sure what you mean, isn’t it just a button with text and icon?

If so, you can use GB’s button block, and add an icon to the button in the settings panel.

Let me know if I misunderstood your question.

Hi David,

The Styles visual editor can’t quite get you all the way there. With GB Pro Styles you can add custom selectors like ::before and ::after, and you can set properties like content and background images on them — but there’s no way to assign an SVG or use CSS masks through the visual interface.

So for now, your best options are:

1. Use the built-in icon setting in the GB Button block — this is the intended workflow and handles sizing, color, and alignment for you. You can still use a Style for the button’s other visual properties (colors, padding, borders, etc.) and just add the icon per-block.
2. Add the icon via custom CSS outside of the Styles editor (e.g., in a GP Element or Customizer CSS) using a ::before/::after pseudo-element with a CSS mask technique, then apply that class to your buttons. This gives you the reusable class approach you’re after, but it’s code-based rather than visual.

It is a good idea for a feature request, though, so I will let the team know!

Ok, no problem!