diff --git a/web/gui/src/main/webapp/icons.svg b/web/gui/src/main/webapp/icons.svg
new file mode 100644
index 0000000..524594b
--- /dev/null
+++ b/web/gui/src/main/webapp/icons.svg
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
+  <symbol id="switch">
+    <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-344.44812,-517.03149)">
+      <path d="m 389.9165,532.15849 -44.64875,0 0,14.495 44.64875,0 0,-14.495 z" id="path24009" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001"/>
+      <g id="g24011" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
+        <path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24013" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g24015" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
+        <path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24017" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g24019" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
+        <path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24021" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g24023" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
+        <path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24025" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g24027" transform="matrix(1.25,0,0,-1.25,371.32312,528.42974)">
+        <path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24029" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g24031" transform="matrix(1.25,0,0,-1.25,380.07312,522.96099)">
+        <path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24033" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g24035" transform="matrix(1.25,0,0,-1.25,373.28837,526.49738)">
+        <path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24037" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g24039" transform="matrix(1.25,0,0,-1.25,379.06962,521.02863)">
+        <path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24041" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+    </g>
+  </symbol>
+  <symbol id="router">
+    <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-351.74132,-516.62992)">
+      <g id="g18775" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
+        <path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18777" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g18779" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
+        <path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18781" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g18783" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
+        <path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0" id="path18785" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g18787" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
+        <path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0 z" id="path18789" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g18791" transform="matrix(1.25,0,0,-1.25,369.75031,522.31831)">
+        <path d="m 0,0 1.518,-2.278 -5.742,-1.327 1.255,1.043 -8.875,1.518 2.227,1.669 8.563,-1.45 L 0,0 z" id="path18793" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g18795" transform="matrix(1.25,0,0,-1.25,379.85043,529.22393)">
+        <path d="M 0,0 -1.036,2.35 4.143,3.384 3.245,2.579 11.878,1.104 9.807,-0.553 1.225,1.06 0,0 z" id="path18797" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g18799" transform="matrix(1.25,0,0,-1.25,376.31043,520.76318)">
+        <path d="M 0,0 5.802,1.588 5.87,-0.898 4.42,-0.622 1.589,-2.972 -1.113,-2.576 1.809,-0.279 0,0 z" id="path18801" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g18803" transform="matrix(1.25,0,0,-1.25,373.20244,531.90095)">
+        <path d="M 0,0 -5.525,-1.035 -5.732,1.52 -4.144,1.175 -1.103,3.771 1.588,3.315 -1.658,0.483 0,0 z" id="path18805" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+    </g>
+  </symbol>
+  <symbol id="roadm">
+    <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-352.14937,-517.55019)">
+      <g id="g23883" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
+        <path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path23885" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g23887" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
+        <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23889" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g23891" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
+        <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23893" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g23895" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
+        <path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path23897" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g23899" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
+        <path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path23901" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g23903" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
+        <path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path23905" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g23907" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
+        <path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path23909" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g23911" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
+        <path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path23913" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g25718" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
+        <path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path25720" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g25722" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
+        <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25724" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g25726" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
+        <path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25728" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g25730" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
+        <path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path25732" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g25734" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
+        <path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path25736" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g25738" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
+        <path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path25740" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g25742" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
+        <path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path25744" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g25746" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
+        <path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path25748" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+    </g>
+  </symbol>
+  <symbol id="endstation">
+    <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-361.79125,-513.72074)">
+      <g id="g19723" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
+        <path d="m 0,0 -15.82,0 0,-24.512 15.82,0" id="path19725" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g19727" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
+        <path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19729" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g19731" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
+        <path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19733" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g19735" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
+        <path d="M 0,0 4.914,4.914" id="path19737" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g19739" transform="matrix(1.25,0,0,-1.25,371.85774,520.11362)">
+        <path d="M 0,0 0,-24.512" id="path19741" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g19743" transform="matrix(1.25,0,0,-1.25,372.17024,520.11362)">
+        <path d="M 0,0 5.346,4.914" id="path19745" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <path d="m 379.91712,544.47137 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-6.5625 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-15 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 1.7775,-2.795 6.68125,-6.1425" id="path19747" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+    </g>
+  </symbol>
+  <symbol id="bgpSpeaker">
+    <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-355.47362,-514.96093)">
+      <path d="m 355.72362,519.29593 34.56875,0 0,30.2175 -34.56875,0 0,-30.2175 z" id="path5104" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      <path d="m 355.72362,519.29593 34.57,0 0,30.2175 -34.57,0 0,-30.2175 z" id="path5106" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      <g id="g5108" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
+        <path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5110" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5112" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
+        <path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5114" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g5116" transform="matrix(1.25,0,0,-1.25,394.27674,545.42854)">
+        <path d="m 0,0 0,24.174 -3.186,-3.268 0,-24.174 L 0,0 z" id="path5118" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <path d="m 387.49987,522.07593  z m 6.77625,23.3525 0,-30.2175 -3.9825,4.085 0,30.2175 3.9825,-4.085 z" id="path5120" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      <g id="g5122" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
+        <path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5124" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5126" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
+        <path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5128" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g5130" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
+        <path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0" id="path5132" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5134" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
+        <path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0 z" id="path5136" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+      </g>
+      <g id="g5138" transform="matrix(1.25,0,0,-1.25,370.46387,529.32993)">
+        <path d="m 0,0 0.828,-1.241 -3.128,-0.723 0.683,0.569 -4.834,0.828 1.213,0.908 4.665,-0.79 L 0,0 z" id="path5140" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5142" transform="matrix(1.25,0,0,-1.25,375.96798,533.09218)">
+        <path d="M 0,0 -0.565,1.279 2.257,1.844 1.767,1.404 6.47,0.602 5.341,-0.301 0.668,0.577 0,0 z" id="path5144" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5146" transform="matrix(1.25,0,0,-1.25,374.03937,528.48281)">
+        <path d="M 0,0 3.16,0.865 3.198,-0.488 2.408,-0.339 0.865,-1.617 -0.606,-1.403 0.986,-0.151 0,0 z" id="path5148" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+      <g id="g5150" transform="matrix(1.25,0,0,-1.25,372.34687,534.54968)">
+        <path d="M 0,0 -3.01,-0.564 -3.123,0.828 -2.258,0.64 -0.601,2.055 0.865,1.807 -0.903,0.264 0,0 z" id="path5152" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
+      </g>
+    </g>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/index2.html b/web/gui/src/main/webapp/index2.html
index ce09aab..24aeee3 100644
--- a/web/gui/src/main/webapp/index2.html
+++ b/web/gui/src/main/webapp/index2.html
@@ -40,12 +40,14 @@
     <!-- Base library and framework stylesheets included here -->
     <link rel="stylesheet" href="base.css">
     <link rel="stylesheet" href="onos2.css">
