diff --git a/css/style.css b/css/style.css
index 26f99f7..dbec084 100644
--- a/css/style.css
+++ b/css/style.css
@@ -354,15 +354,17 @@ a.btn-play, a.btn-play:hover, a.btn-play:focus {
     padding: 10px 30px;
 }
 a.btn-play:before {
-    content: "▶︎";
-    font-size: 1.1em;
+    content: "";
+    background: url('../img/play.svg') no-repeat center center;
+    font-size: 1em;
+    height: 30px;
+    left: 0;
     position: absolute;
-    left: 10px;
+    top: 5px;
+    width: 30px;
 }
 a.btn-play.playing:before {
-    content: "▩";
-    font-size: 1.2em;
-    top: 7px;
+    background: url('../img/stop.svg') no-repeat center center;
 }
 .btn:active,
 a.btn:active {
diff --git a/img/play.svg b/img/play.svg
new file mode 100644
index 0000000..6d27f5e
--- /dev/null
+++ b/img/play.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
+    <polygon points="50,40 100,70 100,70 50,100, 50,40" fill="#FDFEFE"></polygon>
+</svg>
diff --git a/img/stop.svg b/img/stop.svg
new file mode 100644
index 0000000..bb46176
--- /dev/null
+++ b/img/stop.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
+    <polygon points="45,45 95,45 95,95, 45,95 45,45" fill="#FDFEFE"></polygon>
+</svg>