From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 18 Jan 2023 11:00:24 +0000 (+0100)
Subject: snes button icons
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=18759929710746d45d0f69e4f09205db3ddc74af;p=alttp.git

snes button icons
---

diff --git a/public/icon/dpad-d.svg b/public/icon/dpad-d.svg
new file mode 100644
index 0000000..5643bd2
--- /dev/null
+++ b/public/icon/dpad-d.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-d.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-dl.svg b/public/icon/dpad-dl.svg
new file mode 100644
index 0000000..79aefea
--- /dev/null
+++ b/public/icon/dpad-dl.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-dl.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-dr.svg b/public/icon/dpad-dr.svg
new file mode 100644
index 0000000..df5bbb8
--- /dev/null
+++ b/public/icon/dpad-dr.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-dr.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-l.svg b/public/icon/dpad-l.svg
new file mode 100644
index 0000000..6da61e2
--- /dev/null
+++ b/public/icon/dpad-l.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-l.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-r.svg b/public/icon/dpad-r.svg
new file mode 100644
index 0000000..af6ba8c
--- /dev/null
+++ b/public/icon/dpad-r.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-r.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-u.svg b/public/icon/dpad-u.svg
new file mode 100644
index 0000000..92430f8
--- /dev/null
+++ b/public/icon/dpad-u.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-u.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-ul.svg b/public/icon/dpad-ul.svg
new file mode 100644
index 0000000..c1bab1b
--- /dev/null
+++ b/public/icon/dpad-ul.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-ul.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad-ur.svg b/public/icon/dpad-ur.svg
new file mode 100644
index 0000000..4d4387d
--- /dev/null
+++ b/public/icon/dpad-ur.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad-ur.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="16"
+     inkscape:cx="48.8125"
+     inkscape:cy="31.3125"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/public/icon/dpad.svg b/public/icon/dpad.svg
new file mode 100644
index 0000000..f013f75
--- /dev/null
+++ b/public/icon/dpad.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="dpad.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="22.627417"
+     inkscape:cx="36.902135"
+     inkscape:cy="16.882174"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="3829"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1462" />
+    <sodipodi:guide
+       position="6.35,12.7"
+       orientation="1,0"
+       id="guide1464" />
+    <sodipodi:guide
+       position="0,6.35"
+       orientation="0,-1"
+       id="guide1466" />
+    <sodipodi:guide
+       position="4.4979167,6.6145833"
+       orientation="1,0"
+       id="guide1468" />
+    <sodipodi:guide
+       position="8.2020833,6.8791667"
+       orientation="1,0"
+       id="guide1470" />
+    <sodipodi:guide
+       position="7.14375,8.2020833"
+       orientation="0,-1"
+       id="guide1472" />
+    <sodipodi:guide
+       position="6.8791667,4.4979167"
+       orientation="0,-1"
+       id="guide1474" />
+    <sodipodi:guide
+       position="1.5875,6.35"
+       orientation="1,0"
+       id="guide1476" />
+    <sodipodi:guide
+       position="11.1125,6.0854167"
+       orientation="1,0"
+       id="guide1478" />
+    <sodipodi:guide
+       position="7.9375,11.1125"
+       orientation="0,-1"
+       id="guide1480" />
+    <sodipodi:guide
+       position="6.6145833,1.5875"
+       orientation="0,-1"
+       id="guide1482" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     id="layer1">
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path846"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="6.0854168"
+       inkscape:label="Circle" />
+    <path
+       style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+       id="path3425"
+       inkscape:label="Cross" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4284"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="35"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="-0.32328764"
+       inkscape:label="Right" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4288"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="35"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="0.32328764"
+       inkscape:label="Down" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4292"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="13"
+       sodipodi:cy="24"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="3.1415927"
+       sodipodi:arg2="4.1887902"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-x="0.3232878"
+       inkscape:label="Left" />
+    <path
+       sodipodi:type="star"
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4476"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="24"
+       sodipodi:cy="13"
+       sodipodi:r1="5"
+       sodipodi:r2="2.5"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.52359878"
+       inkscape:rounded="0.01"
+       inkscape:randomized="0"
+       d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+       transform="scale(0.26458333)"
+       inkscape:transform-center-y="-0.3232878"
+       inkscape:label="Up" />
+    <circle
+       style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4507"
+       cx="6.3499999"
+       cy="6.3499999"
+       r="1.0583333"
+       inkscape:label="Center" />
+  </g>
+</svg>
diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index c8528e1..83e5b90 100644
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -41,6 +41,125 @@ h1 {
 	}
 }
 
+.snes-button-a,
+.snes-button-b,
+.snes-button-x,
+.snes-button-y {
+	display: inline-block;
+	width: 1.5em;
+	height: 0;
+	padding: .75em 0;
+	box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
+	border-radius: .75em;
+	font-size: 90%;
+	font-weight: bold;
+	text-align: center;
+	text-transform: uppercase;
+	line-height: 0;
+}
+.snes-button-a {
+	background: #c1121c;
+	color: white;
+}
+.snes-button-b {
+	background: #f7ba0b;
+	color: black;
+}
+.snes-button-x {
+	background: #00387b;
+	color: white;
+}
+.snes-button-y {
+	background: #007243;
+	color: white;
+}
+.snes-shoulder-l,
+.snes-shoulder-r {
+	display: inline-block;
+	width: 3em;
+	height: 0;
+	padding: .75em 0;
+	box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
+	border-radius: .75em;
+	font-size: 90%;
+	font-weight: bold;
+	text-align: center;
+	text-transform: uppercase;
+	line-height: 0;
+	background: #b2b4b2;
+	color: #54585a;
+}
+.snes-start,
+.snes-select {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	vertical-align: middle;
+	font-size: 50%;
+	text-transform: uppercase;
+
+	&::before {
+		display: inline-block;
+		content: '';
+		background: #54585a;
+		width: 2em;
+		height: 0.7em;
+		border-radius: 0.35em;
+		transform: rotate(-40deg);
+		margin-bottom: 0.75em;
+		border: thin solid black;
+	}
+}
+.snes-dpad,
+.snes-dpad-r,
+.snes-dpad-dr,
+.snes-dpad-d,
+.snes-dpad-dl,
+.snes-dpad-l,
+.snes-dpad-ul,
+.snes-dpad-u,
+.snes-dpad-ur {
+	display: inline-block;
+
+	&::before {
+		display: inline-block;
+		content: '';
+		width: 2em;
+		height: 2em;
+		margin-right: 0.5ex;
+		vertical-align: middle;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+
+	&.compact {
+		position: relative;
+		> span {
+			display: none;
+			position: absolute;
+			left: -50%;
+			top: -125%;
+			background: $dark;
+			padding: 0.5ex 1ex;
+			white-space: nowrap;
+		}
+		&:active > span,
+		&:focus > span,
+		&:hover > span {
+			display: block;
+		}
+	}
+}
+.snes-dpad::before { background-image: url(/icon/dpad.svg); }
+.snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
+.snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
+.snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
+.snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
+.snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
+.snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
+.snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
+.snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }
+
 .spoiler {
 	border-radius: 0.5ex;
 	padding: 0 0.5ex;