Iconen

<ul class="gx-icon-grid" style="--s:20px" data-tone="fg">
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
    <span>arrow-right</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M7 17 17 7M8 7h9v9"/>
    </svg>
    <span>arrow-up-right</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M19 12H5M11 6l-6 6 6 6"/>
    </svg>
    <span>arrow-left</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5 12.5l4.5 4.5L19 7"/>
    </svg>
    <span>check</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 6l12 12M18 6 6 18"/>
    </svg>
    <span>x</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 7h16M4 12h16M4 17h16"/>
    </svg>
    <span>menu</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 5v14M5 12h14"/>
    </svg>
    <span>plus</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M5 12h14"/>
    </svg>
    <span>minus</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6 9l6 6 6-6"/>
    </svg>
    <span>chevron-down</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M15 6l-6 6 6 6"/>
    </svg>
    <span>chevron-left</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M9 6l6 6-6 6"/>
    </svg>
    <span>chevron-right</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5-2 4 4"/>
    </svg>
    <span>search</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 6h16v12H4zM4 7l8 6 8-6"/>
    </svg>
    <span>mail</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6.5 4h3l1.5 4-2 1.5a11 11 0 0 0 5.5 5.5L16 13l4 1.5v3A2 2 0 0 1 18 19.5 15.5 15.5 0 0 1 4.5 6 2 2 0 0 1 6.5 4Z"/>
    </svg>
    <span>phone</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M8 5.5v13l10.5-6.5z"/>
    </svg>
    <span>play</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M8 5h3v14H8zM13 5h3v14h-3z"/>
    </svg>
    <span>pause</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 9.5h3.2L12 5.5v13l-4.8-4H4zM15.5 9a4.2 4.2 0 0 1 0 6M18 6.5a7.8 7.8 0 0 1 0 11"/>
    </svg>
    <span>volume</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-10v6m0-9.5v.5"/>
    </svg>
    <span>info</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4 2.5 20h19zM12 10v4.5m0 2.5v.5"/>
    </svg>
    <span>alert</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 4l2.4 5 5.6.7-4.1 3.8 1.1 5.5L12 16.3 7 19l1.1-5.5L4 9.7 9.6 9z"/>
    </svg>
    <span>star</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3Z"/>
    </svg>
    <span>globe</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 6h16v14H4zM4 10h16M8 3v4M16 3v4"/>
    </svg>
    <span>calendar</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21Zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
    </svg>
    <span>pin</span>
  </li>
  <li>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M14 5h5v5M19 5l-8 8M18 14v5H5V6h5"/>
    </svg>
    <span>external</span>
  </li>
</ul>