Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

 

const Radio = ({  active,  children,  onChange}) => {  return (           {           onChange();         }}      />      {children}      );};

[class^="filter__label"] {
     position: relative;  display: inline-block;  padding-left: 16px;  color: rgba(236,240,241,0.3);}[class^="filter__label"]:hover {
     color: #ccc;}.filter__radio:checked + [class^="filter__label"] {
     color: #fff;}[class^="filter__label"]::before,.filter__label--all::after {
     content: '';  position: absolute;  top: 5px;  left: 0;  background: #647380;  display: block;  width: 10px;  height: 10px;  border-radius: 5px;  box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);}.filter__radio {
     position: absolute;  opacity: 0;}.filter__label--all {
     padding-left: 21px;}.filter__label--all::after {
     left: 5px;}.filter__radio:checked + .filter__label--all::before {
     background: #af544f;}.filter__radio:checked + .filter__label--all::after {
     background: #16a085;}.filter__radio:checked + .filter__label--active::before {
     background: #af544f;}.filter__radio:checked + .filter__label--completed::before {
     background: #16a085;}@media only screen and (min-width: 730px) {
     .container {    max-width: 720px;    justify-content: flex-end;  }  .todo-app {
       border-radius: 4px 4px 0 0;  }  .todo-list {
       order: -1;    flex-direction: column;  }  [class^="todo-list__item"] {
       box-shadow: 0 1px 0 0 #e6e6e6, 0 2px 0 0 white;  }  .filters {
       border-radius: 3px 3px 0 0;    order: 0;  }}