Add icons to WordPress buttons
An icon sits inside the button, before or after the label, sized to the text. It can have its own color and change color on hover.
Type
An upgrade to the Button block
Find it
Button settings, Icon
Phones
The icon keeps its resting color on touch
Speed
Uses the same built-in icon set as the rest of Grinner
Labels with a little extra.
This is the real Button icons setting, running on this page.
Settings Position Leading and Trailing Hover icon colour Secondary
The settings worth knowing.
Which icon, which side, how big and what color.
Icon
1,512 icons
Any icon from the built-in set, in six weights.
Position
Before or after
Leading or Trailing, after the label by default.
Gap (em)
Size and gap
Size from 0.5 to 3em and a gap from 0 to 2em.
Hover icon colour
Its own colors
An icon color and a hover color, separate from the label.
Three steps. No new tool.
Fair questions.
Make your next site beautiful.
GrinBot designs and builds it for you. Join the waitlist for the launch price.
- Studio-quality design
- Built for speed
- Pay once, no subscription
We’ll email you about the launch. Unsubscribe any time. Privacy policy
Try it with these.
Heading and paragraph icons
An icon beside or above any heading or paragraph, in a colored chip if you like.
