JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />

    <link
      href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

<div class="search__filters__option">
  <div class="filter__icon"><i class="fas fa-dog"></i></div>
  Animaux autorisés
</div>

CSS

* {
  font-family: "Raleway", sans-serif;
}

.search__filters__option {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 15px;
  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  -moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  text-align: center;
  border-radius: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.search__filters__option:hover {
  background-color: #deebff;
  color: #0065fc;
  cursor: pointer;
}

.filter__icon {
  margin-right: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: #0065fc;
  background-color: #deebff;
  display: flex;
  justify-content: center;
  align-items: center;
}