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">service_rep</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#service-rep" />
</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-service-rep" viewBox="0 0 24 24">
  <path d="M16.25 9.55c-.34-2.02-2.1-3.57-4.22-3.57s-4.46 1.78-4.28 4.57a5.76 5.76 0 0 0 3.45-4.18 5.69 5.69 0 0 0 5.05 3.17Zm-6.42 1.28c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1m9.66-.89h-.25c-.22-3.8-3.38-6.82-7.23-6.82S5 6.14 4.78 9.94h-.25c-1.03 0-1.87.84-1.87 1.87v2.54c0 1.03.84 3.08 1.87 3.08H6.4c.51 0 .94-.42.94-.94v-5.61c0-.42-.29-.77-.68-.89.2-2.79 2.53-5.01 5.36-5.01s5.17 2.21 5.36 5.01c-.39.11-.68.46-.68.89v5.61c0 .36.22.67.52.82l-.8.93-1.33.55c-.22-.17-.51-.25-.8-.17l-1.58.44c-.5.14-.79.66-.66 1.15.14.5.66.79 1.15.66l1.58-.44c.37-.1.63-.42.67-.78l1.41-.58q.105-.045.18-.12l1.32-1.52h1.14c1.03 0 1.87-2.05 1.87-3.08v-2.54c0-1.03-.84-1.87-1.87-1.87Zm-6.32 1.89c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.