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">stars</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#stars" />
</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-stars" viewBox="0 0 24 24">
  <path d="m13 4.12-1.44.29a.49.49 0 0 0-.39.39l-.29 1.44-.29-1.44a.49.49 0 0 0-.39-.39l-1.44-.29 1.44-.29c.2-.04.35-.19.39-.39L10.88 2l.29 1.44c.04.2.19.35.39.39zM6.9 8.69a.75.75 0 0 1-.59-.59l-.43-2.16-.43 2.16c-.06.3-.29.53-.59.59l-2.16.43 2.16.43c.3.06.53.29.59.59l.43 2.16.43-2.16c.06-.3.29-.53.59-.59l2.16-.43zm7.14 5.45c-.59-.12-1.06-.58-1.18-1.18L12 8.64l-.87 4.32c-.12.59-.58 1.06-1.18 1.18L5.63 15l4.32.86c.59.12 1.06.58 1.18 1.18l.86 4.32.86-4.32c.12-.59.58-1.06 1.18-1.18l4.32-.86-4.32-.86Z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.