Button Icons

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. Icons can come from three places: the built-in quick-pick set, the full WordPress icon library, or your own custom SVG.

Adding an Icon

Select a Button block and open the Button Icon panel in the sidebar. Pick from the built-in set 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 — the built-in icons come in three weights: Regular, Bold, and Fill. Switch weights and the whole preview grid updates.

Browsing the Icon Library

Need more than the essentials? Click Browse Icons below the grid to open the full icon library — the same library WordPress 7.1’s Icon block uses, including every collection Ollie Pro adds to it: all 1,055 Phosphor icons plus the payment and badge sets.

• Browse by collection in the sidebar, or search across everything at once.
• Use the Icon size slider to zoom the preview grid while you browse — it doesn’t affect your button.
• Click any icon to add it to your button.

Icons you pick from the library are saved directly into the button itself, so they’ll keep rendering even if the plugin that provided them goes away.

Custom Icons

Have your own artwork? Click Upload Custom and paste any SVG code. You’ll see a live preview before inserting, and the SVG is automatically sanitized for safety.

Once a library or custom icon is set, it replaces the icon grid in the panel with a compact preview row — click the row to swap in different SVG code, or hover over it and click the remove button to clear it and return to the built-in set.

Styling the Icon

Once an icon is set, more controls appear:

• Icon Size — in px, em, or rem. The default of 1.2em scales 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.

All of these controls work the same whether the icon came from the built-in set, the icon library, or a custom SVG. The weight toggle is the one exception — it applies only to the built-in icons.

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 — including library and custom icons.
• Icons work with every button style your theme provides, including outline styles.
• The Browse Icons library requires WordPress 7.1, which introduced the shared icon library.