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">chat</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#chat" />
</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-chat" viewBox="0 0 24 24">
  <path d="M7.17 8.71c-.64 0-1.15.52-1.15 1.15s.52 1.15 1.15 1.15 1.15-.52 1.15-1.15-.52-1.15-1.15-1.15M20 9.87c0-4.35-4.03-7.88-9-7.88S2 5.53 2 9.88c0 1.98.84 3.79 2.22 5.17-.1.89-.29 1.76-.59 2.61-.08.25-.18.49-.27.73-.09.21.08.44.31.41.26-.04.52-.09.78-.14h.02c2.06-.41 3.32-.95 3.9-1.25.86.23 1.75.35 2.64.34 4.97 0 9-3.53 9-7.88Zm-11.86 5.4-.68.34c-.27.13-.72.34-1.38.55.05-.3.1-.6.13-.91l.1-.95-.68-.68C4.58 12.56 4 11.23 4 9.86c0-3.24 3.14-5.88 7-5.88s7 2.64 7 5.88-3.14 5.88-7 5.88c-.73 0-1.44-.09-2.13-.28l-.74-.2Zm6.72-4.26c.64 0 1.15-.52 1.15-1.15s-.52-1.15-1.15-1.15-1.15.52-1.15 1.15.52 1.15 1.15 1.15m5.91 10.13c-.22-.65-.37-1.31-.45-1.99C21.37 18.1 22 16.73 22 15.23c0-.82-.2-1.6-.54-2.32-1.44 3.96-5.58 6.83-10.46 6.83-.09 0-.18-.01-.26-.01 1.19.91 2.74 1.47 4.45 1.47.68 0 1.35-.09 2-.26.44.22 1.4.63 2.96.94h.02c.2.04.39.08.59.11.17.03.3-.15.23-.31-.08-.18-.14-.36-.21-.54Zm-8.6-11.28c0-.64-.52-1.15-1.15-1.15s-1.15.52-1.15 1.15.52 1.15 1.15 1.15 1.15-.52 1.15-1.15"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.