Icon font
Use in web applications, on buttons, and anywhere you need more than a few icons.
<i class="modus-icons" aria-hidden="true">invoice</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="/modus-outlined-icons.svg#invoice" />
</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-outline mi-invoice" viewBox="0 0 24 24">
<path d="M16.5 12.49c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m1.27 7.41c-.23.19-.52.31-.85.38v1.1h-.83v-1.04c-.52-.02-.98-.13-1.39-.33v-1.09c.37.17.69.28.95.36.26.07.49.1.71.1.26 0 .46-.05.59-.15.14-.1.21-.24.21-.44 0-.11-.03-.21-.09-.29a.9.9 0 0 0-.27-.24c-.12-.08-.36-.21-.72-.38-.34-.16-.59-.31-.76-.46s-.31-.32-.41-.51-.15-.42-.15-.68c0-.49.17-.88.5-1.16.22-.18.5-.31.83-.37v-1.09h.83v1.05c.19.02.37.04.54.08.26.07.53.17.82.29l-.38.92c-.29-.12-.54-.21-.73-.26s-.38-.07-.57-.07c-.22 0-.39.05-.51.16s-.18.24-.18.41c0 .11.02.19.07.27s.12.15.23.22.36.2.74.39c.52.25.87.49 1.07.74.19.25.29.56.29.92 0 .5-.18.89-.54 1.18ZM4.5 19.49V3.5h6v5c0 .55.45 1 1 1h5V11c.7 0 1.37.11 2 .32v-3.4c0-.27-.11-.52-.29-.71l-5.12-5.12c-.38-.38-.88-.59-1.41-.59H4.51c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h6.88c-.46-.59-.83-1.27-1.07-2H4.5Zm8-14.99 3 3h-3z"/>
</svg>
SVG CSS code
Use for embedding your icons in CSS with no dependency.