Skip to content

How to Add an Image on a Button in WordPress?

Updated On : September 28, 2026By : Reading Time : 1 minute

Key Takeaways

  • Nexter Blocks Advanced Button block adds an image to a button in the WordPress block editor (Gutenberg).
  • Icon Type dropdown lets the button use Image instead of an icon font or SVG, and the Image section accepts a file from the media library or a new upload.
  • Image Size dropdown controls the display size, and Nexter Blocks hover state options refine the button appearance on interaction.
Table of Contents

A small image, such as an app store badge or phone icon, makes a button’s purpose clear at a glance.

The free Advanced Button block in Nexter Blocks can place an image inside the button.

For every Advanced Button setting in one place, see the Advanced Button block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Advanced Button, switched on under Nexter > Blocks in your WordPress dashboard.
  • A small image: a PNG or SVG with a transparent background, ideally under 64px.

Steps

  1. Add the Advanced Button block, pick a style and type the button text.
  1. Open the Icon panel and set Icon Type to Image.
The Icon panel with Icon Type set to Image
  1. Choose your image and a small Image Size, such as Thumbnail.
  1. On the Style tab, open Icon to set Icon Position (Prefix or Postfix), Icon Spacing and Icon Size. Save.
A Call Now button with a phone image

How It Behaves

  • The image sits inside the button link, before or after the text.
  • Icon Size controls how large the image appears.
  • The image uses its alt text from the Media Library, or “Button” if it has none.
Front end of a Nexter Blocks Button with an image icon before the text Meet Biscuit

Limitations

  • Image Size picks the file WordPress serves. Large sizes add page weight even if Icon Size shrinks them.
  • Some styles (3, 6, 7 and 9) use their own arrow and do not show the icon.

Troubleshooting

The image is too big

Set Icon Size on the Style tab and choose a smaller Image Size.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding an image to a button in WordPress?

The setup is simple: the free Advanced Button block in Nexter Blocks handles the image inside the button, and it works in Nexter Blocks free and Nexter Blocks Pro. The page also calls for a small PNG or SVG with a transparent background, ideally under 64px, because button images need to stay readable at tiny sizes. In practice, that keeps the button label clear and avoids a bulky-looking control.

How do I put an image inside a WordPress button without breaking the text?

The Advanced Button block in Nexter Blocks places the image inside the button link, so the icon and text stay part of the same clickable element. The key detail is using the Icon panel and setting Icon Type to Image, then choosing a small Image Size such as Thumbnail. That keeps the image aligned with the label instead of turning it into a separate element.

What is the best image size for a button icon in WordPress?

A small source image is the better choice here, ideally under 64px, because Image Size controls which file WordPress serves. Even if Icon Size makes it look smaller on screen, a large source file still adds page weight. For buttons, that matters more than most people expect since the icon is usually just a visual cue like an app store badge or phone icon.

Why does my button show an arrow instead of my image?

Some Advanced Button styles use their own arrow and do not show the icon at all. The page lists styles 3, 6, 7 and 9 as the ones that behave this way. If you want an actual image inside the button, pick a style that allows the icon to appear, otherwise the built-in arrow takes over.

How can I make an image button look smaller in WordPress?

Icon Size on the Style tab controls how large the image appears inside the button. That setting changes presentation, while Image Size controls which file WordPress serves, so both matter. A smaller Image Size plus a smaller Icon Size is usually the cleanest combination when you want a compact button that still reads clearly.

Does adding an image to a button work with Nexter Blocks free?

The free Advanced Button block in Nexter Blocks supports this setup, so you do not need a separate paid feature just to place an image inside a button. Nexter Blocks provides the block under Nexter > Blocks in your WordPress dashboard. For deeper control over every setting, the Advanced Button block guide covers all options in one place.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53