diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index bdaded8..29e555d 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -61,10 +61,12 @@
             return {
                 restrict: 'A',
                 scope: {
-                    iconId: '@'
+                    iconId: '@',
+                    iconSize: '@'
                 },
                 link: function (scope, element, attrs) {
-                    is.loadEmbeddedIcon(d3.select(element[0]), scope.iconId);
+                    is.loadEmbeddedIcon(d3.select(element[0]),
+                                        scope.iconId, scope.iconSize);
                 }
             };
 
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index a05493d..20d8440 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -23,20 +23,50 @@
 }
 
 svg.embeddedIcon .icon .glyph {
- stroke: none;
- fill: white;
- fill-rule: evenodd;
+    stroke: none;
+    fill: white;
+    fill-rule: evenodd;
 }
 
-svg.embeddedIcon .icon.deviceOnline {
- fill: green;
+div.inline-icon {
+    display: inline-block;
 }
 
-svg.embeddedIcon .icon.deviceOffline {
- fill: darkred;
+.light svg.embeddedIcon .icon.deviceOnline {
+    fill: green;
+}
+.light svg.embeddedIcon .icon.deviceOffline {
+    fill: darkred;
 }
 
+.dark svg.embeddedIcon .icon.deviceOnline,
+.dark svg.embeddedIcon .icon.deviceOffline {
+    fill: #ccc;
+}
+.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+    fill: green;
+}
+.dark svg.embeddedIcon .icon.deviceOffline .glyph {
+    fill: darkred;
+}
+
+.light svg.embeddedIcon .icon.tableColSortAsc .glyph,
+.light svg.embeddedIcon .icon.tableColSortDesc .glyph {
+    fill: black;
+}
+.dark svg.embeddedIcon .icon.tableColSortAsc .glyph,
+.dark svg.embeddedIcon .icon.tableColSortDesc .glyph {
+    fill: #ccc;
+}
+
+svg.embeddedIcon .icon.tableColSortAsc rect {
+    stroke: none;
+    fill: none;
+}
 svg.embeddedIcon .icon rect {
- stroke: black;
- stroke-width: 1px;
+    stroke: black;
+    stroke-width: 1px;
+}
+.dark svg.embeddedIcon .icon rect {
+    stroke: #ccc;
 }
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 45e77ce..d8c2584 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -89,12 +89,14 @@
                     rx: cornerSize
                 });
 
-                g.append('use').attr({
-                    width: vboxSize,
-                    height: vboxSize,
-                    'class': 'glyph',
-                    'xlink:href': '#' + gid
-                });
+                if (gid !== '-') {
+                    g.append('use').attr({
+                        width: vboxSize,
+                        height: vboxSize,
+                        'class': 'glyph',
+                        'xlink:href': '#' + gid
+                    });
+                }
             }
 
             function loadEmbeddedIcon(div, iconCls, size) {
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 754aae9..08b40ec 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -7,7 +7,12 @@
         <thead>
             <tr>
                 <th></th>
-                <th>URI</th>
+                <th>URI
+                    <div class="inline-icon"
+                         icon icon-id="tableColSortAsc"
+                         icon-size="10">
+                    </div>
+                </th>
                 <th>Vendor</th>
                 <th>Hardware Version</th>
                 <th>Software Version</th>
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
index bb203a7..c887c79 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
@@ -65,13 +65,14 @@
         checkElemSize(rect, gsz);
         expect(rect.attr('rx')).toEqual('5');
 
-        var use = g.select('use');
-        expect(use.classed('glyph')).toBeTruthy();
-        expect(use.attr('xlink:href')).toEqual(useHref);
-        checkElemSize(use, gsz);
+        if (useHref) {
+            var use = g.select('use');
+            expect(use.classed('glyph')).toBeTruthy();
+            expect(use.attr('xlink:href')).toEqual(useHref);
+            checkElemSize(use, gsz);
+        }
     }
 
-
     it('should load an icon into a div', function () {
         expect(d3Elem.html()).toEqual('');
         is.loadIcon(d3Elem, 'deviceOnline');
@@ -84,4 +85,22 @@
         verifyIconStructure('deviceOffline', '#xMark', '32');
     });
 
+    it('should verify triangleUp icon', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortAsc', 10);
+        verifyIconStructure('tableColSortAsc', '#triangleUp', '10');
+    });
+
+    it('should verify triangleDown icon', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortDesc', 10);
+        verifyIconStructure('tableColSortDesc', '#triangleDown', '10');
+    });
+
+    it('should verify no icon is displayed', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortNone', 10);
+        verifyIconStructure('tableColSortNone', null, '10');
+    });
+
 });