Skip to main content

Examples

Heading
Smaller heading

Inline text 

Example link text 

Icon font

Use in web applications, on buttons, and anywhere you need more than a few icons.

<i class="modus-icons" aria-hidden="true">language</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#language" />
</svg>

SVG code

Use when you don't want any dependency.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-language" viewBox="0 0 24 24">
  <path d="M8.42 14.5H3.5c-.28 0-.5-.22-.5-.5V4c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v2.5c0 .28.22.5.5.5s.5-.22.5-.5V4c0-.83-.67-1.5-1.5-1.5h-9C2.67 2.5 2 3.17 2 4v10c0 .83.67 1.5 1.5 1.5h4.92c.28 0 .5-.22.5-.5s-.22-.5-.5-.5M20 9h-7c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2m-1.65 9.27-.54-1.66h-2.63l-.54 1.66h-1.65L15.5 11h1.98l2.51 7.27h-1.65Zm-1.88-5.61-.9 2.75h1.85l-.89-2.75zM10.8 8.04c.07-.19.14-.4.19-.51l-1.23-.3c0 .15-.04.4-.09.61h-.18c-.49 0-1.01.06-1.49.17.02-.3.05-.61.08-.9 1.23-.06 2.57-.19 3.54-.36V5.6c-1.1.26-2.18.39-3.4.43.03-.19.07-.38.1-.54 0-.03.02-.07.03-.11.03-.13.07-.27.11-.42l-1.3-.04c.01.18-.01.41-.03.61 0 .09-.02.18-.03.28 0 .08-.02.16-.03.25h-.4c-.61 0-1.48-.08-1.84-.13l.03 1.15c.13 0 .28.01.45.02.43.02.95.05 1.33.05h.32c-.04.4-.07.83-.09 1.25-1.4.66-2.45 2-2.45 3.29 0 1.02.61 1.46 1.34 1.46.54 0 1.07-.17 1.56-.41.04.15.08.28.12.41l1.15-.34c-.08-.24-.16-.49-.23-.75.39-.32.79-.75 1.15-1.27.05-.7.34-1.33.78-1.82.09-.1.19-.19.29-.28.22-.18.46-.33.72-.44-.16-.08-.33-.15-.5-.21m-4.75 3.89c-.33 0-.46-.17-.46-.5 0-.56.5-1.33 1.25-1.84.02.7.1 1.39.21 2.01-.37.22-.72.33-1 .33m2.03-1.17c-.07-.5-.12-1.04-.12-1.66v-.02c.39-.12.85-.22 1.38-.23-.34.81-.78 1.42-1.27 1.91Z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.