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">sync_off</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#sync-off" />
</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-sync-off" viewBox="0 0 24 24">
  <path d="M3.71 4.85A.996.996 0 1 0 2.3 6.26l2.47 2.47c-.08.09-.16.19-.21.31-.37.91-.57 1.91-.57 2.95 0 4.42 3.58 8 8 8v1.79c0 .45.54.67.85.35l2.67-2.67 2.23 2.23c.2.2.45.29.71.29s.51-.1.71-.29a.996.996 0 0 0 0-1.41zm8.28 11.36V18c-3.31 0-6-2.69-6-6 0-.61.12-1.19.29-1.75l5.77 5.77c-.03.06-.06.12-.06.19m-.86-8.06c.32.31.86.09.86-.36V6c3.31 0 6 2.69 6 6 0 .79-.15 1.56-.44 2.25-.15.36-.04.77.23 1.04.51.51 1.37.33 1.64-.34.37-.91.57-1.91.57-2.95 0-4.42-3.58-8-8-8V2.21c0-.45-.54-.67-.85-.35l-2.8 2.79c-.2.2-.2.51 0 .71z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.