diff --git a/headless-services/sprotty-si-view/build.sh b/headless-services/sprotty-si-view/build.sh
index 30937f582..9be8a5549 100755
--- a/headless-services/sprotty-si-view/build.sh
+++ b/headless-services/sprotty-si-view/build.sh
@@ -23,6 +23,7 @@ cp -R ${client_dir}/samples $static_dir/samples
 cp -R ${client_dir}/css $static_dir/css
 cp -R ${client_dir}/lib $static_dir/lib
 cp -R ${client_dir}/src $static_dir/src
+cp -R ${client_dir}/icon $static_dir/icon
 
 ../mvnw \
     -f ../pom.xml \
diff --git a/headless-services/sprotty-si-view/client/icon/aggregator.svg b/headless-services/sprotty-si-view/client/icon/aggregator.svg
new file mode 100644
index 000000000..a7a4d65a7
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/aggregator.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <rect stroke="#000000" x="10px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="10px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+    <line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+    <line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/alt-gateway.svg b/headless-services/sprotty-si-view/client/icon/alt-gateway.svg
new file mode 100644
index 000000000..62b53397c
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/alt-gateway.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
+  <path style="" transform="matrix(1, 0, 0, -1, 0, 0)" d="M 8 -90 H 18 V -15 A 5 5 0 0 1 13 -10 H 13 A 5 5 0 0 1 8 -15 V -90 Z" bx:shape="rect 8 -90 10 80 0 0 5 5 1@160af39c"/>
+  <polygon style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" points="22 14"/>
+  <polygon style="fill: greenyellow; stroke: rgb(0, 0, 0);" points="20 20 48 30 48 75 20 87"/>
+  <path style="" transform="matrix(-1, 0, 0, -1, 0, 0)" d="M -92 -90 H -82 V -15 A 5 5 0 0 1 -87 -10 H -87 A 5 5 0 0 1 -92 -15 V -90 Z" bx:shape="rect -92 -90 10 80 0 0 5 5 1@7aff9b84"/>
+  <polygon style="fill: greenyellow; stroke: rgb(0, 0, 0);" points="52 87 80 77 80 32 52 20" transform="matrix(-1, 0, 0, -1, 132, 107)"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/bridge.svg b/headless-services/sprotty-si-view/client/icon/bridge.svg
new file mode 100644
index 000000000..3d4cc9c32
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/bridge.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" baseProfile="full" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <title id="svg_document_title">Untitled.svg</title>
+  <line stroke="#000000" y1="64" id="line1" stroke-width="5px" x1="10" y2="64" x2="90"/>
+  <line stroke="#000000" y1="12px" id="line2" x1="30px" stroke-width="3px" y2="12px" x2="30px" transform=""/>
+  <line stroke="#000000" y1="12px" id="line3" x1="28px" stroke-width="3px" y2="12px" x2="28px" transform=""/>
+  <line stroke="#000000" y1="24" id="line4" stroke-width="7px" x1="30" y2="75" x2="30" style="stroke-linecap: round;"/>
+  <line stroke="#000000" y1="22px" id="line5" x1="78px" stroke-width="3px" y2="22px" x2="78px" transform=""/>
+  <line stroke="#000000" y1="24" id="line6" stroke-width="7px" x1="70" y2="75" x2="70" style="stroke-linecap: round;"/>
+  <line stroke="#000000" y1="38" id="line12" x1="40" y2="64" x2="40" style="stroke-width: 2px;"/>
+  <path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M 30 32 C 43 42 57 42 70 32"/>
+  <line stroke="#000000" y1="38" id="line-1" x1="60" y2="64" x2="60" style="stroke-width: 2px;"/>
+  <line stroke="#000000" y1="40" id="line-2" x1="50" y2="63" x2="50" style="stroke-width: 2px;" transform="matrix(1, 0.00013, -0.00013, 1, 0.00819, -0.006499)" bx:origin="0 1"/>
+  <path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M 71 33 Q 73 56 87 64"/>
+  <path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M -3 94 C -2 79 3 69 13 63" transform="matrix(-1, 0, 0, -1, 26, 126)" bx:origin="1 0"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/chain.svg b/headless-services/sprotty-si-view/client/icon/chain.svg
new file mode 100644
index 000000000..a6455096b
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/chain.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <rect stroke="#000000" x="10px" height="20px" y="45px" id="rect1" stroke-width="3px" width="20px"
+            fill="greenyellow" transform=""></rect>
+    <rect stroke="#000000" x="40px" height="20px" y="45px" id="rect2" stroke-width="3px" width="20px"
+            fill="greenyellow" transform=""></rect>
+    <rect stroke="#000000" x="70px" height="20px" y="45px" id="rect3" stroke-width="3px" width="20px"
+            fill="greenyellow" transform=""></rect>
+    <path d="M 20 45 A 10 10 0 0 1 50 45" stroke="black" stroke-width="3" fill="none"></path>
+    <path d="M 50 45 A 10 10 0 0 1 80 45" stroke="black" stroke-width="3" fill="none"></path>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/content-filter.svg b/headless-services/sprotty-si-view/client/icon/content-filter.svg
new file mode 100644
index 000000000..e5139c3a2
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/content-filter.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <g id="main_group"></g>
+    <rect stroke="#000000" x="10px" height="30px" y="35px" id="rect1" stroke-width="3px" width="30px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="70px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <line stroke="#000000" y1="50.000000px" id="line1" stroke-width="3px" x1="45.000000px" y2="50.000000px"
+          stroke-linecap="round" x2="65.000000px" transform=""></line>
+    <line stroke="#000000" y1="45.000000px" id="line2" stroke-width="3px" x1="60.000000px" y2="50.000000px"
+          stroke-linecap="round" x2="65.000000px"></line>
+    <line stroke="#000000" y1="50.000000px" id="line3" stroke-width="3px" x1="65.000000px" y2="55.000000px"
+          stroke-linecap="round" x2="60.000000px"></line>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/enricher.svg b/headless-services/sprotty-si-view/client/icon/enricher.svg
new file mode 100644
index 000000000..445d35c85
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/enricher.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <g id="main_group"></g>
+    <rect stroke="#000000" x="10px" height="20px" y="40px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="60px" height="30px" y="35px" id="rect2" stroke-width="3px" width="30px" fill="greenyellow"
+          transform=""></rect>
+    <line stroke="#000000" y1="50.000000px" id="line1" stroke-width="3px" x1="35.000000px" y2="50.000000px"
+          stroke-linecap="round" x2="55.000000px" transform=""></line>
+    <line stroke="#000000" y1="45.000000px" id="line2" stroke-width="3px" x1="50.000000px" y2="50.000000px"
+          stroke-linecap="round" x2="55.000000px"></line>
+    <line stroke="#000000" y1="50.000000px" id="line3" stroke-width="3px" x1="55.000000px" y2="55.000000px"
+          stroke-linecap="round" x2="50.000000px"></line>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/filter.svg b/headless-services/sprotty-si-view/client/icon/filter.svg
new file mode 100644
index 000000000..9c4a72cb0
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/filter.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 4;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <g id="main_group"></g>
+    <polygon points="10,10 90,10 55,50 55,80 45,90 45,51" stroke="#000000" id="polygon1" stroke-width="3px"
+             fill="greenyellow" transform=""></polygon>
+    <line stroke="#000000" y1="50.000000px" id="line1" x1="45.000000px" stroke-width="2px" y2="50.000000px"
+          x2="55.000000px" transform=""></line>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/gateway.svg b/headless-services/sprotty-si-view/client/icon/gateway.svg
new file mode 100644
index 000000000..8609a42f4
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/gateway.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, -2, 0)">
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
+  <rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);"/>
+  <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/inbound-gateway.svg b/headless-services/sprotty-si-view/client/icon/inbound-gateway.svg
new file mode 100644
index 000000000..8609a42f4
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/inbound-gateway.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, -2, 0)">
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
+  <rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);"/>
+  <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/logging-channel-adapter.svg b/headless-services/sprotty-si-view/client/icon/logging-channel-adapter.svg
new file mode 100644
index 000000000..bfbd34ac3
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/logging-channel-adapter.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, -2, 0)">
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
+  <rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); fill: rgb(252, 252, 252); stroke-linejoin: round;"/>
+  <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="15" x2="85" y2="15"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="19" x2="85" y2="19"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="23" x2="85" y2="23"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="27" x2="85" y2="27"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="31" x2="85" y2="31"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="35" x2="85" y2="35"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="39" x2="85" y2="39"/>
+  <line style="stroke: rgb(144, 144, 144);" x1="63" y1="43" x2="85" y2="43"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/outbound-channel-adapter.svg b/headless-services/sprotty-si-view/client/icon/outbound-channel-adapter.svg
new file mode 100644
index 000000000..691d26b9d
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/outbound-channel-adapter.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg stroke-width="2px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, -2, 0)">
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); fill: rgb(252, 252, 252); stroke-linejoin: round;"/>
+  <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/outbound-gateway.svg b/headless-services/sprotty-si-view/client/icon/outbound-gateway.svg
new file mode 100644
index 000000000..b37c0e8fe
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/outbound-gateway.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, 60, 0)">
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <line style="stroke: rgb(0, 0, 0);" x1="23" y1="29" x2="23" y2="29" transform="matrix(-1, 0, 0, -1, 46, 58)"/>
+  <rect x="-38" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
+  <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="68 90 68 10 43 30 43 70" transform="matrix(-1, 0, 0, -1, 111, 100)"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/router.svg b/headless-services/sprotty-si-view/client/icon/router.svg
new file mode 100644
index 000000000..80f355d49
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/router.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line style="stroke-width: 2px; stroke: rgb(67, 67, 67);" x1="25" y1="50" x2="75" y2="19.999999999999996"/>
+  <circle style="" cx="20" cy="50" r="7"/>
+  <line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="7.5" y1="50.25" x2="15" y2="50"/>
+  <circle style="" cx="80" cy="20" r="7"/>
+  <line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="20" x2="93.8" y2="20"/>
+  <circle style="" cx="80" cy="50" r="7"/>
+  <line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="50" x2="94" y2="50"/>
+  <circle style="" cx="80" cy="80" r="7"/>
+  <line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="80" x2="94" y2="80"/>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/service-activator.svg b/headless-services/sprotty-si-view/client/icon/service-activator.svg
new file mode 100644
index 000000000..34dc7e1e9
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/service-activator.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="15" y="45" width="10" height="10" style="fill: black; stroke-width: 2px;" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 59.21994, 0.486262)"/>
+  <rect x="15" y="45" width="10" height="10" style="stroke-width: 3px; fill: rgb(255, 255, 255); paint-order: stroke; stroke: rgb(0, 0, 0);" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 97.098412, 0.486262)"/>
+  <g>
+    <line style="stroke: rgb(0, 0, 0);" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0);" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0);" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+  <g transform="matrix(1, 0, 0, 1, 35.958775, -0.044944)">
+    <line style="stroke: rgb(0, 0, 0);" x1="10" y1="50" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0);" x1="24" y1="45" x2="30" y2="50"/>
+    <line style="stroke: rgb(0, 0, 0);" x1="24" y1="55" x2="30" y2="50"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/splitter.svg b/headless-services/sprotty-si-view/client/icon/splitter.svg
new file mode 100644
index 000000000..4b659d1f0
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/splitter.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
+     height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
+     style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
+    <title id="svg_document_title">Untitled.svg</title>
+    <defs id="svg_document_defs"></defs>
+    <rect stroke="#000000" x="70px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <rect stroke="#000000" x="70px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
+          transform=""></rect>
+    <line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+    <line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+    <line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
+          x2="65.000000px" transform=""></line>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/icon/transformer.svg b/headless-services/sprotty-si-view/client/icon/transformer.svg
new file mode 100644
index 000000000..a41fdd34b
--- /dev/null
+++ b/headless-services/sprotty-si-view/client/icon/transformer.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" baseProfile="full" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;" xmlns="http://www.w3.org/2000/svg">
+  <title id="svg_document_title">Untitled.svg</title>
+  <g id="main_group">
+    <rect stroke="#000000" height="80px" x="10px" id="rect1" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
+    <rect stroke="#000000" height="80px" x="70px" id="rect2" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
+    <line stroke="#000000" y1="20.000000px" id="line1" stroke-width="3px" x1="25.000000px" y2="80.000000px" x2="75.000000px" transform=""/>
+    <line stroke="#000000" y1="80.000000px" id="line2" x1="25.000000px" stroke-width="3px" y2="20.000000px" x2="75.000000px" transform=""/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/headless-services/sprotty-si-view/client/samples/coffee-complete.json b/headless-services/sprotty-si-view/client/samples/coffee-modified.json
similarity index 99%
rename from headless-services/sprotty-si-view/client/samples/coffee-complete.json
rename to headless-services/sprotty-si-view/client/samples/coffee-modified.json
index 402342001..dfbc13315 100644
--- a/headless-services/sprotty-si-view/client/samples/coffee-complete.json
+++ b/headless-services/sprotty-si-view/client/samples/coffee-modified.json
@@ -516,7 +516,7 @@
           "countLong": 1549
         }
       },
