diff --git a/CSS/main.css b/CSS/main.css
index 0fcd899..47a292b 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -14,6 +14,21 @@ html {
   box-sizing: inherit;
 }
 
+
+.icon_play{
+  width: 0;
+  height: 0;
+    border-top: 8vmin solid transparent;
+    border-bottom: 8vmin solid transparent;
+    border-left: 13vmin solid white;
+}
+.icon_pause{
+ width: 12vmin;
+ height: 12vmin;
+ border-left: 4vmin solid white;
+ border-right: 4vmin solid white;
+}
+
 .invisible{
   visibility: hidden;
 }
@@ -146,6 +161,9 @@ body{
  
 }
 .track-controls__button_play{
+ display: flex;
+ justify-content: center;
+ align-items: center;
  font-size: 4rem;
  width: 30vmin;
  height: 30vmin;
diff --git a/audio.js b/audio.js
index 77b6f0e..383d6c2 100644
--- a/audio.js
+++ b/audio.js
@@ -22,7 +22,7 @@ export function getAudioWidget(saints){
  const $nextTrackButton = $$('button').text('>').addClass('player-controls__button player-controls__button_track_next');
  if(saintLen < 2) $nextTrackButton.hide();
  const $trackControls = $$('div').addClass('track_controls')
- const $trackPlayButton = $$('button').html('<div>►</div>').addClass('track-controls__button track-controls__button_play ')
+ const $trackPlayButton = $$('button').html('<div class="icon_play"></div>').addClass('track-controls__button track-controls__button_play ')
  const $trackPlayButtonSpinner = $$('div').addClass('spinner track-controls__button-spinner_play')
 
  //functions
@@ -32,8 +32,8 @@ export function getAudioWidget(saints){
  }
  
  function updateButton() {
-  const icon = $playerAudio[0].paused ? '►' : '❚ ❚';
-  $trackPlayButton.html(`<div>${icon}</div>`);
+  const icon = $playerAudio[0].paused ? '<div class="icon_play"></div>' : '<div class="icon_pause"></div>';
+  $trackPlayButton.html(icon);
  }
  
  function resetTime(){