--- 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-09-28 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-an-Image-on-a-Button-in-WordPress_-1024x519.jpg word_count: 257 --- # 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. 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](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-button/) ## 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 - Add the **Advanced Button** block, pick a style and type the button text. - Open the **Icon** panel and set **Icon Type** to **Image**. ![The Icon panel with Icon Type set to Image](https://nexterwp.com/wp-content/uploads/2026/09/advanced-button-icon-image.webp) - Choose your image and a small **Image Size**, such as Thumbnail. - 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](https://nexterwp.com/wp-content/uploads/2024/11/advanced-button-image-button-demo.webp) ## 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](https://nexterwp.com/wp-content/uploads/2026/09/button-image-icon-preview.webp) ## 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 - [Advanced Button block: all settings](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/)- [Add a button hover animation](https://nexterwp.com/docs/add-button-hover-animation-in-wordpress/)- [Add a button with the Button block](https://nexterwp.com/docs/add-button-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding an image to a button in WordPress?** A: 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. **Q: How do I put an image inside a WordPress button without breaking the text?** A: 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. **Q: What is the best image size for a button icon in WordPress?** A: 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. **Q: Why does my button show an arrow instead of my image?** A: 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. **Q: How can I make an image button look smaller in WordPress?** A: 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. **Q: Does adding an image to a button work with Nexter Blocks free?** A: 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](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/) covers all options in one place.