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-solid-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-solid mi-chat" viewBox="0 0 24 24">
  <path d="M20.77 21.15c-.22-.65-.37-1.31-.45-1.99 1.05-1.05 1.68-2.42 1.68-3.92 0-.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-.54ZM20 9.88C20 5.53 15.97 2 11 2S2 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.88ZM6.51 11.02c-.75 0-1.35-.61-1.35-1.35s.61-1.35 1.35-1.35 1.35.61 1.35 1.35-.61 1.35-1.35 1.35m9.01-2.7c.75 0 1.35.61 1.35 1.35s-.61 1.35-1.35 1.35-1.35-.61-1.35-1.35.61-1.35 1.35-1.35M9.66 9.67c0-.75.61-1.35 1.35-1.35s1.35.61 1.35 1.35-.61 1.35-1.35 1.35-1.35-.61-1.35-1.35"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.