JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<div class="button" />

SCSS

$primary: blue;
$arrow-color: $primary;

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  background: #dbc81a;
}

.button:after {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22' fill='none'><path d='M1.20005 1.40039L10.8 11.0004L1.20005 20.6004' stroke='#{$arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 12px;
  background-position: center center;
  background-repeat: no-repeat;
}