JSFiddle - React, Tailwind, and code Playground

HTML

<button aria-label="play"></button>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  padding: 50px;
  margin: 0;
  font-family: 'Neucha', cursive;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-radius: 50%;
  color: lightgray;
}

button::before {
  content: "";
  display: block;
  width: 29%;
  height: 60%;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='21' height='37' viewBox='0 0 21 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9853 20.2253C20.9382 19.2725 20.9382 17.7275 19.9853 16.7747L4.45728 1.24659C3.5044 0.293713 1.95948 0.293713 1.0066 1.24659C0.0537181 2.19947 0.0537179 3.74439 1.0066 4.69727L14.8093 18.5L1.00659 32.3027C0.0537154 33.2556 0.0537152 34.8005 1.00659 35.7534C1.95947 36.7063 3.5044 36.7063 4.45727 35.7534L19.9853 20.2253ZM17.04 20.94L18.26 20.94L18.26 16.06L17.04 16.06L17.04 20.94Z' fill='%230F0F0F'/%3E%3C/svg%3E%0A");
          mask-image: url("data:image/svg+xml,%3Csvg width='21' height='37' viewBox='0 0 21 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9853 20.2253C20.9382 19.2725 20.9382 17.7275 19.9853 16.7747L4.45728 1.24659C3.5044 0.293713 1.95948 0.293713 1.0066 1.24659C0.0537181 2.19947 0.0537179 3.74439 1.0066 4.69727L14.8093 18.5L1.00659 32.3027C0.0537154 33.2556 0.0537152 34.8005 1.00659 35.7534C1.95947 36.7063 3.5044 36.7063 4.45727 35.7534L19.9853 20.2253ZM17.04 20.94L18.26 20.94L18.26 16.06L17.04 16.06L17.04 20.94Z' fill='%230F0F0F'/%3E%3C/svg%3E%0A");
  transform: translateX(14.28%);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

button:hover {
  color: red;
}