+    <link rel="stylesheet" href="onos_theme.css">
     <link rel="stylesheet" href="mast2.css">
     <link rel="stylesheet" href="floatPanel.css">
 
     <!-- This is where contributed stylesheets get INJECTED -->
     <!-- TODO: replace with template marker and inject refs server-side -->
     <link rel="stylesheet" href="topo2.css">
+    <link rel="stylesheet" href="topo_theme.css">
     <link rel="stylesheet" href="webSockTrace.css">
 
 
@@ -56,7 +58,7 @@
     <script src="onos2.js"></script>
 
 </head>
-<body>
+<body class='theme_dark'>
     <div id="frame">
         <div id="mast">
             <!-- NOTE: masthead injected here by mast.js -->
diff --git a/web/gui/src/main/webapp/onos_theme.css b/web/gui/src/main/webapp/onos_theme.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/web/gui/src/main/webapp/onos_theme.css
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index d14b966..7ee73c6 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -25,14 +25,11 @@
 }
 
 #topo #map {
-    stroke-width: 2px;
-    stroke: #aaaaaa;
     fill: transparent;
 }
 
 
 #topo svg .glyph {
-    fill: white;
     stroke: none;
 }
 
@@ -68,39 +65,20 @@
 
 #topo svg .node.device.fixed rect {
     stroke-width: 1.5;
-    stroke: #ccc;
+}
+
+#topo .node text {
+    font-weight: 100;
 }
 
 /* note: device is offline without the 'online' class */
-#topo svg .node.device {
-    fill: #777;
-}
-
-#topo svg .node.device.switch.online {
-    fill: #17f;
-}
-
-#topo svg .node.device.roadm.online {
-    fill: #03c;
-}
-
 /* note: device is offline without the 'online' class */
 #topo svg .node.device text {
-    fill: #aaa;
     font: 10pt sans-serif;
 }
 
-#topo svg .node.device.online text {
-    fill: white;
-}
-
-
 /* Host Nodes */
 
