diff --git a/client/assets/icons/colour.svg b/client/assets/icons/colour.svg
new file mode 100644
index 00000000..ee911e55
--- /dev/null
+++ b/client/assets/icons/colour.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.375in" height="0.555556in"
+     viewBox="0 0 99 40">
+  <path id="Unnamed"
+        fill="none" stroke="black" stroke-width="1"
+        d="M 21.18,19.55
+           C 21.18,19.55 78.55,19.55 78.55,19.55M 85.00,14.00
+           C 85.00,14.00 85.00,25.00 85.00,25.00
+             85.00,25.00 15.00,25.00 15.00,25.00
+             15.00,25.00 15.00,14.00 15.00,14.00
+             15.00,14.00 85.00,14.00 85.00,14.00 Z
+           M 85.00,14.00
+           C 85.00,14.00 85.00,25.00 85.00,25.00
+             85.00,25.00 15.00,25.00 15.00,25.00
+             15.00,25.00 15.00,14.00 15.00,14.00
+             15.00,14.00 85.00,14.00 85.00,14.00 Z
+           M 95.00,4.00
+           C 95.00,4.00 95.00,35.00 95.00,35.00
+             95.00,35.00 4.00,35.00 4.00,35.00
+             4.00,35.00 4.00,4.00 4.00,4.00
+             4.00,4.00 95.00,4.00 95.00,4.00 Z
+           M 90.00,9.00
+           C 90.00,9.00 90.00,30.00 90.00,30.00
+             90.00,30.00 9.00,30.00 9.00,30.00
+             9.00,30.00 9.00,9.00 9.00,9.00
+             9.00,9.00 90.00,9.00 90.00,9.00 Z" />
+</svg>
diff --git a/client/cryps.css b/client/cryps.css
index 59a4a83e..e6cd22ed 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -411,6 +411,12 @@ header {
     color: black;
 }
 
+.vbox-table td svg {
+    stroke-width: 1.5px;
+    height: 95%;
+    vertical-align: text-bottom;
+}
+
 .spacer {
     flex: 1 0 25%;
 }
diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx
index 1af0905d..4366f759 100644
--- a/client/src/components/shapes.jsx
+++ b/client/src/components/shapes.jsx
@@ -6,6 +6,7 @@ const saw = require('./svgs/saw');
 const square = require('./svgs/square');
 const squircle = require('./svgs/squircle');
 const triangle = require('./svgs/triangle');
+const vboxColour = require('./svgs/colour');
 
 module.exports = {
     circle,
@@ -16,4 +17,5 @@ module.exports = {
     squircle,
     triangle,
     saw,
+    vboxColour,
 };
diff --git a/client/src/components/svgs/colour.jsx b/client/src/components/svgs/colour.jsx
new file mode 100644
index 00000000..02114b34
--- /dev/null
+++ b/client/src/components/svgs/colour.jsx
@@ -0,0 +1,31 @@
+const preact = require('preact');
+
+module.exports = function triangle(classes) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" className={classes} >
+          <path id="Unnamed"
+                fill="none" strokeWidth="1px"
+                d="M 21.18,19.55
+                   C 21.18,19.55 78.55,19.55 78.55,19.55M 85.00,14.00
+                   C 85.00,14.00 85.00,25.00 85.00,25.00
+                     85.00,25.00 15.00,25.00 15.00,25.00
+                     15.00,25.00 15.00,14.00 15.00,14.00
+                     15.00,14.00 85.00,14.00 85.00,14.00 Z
+                   M 85.00,14.00
+                   C 85.00,14.00 85.00,25.00 85.00,25.00
+                     85.00,25.00 15.00,25.00 15.00,25.00
+                     15.00,25.00 15.00,14.00 15.00,14.00
+                     15.00,14.00 85.00,14.00 85.00,14.00 Z
+                   M 95.00,4.00
+                   C 95.00,4.00 95.00,35.00 95.00,35.00
+                     95.00,35.00 4.00,35.00 4.00,35.00
+                     4.00,35.00 4.00,4.00 4.00,4.00
+                     4.00,4.00 95.00,4.00 95.00,4.00 Z
+                   M 90.00,9.00
+                   C 90.00,9.00 90.00,30.00 90.00,30.00
+                     90.00,30.00 9.00,30.00 9.00,30.00
+                     9.00,30.00 9.00,9.00 9.00,9.00
+                     9.00,9.00 90.00,9.00 90.00,9.00 Z" />
+        </svg>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index c7852080..c3d347fd 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -1,7 +1,14 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
+const shapes = require('./shapes');
+
 function convertVar(v) {
+    if (['Red', 'Green', 'Blue'].includes(v)) {
+        return (
+            shapes.vboxColour(v.toLowerCase())
+        );
+    }
     return v || <span>&nbsp;</span>;
     // uncomment for double borders in vbox;
     // if (v) {