diff --git a/resources/help/analog_all.svg b/resources/help/analog_all.svg
new file mode 100644
index 0000000000..40285fcbef
--- /dev/null
+++ b/resources/help/analog_all.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 "/>
+<polygon id="analog_left" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 "/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+<polygon id="analog_down" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 "/>
+</svg>
diff --git a/resources/help/analog_leftright.svg b/resources/help/analog_leftright.svg
new file mode 100644
index 0000000000..4c28cd9327
--- /dev/null
+++ b/resources/help/analog_leftright.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 
+	"/>
+<polygon id="analog_down" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 "/>
+<polygon id="analog_left" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 
+	"/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+</svg>
diff --git a/resources/help/analog_updown.svg b/resources/help/analog_updown.svg
new file mode 100644
index 0000000000..82e39d06d0
--- /dev/null
+++ b/resources/help/analog_updown.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 "/>
+<polygon id="analog_down" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 
+	"/>
+<polygon id="analog_left" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 "/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+</svg>
diff --git a/resources/help/button_guide.svg b/resources/help/button_guide.svg
new file mode 100644
index 0000000000..f5bc6dfb18
--- /dev/null
+++ b/resources/help/button_guide.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M14.9,17.4c0.7,0,1.4,0.2,2.2,0.7l0.2,0.1l1-2.6L18,15.5c-1.1-0.6-2.2-0.9-3.3-0.9c-1.9,0-3.4,0.7-4.5,2
+		s-1.6,3-1.6,5.3c0,2.4,0.5,4.1,1.4,5.3c1,1.3,2.3,1.9,4,1.9c1.4,0,2.8-0.3,4-0.8l0.2-0.1v-7.4h-4.9v2.8h1.8v2.7
+		c-0.4,0.1-0.7,0.1-1.1,0.1c-0.7,0-1.3-0.4-1.7-1.1c-0.4-0.8-0.6-2-0.6-3.4c0-1.5,0.3-2.6,0.9-3.3C13.2,17.8,13.9,17.4,14.9,17.4z"
+		/>
+	<path fill="#FFFFFF" d="M26.1,24.2c0,0.8-0.1,1.4-0.4,1.8s-0.6,0.6-1.1,0.6c-0.4,0-1.6,0-1.6-2.4V15h-3.1v9c0,1.7,0.4,3,1.2,3.9
+		c0.8,0.9,2,1.4,3.4,1.4c1.5,0,2.8-0.5,3.5-1.4c0.8-0.9,1.2-2.2,1.2-3.8V15h-3.1V24.2z"/>
+	<rect x="31.7" y="14.9" fill="#FFFFFF" width="3" height="14.2"/>
+	<path fill="#FFFFFF" d="M41.3,14.9h-4V29H41c1.9,0,3.3-0.6,4.3-1.9c1-1.2,1.5-3,1.5-5.3c0-2.2-0.5-3.8-1.5-5.1
+		C44.4,15.5,43,14.9,41.3,14.9z M42.9,25.3c-0.4,0.7-1.1,1.1-2,1.1h-0.6v-8.8h0.8c1.6,0,2.4,1.4,2.4,4.3
+		C43.6,23.4,43.4,24.5,42.9,25.3z"/>
+	<polygon fill="#FFFFFF" points="55.4,17.6 55.4,14.9 48.4,14.9 48.4,29 55.4,29 55.4,26.3 51.6,26.3 51.6,23 55.1,23 55.1,20.4 
+		51.6,20.4 51.6,17.6 	"/>
+</g>
+<g id="outline_south">
+	<path fill="#FFFFFF" d="M32,54c-6.1,0-11-4.9-11-11s4.9-11,11-11s11,4.9,11,11S38.1,54,32,54z"/>
+</g>
+</svg>
diff --git a/resources/help/button_home.svg b/resources/help/button_home.svg
new file mode 100644
index 0000000000..7091e92c81
--- /dev/null
+++ b/resources/help/button_home.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="outline_south">
+	<path fill="#FFFFFF" d="M32,54c-6.1,0-11-4.9-11-11s4.9-11,11-11s11,4.9,11,11S38.1,54,32,54z"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M18.07,29.1h-2.84v-6.26h-3.75v6.26H8.65V14.82h2.84v5.67h3.75v-5.67h2.84V29.1H18.07z"/>
+	<path fill="#FFFFFF" d="M30.77,21.95c0,2.36-0.47,4.18-1.42,5.45s-2.3,1.9-4.06,1.9c-1.77,0-3.12-0.63-4.07-1.9
+		s-1.42-3.09-1.42-5.47c0-2.36,0.47-4.18,1.42-5.44s2.31-1.89,4.09-1.89c1.76,0,3.11,0.63,4.05,1.9
+		C30.3,17.77,30.77,19.58,30.77,21.95z M22.7,21.95c0,1.63,0.22,2.87,0.66,3.72s1.08,1.28,1.93,1.28c1.71,0,2.57-1.67,2.57-5
+		s-0.85-5-2.55-5c-0.86,0-1.51,0.42-1.95,1.27C22.92,19.07,22.7,20.31,22.7,21.95z"/>
+	<path fill="#FFFFFF" d="M37.95,29.1l-2.9-12.16h-0.11c0.13,0.94,0.2,1.8,0.2,2.58v9.58H32.5V14.82h4.36l2.61,11.22h0.08l2.59-11.22
+		h4.43V29.1h-2.69v-9.68c0-0.8,0.05-1.62,0.15-2.46h-0.08l-2.9,12.14H37.95z"/>
+	<path fill="#FFFFFF" d="M55.35,29.1h-6.88V14.82h6.88v2.3h-4.04v3.4h3.75v2.31h-3.75v3.96h4.04V29.1z"/>
+</g>
+</svg>
diff --git a/resources/help/button_l2.svg b/resources/help/button_l2.svg
new file mode 100644
index 0000000000..822d28bdaf
--- /dev/null
+++ b/resources/help/button_l2.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline_1_" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2_1_" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path fill="#FFFFFF" d="M2.1,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2.1z M30.3,40.6h-8.4V23.4H26v13.9h4.3V40.6z
+	 M43.2,40.6h-9.8V38l3-4.3c0.4-0.6,0.7-1,0.9-1.4c0.2-0.3,0.5-0.8,0.7-1.3c0.5-1,0.8-1.9,0.8-2.9c0-0.5-0.1-0.9-0.3-1.2
+	c-0.2-0.3-0.4-0.4-0.8-0.4c-0.4,0-0.7,0.2-1.1,0.5c-0.3,0.3-0.6,0.6-0.9,0.8c-0.2,0.3-0.4,0.4-0.4,0.5l-2-2.3
+	c0.8-0.9,1.6-1.5,2.3-1.9c0.8-0.4,1.6-0.6,2.6-0.6c1.5,0,2.7,0.4,3.5,1.2s1.2,2,1.2,3.4c0,0.9-0.2,1.9-0.5,2.7
+	c-0.3,0.9-0.8,1.7-1.4,2.6c-0.6,0.8-1.6,2.2-3,4h5.2V40.6z"/>
+</svg>
diff --git a/resources/help/button_r2.svg b/resources/help/button_r2.svg
new file mode 100644
index 0000000000..374b756c92
--- /dev/null
+++ b/resources/help/button_r2.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M25.2,26.6h-0.3v4.3h0.3c0.5,0,0.9-0.2,1.2-0.6c0.2-0.4,0.4-0.9,0.4-1.7c0-0.8-0.1-1.3-0.4-1.6
+		C26.1,26.8,25.7,26.6,25.2,26.6z"/>
+	<path fill="#FFFFFF" d="M2.1,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2.1z M27.8,40.6l-2.6-6.5H25v6.5h-4.1V23.4h4.5
+		c1.9,0,3.3,0.4,4.2,1.3s1.3,2.2,1.3,3.9c0,2-0.7,3.5-2.1,4.4l3.3,7.5h-4.3V40.6z M43.2,40.6h-9.8V38l3-4.3c0.4-0.6,0.7-1,0.9-1.4
+		c0.2-0.3,0.5-0.8,0.7-1.3c0.5-1,0.8-1.9,0.8-2.9c0-0.5-0.1-0.9-0.3-1.2c-0.2-0.3-0.4-0.4-0.8-0.4c-0.4,0-0.7,0.2-1.1,0.5
+		c-0.3,0.3-0.6,0.6-0.9,0.8c-0.2,0.3-0.4,0.4-0.4,0.5l-2-2.3c0.8-0.9,1.6-1.5,2.3-1.9c0.8-0.4,1.6-0.6,2.6-0.6
+		c1.5,0,2.7,0.4,3.5,1.2c0.8,0.8,1.2,2,1.2,3.4c0,0.9-0.2,1.9-0.5,2.7c-0.3,0.9-0.8,1.7-1.4,2.6c-0.6,0.8-1.6,2.2-3,4h5.2V40.6z"/>
+</g>
+</svg>
diff --git a/resources/help/button_zl.svg b/resources/help/button_zl.svg
new file mode 100644
index 0000000000..10ceb57349
--- /dev/null
+++ b/resources/help/button_zl.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="button_lt" fill="#FFFFFF" d="M2,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2z M31.7,40.6H21.1V38l6.2-11.3h-6.1
+	v-3.2h10.2v2.7l-6.2,11.3h6.4v3.1H31.7z M34.5,23.4h4.1v13.9h4.3v3.2h-8.4V23.4z"/>
+</svg>
diff --git a/resources/help/button_zr.svg b/resources/help/button_zr.svg
new file mode 100644
index 0000000000..8b3f9e1d52
--- /dev/null
+++ b/resources/help/button_zr.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="button_rt" fill="#FFFFFF" d="M2,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2z M30.4,40.6H19.9V38l6.2-11.3H20
+	v-3.2h10.2v2.7L24,37.4h6.4V40.6z M32.9,23.4h4.5c1.9,0,3.3,0.4,4.2,1.3s1.3,2.2,1.3,3.9c0,2-0.7,3.5-2.1,4.4l3.3,7.5h-4.3L37.2,34
+	H37v6.5h-4.1V23.4z M37,26.6v4.3h0.3c0.5,0,0.9-0.2,1.2-0.6c0.2-0.4,0.4-0.9,0.4-1.7c0-0.8-0.1-1.3-0.4-1.6
+	c-0.2-0.3-0.6-0.5-1.2-0.5H37V26.6z"/>
+</svg>
diff --git a/resources/help/buttons_east_blank.svg b/resources/help/buttons_east_blank.svg
new file mode 100644
index 0000000000..9e531abe13
--- /dev/null
+++ b/resources/help/buttons_east_blank.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_east" fill="#FFFFFF" d="M50,22c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S55.5,22,50,22z"/>
+</svg>
diff --git a/resources/help/buttons_east_psx.svg b/resources/help/buttons_east_psx.svg
new file mode 100644
index 0000000000..4ea5ac119e
--- /dev/null
+++ b/resources/help/buttons_east_psx.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2;}
+</style>
+<path id="circle_1_" class="st0" d="M50,21c-6,0-11,5-11,11s5,11,11,11s11-5,11-11S56,21,50,21z M50,24.5c4.1,0,7.5,3.3,7.5,7.5
+	s-3.3,7.5-7.5,7.5s-7.5-3.3-7.5-7.5S45.9,24.5,50,24.5z M50,26.1c-3.3,0-5.9,2.6-5.9,5.9s2.6,5.9,5.9,5.9s5.9-2.6,5.9-5.9
+	S53.3,26.1,50,26.1z"/>
+<circle id="outline_north" class="st1" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st1" cx="14" cy="32" r="10"/>
+<circle id="outline_north_1_" class="st1" cx="32" cy="50" r="10"/>
+</svg>
diff --git a/resources/help/buttons_east_xbox.svg b/resources/help/buttons_east_xbox.svg
new file mode 100644
index 0000000000..3277ce3362
--- /dev/null
+++ b/resources/help/buttons_east_xbox.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_south" class="st1" d="M50,22c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S55.5,22,50,22z M46.5,26.3h3.2
+	c1.3,0,2.2,0.2,2.8,0.7s0.9,1.2,0.9,2.3c0,0.7-0.2,1.2-0.5,1.7c-0.2,0.3-0.5,0.6-0.9,0.7c0.6,0.2,1,0.5,1.2,1c0.3,0.4,0.4,1,0.4,1.7
+	c0,1.1-0.3,1.9-0.9,2.5c-0.6,0.6-1.4,0.9-2.4,0.9h-3.7V26.3z M49.1,28.4v2.3h0.6c0.3,0,0.5-0.1,0.7-0.3c0.1-0.2,0.2-0.5,0.2-0.9
+	c0-0.4-0.1-0.7-0.2-0.9c-0.1-0.2-0.4-0.3-0.7-0.3C49.6,28.4,49.1,28.4,49.1,28.4z M49.1,32.8v2.8h0.7c0.6,0,0.9-0.5,0.9-1.4
+	c0-0.9-0.3-1.3-1-1.3H49.1z"/>
+</svg>
diff --git a/resources/help/buttons_north_blank.svg b/resources/help/buttons_north_blank.svg
new file mode 100644
index 0000000000..5b16e82f2c
--- /dev/null
+++ b/resources/help/buttons_north_blank.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_north" fill="#FFFFFF" d="M32,4c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,4,32,4z"/>
+</svg>
diff --git a/resources/help/buttons_north_psx.svg b/resources/help/buttons_north_psx.svg
new file mode 100644
index 0000000000..4f59b5973f
--- /dev/null
+++ b/resources/help/buttons_north_psx.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_triangle" class="st1" d="M32,3c-6,0-11,4.9-11,11s5,11,11,11s11-5,11-11S38,3,32,3z M32,5.8c0.3,0,0.5,0.1,0.7,0.4
+	l6.3,11.5c0.2,0.3,0.1,0.9-0.3,1.1C38.5,19,38.4,19,38.3,19H25.7c-0.4,0-0.8-0.3-0.8-0.8c0-0.1,0-0.2,0.1-0.3l6.3-11.6
+	C31.5,5.9,31.7,5.8,32,5.8L32,5.8z M32,8.2l-5,9.1H37L32,8.2L32,8.2z"/>
+</svg>
diff --git a/resources/help/buttons_north_xbox.svg b/resources/help/buttons_north_xbox.svg
new file mode 100644
index 0000000000..ab5540ecde
--- /dev/null
+++ b/resources/help/buttons_north_xbox.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_west" class="st1" d="M32,4c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,4,32,4z M28,8.3h2.9l1.2,3.5
+	c0.4-1.1,0.8-2.3,1.2-3.5H36l-2.7,6.8v4.6h-2.7v-4.5L28,8.3z"/>
+</svg>
diff --git a/resources/help/buttons_south_blank.svg b/resources/help/buttons_south_blank.svg
new file mode 100644
index 0000000000..902facfe9f
--- /dev/null
+++ b/resources/help/buttons_south_blank.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_south" fill="#FFFFFF" d="M32,40c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,40,32,40z"/>
+</svg>
diff --git a/resources/help/buttons_south_psx.svg b/resources/help/buttons_south_psx.svg
new file mode 100644
index 0000000000..449d155f7a
--- /dev/null
+++ b/resources/help/buttons_south_psx.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_xing" class="st1" d="M32,39c-6,0-11,5-11,11s5,11,11,11s11-5,11-11S38,39,32,39z M26.5,43.7c0.2,0,0.4,0.1,0.5,0.2
+	l5,5l5-5c0.1-0.1,0.3-0.2,0.5-0.2c0.4,0,0.8,0.3,0.8,0.8c0,0.2-0.1,0.4-0.2,0.5l-5,5l5,5c0.3,0.3,0.3,0.8,0,1.1s-0.8,0.3-1.1,0l0,0
+	l-5-5l-5,5c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.8,0-1.1l0,0l4.9-5L26,45c-0.3-0.3-0.3-0.8,0-1.1C26.1,43.8,26.3,43.7,26.5,43.7z"
+	/>
+</svg>
diff --git a/resources/help/buttons_south_xbox.svg b/resources/help/buttons_south_xbox.svg
new file mode 100644
index 0000000000..beefc2cc05
--- /dev/null
+++ b/resources/help/buttons_south_xbox.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_east" class="st1" d="M32,40c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,40,32,40z M30.3,44.3h3.4
+	l2.8,11.5h-2.8l-0.6-2.8h-2.3l-0.6,2.8h-2.7L30.3,44.3z M32,47.8c-0.1,0.4-0.3,1.4-0.7,3h1.3L32,47.8z"/>
+</svg>
diff --git a/resources/help/buttons_west_blank.svg b/resources/help/buttons_west_blank.svg
new file mode 100644
index 0000000000..375dfddb53
--- /dev/null
+++ b/resources/help/buttons_west_blank.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_west" fill="#FFFFFF" d="M14,22C8.5,22,4,26.5,4,32s4.5,10,10,10s10-4.5,10-10S19.5,22,14,22z"/>
+</svg>
diff --git a/resources/help/buttons_west_psx.svg b/resources/help/buttons_west_psx.svg
new file mode 100644
index 0000000000..15d0c01acb
--- /dev/null
+++ b/resources/help/buttons_west_psx.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_square" class="st1" d="M14,21C7.9,21,3,26,3,32s4.9,11,11,11s11-5,11-11S20,21,14,21z M8.5,25.7h11
+	c0.4,0,0.8,0.3,0.8,0.8v11c0,0.4-0.3,0.8-0.8,0.8h-11c-0.4,0-0.8-0.3-0.8-0.8v-11C7.7,26.1,8.1,25.7,8.5,25.7z M9.3,27.3v9.5h9.5
+	v-9.5C18.7,27.3,9.3,27.3,9.3,27.3z"/>
+</svg>
diff --git a/resources/help/buttons_west_xbox.svg b/resources/help/buttons_west_xbox.svg
new file mode 100644
index 0000000000..834c0f5558
--- /dev/null
+++ b/resources/help/buttons_west_xbox.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_north" class="st1" d="M14,22C8.5,22,4,26.5,4,32s4.5,10,10,10s10-4.5,10-10S19.5,22,14,22z M10.1,26.3h2.8l1.2,2.9
+	l1-2.9h2.8l-2.4,5.6l2.6,5.8h-2.8l-1.3-3.3l-1.2,3.3H9.9l2.6-5.9L10.1,26.3z"/>
+</svg>
diff --git a/resources/input_joypad_filled.svg b/resources/input_joypad_filled.svg
new file mode 100644
index 0000000000..7fd845cd85
--- /dev/null
+++ b/resources/input_joypad_filled.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#AAAAAA" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8
+			c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9H32.9c-7.1,0-13.2,3.2-17.2,8.4
+			c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9l1.7-5.4h49.5L90.6,82.4z"/>
+	</g>
+	<path fill="#AAAAAA" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+	<path fill="#AAAAAA" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+</g>
+<g>
+	<g>
+		<g>
+			<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9
+				c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9
+				H32.9c-7.1,0-13.2,3.2-17.2,8.4c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9"
+				/>
+			<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M56.4,77h15.2"/>
+		</g>
+		<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+		<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+	</g>
+	<g>
+		<polygon fill="#777777" points="38.3,56.9 31.6,56.9 31.6,63.8 26.4,63.8 26.4,56.9 19.3,56.9 19.3,51.7 26.2,51.7 26.2,44.8 
+			31.4,44.8 31.4,51.7 38.3,51.7 		"/>
+		<g>
+			<circle fill="#777777" cx="88.6" cy="54.3" r="4"/>
+			<path fill="#777777" d="M97.3,67.1c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C101.3,65.3,99.5,67.1,97.3,67.1z"/>
+			<path fill="#777777" d="M97.3,49.8c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S99.5,49.8,97.3,49.8z"/>
+			<path fill="#777777" d="M105.9,58.3c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C110.1,56.5,108.1,58.3,105.9,58.3z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#777777" d="M59.6,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,1,1.5,2.1
+					C61.1,63,60.6,63.7,59.6,63.7z"/>
+				<path fill="#777777" d="M74.5,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,0.7,1.5,2.1
+					C76,63.3,75.4,63.7,74.5,63.7z"/>
+			</g>
+			<circle fill="#777777" cx="64" cy="47.8" r="5"/>
+		</g>
+	</g>
+	<path fill="#777777" d="M46.6,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S49.3,74.9,46.6,74.9z"/>
+	<path fill="#777777" d="M81.4,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S84.1,74.9,81.4,74.9z"/>
+</g>
+</svg>
diff --git a/resources/input_joypad_unfilled.svg b/resources/input_joypad_unfilled.svg
new file mode 100644
index 0000000000..5559d505d6
--- /dev/null
+++ b/resources/input_joypad_unfilled.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9
+				c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9
+				H32.9c-7.1,0-13.2,3.2-17.2,8.4c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9"
+				/>
+			<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M56.4,77h15.2"/>
+		</g>
+		<path fill="#AAAAAA" d="M46.6,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S49.3,74.9,46.6,74.9z"/>
+		<path fill="#AAAAAA" d="M81.4,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S84.1,74.9,81.4,74.9z"/>
+		<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+		<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+	</g>
+	<g>
+		<polygon fill="#AAAAAA" points="38.3,56.9 31.6,56.9 31.6,63.8 26.4,63.8 26.4,56.9 19.3,56.9 19.3,51.7 26.2,51.7 26.2,44.8 
+			31.4,44.8 31.4,51.7 38.3,51.7 		"/>
+		<g>
+			<circle fill="#AAAAAA" cx="88.6" cy="54.3" r="4"/>
+			<path fill="#AAAAAA" d="M97.3,67.1c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C101.3,65.3,99.5,67.1,97.3,67.1z"/>
+			<path fill="#AAAAAA" d="M97.3,49.8c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S99.5,49.8,97.3,49.8z"/>
+			<path fill="#AAAAAA" d="M105.9,58.3c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C110.1,56.5,108.1,58.3,105.9,58.3z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#AAAAAA" d="M59.6,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,1,1.5,2.1
+					C61.1,63,60.6,63.7,59.6,63.7z"/>
+				<path fill="#AAAAAA" d="M74.5,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,0.7,1.5,2.1
+					C76,63.3,75.4,63.7,74.5,63.7z"/>
+			</g>
+			<circle fill="#AAAAAA" cx="64" cy="47.8" r="5"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/resources/input_keyboard_filled.svg b/resources/input_keyboard_filled.svg
new file mode 100644
index 0000000000..f765296b8c
--- /dev/null
+++ b/resources/input_keyboard_filled.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<path fill="#AAAAAA" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M111.8,36.5H16.1c-4.3,0-7.6,3.2-7.6,6.8v47.1
+		c0,3.9,3.5,6.8,7.6,6.8H112c4.3,0,7.6-3.2,7.6-6.8V43.3C119.4,39.6,116.1,36.5,111.8,36.5z"/>
+	<g>
+		<path fill="#777777" d="M85.1,89.8H42.9c-1,0-1.9-0.9-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h42.3c1,0,1.9,0.9,1.9,1.9v3.7
+			C86.9,88.9,86.1,89.8,85.1,89.8z"/>
+		<g>
+			<path fill="#777777" d="M20.6,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<path fill="#777777" d="M93.9,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#777777" d="M73.4,70.4c0-1.1,0.8-1.9,1.9-1.9H79c1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M60.2,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M47,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M33.8,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M99.9,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M86.6,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9C86.6,74.2,86.6,70.4,86.6,70.4z"/>
+				<path fill="#777777" d="M20.6,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+			</g>
+			<g>
+				<path fill="#777777" d="M80.1,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9H82
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M66.9,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M53.5,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M40.4,58.2c0-1.1,0.8-1.9,1.9-1.9H46c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9C40.4,61.9,40.4,58.2,40.4,58.2z"/>
+				<path fill="#777777" d="M93.2,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M27.2,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9H29
+					c-1.1,0-1.9-0.9-1.9-1.9C27.2,61.9,27.2,58.2,27.2,58.2z"/>
+			</g>
+			<g>
+				<path fill="#777777" d="M67.6,49.6c0,1.1-0.8,1.9-1.9,1.9H62c-1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M80.9,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9H79
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M94.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M107.4,49.6c0,1.1-0.8,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1.1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M41.2,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M54.5,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9C54.5,45.9,54.5,49.6,54.5,49.6z"/>
+				<path fill="#777777" d="M28.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/resources/input_keyboard_unfilled.svg b/resources/input_keyboard_unfilled.svg
new file mode 100644
index 0000000000..8407c9afe5
--- /dev/null
+++ b/resources/input_keyboard_unfilled.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M111.8,36.5H16.1c-4.3,0-7.6,3.2-7.6,6.8v47.1
+		c0,3.9,3.5,6.8,7.6,6.8H112c4.3,0,7.6-3.2,7.6-6.8V43.3C119.4,39.6,116.1,36.5,111.8,36.5z"/>
+	<g>
+		<path fill="#AAAAAA" d="M85.1,89.8H42.9c-1,0-1.9-0.9-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h42.3c1,0,1.9,0.9,1.9,1.9v3.7
+			C86.9,88.9,86.1,89.8,85.1,89.8z"/>
+		<g>
+			<path fill="#AAAAAA" d="M20.6,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<path fill="#AAAAAA" d="M93.9,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#AAAAAA" d="M73.4,70.4c0-1.1,0.8-1.9,1.9-1.9H79c1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M60.2,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M47,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M33.8,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M99.9,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M86.6,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9C86.6,74.2,86.6,70.4,86.6,70.4z"/>
+				<path fill="#AAAAAA" d="M20.6,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+			</g>
+			<g>
+				<path fill="#AAAAAA" d="M80.1,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9H82
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M66.9,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M53.5,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M40.4,58.2c0-1.1,0.8-1.9,1.9-1.9H46c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9C40.4,61.9,40.4,58.2,40.4,58.2z"/>
+				<path fill="#AAAAAA" d="M93.2,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M27.2,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9H29
+					c-1.1,0-1.9-0.9-1.9-1.9C27.2,61.9,27.2,58.2,27.2,58.2z"/>
+			</g>
+			<g>
+				<path fill="#AAAAAA" d="M67.6,49.6c0,1.1-0.8,1.9-1.9,1.9H62c-1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M80.9,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9H79
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M94.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M107.4,49.6c0,1.1-0.8,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1.1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M41.2,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M54.5,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9C54.5,45.9,54.5,49.6,54.5,49.6z"/>
+				<path fill="#AAAAAA" d="M28.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/resources/star_half_filled.svg b/resources/star_half_filled.svg
new file mode 100644
index 0000000000..1cd5963c36
--- /dev/null
+++ b/resources/star_half_filled.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<path fill="#777777" d="M51.2,17.1c-5.3,0-12.4,25.5-16.7,28.7c-4.3,3.1-30.8,2-32.4,7c-1.6,5,20.5,19.7,22.1,24.7s-7.6,29.9-3.3,33
+	s25-13.4,30.4-13.4v-80H51.2z"/>
+<path fill="none" stroke="#777777" stroke-width="4" stroke-linejoin="round" d="M51.2,17.1c-5.3,0-12.4,25.5-16.7,28.7
+	c-4.3,3.1-30.8,2-32.4,7c-1.6,5,20.5,19.7,22.1,24.7s-7.6,29.9-3.3,33s25-13.4,30.4-13.4s26.1,16.5,30.4,13.4c4.3-3.1-5-28-3.3-33
+	s23.7-19.7,22.1-24.7s-28.1-3.9-32.4-7C63.6,42.6,56.5,17.1,51.2,17.1z"/>
+</svg>