diff --git a/data/images/view-toggle-icon-artist-active.svg b/data/images/view-toggle-icon-artist-active.svg
new file mode 100644
index 000000000..2901f1675
--- /dev/null
+++ b/data/images/view-toggle-icon-artist-active.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="94px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-artist-active</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <path d="M53,12 L87,12" id="path-1"></path>
+        <path d="M53,32 L87,32" id="path-2"></path>
+        <path d="M53,54 L87,54" id="path-3"></path>
+        <path d="M53,76 L87,76" id="path-4"></path>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+        <use id="Line" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(255,255,255)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-artist-inactive.svg b/data/images/view-toggle-icon-artist-inactive.svg
new file mode 100644
index 000000000..0dd34ffee
--- /dev/null
+++ b/data/images/view-toggle-icon-artist-inactive.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="94px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-artist-inactive</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <path d="M53,12 L87,12" id="path-1"></path>
+        <path d="M53,32 L87,32" id="path-2"></path>
+        <path d="M53,54 L87,54" id="path-3"></path>
+        <path d="M53,76 L87,76" id="path-4"></path>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <use id="Line" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-grid-active.svg b/data/images/view-toggle-icon-grid-active.svg
new file mode 100644
index 000000000..5398d0d0a
--- /dev/null
+++ b/data/images/view-toggle-icon-grid-active.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="93px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-grid-active</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+        <path d="M49,2 L49,42 L89,42 L89,2 L49,2 Z M49,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+        <path d="M49,47 L49,87 L89,87 L89,47 L49,47 Z M49,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(255,255,255)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-grid-inactive.svg b/data/images/view-toggle-icon-grid-inactive.svg
new file mode 100644
index 000000000..5dd3dfff5
--- /dev/null
+++ b/data/images/view-toggle-icon-grid-inactive.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="93px" height="93px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>Slice 1</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs></defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M4,2 L4,42 L44,42 L44,2 L4,2 Z M4,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M49,2 L49,42 L89,42 L89,2 L49,2 Z M49,2" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M4,47 L4,87 L44,87 L44,47 L4,47 Z M4,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+        <path d="M49,47 L49,87 L89,87 L89,47 L49,47 Z M49,47" id="Rectangle 2" stroke="rgb(167,167,167)" stroke-width="1" fill="rgb(0,0,0)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-list-active.svg b/data/images/view-toggle-icon-list-active.svg
new file mode 100644
index 000000000..eeb7b1be8
--- /dev/null
+++ b/data/images/view-toggle-icon-list-active.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="71px" height="71px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-list-active</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <path d="M7,5 L64,5" id="path-1"></path>
+        <path d="M7,25 L64,25" id="path-2"></path>
+        <path d="M7,43 L64,43" id="path-3"></path>
+        <path d="M7,62 L64,62" id="path-4"></path>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <use id="Line" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(254,254,254)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-icon-list-inactive.svg b/data/images/view-toggle-icon-list-inactive.svg
new file mode 100644
index 000000000..a43f1ea36
--- /dev/null
+++ b/data/images/view-toggle-icon-list-inactive.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="71px" height="71px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-icon-list-inactive</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <path d="M7,5 L64,5" id="path-1"></path>
+        <path d="M7,25 L64,25" id="path-2"></path>
+        <path d="M7,43 L64,43" id="path-3"></path>
+        <path d="M7,62 L64,62" id="path-4"></path>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <use id="Line" xlink:href="#path-1"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-1"></use>
+        <use id="Line" xlink:href="#path-2"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-2"></use>
+        <use id="Line" xlink:href="#path-3"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-3"></use>
+        <use id="Line" xlink:href="#path-4"></use>
+        <use id="Line-1" stroke="rgb(74,74,74)" stroke-width="6" stroke-linecap="square" fill="none" xlink:href="#path-4"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-inactive-centre.svg b/data/images/view-toggle-inactive-centre.svg
new file mode 100644
index 000000000..6cce0a3df
--- /dev/null
+++ b/data/images/view-toggle-inactive-centre.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-inactive-right</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="173.920641%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M0,0 L0,38 L38,38 L38,0 L0,0 Z M0,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-inactive-left.svg b/data/images/view-toggle-inactive-left.svg
new file mode 100644
index 000000000..b9c816acd
--- /dev/null
+++ b/data/images/view-toggle-inactive-left.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-inactive-left</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="173.920641%" id="linearGradient-1">
+            <stop stop-color="rgb(255,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-inactive-right.svg b/data/images/view-toggle-inactive-right.svg
new file mode 100644
index 000000000..9f7fd9395
--- /dev/null
+++ b/data/images/view-toggle-inactive-right.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-inactive-right</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="173.920641%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-pressed-centre.svg b/data/images/view-toggle-pressed-centre.svg
new file mode 100644
index 000000000..c873f7f8c
--- /dev/null
+++ b/data/images/view-toggle-pressed-centre.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-pressed-center</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="173.920641%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M0,0 L0,38 L38,38 L38,0 L0,0 Z M0,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-pressed-left.svg b/data/images/view-toggle-pressed-left.svg
new file mode 100644
index 000000000..e412c3713
--- /dev/null
+++ b/data/images/view-toggle-pressed-left.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-pressed-left</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="173.920641%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/data/images/view-toggle-pressed-right.svg b/data/images/view-toggle-pressed-right.svg
new file mode 100644
index 000000000..6dd1ba919
--- /dev/null
+++ b/data/images/view-toggle-pressed-right.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>view-toggle-pressed-right</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="173.920641%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,255)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(223,223,223)" fill-rule="evenodd">
+        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(167,167,167)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
\ No newline at end of file