Change Icons of Elements

Hello, I’d like to know if there’s a way to add custom Icons. I don’t want to change the function of the Start Event, for example, but I want the Icon to be shown in another way. I already read some examples on GitHub, but I don’t understand what I have to do, as there’s no step-by-step instruction for it. I don’t have any experience with Java, but I got the task to create a Web based modelling program just like Bpmn.io, but with different symbols. Thanks in advance

Isn’t there some kind of library where the icons come from? I was looking for the source of the icons shown in the modeller, and it seems like they are from the site “fontello”, where you can also create your own set of icons and download them.


Before that, you can also edit the codes that the icons are assigned to.

As seen in the screenshot, “content” includes a number which can be changed.

If so, the icon will change to the icon assigned to this number (e.g. e800 is the wrench). Isn’t there a way to just change the library where the content (icons) is taken from? For example,
e800 is a different icon than the default one?

Hi @Jimmy123!

Out of the box icons are not pluggable, i.e. meant to be changed easily.

As a little bit of background icons are injected into the application in two different ways:

  • Added to the palette (your picture) and context pad via a font (CSS class + rendered symbol) :arrow_right: Create a custom palette / context pad provider to change the icons displayed
  • Rendered on the element on the canvas using the BpmnRenderer :arrow_right: Create a custom BpmnRenderer to change the icon on rendered elements

Hope this helps.

1 Like