Image Button


I want to implement several buttons with custom images as icon, so when user clicks on an image some function runs,

what would be the best solution ?

I found icon attribute in class AbstractButton, but it is not clear how to use it.

Thanks in advance


Hi John

I would like to do the same. Did you ever find out how to do it?

Thanks in advance.


Button has a property to set and icon but as of 1.4.0 there is not a built-in icon class that can be used (only a base class that could be extended). Adding an image will require making a custom extension. You can see an example of a custom extension that draws FontAwesome icons here:

You could adapt that example by having the render function in the JS implementation insert the image you want.

I made a quick example with panel but it should not be hard to port on pure bokeh:

raw code

import panel as pn

css = """
.btn-custom > .bk-btn-group > .bk-btn {
    background-image: url(;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

pn.widgets.Button(name='', css_classes=['btn-custom'], width=50, height=50)
1 Like

Great alternate solution!