copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-spinner" style="font-size: 32px; color: #00f0ff;"></i></div>

<!-- CSS code -->
.icon {
 animation: load 1 1s linear;
}

@keyframes load {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-circle-notch" style="font-size: 32px; color:#f39c12;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-gear" style="font-size: 32px; color:#3498db;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-sync" style="font-size:32px; color: #27ae60;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-fan" style="font-size: 32px; color:#1abc9c;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-yin-yang" style="font-size: 32px; color:#ecf0f1;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-compact-disc" style="font-size: 32px; color:#e74c3c;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-arrow-rotate-right" style="font-size: 32px; color:#2ecc71;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-arrow-rotate-right" style="font-size: 32px; color:#2ecc71;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-sun loader" style="font-size: 32px; color:#f1c40f;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-atom" style="font-size: 32px; color:#e67e22;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}
copy
<!-- HTML code -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<div class="icon"><i class="fa-solid fa-atom" style="font-size: 32px; color:#e67e22;"></i></div>

<!-- CSS code -->
.icon {
 animation: spin 1 1s linear;
}

@keyframes spin {
 to {
    transform: rotate(360deg);
  }
}