-      "componentType": "bridge",
+      "componentType": "filter",
       "properties": {},
       "output": "hotDrinkBarista",
       "input": "hotDrinks",
@@ -629,7 +629,7 @@
           "countLong": 1559
         }
       },
-      "componentType": "service-activator",
+      "componentType": "transformer",
       "properties": {},
       "output": "preparedDrinks",
       "input": "coldDrinkBarista"
diff --git a/headless-services/sprotty-si-view/client/samples/coffee.json b/headless-services/sprotty-si-view/client/samples/coffee.json
index b087a0773..402342001 100644
--- a/headless-services/sprotty-si-view/client/samples/coffee.json
+++ b/headless-services/sprotty-si-view/client/samples/coffee.json
@@ -629,7 +629,7 @@
           "countLong": 1559
         }
       },
-      "componentType": "transformer",
+      "componentType": "service-activator",
       "properties": {},
       "output": "preparedDrinks",
       "input": "coldDrinkBarista"
diff --git a/headless-services/sprotty-si-view/client/src/views.tsx b/headless-services/sprotty-si-view/client/src/views.tsx
index 19d5d4b09..c2529f6c8 100644
--- a/headless-services/sprotty-si-view/client/src/views.tsx
+++ b/headless-services/sprotty-si-view/client/src/views.tsx
@@ -77,7 +77,6 @@ export class LimitedWidthLabelView extends SLabelView {
     }
 }
 
