Icon font
Use in web applications, on buttons, and anywhere you need more than a few icons.
<i class="modus-icons" aria-hidden="true">x12</i>
SVG sprite
Use for static sites when you only need a few icons.
<svg class="mi" width="1em" height="1em" fill="currentColor">
<use xlink:href="/field-systems-icons.svg#x12" />
</svg>
SVG code
Use when you don't want any dependency.
info_outlined
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-solid mi-x12" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="m9.376 5.773.378.246a.5.5 0 0 1 .228.419v.775h3.987v-.836a.5.5 0 0 1 .151-.357l.704-.687V2.25a.25.25 0 0 1 .25-.25h.963a.25.25 0 0 1 .247.208L16.71 4.7a1 1 0 0 0 .728.798l1.027.273a2 2 0 0 1 1.486 1.933v11.277a1 1 0 0 1-.776.975l-3.735.857a3 3 0 0 1-.671.076h-.23v1.11H9.41v-1.11h.276a3 3 0 0 1-.574-.061l-1.446-.297a.56.56 0 0 1-.52.358H6.98a.417.417 0 0 0-.417.417v.132a.285.285 0 1 1-.57 0v-.95q.002-.159.07-.287l-1.265-.26A1 1 0 0 1 4 18.963V7.868a2 2 0 0 1 1.68-1.974l1.18-.192a7 7 0 0 1 1.123-.09h.848a1 1 0 0 1 .545.16m.606 6.283v-.593h3.987v.593a.5.5 0 0 1-.5.5h-2.987a.5.5 0 0 1-.5-.5M8.409 9.36c0 .23-.191.417-.427.417a.42.42 0 0 1-.427-.417c0-.23.191-.417.427-.417s.427.187.427.417M9.92 20.7v-.755h.685l.194-.214a.5.5 0 0 1 .37-.164h1.614a.5.5 0 0 1 .37.164l.194.214h.686v.755zm.915 1.023a.28.28 0 0 0 .285-.277.28.28 0 0 0-.285-.278.28.28 0 0 0-.285.277c0 .154.128.278.285.278m2.565-.277a.28.28 0 0 1-.285.277.28.28 0 0 1-.285-.277c0-.154.128-.278.285-.278s.285.124.285.277M6.276 7.584c0 .138.112.25.25.25h1.209a.25.25 0 0 0 .25-.25V7.25a.25.25 0 0 0-.25-.25h-1.21a.25.25 0 0 0-.25.25z"/>
</svg>
SVG CSS code
Use for embedding your icons in CSS with no dependency.