JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label>
  <span>Что-то</span>
  <input type="radio" name="toster">
  <icon></icon>
</label>

<label>
  <span>типа</span>
  <input type="radio" name="toster">
  <icon></icon>
</label>

<label>
  <span>такого?</span>
  <input type="radio" name="toster">
  <icon></icon>
</label>

CSS

body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

label {
  width: 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  margin: 0.25rem 0;
}

input { display: none; }

icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: 'FontAwesome';
  width: 1.25rem;
  height: 1.25rem;
}

icon::after, icon::before {
  position: absolute;
  transition: 0.5s;
}

icon::after {
  content: '\f08a';
}

icon::before {
  content: '\f004';
  transform: scale(0);
}

input:checked + icon {
  color: deeppink;
}

input:checked + icon::before {
  transform: scale(1);
}