-#topo svg .node.host {
-    stroke: #000;
-}
-
 #topo svg .node.host text {
     fill: #846;
     stroke: none;
@@ -127,29 +105,23 @@
 }
 
 #topo svg .link.primary {
-    stroke: #f11;
     stroke-width: 6px;
 }
 #topo svg .link.secondary {
-    stroke: rgba(255,100,100,0.5);
     stroke-width: 4px;
 }
 #topo svg .link.animated {
-    stroke: #f11;
     stroke-width: 10px;
     stroke-dasharray: 8 8
 }
 
 #topo svg .link.primary.optical {
-    stroke: #74f;
     stroke-width: 6px;
 }
 #topo svg .link.secondary.optical {
-    stroke: rgba(128,64,255,0.5);
     stroke-width: 4px;
 }
 #topo svg .link.animated.optical {
-    stroke: #74f;
     stroke-width: 10px;
     stroke-dasharray: 8 8
 }
@@ -205,17 +177,13 @@
     cursor: pointer;
     width: 50%;
     text-align: center;
-
-    /* theme specific... */
-    border: 1px solid #ddf;
-    color: #99f;
+    border-width: 1px;
+    borer-style: solid;
 }
 
 #topo-detail .actionBtn:hover {
-    /* theme specific... */
-    border: 1px solid #ddf;
-    background: #eef;
-    color: #77d;
+    border-width: 1px;
+    border-style: solid;
 }
 
 
@@ -239,29 +207,14 @@
     height: 80px;
     margin: 4px 0;
     cursor: pointer;
-
-    /* theme-related */
-    color: #444;
-    background-color: #ccc;
-    border: 2px solid #aaa;
-}
-
-#topo-oibox .onosInst.online {
-    /* theme-related */
-    color: #113;
-    background-color: #bbf;
-    border: 2px solid #555;
+    border-width: 2px;
+    border-style: solid;
 }
 
 #topo-oibox .onosInst .onosTitle {
     text-align: center;
     font-size: 11pt;
     margin-top: 6px;
-    color: #888;
-}
-
-#topo-oibox .onosInst.online .onosTitle {
-    color: black;
 }
 
 #topo-oibox .onosInst img {
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 66366c7..f818e2f 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -70,23 +70,17 @@
             }
         },
         topo: {
-            linkBaseColor: '#666',
             linkInColor: '#66f',
-            linkInWidth: 14,
             linkOutColor: '#f00',
+            linkInWidth: 14,
             linkOutWidth: 30
         },
-        icons: {
-            w: 28,
-            h: 28,
-            xoff: -12,
-            yoff: -8
+        map: {
+            strokeWidth: 1
         },
-        iconUrl: {
-            device: 'img/device.png',
-            host: 'img/host.png',
-            pkt: 'img/pkt.png',
-            opt: 'img/opt.png'
+        icons: {
+            w: 100,
+            h: 100
         },
         force: {
             note_for_links: 'link.type is used to differentiate',
@@ -532,8 +526,7 @@
         }
         el.transition()
             .duration(1000)
-            .attr('stroke-width', linkScale(lw))
-            .attr('stroke', config.topo.linkBaseColor);
+            .attr('stroke-width', linkScale(lw));
     }
 
     // ==============================
@@ -1234,8 +1227,8 @@
         $.extend(node, xy);
     }
 
-    function iconUrl(d) {
-        return 'img/' + d.type + '.png';
+    function getIconUrl(d) {
+        return 'icons.svg#' + d.type;
     }
 
     // returns the newly computed bounding box of the rectangle
@@ -1277,6 +1270,29 @@
         return (label && label.trim()) ? label : '.';
     }
 
+    function updateDeviceIconAppearance(node, box, animate) {
+        var u = node.select('use');
+        var ubbox = u.node().getBBox();
+
+        var xoff = -ubbox.width/2 - box.width/2 - 4;
+        var yoff = -ubbox.height;
+        var iconTransform = 'translate(' + xoff + ',' + yoff + ')';
+        if (animate) {
+            node.select('use')
+                .transition()
+                .attr('transform', iconTransform);
+        } else {
+            node.select('use')
+                .attr('transform', iconTransform);
+        }
+
+        var computedStyle = window.getComputedStyle(node.node());
+        u.attr({
+            fill: computedStyle.fill,
+            color: computedStyle.color
+        });
+    }
+
     function updateDeviceLabel(d) {
         var label = niceLabel(deviceLabel(d)),
             node = d.el,
@@ -1294,10 +1310,7 @@
             .transition()
             .attr(box);
 
-        node.select('image')
-            .transition()
-            .attr('x', box.x + config.icons.xoff)
-            .attr('y', box.y + config.icons.yoff);
+        updateDeviceIconAppearance(node, box, true);
     }
 
     function updateHostLabel(d) {
@@ -1339,18 +1352,6 @@
         }
     }
 
