How to have image and text in one button in Tkinter?

In Tkinter, we can add both an image and text to a button using the compound property. By default, when you add an image to a button, it hides the text. The compound property allows us to control the relative positioning of the image and text.

Understanding the Compound Property

The compound property accepts these values ?

• LEFT − Image on the left, text on the right
• RIGHT − Image on the right, text on the left
• TOP − Image above the text
• BOTTOM − Image below the text
• CENTER − Image overlaps the text

Example − Image with Text Button

Here's a complete example showing how to create a button with both image and text ?

import tkinter as tk
from PIL import Image, ImageTk

# Create main window
root = tk.Tk()
root.title("Image and Text Button")
root.geometry("400x300")

# Create a simple image (colored rectangle)
img = Image.new('RGB', (30, 30), color='blue')
photo = ImageTk.PhotoImage(img)

def button_click():
    print("Button clicked!")

# Create button with image and text
button = tk.Button(
    root,
    text="Click Me",
    image=photo,
    compound=tk.LEFT,  # Image on left, text on right
    font=('Arial', 12),
    command=button_click
)
button.pack(pady=50)

root.mainloop()

Different Compound Positions

Let's see all compound options in action ?

import tkinter as tk
from PIL import Image, ImageTk

root = tk.Tk()
root.title("Compound Positions")
root.geometry("300x400")

# Create a small colored image
img = Image.new('RGB', (20, 20), color='red')
photo = ImageTk.PhotoImage(img)

# Different compound positions
positions = [
    (tk.LEFT, "Image Left"),
    (tk.RIGHT, "Image Right"), 
    (tk.TOP, "Image Top"),
    (tk.BOTTOM, "Image Bottom"),
    (tk.CENTER, "Image Center")
]

for i, (pos, text) in enumerate(positions):
    button = tk.Button(
        root,
        text=text,
        image=photo,
        compound=pos,
        width=120,
        height=50
    )
    button.pack(pady=10)

root.mainloop()

Practical Example − File Operations

Here's a practical example with file operation buttons ?

import tkinter as tk
from PIL import Image, ImageTk

def create_icon(color, size=(20, 20)):
    """Create a simple colored square icon"""
    img = Image.new('RGB', size, color=color)
    return ImageTk.PhotoImage(img)

root = tk.Tk()
root.title("File Operations")
root.geometry("300x250")

# Create icons
save_icon = create_icon('green')
open_icon = create_icon('blue') 
delete_icon = create_icon('red')

# Create buttons with icons and text
tk.Button(
    root, 
    text="Save File", 
    image=save_icon, 
    compound=tk.LEFT,
    width=120
).pack(pady=10)

tk.Button(
    root, 
    text="Open File", 
    image=open_icon, 
    compound=tk.LEFT,
    width=120
).pack(pady=10)

tk.Button(
    root, 
    text="Delete File", 
    image=delete_icon, 
    compound=tk.LEFT,
    width=120
).pack(pady=10)

root.mainloop()

Comparison of Compound Options

Conclusion

Use the compound property to control image and text positioning in Tkinter buttons. The LEFT compound is most common for menu-style buttons, while TOP works well for toolbar icons.