From d623848c87f489d1ae4efd089be353c963489e22 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 21 Jun 2019 12:36:20 +0100
Subject: [PATCH] Update all node icons to SVG

When listing icons provided by a module, if there is a png and svg
with the same name, only the svg will be listed.

If a node asks for a png icon which is not known, but there is a
corresponding svg, that will be used instead.
---
 .../@node-red/editor-api/lib/editor/ui.js     |   2 +-
 .../src/images/icons/arrow-in.svg             |   1 +
 .../src/images/icons/node-changed.png         | Bin 386 -> 0 bytes
 .../src/images/icons/node-error.png           | Bin 386 -> 0 bytes
 .../editor-client/src/images/subflow_tab.svg  |   1 +
 .../@node-red/editor-client/src/js/nodes.js   |   4 ++--
 .../@node-red/editor-client/src/js/ui/diff.js |   8 +++----
 .../editor-client/src/js/ui/editor.js         |   2 +-
 .../editor-client/src/js/ui/utils.js          |  21 +++++++++++-------
 .../@node-red/editor-client/src/js/ui/view.js |  16 +++++++++----
 .../editor-client/src/js/ui/workspaces.js     |   2 +-
 .../@node-red/nodes/core/core/20-inject.html  |   2 +-
 .../@node-red/nodes/core/core/25-catch.html   |   2 +-
 .../@node-red/nodes/core/core/25-status.html  |   4 ++--
 .../@node-red/nodes/core/core/58-debug.html   |   2 +-
 .../@node-red/nodes/core/core/60-link.html    |   4 ++--
 .../@node-red/nodes/core/core/75-exec.html    |   2 +-
 .../nodes/core/core/80-function.html          |   2 +-
 .../nodes/core/core/80-template.html          |   2 +-
 .../@node-red/nodes/core/core/89-delay.html   |   2 +-
 .../@node-red/nodes/core/core/89-trigger.html |   2 +-
 .../@node-red/nodes/core/core/90-comment.html |   2 +-
 .../@node-red/nodes/core/io/10-mqtt.html      |   4 ++--
 .../@node-red/nodes/core/io/21-httpin.html    |   4 ++--
 .../nodes/core/io/21-httprequest.html         |   2 +-
 .../@node-red/nodes/core/io/22-websocket.html |   4 ++--
 .../@node-red/nodes/core/io/23-watch.html     |   2 +-
 .../@node-red/nodes/core/io/31-tcpin.html     |   6 ++---
 .../@node-red/nodes/core/io/32-udp.html       |   4 ++--
 .../@node-red/nodes/core/logic/10-switch.html |   2 +-
 .../@node-red/nodes/core/logic/15-change.html |   2 +-
 .../@node-red/nodes/core/logic/16-range.html  |   2 +-
 .../@node-red/nodes/core/logic/17-split.html  |   4 ++--
 .../@node-red/nodes/core/logic/18-sort.html   |   2 +-
 .../@node-red/nodes/core/logic/19-batch.html  |   2 +-
 .../@node-red/nodes/core/parsers/70-CSV.html  |   2 +-
 .../@node-red/nodes/core/parsers/70-HTML.html |   2 +-
 .../@node-red/nodes/core/parsers/70-JSON.html |   2 +-
 .../@node-red/nodes/core/parsers/70-XML.html  |   2 +-
 .../@node-red/nodes/core/parsers/70-YAML.html |   2 +-
 .../@node-red/nodes/core/storage/50-file.html |   4 ++--
 .../@node-red/nodes/icons/alert.svg           |   1 +
 .../@node-red/nodes/icons/arrow-in.svg        |   1 +
 .../@node-red/nodes/icons/batch.svg           |   1 +
 .../@node-red/nodes/icons/bridge-dash.svg     |   1 +
 .../@node-red/nodes/icons/bridge.svg          |   1 +
 .../@node-red/nodes/icons/cog.svg             |   1 +
 .../@node-red/nodes/icons/comment.svg         |   1 +
 .../node_modules/@node-red/nodes/icons/db.svg |   1 +
 .../@node-red/nodes/icons/debug.svg           |   1 +
 .../@node-red/nodes/icons/envelope.svg        |   1 +
 .../@node-red/nodes/icons/feed.svg            |   1 +
 .../@node-red/nodes/icons/file-in.svg         |   1 +
 .../@node-red/nodes/icons/file-out.svg        |   1 +
 .../@node-red/nodes/icons/file.svg            |   1 +
 .../@node-red/nodes/icons/function.svg        |   1 +
 .../@node-red/nodes/icons/hash.svg            |   1 +
 .../@node-red/nodes/icons/inject.svg          |   1 +
 .../@node-red/nodes/icons/join.svg            |   1 +
 .../@node-red/nodes/icons/light.svg           |   1 +
 .../@node-red/nodes/icons/link-out.svg        |   1 +
 .../@node-red/nodes/icons/parser-csv.svg      |   1 +
 .../@node-red/nodes/icons/parser-html.svg     |   1 +
 .../@node-red/nodes/icons/parser-json.svg     |   1 +
 .../@node-red/nodes/icons/parser-xml.svg      |   1 +
 .../@node-red/nodes/icons/parser-yaml.svg     |   1 +
 .../@node-red/nodes/icons/range.svg           |   1 +
 .../@node-red/nodes/icons/serial.svg          |   1 +
 .../@node-red/nodes/icons/sort.svg            |   1 +
 .../@node-red/nodes/icons/split.svg           |   1 +
 .../@node-red/nodes/icons/subflow.svg         |   1 +
 .../@node-red/nodes/icons/swap.svg            |   1 +
 .../@node-red/nodes/icons/switch.svg          |   1 +
 .../@node-red/nodes/icons/template.svg        |   1 +
 .../@node-red/nodes/icons/timer.svg           |   1 +
 .../@node-red/nodes/icons/trigger.svg         |   1 +
 .../@node-red/nodes/icons/watch.svg           |   1 +
 .../@node-red/nodes/icons/white-globe.svg     |   1 +
 .../@node-red/registry/lib/localfilesystem.js |  11 ++++++++-
 .../editor-api/lib/editor/ui_spec.js          |   4 ++--
 .../registry/lib/localfilesystem_spec.js      |   4 ++--
 81 files changed, 127 insertions(+), 66 deletions(-)
 create mode 100644 packages/node_modules/@node-red/editor-client/src/images/icons/arrow-in.svg
 delete mode 100644 packages/node_modules/@node-red/editor-client/src/images/icons/node-changed.png
 delete mode 100644 packages/node_modules/@node-red/editor-client/src/images/icons/node-error.png
 create mode 100644 packages/node_modules/@node-red/editor-client/src/images/subflow_tab.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/alert.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/arrow-in.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/batch.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/bridge-dash.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/bridge.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/cog.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/comment.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/db.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/debug.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/envelope.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/feed.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/file-in.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/file-out.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/file.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/function.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/hash.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/inject.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/join.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/light.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/link-out.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/parser-csv.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/parser-html.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/parser-json.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/parser-xml.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/parser-yaml.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/range.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/serial.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/sort.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/split.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/subflow.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/swap.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/switch.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/template.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/timer.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/trigger.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/watch.svg
 create mode 100644 packages/node_modules/@node-red/nodes/icons/white-globe.svg

diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/ui.js b/packages/node_modules/@node-red/editor-api/lib/editor/ui.js
index ce3ec862c..24b819fec 100644
--- a/packages/node_modules/@node-red/editor-api/lib/editor/ui.js
+++ b/packages/node_modules/@node-red/editor-api/lib/editor/ui.js
@@ -25,7 +25,7 @@ var theme = require("./theme");
 
 var runtimeAPI;
 var editorClientDir = path.dirname(require.resolve("@node-red/editor-client"));
-var defaultNodeIcon = path.join(editorClientDir,"public","red","images","icons","arrow-in.png");
+var defaultNodeIcon = path.join(editorClientDir,"public","red","images","icons","arrow-in.svg");
 var editorTemplatePath = path.join(editorClientDir,"templates","index.mst");
 var editorTemplate;
 
