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">dashboard</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#dashboard" />
</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-dashboard" viewBox="0 0 24 24">
  <path d="M6 13H5V9h1zm2-6H7v6h1zm2 1H9v5h1zm9-3h-7v5h7zm-6 1h5v3h-5zm8-4H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H4V4h16v12h1c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m-6 17.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 2.5 2.5h1c0-1.93-1.57-3.5-3.5-3.5s-3.5 1.57-3.5 3.5 1.57 3.5 3.5 3.5zm0-2.5h-1v3h1zm3-1h-4v1h4zm-2 5c1.66 0 3-1.34 3-3h-3z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.