diff --git a/components/controls.jsx b/components/controls.jsx
index 36e7285..57e2a42 100644
--- a/components/controls.jsx
+++ b/components/controls.jsx
@@ -10,22 +10,30 @@ const Controls = ({ playerState, onPause, onPlay, onRestart }) => {
       <div className="player-controls">
         {playerState === PLAYING && (
           <a onClick={onPause} title="Pause">
-            ⏸
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+            </svg>
           </a>
         )}
         {playerState === PAUSED && (
           <a onClick={onPlay} title="Play">
-            ▶
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
+            </svg>
           </a>
         )}
         {[PLAYING, PAUSED].includes(playerState) && (
           <a onClick={onRestart} title="Von Vorne">
-            ⏮
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
+            </svg>
           </a>
         )}
         {playerState === ENDED && (
           <a onClick={onPlay} title="Play">
-            ▶
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
+            </svg>
           </a>
         )}
       </div>
diff --git a/components/player.jsx b/components/player.jsx
index 780e347..7979311 100644
--- a/components/player.jsx
+++ b/components/player.jsx
@@ -45,10 +45,14 @@ const Player = ({ hidden }) => {
       <div className={hidden ? "hidden" : undefined}>
         <div id="player" />
       </div>
-      {hidden && playerState === -1 && <span>🎶 Titel laden...</span>}
+      {hidden && playerState === -1 && <span>Titel laden...</span>}
       {hidden && playerState > -1 && (
         <Fragment>
-          <span>🎶 Titel spielt</span>
+          <span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" fill="currentColor">
+              <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
+            </svg>{' '}
+            Titel spielt</span>
           <Controls
             playerState={playerState}
             onPause={onPause}
diff --git a/components/showdoordialog.jsx b/components/showdoordialog.jsx
index 2f82fb1..e0567bc 100644
--- a/components/showdoordialog.jsx
+++ b/components/showdoordialog.jsx
@@ -22,8 +22,10 @@ const ShowDoorDialog = () => {
   return (
     <div className="door-mask" onClick={handleClose}>
       <div className="door" onClick={event => event.stopPropagation()}>
-        <a className="door-close" onClick={handleClose}>
-          ❌
+        <a className="door-close" onClick={handleClose} title="Schließen">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="25px">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
         </a>
         <h1>Türchen {openSongIndex + 1}</h1>
         <Player hidden={!showSolution} />