diff --git a/packages/node_modules/@node-red/editor-client/src/images/icons/arrow-in.svg b/packages/node_modules/@node-red/editor-client/src/images/icons/arrow-in.svg
new file mode 100644
index 000000000..a5fcb49af
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/images/icons/arrow-in.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M18 5v12H7v26h11v12l14-25z" fill="#fff"/></svg>
diff --git a/packages/node_modules/@node-red/editor-client/src/images/icons/node-changed.png b/packages/node_modules/@node-red/editor-client/src/images/icons/node-changed.png
deleted file mode 100644
index 38a179444bb5a1e591e62d7946b40a44068a6ee3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 386
zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V8<6ZZI=>f4u@pObhHwBu4M$1`kk47*5n0T@
z!0ZFUjDP1=)By!0OI#yLg7ec#$`gxH8OqDc^)mCai<1)zQuXqS(r3T3kpe3E@9E+g
zA~Ci1!bY#d0TM?){x8pOD)E}O=I*WtE3TIzEqr%NzVdeE2LyO6-{<6h*D9<)L+_yO
zgB($=E>XcZlN>b~@BOxXk+7jT-FE*|nVEje8NRH4XWb>sF^NfI7I&VFW!60=iH3hU
zhAz3!7B7k3b}R5^mb;zTt`%p0Z9XdC@M!X9zO2nf{~gRS`Fj`{-miRG{7tO9YlrjV
z8;#w<@s13~Hh5O=u=v;|E8%!4cW<Kh3-No`q{AkZxbL=hyJ!=kD|_#M?q2l>-MNc)
z3f{RPmK}WhdB}(J647h+pFMi><>{}F*$@8OD{N<9@jG(Hhqs+kb&n5SU)mt=+c$gq
er~8NZGvur-Vn03W)hA$3FnGH9xvX<aXaWGrbD}-~

diff --git a/packages/node_modules/@node-red/editor-client/src/images/icons/node-error.png b/packages/node_modules/@node-red/editor-client/src/images/icons/node-error.png
deleted file mode 100644
index c20c8e85a17b656745fcce87273e2c4cf617d396..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 386
zcmeAS@N?(olHy`uVBq!ia0vp^AT}ol8<6B)wpSQPu@pObhHwBu4M$1`NV32qvY3H^
zsQ`o-qmq|j0SZc%xJHx&=ckpFCl;kLl$V$5W#(lUCnpx9>g5-u&wghk1yuCk)5S4F
zVruHSy<W_Y46YB2jjbnpI;kuY%UT%mGuTBp%;kvMMYq#B%#XZpL@Y7zPf&cs-LYZq
zgs|%S3Dvq=g2g;HWtZui9Gr0Z-ufL%JkD*d=R$jyF;7?`v%W3S=FSs)mELECm5lYN
zg7-7#DLsF}GG$WtN+W4U=G$wMSBqYoy2zAG`FU1QfuxCsCTEaSz;cxZqL$&(j*EBR
zy?tc%Y`MFs%ea0=SGW~3E8Hr`;I^4FKWXdnh?nLucQ3#FY8mL>_PROu+O%ggU%YSo
z{_ETtbBPU~1rMK=7SWCP++D?4^816N^R$iHw=U>poGbdUx#yF@Vhx4xE`808;tIc@
bcXbTX){Yw-It2CtgMz`+)z4*}Q$iB}@;#NK

diff --git a/packages/node_modules/@node-red/editor-client/src/images/subflow_tab.svg b/packages/node_modules/@node-red/editor-client/src/images/subflow_tab.svg
new file mode 100644
index 000000000..4acb241e4
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/images/subflow_tab.svg
@@ -0,0 +1 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M25 16h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1h-7c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zM8 28h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1H8c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zm-.416 11C5.624 39 4 37.375 4 35.416V4.582C4 2.622 5.625 1 7.584 1h24.832C34.376 1 36 2.623 36 4.582v30.834C36 37.376 34.375 39 32.416 39zM32 27H19c0 2.19-1.81 4-4 4H7v4.416c0 .35.235.584.584.584h24.832c.35 0 .584-.235.584-.584v-8.417zm1-2v-6h-8c-2.19 0-4-1.81-4-4h-1c-4.333-.002-8.667.004-13 0v6h8c2.19 0 4 1.81 4 4h13zm0-16V4.582c0-.35-.235-.582-.584-.582H7.584C7.234 4 7 4.233 7 4.582v8.417c4.333.002 8.667.001 13 .001h1c0-2.19 1.81-4 4-4z" color="#000" fill="#333"/></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index 5c544e7b7..62949efce 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -362,7 +362,7 @@ RED.nodes = (function() {
                 name:{value:""},
                 env:{value:[]}
             },
-            icon: function() { return sf.icon||"subflow.png" },
+            icon: function() { return sf.icon||"subflow.svg" },
             category: sf.category || "subflows",
             inputs: sf.in.length,
             outputs: sf.out.length,
@@ -583,7 +583,7 @@ RED.nodes = (function() {
             node.outputLabels = n.outputLabels.slice();
         }
         if (n.icon) {
-            if (n.icon !== "node-red/subflow.png") {
+            if (n.icon !== "node-red/subflow.svg") {
                 node.icon = n.icon;
             }
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
index 9ea599e3d..4ebdcdce9 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
@@ -399,7 +399,7 @@ RED.diff = (function() {
                             diff: localDiff,
                             def: {
                                 defaults:{},
-                                icon:"subflow.png",
+                                icon:"subflow.svg",
                                 category: "subflows",
                                 color: "#da9"
                             },
@@ -422,7 +422,7 @@ RED.diff = (function() {
                             diff: localDiff,
                             def: {
                                 defaults:{},
-                                icon:"subflow.png",
+                                icon:"subflow.svg",
                                 category: "subflows",
                                 color: "#da9"
                             },
@@ -443,7 +443,7 @@ RED.diff = (function() {
                                 remoteDiff: remoteDiff,
                                 def: {
                                     defaults:{},
-                                    icon:"subflow.png",
+                                    icon:"subflow.svg",
                                     category: "subflows",
                                     color: "#da9"
                                 },
@@ -549,7 +549,7 @@ RED.diff = (function() {
         if (def === undefined) {
             if (/^subflow:/.test(node.type)) {
                 def = {
-                    icon:"subflow.png",
+                    icon:"subflow.svg",
                     category: "subflows",
                     color: "#da9",
                     defaults:{name:{value:""}}
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index 1b3ccea52..4547dc756 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -2156,7 +2156,7 @@ RED.editor = (function() {
                             changed = true;
                         }
                         var icon = $("#red-ui-editor-node-icon").text()||"";
-                        if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
+                        if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
                             (editing_node.icon !== undefined && editing_node.icon !== icon)) {
                             changes.icon = editing_node.icon;
                             editing_node.icon = icon;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index a7b022172..c11931bfb 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -802,13 +802,13 @@ RED.utils = (function() {
     function getDefaultNodeIcon(def,node) {
         var icon_url;
         if (node && node.type === "subflow") {
-            icon_url = "node-red/subflow.png";
+            icon_url = "node-red/subflow.svg";
         } else if (typeof def.icon === "function") {
             try {
                 icon_url = def.icon.call(node);
             } catch(err) {
                 console.log("Definition error: "+def.type+".icon",err);
-                icon_url = "arrow-in.png";
+                icon_url = "arrow-in.svg";
             }
         } else {
             icon_url = def.icon;
@@ -838,11 +838,11 @@ RED.utils = (function() {
 
     function getNodeIcon(def,node) {
         if (def.category === 'config') {
-            return RED.settings.apiRootUrl+"icons/node-red/cog.png"
+            return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
         } else if (node && node.type === 'tab') {
-            return RED.settings.apiRootUrl+"icons/node-red/subflow.png"
+            return RED.settings.apiRootUrl+"icons/node-red/subflow.svg"
         } else if (node && node.type === 'unknown') {
-            return RED.settings.apiRootUrl+"icons/node-red/alert.png"
+            return RED.settings.apiRootUrl+"icons/node-red/alert.svg"
         } else if (node && node.icon) {
             var iconPath = separateIconPath(node.icon);
             if (isIconExists(iconPath)) {
@@ -851,6 +851,11 @@ RED.utils = (function() {
                 } else {
                     return RED.settings.apiRootUrl+"icons/" + node.icon;
                 }
+            } else if (iconPath.module !== "font-awesome" && /.png$/i.test(iconPath.file)) {
+                iconPath.file = iconPath.file.replace(/.png$/,".svg");
+                if (isIconExists(iconPath)) {
+                    return RED.settings.apiRootUrl+"icons/" + node.icon.replace(/.png$/,".svg");
+                }
             }
         }
 
@@ -867,9 +872,9 @@ RED.utils = (function() {
             if (isIconExists(iconPath)) {
                 return RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
             } else if (def.category === 'subflows') {
-                return RED.settings.apiRootUrl+"icons/node-red/subflow.png";
+                return RED.settings.apiRootUrl+"icons/node-red/subflow.svg";
             } else {
-                return RED.settings.apiRootUrl+"icons/node-red/arrow-in.png";
+                return RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg";
             }
         }
     }
@@ -1007,7 +1012,7 @@ RED.utils = (function() {
                 return;
             }
             // If the specified name is not defined in font-awesome, show arrow-in icon.
-            iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
+            iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg"
         }
         var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
         imageIconElement.css("backgroundImage", "url("+iconUrl+")");
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index e3aa33a7f..57cce2852 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -2463,14 +2463,22 @@ RED.view = (function() {
                 .attr("class","red-ui-flow-node-icon")
                 .attr("x",0)
                 .attr("width","30")
-                .attr("height","30");
+                .attr("height","30")
+                .style("display","none");
 
             var img = new Image();
             img.src = iconUrl;
             img.onload = function() {
-                icon.attr("width",Math.min(img.width,30));
-                icon.attr("height",Math.min(img.height,30));
-                icon.attr("x",15-Math.min(img.width,30)/2);
+                var largestEdge = Math.max(img.width,img.height);
+                var scaleFactor = 1;
+                if (largestEdge > 30) {
+                    scaleFactor = 30/largestEdge;
+                }
+                var width = img.width * scaleFactor;
+                var height = img.height * scaleFactor;
+                icon.attr("width",width);
+                icon.attr("height",height);
+                icon.attr("x",15-width/2);
                 icon.attr("xlink:href",iconUrl);
                 icon.style("display",null);
                 //if ("right" == d._def.align) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index db36004ab..91fa8e34a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -439,7 +439,7 @@ RED.workspaces = (function() {
             if (!workspace_tabs.contains(id)) {
                 var sf = RED.nodes.subflow(id);
                 if (sf) {
-                    addWorkspace({type:"subflow",id:id,icon:"red/images/subflow_tab.png",label:sf.name, closeable: true});
+                    addWorkspace({type:"subflow",id:id,icon:"red/images/subflow_tab.svg",label:sf.name, closeable: true});
                 } else {
                     return;
                 }
diff --git a/packages/node_modules/@node-red/nodes/core/core/20-inject.html b/packages/node_modules/@node-red/nodes/core/core/20-inject.html
index 558530835..69fd9c8d1 100644
--- a/packages/node_modules/@node-red/nodes/core/core/20-inject.html
+++ b/packages/node_modules/@node-red/nodes/core/core/20-inject.html
@@ -168,7 +168,7 @@
             once: {value:false},
             onceDelay: {value:0.1}
         },
-        icon: "inject.png",
+        icon: "inject.svg",
         inputs:0,
         outputs:1,
         outputLabels: function(index) {
diff --git a/packages/node_modules/@node-red/nodes/core/core/25-catch.html b/packages/node_modules/@node-red/nodes/core/core/25-catch.html
index 8145fd525..97bd627d5 100644
--- a/packages/node_modules/@node-red/nodes/core/core/25-catch.html
+++ b/packages/node_modules/@node-red/nodes/core/core/25-catch.html
@@ -34,7 +34,7 @@
         },
         inputs:0,
         outputs:1,
-        icon: "alert.png",
+        icon: "alert.svg",
         label: function() {
             if (this.name) {
                 return this.name;
diff --git a/packages/node_modules/@node-red/nodes/core/core/25-status.html b/packages/node_modules/@node-red/nodes/core/core/25-status.html
index de52ae281..68eb127a7 100644
--- a/packages/node_modules/@node-red/nodes/core/core/25-status.html
+++ b/packages/node_modules/@node-red/nodes/core/core/25-status.html
@@ -22,14 +22,14 @@
 <script type="text/javascript">
     RED.nodes.registerType('status',{
         category: 'input',
-        color:"#c0edc0",
+        color:"#d9f4fd",
         defaults: {
             name: {value:""},
             scope: {value:null}
         },
         inputs:0,
         outputs:1,
-        icon: "alert.png",
+        icon: "alert.svg",
         label: function() {
             return this.name||(this.scope?this._("status.statusNodes",{number:this.scope.length}):this._("status.status"));
         },
diff --git a/packages/node_modules/@node-red/nodes/core/core/58-debug.html b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
index 4257278ab..23962620b 100644
--- a/packages/node_modules/@node-red/nodes/core/core/58-debug.html
+++ b/packages/node_modules/@node-red/nodes/core/core/58-debug.html
@@ -65,7 +65,7 @@
         color:"#87a980",
         inputs:1,
         outputs:0,
-        icon: "debug.png",
+        icon: "debug.svg",
         align: "right",
         button: {
             toggle: "active",
diff --git a/packages/node_modules/@node-red/nodes/core/core/60-link.html b/packages/node_modules/@node-red/nodes/core/core/60-link.html
index 958abacb9..9efec0a04 100644
--- a/packages/node_modules/@node-red/nodes/core/core/60-link.html
+++ b/packages/node_modules/@node-red/nodes/core/core/60-link.html
@@ -170,7 +170,7 @@
         },
         inputs:0,
         outputs:1,
-        icon: "link-out.png",
+        icon: "link-out.svg",
         outputLabels: function(i) {
             return this.name||this._("link.linkIn");
         },
@@ -200,7 +200,7 @@
         align:"right",
         inputs:1,
         outputs:0,
-        icon: "link-out.png",
+        icon: "link-out.svg",
         inputLabels: function(i) {
             return this.name||this._("link.linkOut");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/core/75-exec.html b/packages/node_modules/@node-red/nodes/core/core/75-exec.html
index a5f8f4b44..5225044be 100644
--- a/packages/node_modules/@node-red/nodes/core/core/75-exec.html
+++ b/packages/node_modules/@node-red/nodes/core/core/75-exec.html
@@ -73,7 +73,7 @@
                 this._("exec.label.retcode")
             ][i];
         },
-        icon: "arrow-in.png",
+        icon: "arrow-in.svg",
         align: "right",
         label: function() {
             return this.name||this.command||(this.useSpawn=="true"?this._("exec.spawn"):this._("exec.exec"));
diff --git a/packages/node_modules/@node-red/nodes/core/core/80-function.html b/packages/node_modules/@node-red/nodes/core/core/80-function.html
index 8029d26fc..49d53f548 100644
--- a/packages/node_modules/@node-red/nodes/core/core/80-function.html
+++ b/packages/node_modules/@node-red/nodes/core/core/80-function.html
@@ -31,7 +31,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "function.png",
+        icon: "function.svg",
         label: function() {
             return this.name||this._("function.function");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/core/80-template.html b/packages/node_modules/@node-red/nodes/core/core/80-template.html
index bc8d1b971..0e95e7796 100644
--- a/packages/node_modules/@node-red/nodes/core/core/80-template.html
+++ b/packages/node_modules/@node-red/nodes/core/core/80-template.html
@@ -63,7 +63,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "template.png",
+        icon: "template.svg",
         label: function() {
             return this.name||this._("template.template");;
         },
diff --git a/packages/node_modules/@node-red/nodes/core/core/89-delay.html b/packages/node_modules/@node-red/nodes/core/core/89-delay.html
index 8d3ce9323..76271c853 100644
--- a/packages/node_modules/@node-red/nodes/core/core/89-delay.html
+++ b/packages/node_modules/@node-red/nodes/core/core/89-delay.html
@@ -114,7 +114,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "timer.png",
+        icon: "timer.svg",
         label: function() {
             if (this.name) {
                 return this.name;
diff --git a/packages/node_modules/@node-red/nodes/core/core/89-trigger.html b/packages/node_modules/@node-red/nodes/core/core/89-trigger.html
index a551e1891..28bf0cdeb 100644
--- a/packages/node_modules/@node-red/nodes/core/core/89-trigger.html
+++ b/packages/node_modules/@node-red/nodes/core/core/89-trigger.html
@@ -87,7 +87,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "trigger.png",
+        icon: "trigger.svg",
         label: function() {
             if (this.duration > 0) {
                 return this.name|| this._("trigger.label.trigger")+" "+this.duration+this.units;
diff --git a/packages/node_modules/@node-red/nodes/core/core/90-comment.html b/packages/node_modules/@node-red/nodes/core/core/90-comment.html
index 3a5a9d8a6..0ec6dfdb5 100644
--- a/packages/node_modules/@node-red/nodes/core/core/90-comment.html
+++ b/packages/node_modules/@node-red/nodes/core/core/90-comment.html
@@ -20,7 +20,7 @@
         },
         inputs:0,
         outputs:0,
-        icon: "comment.png",
+        icon: "comment.svg",
         label: function() {
             return this.name||this._("comment.comment");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
index ccceca0af..ed6964101 100644
--- a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
+++ b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
@@ -57,7 +57,7 @@
         color:"#d8bfd8",
         inputs:0,
         outputs:1,
-        icon: "bridge.png",
+        icon: "bridge.svg",
         label: function() {
             return this.name||this.topic||"mqtt";
         },
@@ -118,7 +118,7 @@
         color:"#d8bfd8",
         inputs:1,
         outputs:0,
-        icon: "bridge.png",
+        icon: "bridge.svg",
         align: "right",
         label: function() {
             return this.name||this.topic||"mqtt";
diff --git a/packages/node_modules/@node-red/nodes/core/io/21-httpin.html b/packages/node_modules/@node-red/nodes/core/io/21-httpin.html
index 4aa96a91b..6786e0ea4 100644
--- a/packages/node_modules/@node-red/nodes/core/io/21-httpin.html
+++ b/packages/node_modules/@node-red/nodes/core/io/21-httpin.html
@@ -77,7 +77,7 @@
         },
         inputs:0,
         outputs:1,
-        icon: "white-globe.png",
+        icon: "white-globe.svg",
         label: function() {
             if (this.name) {
                 return this.name;
@@ -152,7 +152,7 @@
         inputs:1,
         outputs:0,
         align: "right",
-        icon: "white-globe.png",
+        icon: "white-globe.svg",
         label: function() {
             return this.name||("http"+(this.statusCode?" ("+this.statusCode+")":""));
         },
diff --git a/packages/node_modules/@node-red/nodes/core/io/21-httprequest.html b/packages/node_modules/@node-red/nodes/core/io/21-httprequest.html
index 9f273285d..eb634d640 100644
--- a/packages/node_modules/@node-red/nodes/core/io/21-httprequest.html
+++ b/packages/node_modules/@node-red/nodes/core/io/21-httprequest.html
@@ -117,7 +117,7 @@
                 obj: this._("httpin.label.jsonObject")
             }[this.ret]);
         },
-        icon: "white-globe.png",
+        icon: "white-globe.svg",
         label: function() {
             return this.name||this._("httpin.httpreq");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/io/22-websocket.html b/packages/node_modules/@node-red/nodes/core/io/22-websocket.html
index b3847909d..403c1e5c8 100644
--- a/packages/node_modules/@node-red/nodes/core/io/22-websocket.html
+++ b/packages/node_modules/@node-red/nodes/core/io/22-websocket.html
@@ -106,7 +106,7 @@
         color:"rgb(215, 215, 160)",
         inputs:0,
         outputs:1,
-        icon: "white-globe.png",
+        icon: "white-globe.svg",
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
@@ -125,7 +125,7 @@
         color:"rgb(215, 215, 160)",
         inputs:1,
         outputs:0,
-        icon: "white-globe.png",
+        icon: "white-globe.svg",
         align: "right",
         labelStyle: function() {
             return this.name?"node_label_italic":"";
diff --git a/packages/node_modules/@node-red/nodes/core/io/23-watch.html b/packages/node_modules/@node-red/nodes/core/io/23-watch.html
index f04a264b2..e53842e2e 100644
--- a/packages/node_modules/@node-red/nodes/core/io/23-watch.html
+++ b/packages/node_modules/@node-red/nodes/core/io/23-watch.html
@@ -42,7 +42,7 @@
         color:"BurlyWood",
         inputs:0,
         outputs:1,
-        icon: "watch.png",
+        icon: "watch.svg",
         label: function() {
             return this.name||this.files||this._("watch.watch");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/io/31-tcpin.html b/packages/node_modules/@node-red/nodes/core/io/31-tcpin.html
index c50db4526..27629f569 100644
--- a/packages/node_modules/@node-red/nodes/core/io/31-tcpin.html
+++ b/packages/node_modules/@node-red/nodes/core/io/31-tcpin.html
@@ -72,7 +72,7 @@
         },
         inputs:0,
         outputs:1,
-        icon: "bridge-dash.png",
+        icon: "bridge-dash.svg",
         label: function() {
             return this.name || "tcp:"+(this.host?this.host+":":"")+this.port;
         },
@@ -155,7 +155,7 @@
         },
         inputs:1,
         outputs:0,
-        icon: "bridge-dash.png",
+        icon: "bridge-dash.svg",
         align: "right",
         label: function() {
             return this.name || "tcp:"+(this.host?this.host+":":"")+this.port;
@@ -226,7 +226,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "bridge-dash.png",
+        icon: "bridge-dash.svg",
         label: function() {
             return this.name || "tcp:"+(this.server?this.server+":":"")+this.port;
         },
diff --git a/packages/node_modules/@node-red/nodes/core/io/32-udp.html b/packages/node_modules/@node-red/nodes/core/io/32-udp.html
index d9aef89c5..89e9ded70 100644
--- a/packages/node_modules/@node-red/nodes/core/io/32-udp.html
+++ b/packages/node_modules/@node-red/nodes/core/io/32-udp.html
@@ -70,7 +70,7 @@
         },
         inputs:0,
         outputs:1,
-        icon: "bridge-dash.png",
+        icon: "bridge-dash.svg",
         label: function() {
             if (this.multicast=="false") {
                 return this.name||"udp "+this.port;
@@ -173,7 +173,7 @@
         },
         inputs:1,
         outputs:0,
-        icon: "bridge-dash.png",
+        icon: "bridge-dash.svg",
         align: "right",
         label: function() {
             return this.name||"udp "+(this.addr+":"+this.port);
diff --git a/packages/node_modules/@node-red/nodes/core/logic/10-switch.html b/packages/node_modules/@node-red/nodes/core/logic/10-switch.html
index fa3046c0f..7dbe0b0ba 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/10-switch.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/10-switch.html
@@ -117,7 +117,7 @@
                 return label;
             }
         },
-        icon: "switch.png",
+        icon: "switch.svg",
         label: function() {
             return this.name||this._("switch.switch");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/logic/15-change.html b/packages/node_modules/@node-red/nodes/core/logic/15-change.html
index cc0f8d817..616b03ab9 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/15-change.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/15-change.html
@@ -28,7 +28,7 @@
         },
         inputs: 1,
         outputs: 1,
-        icon: "swap.png",
+        icon: "swap.svg",
         label: function() {
             function prop2name(type, key) {
                 var result = RED.utils.parseContextKey(key);
diff --git a/packages/node_modules/@node-red/nodes/core/logic/16-range.html b/packages/node_modules/@node-red/nodes/core/logic/16-range.html
index 7f1ee3c36..77d123d56 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/16-range.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/16-range.html
@@ -52,7 +52,7 @@
         },
         inputs: 1,
         outputs: 1,
-        icon: "range.png",
+        icon: "range.svg",
         label: function() {
             if (this.minout !== "" && this.maxout !== "") { return this.name||this.minout + " - " + this.maxout; }
             else { return this.name||this._("range.range"); }
diff --git a/packages/node_modules/@node-red/nodes/core/logic/17-split.html b/packages/node_modules/@node-red/nodes/core/logic/17-split.html
index 269b3397e..fbdb7f8b6 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/17-split.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/17-split.html
@@ -61,7 +61,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "split.png",
+        icon: "split.svg",
         label: function() {
             return this.name||this._("split.split");
         },
@@ -218,7 +218,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "join.png",
+        icon: "join.svg",
         label: function() {
             return this.name||this._("join.join");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/logic/18-sort.html b/packages/node_modules/@node-red/nodes/core/logic/18-sort.html
index a3f3ee8cb..0093ee65d 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/18-sort.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/18-sort.html
@@ -75,7 +75,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "sort.png",
+        icon: "sort.svg",
         label: function() {
             return this.name||this._("sort.sort");
         },
diff --git a/packages/node_modules/@node-red/nodes/core/logic/19-batch.html b/packages/node_modules/@node-red/nodes/core/logic/19-batch.html
index 05a64ab4d..52bb84132 100644
--- a/packages/node_modules/@node-red/nodes/core/logic/19-batch.html
+++ b/packages/node_modules/@node-red/nodes/core/logic/19-batch.html
@@ -81,7 +81,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "batch.png",
+        icon: "batch.svg",
         label: function() {
             return this.name||this._("batch.batch");;
         },
diff --git a/packages/node_modules/@node-red/nodes/core/parsers/70-CSV.html b/packages/node_modules/@node-red/nodes/core/parsers/70-CSV.html
index 404ddd3a7..caf6fe753 100644
--- a/packages/node_modules/@node-red/nodes/core/parsers/70-CSV.html
+++ b/packages/node_modules/@node-red/nodes/core/parsers/70-CSV.html
@@ -78,7 +78,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "parser-csv.png",
+        icon: "parser-csv.svg",
         label: function() {
             return this.name||"csv";
         },
diff --git a/packages/node_modules/@node-red/nodes/core/parsers/70-HTML.html b/packages/node_modules/@node-red/nodes/core/parsers/70-HTML.html
index 843fae76f..2ce298d4b 100644
--- a/packages/node_modules/@node-red/nodes/core/parsers/70-HTML.html
+++ b/packages/node_modules/@node-red/nodes/core/parsers/70-HTML.html
@@ -49,7 +49,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "parser-html.png",
+        icon: "parser-html.svg",
         label: function() {
             return this.name||this.tag||"html";
         },
diff --git a/packages/node_modules/@node-red/nodes/core/parsers/70-JSON.html b/packages/node_modules/@node-red/nodes/core/parsers/70-JSON.html
index 269419baf..15bf9cf6c 100644
--- a/packages/node_modules/@node-red/nodes/core/parsers/70-JSON.html
+++ b/packages/node_modules/@node-red/nodes/core/parsers/70-JSON.html
@@ -37,7 +37,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "parser-json.png",
+        icon: "parser-json.svg",
         label: function() {
             return this.name||"json";
         },
diff --git a/packages/node_modules/@node-red/nodes/core/parsers/70-XML.html b/packages/node_modules/@node-red/nodes/core/parsers/70-XML.html
index 580bd6aa1..4b8e83674 100644
--- a/packages/node_modules/@node-red/nodes/core/parsers/70-XML.html
+++ b/packages/node_modules/@node-red/nodes/core/parsers/70-XML.html
@@ -32,7 +32,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "parser-xml.png",
+        icon: "parser-xml.svg",
         label: function() {
             return this.name||"xml";
         },
diff --git a/packages/node_modules/@node-red/nodes/core/parsers/70-YAML.html b/packages/node_modules/@node-red/nodes/core/parsers/70-YAML.html
index f543a7362..86ae10a98 100644
--- a/packages/node_modules/@node-red/nodes/core/parsers/70-YAML.html
+++ b/packages/node_modules/@node-red/nodes/core/parsers/70-YAML.html
@@ -20,7 +20,7 @@
         },
         inputs:1,
         outputs:1,
-        icon: "parser-yaml.png",
+        icon: "parser-yaml.svg",
         label: function() {
             return this.name||"yaml";
         },
diff --git a/packages/node_modules/@node-red/nodes/core/storage/50-file.html b/packages/node_modules/@node-red/nodes/core/storage/50-file.html
index cbf7c9b5c..e48039269 100755
--- a/packages/node_modules/@node-red/nodes/core/storage/50-file.html
+++ b/packages/node_modules/@node-red/nodes/core/storage/50-file.html
@@ -205,7 +205,7 @@
         color:"BurlyWood",
         inputs:1,
         outputs:1,
-        icon: "file-out.png",
+        icon: "file-out.svg",
         label: function() {
             if (this.overwriteFile === "delete") {
                 return this.name||this._("file.label.deletelabel",{file:this.filename});
@@ -273,7 +273,7 @@
         outputLabels: function(i) {
             return (this._((this.format === "utf8") ? "file.label.utf8String" : "file.label.binaryBuffer"));
         },
-        icon: "file-in.png",
+        icon: "file-in.svg",
         label: function() {
             return this.name||this.filename||this._("file.label.filelabel");
         },
diff --git a/packages/node_modules/@node-red/nodes/icons/alert.svg b/packages/node_modules/@node-red/nodes/icons/alert.svg
new file mode 100644
index 000000000..06f6c15f3
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/alert.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-216.74 -415.04) scale(.62143)" fill="#fff"><path d="M371.3 683.97l1.61-1.61H389l1.61 1.61-3.219 40.23-3.218 3.218h-6.437l-3.219-3.218z"/><rect x="372.91" y="735.47" width="16.092" height="16.092" ry="3.017" color="#000"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/arrow-in.svg b/packages/node_modules/@node-red/nodes/icons/arrow-in.svg
new file mode 100644
index 000000000..a5fcb49af
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/arrow-in.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M18 5v12H7v26h11v12l14-25z" fill="#fff"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/batch.svg b/packages/node_modules/@node-red/nodes/icons/batch.svg
new file mode 100644
index 000000000..eb513de93
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/batch.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" stroke-width=".612"><path d="M34.001 27.987l-4 .004v3.997l4-.01M40.001 27.987l-4 .004v3.997l4-.01M26.001 29.987l-7-7.986v15.986M34.001 13.987l-4 .004v3.997l4-.01M40.001 13.987l-4 .004v3.997l4-.01M34.001 41.988l-4 .003v3.997l4-.01M40.001 41.988l-4 .003v3.997l4-.01M8.001 27.987l-4 .004v3.997l4-.01M14.001 27.987l-4 .004v3.997l4-.01M8.001 19.987l-4 .004v3.997l4-.01M14.001 19.987l-4 .004v3.997l4-.01M8.001 35.987l-4 .004v3.997l4-.01M14.001 35.987l-4 .004v3.997l4-.01"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/bridge-dash.svg b/packages/node_modules/@node-red/nodes/icons/bridge-dash.svg
new file mode 100644
index 000000000..45f556a11
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/bridge-dash.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M19.924 6.61c4.372 5.433 7.182 13.893 7.182 23.397 0 9.493-2.804 17.946-7.167 23.379m-4.294-38.39c5.645 9.417 7.172 20.944.024 29.993m-4.36-21.661c1.338 1.459 2.215 3.906 2.215 6.68 0 2.571-.755 4.863-1.931 6.346" fill="none" stroke="#fff" stroke-dasharray="14.096, 3.524" stroke-width="3.524"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/bridge.svg b/packages/node_modules/@node-red/nodes/icons/bridge.svg
new file mode 100644
index 000000000..093071ca8
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/bridge.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M19.924 6.61c4.372 5.433 7.182 13.893 7.182 23.397 0 9.493-2.804 17.946-7.167 23.379m-4.294-38.39c5.645 9.417 7.172 20.944.024 29.993m-4.36-21.661c1.338 1.459 2.215 3.906 2.215 6.68 0 2.571-.755 4.863-1.931 6.346" fill="none" stroke="#fff" stroke-width="3.224"/></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/nodes/icons/cog.svg b/packages/node_modules/@node-red/nodes/icons/cog.svg
new file mode 100644
index 000000000..ae236ff43
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/cog.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M20 12a18 18 0 0 0-3.494.36l-1.428 5.715-5.06-3.036a18 18 0 0 0-4.946 4.917l3.045 5.078-5.765 1.442A18 18 0 0 0 2 30a18 18 0 0 0 .345 3.434l5.775 1.444-3.072 5.12a18 18 0 0 0 4.893 4.924l5.137-3.083 1.455 5.82A18 18 0 0 0 20 48a18 18 0 0 0 3.47-.353l1.452-5.807 5.128 3.076a18 18 0 0 0 4.905-4.913l-3.074-5.124 5.783-1.446A18 18 0 0 0 38 30a18 18 0 0 0-.367-3.529l-5.75-1.437 3.041-5.069a18 18 0 0 0-4.937-4.928l-5.065 3.038-1.433-5.728A18 18 0 0 0 20 12zm0 9a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9z" color="#000" fill="#fff" opacity=".98" style="isolation:auto;mix-blend-mode:normal"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/comment.svg b/packages/node_modules/@node-red/nodes/icons/comment.svg
new file mode 100644
index 000000000..43042723a
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/comment.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M36.19 28.6c0 6.088-7.289 11.024-16.28 11.024a23.98 23.98 0 0 1-2.982-.185c-1.272-.159-7.933 7.526-13.113 6.53.18-2.004 8.18-6.004 5.87-8.79C5.993 35.16 3.63 32.066 3.63 28.6c0-6.088 7.289-11.024 16.28-11.024 8.991 0 16.28 4.936 16.28 11.024z" fill="#fff" stroke="#868686" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" style="isolation:auto;mix-blend-mode:normal"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/db.svg b/packages/node_modules/@node-red/nodes/icons/db.svg
new file mode 100644
index 000000000..5b455b606
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/db.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-355 -704.36)"><ellipse transform="matrix(1.2868 0 0 1.9263 -64.444 -607.56)" cx="341.25" cy="688.61" rx="9.84" ry="3.25" color="#000" fill="#fff"/><path d="M387.32 750.48c0 1.949-5.669 5.879-12.662 5.879s-12.662-3.93-12.662-5.879v-27.043c0 1.949 5.669 6.242 12.662 6.242s12.662-4.293 12.662-6.242v27.043" color="#000" fill="#fff"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/debug.svg b/packages/node_modules/@node-red/nodes/icons/debug.svg
new file mode 100644
index 000000000..f102ddb7d
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/debug.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M10.004 14.499h20M10.004 46.503h20M10.004 22.5h20M10.004 30.501h20M10.004 38.502h20" stroke="#fff" stroke-width="2.9997000000000003"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/envelope.svg b/packages/node_modules/@node-red/nodes/icons/envelope.svg
new file mode 100644
index 000000000..dacfd673b
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/envelope.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M20 32.96l-18-18h36z"/><path d="M2 20.36l18 18 18-18v26.1H2z"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/feed.svg b/packages/node_modules/@node-red/nodes/icons/feed.svg
new file mode 100644
index 000000000..dc22a626a
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/feed.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#b85c5c" stroke="#000"><path color="#000" d="M-.01-.004h39.998v60H-.01z" fill="none" stroke="none"/><g transform="translate(-450.266 -585.37)"><rect x="464.27" y="625.37" width="12" height="12" ry="2.4" color="#000" fill="#fff" stroke="none"/><g fill="none" stroke="#fff" stroke-width="4"><path d="M461.27 618.87l5.5-2.5h7l5.5 2.5M459.27 608.87l5.5-2.5h11l5.5 2.5M457.27 598.87l5.5-2.5h15l5.5 2.5"/></g></g></g></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/nodes/icons/file-in.svg b/packages/node_modules/@node-red/nodes/icons/file-in.svg
new file mode 100644
index 000000000..15950f96f
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/file-in.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path color="#000" fill="none" d="M0-.04h40v60H0z"/><g fill="#fff"><path d="M5 9.96h14v16h9v7H18v10h10v7H5z"/><path d="M22 9.96l13 13H22z"/><path d="M28 25.96h7v6l5 6-4.987 6-.013 6h-7l10-12z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/nodes/icons/file-out.svg b/packages/node_modules/@node-red/nodes/icons/file-out.svg
new file mode 100644
index 000000000..214e307ee
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/file-out.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path color="#000" fill="none" d="M0-.04h40v60H0z"/><g fill="#fff"><path d="M5 9.96h14v16h16v24H5v-7h5v7l10-12-10-12v7H5z"/><path d="M22 9.96l13 13H22z"/></g><path d="M5 30.96H0v14h5v-2H2v-10h3z" fill="#fff" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/nodes/icons/file.svg b/packages/node_modules/@node-red/nodes/icons/file.svg
new file mode 100644
index 000000000..2934c0c15
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/file.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M5 10h14v16h16v24H5z"/><path d="M22 10l13 13H22z"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/function.svg b/packages/node_modules/@node-red/nodes/icons/function.svg
new file mode 100644
index 000000000..b831a21fa
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/function.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M30.999 31.005v-3h-6.762s.812-12.397 1.162-14 .597-3.35 2.628-3.103 1.971 3.103 1.971 3.103l4.862-.016s-.783-3.984-2.783-5.984-7.946-1.7-9.633.03c-1.687 1.73-2.302 5.065-2.597 6.422-.588 4.5-.854 9.027-1.248 13.547h-8.6v3H18.1s-.812 12.398-1.162 14-.597 3.35-2.628 3.103-1.972-3.102-1.972-3.102l-4.862.015s.783 3.985 2.783 5.985c2 2 7.946 1.699 9.634-.031 1.687-1.73 2.302-5.065 2.597-6.422.587-4.5.854-9.027 1.248-13.547z" fill="#fff"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/hash.svg b/packages/node_modules/@node-red/nodes/icons/hash.svg
new file mode 100644
index 000000000..4c8e4370e
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/hash.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" stroke-width=".857"><path d="M17.997 8.998l-5.972.072-4.028 43.928 5.914.072z"/><path d="M6 16.999l-1 6 31 1 1-6z"/><path d="M31.996 8.998l-5.971.072-4.029 43.928 5.914.072z"/><path d="M3.998 37.004l-1 6 31 1 1-6z"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/inject.svg b/packages/node_modules/@node-red/nodes/icons/inject.svg
new file mode 100644
index 000000000..8038a313f
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/inject.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M18 5v12H7v9h15v-7l6 11-6 12v-8H7v9h11v12l14-25z" fill="#fff"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/join.svg b/packages/node_modules/@node-red/nodes/icons/join.svg
new file mode 100644
index 000000000..491a22b08
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/join.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M40.001 39.99l-.032-19.955-11.967.017v19.983l12-.046M8.001 28.027l-4 .004v3.997l4-.01M14.001 28.027l-4 .004v3.997l4-.01M25.001 30.027l-7-7.986v15.986M8.001 20.027l-4 .004v3.996l4-.01M14.001 20.027l-4 .004v3.996l4-.01M8.001 36.027l-4 .004v3.997l4-.01M14.001 36.027l-4 .004v3.997l4-.01" fill="#fff" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/light.svg b/packages/node_modules/@node-red/nodes/icons/light.svg
new file mode 100644
index 000000000..ba1c973d4
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/light.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.78737 0 0 .78793 -271.294 -529.99)" stroke="#fff" fill="none"><ellipse transform="matrix(1.4924 0 0 1.4616 -59.491 -343.46)" cx="287.75" cy="715.86" rx="10.75" ry="12" color="#000" stroke-width="4.071"/><path d="M362.5 717.86v15.5c6.371 2.128 8.712 2.003 15 0v-15.5" stroke-linejoin="round" stroke-width="5.01"/><path d="M366.5 717.86l1-12h5l1 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.006"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/link-out.svg b/packages/node_modules/@node-red/nodes/icons/link-out.svg
new file mode 100644
index 000000000..efbcd85cc
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/link-out.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M7 38.98v3.983h11v12l13-23H19l-.463.017c-1.28 4.048-5.066 6.983-9.537 6.983zm12-11.017h12l-13-23v12H7V20.9l2 .064c4.467 0 8.25 2.93 9.534 6.972zM6.95 24.22a6 6 0 1 1-.083 11.456" fill="#fff" style="isolation:auto;mix-blend-mode:normal"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/parser-csv.svg b/packages/node_modules/@node-red/nodes/icons/parser-csv.svg
new file mode 100644
index 000000000..62698efc4
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/parser-csv.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M26.001 7.034l-22 .043v45.958h32v-36zm-14.838 14h2.838v15.001h-3V25.738c-1.027.96-2.606 1.114-4 1.574V24.76c.734-.24 1.53-.706 2.39-1.373.861-.673 1.452-1.457 1.772-2.351zm15.948 0c1.448 0 2.824.392 3.65 1.173.828.78 1.24 1.751 1.24 2.912 0 .66-.12 1.29-.36 1.89a7.143 7.143 0 0 1-1.05 1.872c-.34.433-.952 1.057-1.84 1.87-.886.815-1.687 1.355-1.927 1.622-.233.267-.423.408-.57.662h5.748v3H21.98c.107-.987.427-2.192.96-3.072.534-.887 1.825-2.06 3.4-3.522 1.267-1.18 1.972-1.982 2.259-2.402.387-.58.402-1.154.402-1.721 0-.627.008-1.108-.332-1.441-.333-.34-1.035-.51-1.629-.51-.587 0-1.053.178-1.4.531-.347.354-.546 1.316-.6 2.137h-3.039c.167-1.548.928-3.315 1.809-3.989.88-.673 1.98-1.011 3.3-1.011zM17.002 33.036h3v1.928c0 .814-.073 1.455-.213 1.922-.14.473-.407.898-.8 1.271-.387.374-.88.666-1.481.88l-.549-1.161c.567-.187.969-.443 1.21-.77.24-.327.367-.503.38-1.07h-1.547z" fill="#fff" stroke="none" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/parser-html.svg b/packages/node_modules/@node-red/nodes/icons/parser-html.svg
new file mode 100644
index 000000000..05c8c8628
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/parser-html.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M26.001 7.034l-22 .043v45.958h32v-36zm-13 13l3 2-6 8 6 8.001-3 2-7-10zm13 0l7 10-7 10.001-3-2 6-8-6-8z" fill="#fff" stroke="none" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/parser-json.svg b/packages/node_modules/@node-red/nodes/icons/parser-json.svg
new file mode 100644
index 000000000..6ce3d45f5
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/parser-json.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M26.001 7.034l-22 .043v45.958h32v-36zm-9.17 10.002h1.197v3.11c-.974 0-2.1.057-2.381.17a1.146 1.146 0 0 0-.606.493c-.131.217-.197.593-.197 1.131 0 .546-.04 1.583-.119 3.11-.044.858-.158 1.556-.342 2.093-.184.53-.421.968-.71 1.315-.281.347-.716.705-1.303 1.078.517.295.939.642 1.263 1.04.334.391.588.869.764 1.433.175.563.29 1.318.342 2.263a86.9 86.9 0 0 1 .092 2.756c0 .573.07.972.21 1.198.14.225.35.395.631.507.29.122 1.408.182 2.356.182v3.121H16.83c-1.185 0-2.093-.095-2.725-.285a3.69 3.69 0 0 1-1.604-.924 3.3 3.3 0 0 1-.869-1.613c-.149-.633-.224-1.634-.224-3.004 0-1.596-.07-2.633-.21-3.11-.192-.693-.487-1.187-.882-1.482-.386-.303-2.509-.539-3.316-.582v-3c.64-.035 2.649-.19 2.974-.346.324-.156.605-.417.842-.781.237-.373.398-.836.486-1.39.07-.417.106-1.143.106-2.175 0-1.682.08-2.852.238-3.511.158-.668.443-1.201.855-1.6.413-.408 1.012-.729 1.801-.963.535-.156 3.677-.234 2.527-.234zm5.157 0h1.197c1.15 0 1.993.078 2.528.234.79.234 1.388.555 1.8.963.413.399.698.932.856 1.6.158.659.238 1.83.238 3.511 0 1.032.036 1.758.106 2.174.087.555.25 1.018.486 1.39.237.365.517.626.842.782.324.156 2.333.311 2.973.346v3c-.807.043-2.93.278-3.315.582-.395.295-.69.789-.883 1.482-.14.477-.209 1.514-.209 3.11 0 1.37-.075 2.37-.224 3.004-.15.641-.44 1.18-.87 1.613a3.69 3.69 0 0 1-1.603.924c-.632.19-3.909.285-2.725.285h-1.197v-3.121c.947 0 2.066-.06 2.356-.182.28-.112.49-.282.63-.508.14-.225.211-.625.211-1.197 0-.399.03-1.316.092-2.756.053-.945.166-1.7.342-2.264.175-.563.43-1.041.764-1.431a4.434 4.434 0 0 1 1.263-1.041c-.587-.373-1.022-.731-1.302-1.078-.29-.347-.527-.786-.711-1.315-.185-.537-.298-1.235-.342-2.094-.08-1.526-.12-2.563-.12-3.109 0-.538-.065-.914-.197-1.13a1.146 1.146 0 0 0-.605-.495c-.28-.113-1.407-.17-2.38-.17z" fill="#fff" stroke="none" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/parser-xml.svg b/packages/node_modules/@node-red/nodes/icons/parser-xml.svg
new file mode 100644
index 000000000..05c8c8628
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/parser-xml.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M26.001 7.034l-22 .043v45.958h32v-36zm-13 13l3 2-6 8 6 8.001-3 2-7-10zm13 0l7 10-7 10.001-3-2 6-8-6-8z" fill="#fff" stroke="none" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/parser-yaml.svg b/packages/node_modules/@node-red/nodes/icons/parser-yaml.svg
new file mode 100644
index 000000000..d3a2cb9e0
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/parser-yaml.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M26.001 6.987l-22 .043v45.958h32V16.987zM10.567 19.362h5.352c.768 0 1.282.104 1.543.313.273.208.41.573.41 1.093 0 .521-.163.886-.488 1.094-.313.209-.892.313-1.739.313h-.644l4.726 8.477 4.903-8.477h-.801c-.703 0-1.191-.104-1.465-.313-.273-.208-.41-.573-.41-1.094 0-.546.117-.918.352-1.113.234-.195.826-.293 1.777-.293h3.594c.99 0 1.62.104 1.894.313.287.195.43.56.43 1.093 0 .521-.143.886-.43 1.094-.273.209-.8.313-1.582.313h-.312l-6.64 11.387v6.211h2.85c1.003 0 1.641.098 1.915.293.286.182.43.534.43 1.055 0 .534-.144.905-.43 1.113-.274.195-.834.293-1.68.293h-9.277c-.847 0-1.406-.098-1.68-.293-.273-.208-.41-.58-.41-1.113 0-.521.15-.873.45-1.055.312-.195.95-.293 1.913-.293h2.832V33.29l-6.504-11.114h-.332c-.781 0-1.315-.104-1.601-.312-.287-.209-.43-.573-.43-1.094 0-.482.117-.833.351-1.055.248-.234.626-.351 1.133-.351z" fill="#fff" stroke="none" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/range.svg b/packages/node_modules/@node-red/nodes/icons/range.svg
new file mode 100644
index 000000000..6253f01df
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/range.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M8.003 42.007h5v-18h-5zM8.003 20.006h5v-5h-5zM25 52.007h8v-29h-8zM25 15.01h8v-8h-8z" fill="#fff" stroke="none"/><path d="M15.819 15.639l6.293-2.517M15.19 42.385l7.236 3.775" fill="none" stroke="#fff" stroke-width="1.25862"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/serial.svg b/packages/node_modules/@node-red/nodes/icons/serial.svg
new file mode 100644
index 000000000..53c08c448
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/serial.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 47.5h4l.04-34.995L19.5 12.5v35h11v-35h5" fill="none" stroke="#fff" stroke-linecap="square" stroke-width="5"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/sort.svg b/packages/node_modules/@node-red/nodes/icons/sort.svg
new file mode 100644
index 000000000..6af54d712
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/sort.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M20.001 19.955l-7.5-8.178-7.5 8.178h5v28h5v-28zM35.001 39.955l-7.5 8.177-7.5-8.177h5v-28h5v28z" fill="#fff" stroke-width=".531"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/split.svg b/packages/node_modules/@node-red/nodes/icons/split.svg
new file mode 100644
index 000000000..a4609534a
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/split.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M16.001 39.99l-.032-19.957-11.968.017v19.983l12-.045M34.001 28.027l-4 .004v3.997l4-.01M40.001 28.027l-4 .004v3.997l4-.01M27.001 30.027l-7-7.986v15.986M34.001 20.027l-4 .004v3.997l4-.01M40.001 20.027l-4 .004v3.997l4-.01M34.001 36.027l-4 .004v3.997l4-.01M40.001 36.027l-4 .004v3.997l4-.01" fill="#fff" stroke-width=".612"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/subflow.svg b/packages/node_modules/@node-red/nodes/icons/subflow.svg
new file mode 100644
index 000000000..d211f94ce
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/subflow.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M25 25.94h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1h-7c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zm-17 12h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1H8c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zm-.416 11C5.624 48.94 4 47.315 4 45.356V14.522c0-1.96 1.625-3.582 3.584-3.582h24.832c1.96 0 3.584 1.623 3.584 3.582v30.834c0 1.96-1.625 3.584-3.584 3.584zM32 36.94H19c0 2.19-1.81 4-4 4H7v4.416c0 .35.235.584.584.584h24.832c.35 0 .584-.235.584-.584v-8.417zm1-2v-6h-8c-2.19 0-4-1.81-4-4h-1c-4.333-.002-8.667.004-13 0v6h8c2.19 0 4 1.81 4 4h13zm0-16v-4.418c0-.35-.235-.582-.584-.582H7.584c-.35 0-.584.233-.584.582v8.417c4.333.002 8.667.001 13 .001h1c0-2.19 1.81-4 4-4h8z" color="#000" fill="#fff"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/swap.svg b/packages/node_modules/@node-red/nodes/icons/swap.svg
new file mode 100644
index 000000000..0e67fda9c
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/swap.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M12.787 26.432L9.5 18.003h-4.5v-5h8l2.286 6.286m5.357 14.286l3.357 8.428h4v-8l7 10.5-7 10.5v-8h-7.5l-2.357-6.286"/><path d="M13.001 47.003l10.857-29h4.143v8l7-10.5-7-10.5v8h-7.5l-11 29h-4.5v5z"/></g></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/nodes/icons/switch.svg b/packages/node_modules/@node-red/nodes/icons/switch.svg
new file mode 100644
index 000000000..378e84b4b
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/switch.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 27.006v6l10.12-.014 3.023 7.728 2.357 6.286h7.5v8l7-10.5-7-10.5v8h-4l-3.357-8.429c-.475-1.267-.93-2.435-1.295-3.601l4.51-11.97H28v8l7-10.5-7-10.5v8h-7.5L15.098 27z" fill="#fff" stroke="none"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/template.svg b/packages/node_modules/@node-red/nodes/icons/template.svg
new file mode 100644
index 000000000..ad23bf31e
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/template.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M30.041 47.91v3.485h-1.5q-6.027 0-8.084-1.79-2.033-1.792-2.033-7.14V36.68q0-3.655-1.307-5.058-1.306-1.404-4.743-1.404h-1.476v-3.46h1.476q3.46 0 4.743-1.38 1.307-1.404 1.307-5.01v-5.808q0-5.349 2.033-7.116 2.057-1.79 8.083-1.79h1.501v3.46h-1.646q-3.412 0-4.453 1.065-1.04 1.065-1.04 4.477v6.002q0 3.8-1.114 5.518-1.089 1.719-3.75 2.324 2.685.653 3.775 2.371 1.089 1.719 1.089 5.494v6.002q0 3.412 1.04 4.477t4.453 1.065z" fill="#fff" stroke="#fff" stroke-width=".719"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/timer.svg b/packages/node_modules/@node-red/nodes/icons/timer.svg
new file mode 100644
index 000000000..c579cc298
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/timer.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g color="#000" transform="translate(-540 -987.36)"><path d="M565.43 1001.9c6.562 2.089 11.316 8.233 11.316 15.488 0 8.975-7.275 16.25-16.25 16.25s-16.25-7.275-16.25-16.25c0-2.802.71-5.438 1.958-7.74" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="isolation:auto;mix-blend-mode:normal"/><circle cx="560" cy="1001.4" r="1.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="isolation:auto;mix-blend-mode:normal"/><path d="M560 1014.4c-1.206 0-11-10.999-12.354-9.975S557 1016.148 557 1017.4s1.36 3 3 3 3-1.361 3-3-1.794-3-3-3z" fill="#fff"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/trigger.svg b/packages/node_modules/@node-red/nodes/icons/trigger.svg
new file mode 100644
index 000000000..a7c2d87f2
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/trigger.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 47.46h4l.04-34.995 10.96-.005v35h16" stroke="#fff" stroke-linecap="square" stroke-width="5" fill="none"/></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/watch.svg b/packages/node_modules/@node-red/nodes/icons/watch.svg
new file mode 100644
index 000000000..fb9535b2d
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/watch.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-355 -704.36)"><circle transform="translate(-43.091 -44.752) scale(.81818)" cx="505.5" cy="941.86" r="14.5" color="#000" fill="none" stroke="#fff" stroke-width="4"/><path d="M377.62 737.86l8.877 15.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="6"/></g></svg>
diff --git a/packages/node_modules/@node-red/nodes/icons/white-globe.svg b/packages/node_modules/@node-red/nodes/icons/white-globe.svg
new file mode 100644
index 000000000..474c2f9a6
--- /dev/null
+++ b/packages/node_modules/@node-red/nodes/icons/white-globe.svg
@@ -0,0 +1 @@
+<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M20 12a18 18 0 0 0-14.246 7.033l2.527.844 1.983-1.797 4.89-3.715.99.93-4.085 1.918-.063 2.416 3.22-.805c.95-.68 1.899-1.364 2.849-2.045l-.249-2.29h1.364c1.506-.517 3.013-1.032 4.52-1.548l1.341 1.325-.351 1.957-2.043-.186 1.982 2.662-2.477 1.858v-1.61l-2.29.123c-.868.66-1.735 1.322-2.602 1.983l-.371 3.343-3.096.497-1.053 2.414.494.496 1.178-.31 1.238-1.425 2.106.371 1.113 1.239c1.569.691 3.139 1.382 4.707 2.074H11.068l-1.672 1.455-.31 2.662 1.797 2.85 4.582.867.99 2.662-.371 3.096 2.105 1.61 3.281.31L25 43.158l.37-1.61.56-2.044c.495-.495.988-.991 1.484-1.486l.125-1.67-2.85-1.672-1.484-2.168 1.547.496 2.416 2.414 2.351-1.3.186-2.663-2.414-.371.123-1.332h4.644l1.424 2.2c.578.309 1.157.617 1.735.927l-.249-3.127h1.239l1.3 3.437.405-1.42A18 18 0 0 0 38 30a18 18 0 0 0-18-18zM2.957 33.809l-.518.043a18 18 0 0 0 2.676 6.238c.21-.628.418-1.256.627-1.885v-2.29L5 34.242l-2.043-.434zm25.527 12.049l-5.496 1.889a18 18 0 0 0 5.496-1.889z" color="#000" fill="#fff" style="isolation:auto;mix-blend-mode:normal"/></svg>
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/registry/lib/localfilesystem.js b/packages/node_modules/@node-red/registry/lib/localfilesystem.js
index e564475ff..947972031 100644
--- a/packages/node_modules/@node-red/registry/lib/localfilesystem.js
+++ b/packages/node_modules/@node-red/registry/lib/localfilesystem.js
@@ -372,18 +372,27 @@ function getModuleFiles(module) {
     return nodeList;
 }
 
+// If this finds an svg and a png with the same name, it will only list the svg
 function scanIconDir(dir) {
     var iconList = [];
+    var svgs = {};
     try {
         var files = fs.readdirSync(dir);
         files.forEach(function(file) {
             var stats = fs.statSync(path.join(dir, file));
-            if (stats.isFile() && iconFileExtensions.indexOf(path.extname(file)) !== -1) {
+            var ext = path.extname(file).toLowerCase();
+            if (stats.isFile() && iconFileExtensions.indexOf(ext) !== -1) {
                 iconList.push(file);
+                if (ext === ".svg") {
+                    svgs[file.substring(0,file.length-4)] = true;
+                }
             }
         });
     } catch(err) {
     }
+    iconList = iconList.filter(f => {
+        return /.svg$/i.test(f) || !svgs[f.substring(0,f.length-4)]
+    })
     return iconList;
 }
 
diff --git a/test/unit/@node-red/editor-api/lib/editor/ui_spec.js b/test/unit/@node-red/editor-api/lib/editor/ui_spec.js
index 672a9d204..2c1312524 100644
--- a/test/unit/@node-red/editor-api/lib/editor/ui_spec.js
+++ b/test/unit/@node-red/editor-api/lib/editor/ui_spec.js
@@ -33,7 +33,7 @@ describe("api/editor/ui", function() {
             nodes: {
                 getIcon: function(opts) {
                     return new Promise(function(resolve,reject) {
-                        fs.readFile(NR_TEST_UTILS.resolve("@node-red/editor-client/src/images/icons/arrow-in.png"), function(err,data) {
+                        fs.readFile(NR_TEST_UTILS.resolve("@node-red/editor-client/src/images/icons/arrow-in.svg"), function(err,data) {
                             resolve(data);
                         })
                     });
@@ -94,7 +94,7 @@ describe("api/editor/ui", function() {
             }
         }
         it('returns the requested icon', function(done) {
-            var defaultIcon = fs.readFileSync(NR_TEST_UTILS.resolve("@node-red/editor-client/src/images/icons/arrow-in.png"));
+            var defaultIcon = fs.readFileSync(NR_TEST_UTILS.resolve("@node-red/editor-client/src/images/icons/arrow-in.svg"));
             request(app)
                 .get("/icons/module/icon.png")
                 .expect("Content-Type", /image\/png/)
diff --git a/test/unit/@node-red/registry/lib/localfilesystem_spec.js b/test/unit/@node-red/registry/lib/localfilesystem_spec.js
index 41beb8df5..a9485b8ed 100644
--- a/test/unit/@node-red/registry/lib/localfilesystem_spec.js
+++ b/test/unit/@node-red/registry/lib/localfilesystem_spec.js
@@ -192,7 +192,7 @@ describe("red/nodes/registry/localfilesystem",function() {
             list["node-red"].icons[0].should.have.property("path",path.join(__dirname,"resources/local/NestedDirectoryNode/NestedNode/icons"))
             list["node-red"].icons[0].should.have.property("icons");
             list["node-red"].icons[0].icons.should.have.length(1);
-            list["node-red"].icons[0].icons[0].should.eql("arrow-in.png");
+            list["node-red"].icons[0].icons[0].should.eql("arrow-in.svg");
             done();
         });
         it("scans icons dir in library",function(done) {
@@ -297,7 +297,7 @@ describe("red/nodes/registry/localfilesystem",function() {
             nodeModule.TestNodeModule.icons.should.have.length(1);
             nodeModule.TestNodeModule.icons[0].should.have.property("path");
             nodeModule.TestNodeModule.icons[0].should.have.property("icons");
-            nodeModule.TestNodeModule.icons[0].icons[0].should.eql("arrow-in.png");
+            nodeModule.TestNodeModule.icons[0].icons[0].should.eql("arrow-in.svg");
             done();
         });
     });