Title How to Add a Custom PNG Icon to BPMN Elements in JointJS+?

[BhanuT97]

Introduction

I’m working with BPMN elements in JointJS+ and would like to add a custom icon (from a PNG file) to a BPMN activity element.

Currently, the activity element renders with the default style, but the goal is to display it with a custom icon overlaid inside the element.

Attached image shows:

What’s the recommended way to achieve this in JointJS+?

Steps to reproduce

1. Render a basic BPMN diagram using the JSON below.
2. The element displays only the default label "Activity".
3. Goal: Add a custom PNG icon inside the BPMN Activity element.

{
  "type": "bpmn",
  "cells": [
    {
      "type": "bpmn2.Activity",
      "size": { "width": 120, "height": 100 },
      "position": { "x": 285, "y": 455 },
      "angle": 0,
      "id": "4a0eeb04-fec3-458a-91a1-1c1903cd7347",
      "z": 1,
      "attrs": {
        "border": { "borderType": "thick" }
      }
    }
  ]
}



### Restrictions & Constraints

_No response_

### Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+