JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="display:none;"><symbol id="circle" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C115.39 0 0 115.39 0 256s115.39 256 256 256 256-115.39 256-256S396.61 0 256 0z"/></symbol></svg>

<button type="button" class="dark">
  <svg><use href="#circle"></use></svg>
  Login dark
</button>

<button type="button" class="light">
  <svg><use href="#circle"></use></svg>
  Login light
</button>

CSS

button {
  display: inline-flex;
  align-items: center;
  border: 1px solid #333;
  padding: .8rem 1.2rem;
  font-size: 1rem;
}
button.dark {
  background-color: #222;
  color: #eeeded;
}
button.light {
  background-color: #eee;
  color: #222;
}

svg {
  width: 1em;
  height: 1em;
  margin-inline-end: .5rem;
}