---
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-05-26
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)