I want to use custom icon for the scatter markers. How to do it?


I need to use icon for the marker. How can i do it? Or even customize it with some kind of canvas or etc?

1 Like

scatter traces don’t allow that at the moment. You’ll need to use layout.shapes.

Is it still not possible to add icons as markers ? I want to add icons(.png format) instead of dots in scatterplot using plotly.js.

1 Like

I would like to do the exact same thing! Have you figured out how to do that? Perhaps some hacky solution?

One hacky solution is to add layout images as suggested by @etienne (please see https://plot.ly/javascript/images/). You won’t have hover for them but you can have a scatter trace with invisible points for the hover and then the layout images as icons.

Hi, one very easy solution is to use UTF-8 icons. This will expand the ‘nomal’ plotly markers by a lot :slight_smile:
UTF-8 res: https://www.compart.com/de/unicode/search?q=bell#characters

Plotly.plot('graph', [{
  mode: 'text',
  x: [1],
  y: [1],
  text: ['⚽'],
  type: 'scatter',
  textfont: {
    size: 25,
    color: 'black'

You can easily exchange them. I havn’t found out yet, if using a custom created font also allows to use own icons.

I made a codepen for that: https://codepen.io/cherzog/pen/YzqBNvx?editors=0010

Hopefully this will help you!