Black Lives Matter. Please consider donating to Black Girls Code today.

Replacing default icons on modebar

I am using a modified version of the modebar for my graphs. I want to change the ‘home’ icon for the reset axes function, but I don’t know how to do this. Is there a way to do this in the options? Here is my function to modify the modebar:

function plotGraph(tab, data, layout) {
Plotly.newPlot(tab, data, layout, {
displaylogo: false,
displayModeBar: true,
modeBarButtonsToRemove: [“toImage”, “sendDataToCloud”,“autoScale2d”],
modeBarButtonsToAdd: [{
name: “Download graph to png file”,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: “Data graphs”,
format: “png”,
width: gd._fullLayout.width,
height: gd._fullLayout.height


To use the exact same handlers as our defaults changing only the icon, you’ll have to require-in (or ES6 import) the relevant source files as we don’t expose them on Plotly. See for an example.

i want to do this in custom Plotly registry and only replace home icon to custom refresh svg image