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">wifi</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#wifi" />
</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-wifi" viewBox="0 0 24 24">
  <path d="M17.79 12.19a9.91 9.91 0 0 0-11.58 0c-.69.49-.74 1.51-.13 2.11.5.5 1.28.53 1.86.12 2.43-1.7 5.69-1.7 8.12 0 .58.41 1.36.38 1.86-.12.6-.6.56-1.62-.13-2.12Zm-7.33 3.42a2.179 2.179 0 0 0 3.08 3.08 2.179 2.179 0 0 0-3.08-3.08m11.38-7.42c-5.71-4.67-13.97-4.68-19.69 0-.65.52-.69 1.51-.11 2.1a1.4 1.4 0 0 0 1.89.09c4.67-3.83 11.43-3.83 16.11 0 .57.47 1.38.43 1.9-.08.59-.59.54-1.58-.1-2.11"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.