<!-- 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" />

<!-- thin outlined icons -->
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;">
  <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>

<!-- thick filled icons -->
<div style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;">
  <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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.