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">bug</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#bug" />
</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-bug" viewBox="0 0 24 24">
  <path d="M21 11h-3.51c-.11-.4-.25-.79-.41-1.16 2.1-.49 3.67-2.34 3.67-4.59V5c0-.41-.34-.75-.75-.75s-.75.34-.75.75v.25c0 1.71-1.32 3.09-3 3.22-.38-.49-.82-.92-1.31-1.26C14.66 5.38 13.45 4 12 4S9.33 5.38 9.06 7.21c-.49.34-.93.77-1.31 1.26-1.67-.13-3-1.52-3-3.22V5c0-.41-.34-.75-.75-.75s-.75.34-.75.75v.25c0 2.25 1.57 4.1 3.67 4.59-.17.37-.31.75-.41 1.16H3c-.41 0-.75.34-.75.75s.34.75.75.75h3.27c-.01.17-.02.33-.02.5 0 .26.02.52.04.77v.04c.03.25.06.49.11.73-1.84.65-3.16 2.4-3.16 4.46v.25c0 .41.34.75.75.75s.75-.34.75-.75V19c0-1.39.88-2.55 2.1-3.01.23.55.53 1.06.87 1.51 0 .01.02.02.02.03.34.44.73.83 1.16 1.15.03.02.05.04.08.06.19.13.38.26.58.37.04.02.07.04.11.06.22.12.45.22.68.3.03.01.07.02.11.03.2.07.4.12.61.16l.19.03c.24.04.49.06.74.06s.5-.03.74-.06c.06 0 .13-.02.19-.03.21-.04.41-.09.61-.16l.11-.03c.24-.08.46-.18.68-.3.04-.02.07-.04.11-.06.2-.11.39-.23.58-.37.03-.02.05-.04.08-.06.43-.32.82-.71 1.16-1.15 0-.01.02-.02.02-.03.35-.45.64-.96.87-1.51 1.22.46 2.1 1.63 2.1 3.01v.25c0 .41.34.75.75.75s.75-.34.75-.75V19c0-2.06-1.32-3.81-3.16-4.46.05-.24.09-.48.11-.73v-.04c.02-.25.04-.51.04-.77 0-.17-.01-.33-.02-.5h3.27c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Zm-4.83 3.02c-.02.13-.06.26-.09.38-.04.19-.08.38-.14.56-.06.17-.13.32-.2.48-.05.12-.1.24-.16.36-.1.19-.21.36-.32.53-.05.07-.09.14-.14.21-.14.19-.29.36-.45.52l-.09.09c-.18.17-.38.33-.58.46-.01 0-.03.02-.04.03-.22.14-.45.26-.69.35-.25.09-.5.16-.76.2V10c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.19a3.7 3.7 0 0 1-1.45-.55c-.01 0-.03-.02-.04-.03-.2-.13-.4-.29-.58-.46l-.09-.09c-.16-.16-.31-.33-.45-.52-.05-.07-.09-.14-.14-.2-.11-.17-.22-.34-.32-.53-.06-.11-.11-.24-.16-.36-.07-.16-.14-.31-.2-.48-.06-.18-.1-.37-.14-.56-.03-.13-.07-.25-.09-.38-.05-.33-.08-.67-.08-1.02 0-.38.03-.74.1-1.1 0-.06.03-.11.04-.16.06-.3.13-.6.24-.87 0-.02.02-.04.03-.06.24-.63.58-1.2.99-1.66.38-.43.81-.77 1.29-1.01.06-.03.12-.04.18-.07.19-.08.37-.16.57-.21.27-.06.54-.1.82-.1s.56.04.82.1c.2.05.38.13.57.21.06.03.12.04.18.07a4.2 4.2 0 0 1 1.29 1.01c.41.47.75 1.03.99 1.66 0 .02.02.04.03.06q.15.42.24.87c.01.06.03.11.04.16.06.35.1.72.1 1.1 0 .35-.03.69-.08 1.02Z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.