-    function addHostIcon(node, radius, iconId) {
-        var dim = radius * 1.5,
-            xlate = -dim / 2;
-
-        node.append('use')
-            .classed('glyph', true)
-            .attr('transform', translate(xlate,xlate))
-            .attr('xlink:href', '#' + iconId)
-            .attr('width', dim)
-            .attr('height', dim);
-    }
-
     function updateNodes() {
         node = nodeG.selectAll('.node')
             .data(network.nodes, function (d) { return d.id; });
@@ -1377,7 +1378,7 @@
         // augment device nodes...
         entering.filter('.device').each(function (d) {
             var node = d3.select(this),
-                icon = iconUrl(d),
+                iconUrl = getIconUrl(d),
                 label = niceLabel(deviceLabel(d)),
                 box;
 
@@ -1399,18 +1400,17 @@
             node.select('rect')
                 .attr(box);
 
-            if (icon) {
-                var cfg = config.icons;
-                node.append('svg:image')
+            if (iconUrl) {
+                node.append('svg:use')
                     .attr({
-                        x: box.x + config.icons.xoff,
-                        y: box.y + config.icons.yoff,
-                        width: cfg.w,
-                        height: cfg.h,
-                        'xlink:href': icon
+                        'xlink:href': iconUrl,
+                        width: config.icons.w,
+                        height: config.icons.h
                     });
             }
 
+            updateDeviceIconAppearance(node, box, false);
+
             // debug function to show the modelled x,y coordinates of nodes...
             if (debug('showNodeXY')) {
                 node.select('rect').attr('fill-opacity', 0.5);
@@ -1424,36 +1424,43 @@
             }
         });
 
-        // TODO: better place for this configuration state
-        var defaultHostRadius = 9,
-            hostRadius = {
-                bgpSpeaker: 20
-            },
-            hostIcon = {
-                bgpSpeaker: 'bullhorn'
-            };
-
-
         // augment host nodes...
         entering.filter('.host').each(function (d) {
             var node = d3.select(this),
-                r = hostRadius[d.type] || defaultHostRadius,
-                textDy = r + 10,
-                icon = hostIcon[d.type];
+                iconUrl = getIconUrl(d);
 
             // provide ref to element from backing data....
             d.el = node;
 
-            node.append('circle')
-                .attr('r', r);
+            // var box = node.append('circle')
+            //     .attr('r', r).node().getBBox();
 
-            if (icon) {
-                addHostIcon(node, r, icon);
+            var textYOff = 0;
+            var textXOff = 0;
+            if (iconUrl) {
+                var computedStyle = window.getComputedStyle(node.node());
+                var u = node.append('svg:use')
+                    .attr({
+                        'xlink:href': iconUrl,
+                        width: config.icons.w,
+                        height: config.icons.h,
+                        fill: computedStyle.fill,
+                        color: computedStyle.color
+                    });
+
+                var ubbox = node.select('use').node().getBBox();
+                u.attr('y', -ubbox.height/2);
+                textYOff = ubbox.height/2 + 4; // pad by 4 pixels
+                textXOff = ubbox.width/2;
             }
 
+
+
             node.append('text')
                 .text(hostLabel)
-                .attr('dy', textDy)
+                .attr('alignment-baseline', 'text-before-edge')
+                .attr('x', textXOff)
+                .attr('y', textYOff)
                 .attr('text-anchor', 'middle');
 
             // debug function to show the modelled x,y coordinates of nodes...
@@ -1492,9 +1499,9 @@
                 .style('opacity', 0);
             // note, leave <g>.remove to remove this element
 
-            node.select('circle')
-                .style('stroke-fill', '#555')
-                .style('fill', '#888')
+            node.select('use')
+                .style('color', '#aaa')
+                .style('fill', '#000')
                 .style('opacity', 0.5)
                 .transition()
                 .duration(1500)
@@ -1817,7 +1824,7 @@
     function zoomPan(scale, translate) {
         zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
         // keep the map lines constant width while zooming
-        bgImg.style("stroke-width", 2.0 / scale + "px");
+        bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
     }
 
     function resetZoomPan() {
@@ -1934,6 +1941,27 @@
         gly.defBullhorn(defs);
     }
 
+    // create references to bring these into cache so that getBBox() works when they
+    // are inserted later
+    function preloadIcons(svg) {
+        var icons = [
+            "router",
+            "switch",
+            "roadm",
+            "endstation",
+            "bgpSpeaker"
+        ];
+
+        var g = svg.append('g');
+        for (var icon in icons) {
+        g.append('use')
+                    .attr({
+                        'xlink:href': 'icons.svg#' + icon
+                    });
+        }
+        g.style('visibility', 'hidden');
+    }
+
     // ==============================
     // View life-cycle callbacks
 
@@ -1950,6 +1978,7 @@
         setSize(svg, view);
 
         loadGlyphs(svg);
+        preloadIcons(svg);
 
         zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
         setupZoomPan();
@@ -2046,7 +2075,7 @@
                     width: config.birdDim,
                     height: config.birdDim,
                     fill: '#111'
-                })
+                });
     }
 
     function para(sel, text) {
@@ -2161,11 +2190,13 @@
             .translate(t);
 
         bgImg = zoomPanContainer.insert("g", '#topo-G');
-        bgImg.attr('id', 'map').selectAll('path')
-            .data(topoData.features)
-            .enter()
-            .append('path')
-            .attr('d', path);
+        // pointer-events: none so that browser select tools don't pick up the map svg
+        bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none')
+            .selectAll('path')
+                .data(topoData.features)
+                .enter()
+                .append('path')
+                .attr('d', path);
     }
 
     function resize(view, ctx, flags) {
diff --git a/web/gui/src/main/webapp/topo_theme.css b/web/gui/src/main/webapp/topo_theme.css
new file mode 100644
index 0000000..9bb2fd7
--- /dev/null
+++ b/web/gui/src/main/webapp/topo_theme.css
@@ -0,0 +1,107 @@
+.theme_dark #topo {
+    background-color: #20201D;
+}
+
+.theme_dark #topo #map {
+    stroke: #444;
+}
+
+/* note: device is offline without the 'online' class */
+.theme_dark #topo svg .node.device {
+    fill: #777;
+}
+
+.theme_dark #topo .host {
+    fill: #000;
+    color: white;
+}
+
+
+.theme_dark #topo svg .node.device.switch.online {
+    fill: #000;
+}
+
+.theme_dark #topo svg .node.device.roadm.online {
+    fill: #03c;
+}
+
+/* note: device is offline without the 'online' class */
+.theme_dark #topo svg .node.device text {
+    fill: #aaa;
+}
+
+.theme_dark #topo svg .node.device.online {
+    color: white;
+}
+.theme_dark #topo svg .node.device.online text {
+    fill: currentColor;
+}
+
+.theme_dark #topo svg .glyph {
+    fill: white;
+}
+
+.theme_dark #topo-oibox .onosInst {
+    color: #444;
+    background-color: #ccc;
+    border-color: #aaa;
+}
+
+.theme_dark #topo-oibox .onosInst.online {
+    color: #113;
+    background-color: #bbf;
+    border-color: #555;
+}
+
+.theme_dark #topo-oibox .onosInst .onosTitle {
+    color: #888;
+}
+
+.theme_dark #topo svg .node.device.fixed.online rect {
+    stroke: #666;
+}
+
+.theme_dark #topo svg .node.host {
+    stroke: #000;
+}
+
+.theme_dark #topo-detail .actionBtn {
+    border-color: #ddf;
+    color: #99f;
+}
+
+.theme_dark #topo-detail .actionBtn:hover {
+    border-color: #ddf;
+    background: #eef;
+    color: #77d;
+}
+
+.theme_dark #topo svg .link.primary {
+    stroke: #f11;
+}
+
+.theme_dark #topo svg .link.secondary {
+    stroke: rgba(255,100,100,0.5);
+}
+
+.theme_dark #topo svg .link.animated {
+    stroke: #f11;
+}
+
+.theme_dark #topo svg .link.primary.optical {
+    stroke: #74f;
+}
+
+.theme_dark #topo svg .link.secondary.optical {
+    stroke: rgba(128,64,255,0.5);
+}
+
+.theme_dark #topo svg .link.animated.optical {
+    stroke: #74f;
+}
+
+/*.theme_dark #topo .link {
+    stroke: #666;
+}
+*/
+