---
title: "How to Add an Image on a Button in WordPress?"
url: https://nexterwp.com/docs/add-an-image-on-a-button-in-wordpress/
date: 2024-11-28
modified: 2026-08-18
author: "Aditya Sharma"
description: "Do you want to add an image on a button in WordPress? Adding an image to a button enhances the visual design of a page and gives visitors a clearer..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-an-Image-on-a-Button-in-WordPress_-1024x519.jpg
word_count: 348
---

# How to Add an Image on a Button in WordPress?

## 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.

Do you want to add an image on a button in WordPress? Adding an image to a button enhances the visual design of a page and gives visitors a clearer signal of what the button does.

With the Advanced Button block from Nexter Blocks, you can add an image to a button in the WordPress block editor (Gutenberg).

*To check the complete feature overview documentation of the Nexter Blocks Advanced Button block, [click here](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/).*

**Best Used For:**

- E-commerce sites adding product thumbnails or brand icons to call-to-action buttons

- Landing pages using icon-style images on buttons to reinforce the offer or destination

- Portfolio and agency sites pairing a custom graphic with a button label to improve click visibility

**Requirement** – This block is a part of Nexter Blocks. Make sure it is installed and activated.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-button/)

To do this, add the Advanced Button block on the page and follow the steps.

1. Select the appropriate button style and add the text to the button.

2. Then go to the **Icon** tab. From the **Icon Type** dropdown, select **Image**. Use this option when you want to display a custom image file on the button rather than an icon font or SVG.

3. From the **Image** section, add the image you want to display on the button. Use this when the image is already uploaded to your media library or when you want to upload a new one specifically for this button.

From the **Image Size** dropdown, select the display size for the image. Use a smaller image size for compact buttons and a larger size when the image is a central visual element of the button design.

You can manage the image style further from the **Style** tab.

If you need a standard button without an image, the [Button block](https://nexterwp.com/docs/add-button-in-wordpress/) in Nexter Blocks provides a straightforward alternative with full style controls and no image setup required.

Now you will see an image on the button. To further refine the button appearance on interaction, you can apply hover state styles using the [block hover state options](https://nexterwp.com/docs/how-to-style-the-different-block-hover-states-in-wordpress/) in Nexter Blocks.

![](https://nexterwp.com/wp-content/uploads/2024/11/advanced-button-image-button-demo.png)

## Frequently Asked Questions

**Q: Why is my button image not showing in WordPress?**
A: The image only appears when the Advanced Button block from Nexter Blocks is installed and activated, and the Icon Type is set to Image. That matters because this block uses the Image section to pull a file from your media library or upload a new one for that specific button. If the image still looks off, the Image Size choice can make it seem too small or too dominant.

**Q: What do I need before adding an image to a button in WordPress?**
A: The key requirement is Nexter Blocks, because the Advanced Button block is part of it. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Advanced Button block inside the WordPress block editor. That setup matters if you want an image on the button instead of a plain text-only button.

**Q: Is there a simpler button option if I do not want an image?**
A: The Button block in Nexter Blocks is the simpler choice when you do not need an image. It gives full style controls without any image setup, so it is better for standard call-to-action buttons where visual decoration would just add extra work. The Advanced Button block is the one built for image-based buttons.

**Q: What kind of pages work best with image buttons in WordPress?**
A: E-commerce sites, landing pages, and portfolio or agency sites are the clearest fits. The page calls out product thumbnails or brand icons for e-commerce buttons, icon-style images for landing pages, and custom graphics paired with a label for portfolio or agency layouts. That makes the button easier to scan and gives visitors a stronger visual cue about where it leads.

**Q: How do I make an image button look better on hover?**
A: Hover styling comes from the block hover state options in Nexter Blocks. That matters because an image on a button can feel flat unless the interaction state changes with it. If you want the button to feel more deliberate on mouseover or other interaction states, [block hover state options](https://nexterwp.com/docs/how-to-style-the-different-block-hover-states-in-wordpress/) are where that refinement happens.

**Q: What image size should I use for a WordPress button?**
A: Smaller sizes work better for compact buttons, while larger sizes make sense when the image is a central visual element of the design. The Image Size dropdown controls that balance inside the Advanced Button block. Picking the wrong size can make a tight CTA feel crowded or make an important graphic look too weak to notice.