<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div>
  <span class="material-symbols-outlined size-20">favorite</span>
  <span class="material-symbols-outlined size-24">favorite</span>
  <span class="material-symbols-outlined size-40">favorite</span>
  <span class="material-symbols-outlined size-48">favorite</span>
</div>

<div>
  <span class="material-symbols-outlined dark">favorite</span>
  <span class="material-symbols-outlined dark-inactive">favorite</span>
</div>
/* Recommended icon sizes */
span.size-20 {
  font-size: 20px;
  font-variation-settings: 'OPSZ' 20;
}
span.size-24 {
  font-size: 24px;
  font-variation-settings: 'OPSZ' 24;
}
span.size-40 {
  font-size: 40px;
  font-variation-settings: 'OPSZ' 40;
}
span.size-48 {
  font-size: 48px;
  font-variation-settings: 'OPSZ' 48;
}

/* Rules for using icons as black on a light background. */
.dark {
  background: black;
  color: rgba(255, 255, 255, 1);
  font-variation-settings: 'GRAD' -25;
}
.dark-inactive {
  background: black;
  color: rgba(255, 255, 255, 0.3);
  font-variation-settings: 'GRAD' -25;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.