Skip to main content

Markup Cloud

  • Tags:

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">markup_cloud</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="/connect-icons.svg#markup-cloud" />
</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-connect mi-markup-cloud" viewBox="0 0 24 24">
  <path fill-rule="evenodd" d="M19.5 6.2c2.4.7 3.9 2.4 3.9 4.4 0 .9-.4 1.8-1.1 2.6.1.4.2.8.2 1.1 0 2.6-2.4 4.8-5.5 5.2-.9 1.4-2.5 2.2-4.3 2.2-1.7 0-3.4-.8-4.3-2.1H7.3c-3.7 0-6.6-2.7-6.6-6.2 0-1.3.4-2.5 1.1-3.5q-.3-.6-.3-1.5c0-2.7 2.5-4.8 5.7-4.8.6 0 1.1 0 1.6.2h.1c1.1-1.4 2.8-2.1 4.7-2.1 2.9 0 5.3 1.9 5.9 4.5m1.1 8.2c0-.2 0-.4-.1-.9l-.3-.9.5-.6c.5-.6.7-1.1.7-1.6 0-1.2-1.1-2.2-2.7-2.6l-.9-.2-.2-1c-.3-1.8-2-3.2-4.1-3.2-1.4 0-2.6.6-3.4 1.6l-.6.7-.8-.1c-.5-.1-1-.2-1.5-.2-2.1 0-3.9 1.4-3.9 3 0 .267.044.489.074.637q.024.112.026.163l.6.9-.7.9c-.6.7-.9 1.6-.9 2.5 0 2.5 2.1 4.4 4.8 4.4h.9l1-.3.6.9c.6.8 1.7 1.4 2.9 1.4 1.3 0 2.3-.5 2.9-1.5l.4-.6.7-.1c2.3-.2 4-1.6 4-3.3"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.