Custom elements that don't overwrite the default icon


I am using your Nyan example to create more custom elements where I have the photos for them already. I have updated the palette and the renderer to make the elements appear but from what I am getting the new photos overwrite the original icons (so if i have a bpmn:servicetask as it is in the example, the photo will appear instead of the service task icon). If I want to keep service tasks and other bpmn elements as they are but add my own elements instead, where do I create them?

I tried to add things on the BpmnRenderer file but that doesnt seem to work, as i am not allowed to drop those elements on the modeler anymore. i am referring to the BpmnRenderer file in the bpmn-js folder created after i run the npm install command (node_modules).


  • can you link me any example that creates custom tasks (so in addition to user/manual/etc I can add more) that I can then select from the list?

  • is it possible to create custom flows (in addition to sequence/data flow)?

Please help me out.
Thank you in advance.

We have an example for custom shapes and connections you can use as a starting point. What kind of customization would you want on your custom tasks? Would you want to add new properties?

Hello, thank you for replying.

The link in your comment is not active, I am guessing you are referring to this example. I have checked it out but that example draws the new shapes. I am fine with the Nyan if it’s possible to create new elements. I’m trying to edit BpmnRenderer and PathMap, but then I’m not ‘allowed’ to add/use them on the modeler. Can you tell me how I can do that (so that I an keep using the original icons as well)? It is fine if the new elements are basically a duplicated version of original ones. I am interested in the visualization aspect more.

So, for example, I could duplicate the dataobject and then use the Renderer to overwrite the icon of new data object in order to visually represent new things (even if the nature of the new elements are same with existing ones).

1 Like

Yes, I was refering to this example. If all you want to do is adding new entries to the palette you can do so easily by overriding the PaletteProvider with your custom provider like it is done in the example. The icons in the palette are simply added by assigning a CSS class to an entry that’s used in the bpmn-js stylesheet. You can add you own icons in that manner.

Hi . can you please tell me how you did duplicate dataObject and overwritten thc icon of new data object? that’s what i want exactly and tried a lot, but i couldn’t do that!

Please do not necrobump old topics. Instead link to this thread from new topic.