<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=favorite,home,search,settings" 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.