<!-- loads the entire Variable Font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />

<div class="pulse">
  <span class="material-symbols-outlined">search</span>
  <span class="material-symbols-outlined">home</span>
  <span class="material-symbols-outlined">settings</span>
  <span class="material-symbols-outlined">favorite</span>
</div>
.pulse {
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% {
    font-variation-settings: 'wght' 100;
  }
  50% {
    font-variation-settings: 'wght' 700;
  }
  100% {
    font-variation-settings: 'wght' 100;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.