Button Icons adds crisp, scalable icons to the WordPress Button block — arrows for calls to action, a download icon for files, a play icon for videos — straight from the button’s settings.
Adding an Icon
Select a Button block and open the Button Icon panel in the sidebar. Pick from the built-in library of 25 icons covering the essentials: directional arrows and chevrons, check marks, download, envelope, external link, play, shopping bag and basket, lock, login, paper plane, info, help, avatar, and more.
- Icon Weight — most icons come in three weights: Regular, Bold, and Fill. Switch weights and the whole library preview updates.
- Custom icons — need something specific? Click Upload custom icon and paste any SVG code. You’ll see a live preview before inserting, and the SVG is automatically sanitized for safety.
Styling the Icon
Once an icon is set, more controls appear:
- Icon Size — in px, em, or rem. The default of
1.2emscales naturally with your button’s font size. - Icon Spacing — the gap between icon and label (default
.5em). - Show icon on left — flip the icon from the right side (default) to the left.
- Icon color — in the button’s Color panel you’ll find a new Icon option. By default the icon inherits the button’s text color, so it always matches — set an explicit color only when you want contrast.
Good to Know
- Icons stay perfectly sharp at any size — they’re vector graphics, not images.
- Because icons inherit the button’s text color by default, they automatically follow your hover colors and style variations.
- Icons work with every button style your theme provides, including outline styles.