-
 @injectable()
 export class ExampleGraphView extends SGraphView {
 
@@ -121,123 +120,10 @@ export class EdgeView extends PolylineEdgeView {
 @injectable()
 export class IntegrationNodeView extends RectangularNodeView {
     render(node: Readonly<IntegrationNode & Hoverable & Selectable>, context: RenderingContext): VNode {
-        if (node.componentType==='transformer') {
-            return <g>
-                <rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
-                    class-sprotty-node={node instanceof SNode}
-                    class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                />
-                <rect stroke="#000000" height="80px" x="10px" id="rect1" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
-                <rect stroke="#000000" height="80px" x="70px" id="rect2" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
-                <line stroke="#000000" y1="20.000000px" id="line1" stroke-width="3px" x1="25.000000px" y2="80.000000px" x2="75.000000px" transform=""/>
-                <line stroke="#000000" y1="80.000000px" id="line2" x1="25.000000px" stroke-width="3px" y2="20.000000px" x2="75.000000px" transform=""/>
-                {context.renderChildren(node)}
-            </g>;
-        } else if (node.componentType==='aggregator') {
-            return <g>
-                <rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
-                    class-sprotty-node={node instanceof SNode}
-                    class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                />
-                <rect stroke="#000000" x="10px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="10px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                <line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                <line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                {context.renderChildren(node)}
-            </g>
-        } else if (node.componentType==='splitter') {
-            return <g>
-                <rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
-                    class-sprotty-node={node instanceof SNode}
-                    class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                ></rect>
-                <rect stroke="#000000" x="70px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <rect stroke="#000000" x="70px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
-                    transform=""></rect>
-                <line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                <line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                <line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
-                    x2="65.000000px" transform=""></line>
-                {context.renderChildren(node)}
-            </g>;
-        } else if (node.componentType === 'router') {
-            return <g>
-                <rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
-                    class-sprotty-node={node instanceof SNode}
-                    class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                ></rect>
-                <line stroke="#000000" stroke-width="2px" x1="23.25" y1="50" x2="77" y2="20"/>
-                <circle cx="20" cy="50" r="7"/>
-                <circle cx="80" cy="20" r="7"/>
-                <circle cx="80" cy="50" r="7"/>
-                <circle cx="80" cy="80" r="7"/>
-                <line stroke="#000000" stroke-width="2px" x1="7.5" y1="50.25" x2="15" y2="50"/>
-                <line stroke="#000000" stroke-width="2px" x1="85" y1="20" x2="94" y2="20"/>
-                <line stroke="#000000" stroke-width="2px" x1="85" y1="50" x2="94" y2="50"/>
-                <line stroke="#000000" stroke-width="2px" x1="85" y1="80" x2="94" y2="80"/>
-                {context.renderChildren(node)}
-            </g>;
-        } else if (node.componentType === 'service-activator') {
-            return <g>
-                <rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
-                    class-sprotty-node={node instanceof SNode}
-                    class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                ></rect>
-                <rect x="15" y="45" width="10" height="10" fill="black" stroke-width="2px" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 59.21994, 0.486262)"/>
-                <rect x="15" y="45" width="10" height="10"
-                     stroke="black" fill="#ffffff" stroke-width="2px"
-                     transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 97.098412, 0.486262)"/>
-                <g>
-                    <line stroke="black" x1="10" y1="50" x2="30" y2="50"/>
-                    <line stroke="black" x1="24" y1="45" x2="30" y2="50"/>
-                    <line stroke="black" x1="24" y1="55" x2="30" y2="50"/>
-                </g>
-                <g transform="matrix(1, 0, 0, 1, 35.958775, -0.044944)">
-                    <line stroke="black" x1="10" y1="50" x2="30" y2="50"/>
-                    <line stroke="black" x1="24" y1="45" x2="30" y2="50"/>
-                    <line stroke="black" x1="24" y1="55" x2="30" y2="50"/>
-                </g>
-                {context.renderChildren(node)}
-            </g>;
-        } else if (node.componentType.indexOf('outbound-channel-adapter')>=0) {
-            return <g> 
-                <rect class-sprotty-node={node instanceof SNode}
-                      class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                      x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)} rx="10" ry="10"/>
-                <g>
-                    <line stroke="black" x1="10" y1="50" x2="27" y2="50"/>
-                    <line stroke="black" x1="21" y1="45" x2="27" y2="50"/>
-                    <line stroke="black" x1="21" y1="55" x2="27" y2="50"/>
-                </g>
-                <line stroke="black" x1="75" y1="30" x2="75" y2="30"/>
-                <polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
-                <rect x="60" y="10" width="30" height="80" stroke="black" fill="white" stroke-linejoin="round"/>
-                {context.renderChildren(node)}
-            </g>
+        if (node.componentType.indexOf('outbound-channel-adapter')>=0) {
+            return  nodeIcon(node, context, "outbound-channel-adapter");
         } else {
-            return <g> 
-                <rect class-sprotty-node={node instanceof SNode}
-                      class-mouseover={node.hoverFeedback} class-selected={node.selected}
-                      x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)} rx="10" ry="10"></rect>
-                {context.renderChildren(node)}
-            </g>
+            return nodeIcon(node, context, node.componentType);
         }
     }
 }
@@ -284,6 +170,15 @@ export class ErrorPortView implements IView {
         </g>;
     }
 }
+
+function nodeIcon(node: Readonly<IntegrationNode & Hoverable & Selectable>, context: RenderingContext, iconType: string): VNode {
+    const url = `/icon/${iconType}.svg`;
+    return <g>
+        <rect class-sprotty-node={node instanceof SNode} class-mouseover={node.hoverFeedback} class-selected={node.selected} fill="none" x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)}></rect>
+        <image width="100" height="100" color="blue" href={url} />
+        {context.renderChildren(node)}
+    </g>;
+}
 /*
 <g class="shape">'+
             '<rect class="border"/>' +