<div class="element relative pa3 flex items-center justify-center">
      <span class="obj "></span>
      <span class="foo"></span>
      <span class="bar"></span>
      <span class="hoge"></span>
      <span class="huga"></span>
      <span class="piyo"></span>
   </div>

.element span {
  color: #4a4a4e;
  text-decoration: none;
  transition: .2s;
  font-family: "Font Awesome 5 Free";
}
.element span:before {
  font-family: "Font Awesome 5 Free";
  font-size: 3rem;
  transition: .2s all;
  opacity: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: Gradient 1s ease-in-out infinite;
  background-size: 200% 200%;
}

.element .obj,
.element .obj:before{
   content: "\f25b";
}
.element .obj:before{
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.element .foo,
.element .foo:before{
   content: "\f2b9";
}
.element .foo:before{
  background-color: #ddd;
  background-image: linear-gradient(45deg, #aaa 0%, #555 52%, #000 90%);
}
.element .bar,
.element .bar:before{
   content: "\f28d"
}
.element .bar:before{
  background-color: red;
  background-image: linear-gradient(45deg, orange 0%, yellow 52%, #ffd700 90%);
}
.element .hoge,
.element .hoge:before{
 content: "\f2d0"
}
.element .hoge:before{
  background-color: #ddd;
  background-image: linear-gradient(45deg, #895b8a 0%, #f6bfbc 52%, #80aba9 90%);
}
.element .huga,
.element .huga:before{
  content: "\f2bd"
}
.element .huga:before{
   background-color: #ddd;
  background-image: linear-gradient(45deg, #4169e1 0%, #1e90ff 52%, #add8e6 90%);
}
.element .piyo,
.element .piyo:before{
   content: "\f059"
}
.element .piyo:before{
   background-color: #ddd;
  background-image: linear-gradient(45deg, #00ff7f 0%, #00ff00 52%, #6b8e23 90%);
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}