made an svg

static/juice.css

@@ -6,8 +6,8 @@ body {
 
 .device {
 	border: 1px solid #ccc;
-	padding: 5%;
+	padding: 3%;
-	margin: 5%;
+	margin: 3%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -15,11 +15,18 @@ body {
 
 .sub_devices {
 	display: flex;
-	border: 1px solid #ccc;
 }
 
 .sub_device {
 	border: 1px solid #ccc;
 	padding: 1em;
 	margin: 1em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.outlet_image {
+	width: 5em;
+	height: 5em;
 }

static/outlet.svg

@@ -0,0 +1,30 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+	<path fill="none" stroke="red"
+		d="M 23,10
+		L 77,10
+		A 50 49 0 0 1 77,91
+		L 23,91
+		A 50 49 0 0 1 23,10
+		Z" />
+
+	<path fill="none" stroke="red"
+		d="M 29,30
+		L 35, 30
+		L 35, 51
+		L 29, 51
+		Z" />
+
+		<path fill="none" stroke="red"
+		d="M 65, 30
+		L 71, 30
+		L 71, 51
+		L 65, 51
+		Z" />
+
+		<path fill="none" stroke="red"
+		d="M 43, 75
+		A 1 1 0 0 1 57,75
+		L 57,84
+		L 43,84
+		Z" />
+</svg>

templates/index.html

@@ -18,7 +18,7 @@
 			{% for sub_dev in sub_devs %}
 			<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
 				<div class="id">{{ sub_dev.id }}</div>
-				<div class="outlet_image">OUTLET_IMAGE</div>
+				<img class="outlet_image" src="/static/outlet.svg">
 				<div class="description">{{ sub_dev.description }}</div>
 			</div>
 			{% endfor %}