Skip to main content

Settings


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">settings</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#settings" />
</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-settings" viewBox="0 0 24 24">
  <path d="M12 8.35a3.651 3.651 0 1 0 .002 7.302A3.651 3.651 0 0 0 12 8.35m0 5.29c-.91 0-1.65-.74-1.65-1.65s.74-1.65 1.65-1.65 1.65.74 1.65 1.65-.74 1.65-1.65 1.65m7.4-.67c.04-.33.07-.66.07-.99s-.03-.65-.07-.96l1.71-1.37c.4-.32.5-.88.24-1.32l-.77-1.31-.76-1.32c-.25-.44-.79-.63-1.26-.44l-2.02.79c-.52-.4-1.08-.74-1.69-.99l-.32-2.12c-.08-.5-.51-.87-1.02-.87h-3.04c-.51 0-.94.37-1.02.87l-.32 2.1c-.63.26-1.21.59-1.73 1l-1.98-.78c-.47-.19-1.01 0-1.26.44L3.4 7.02l-.77 1.31c-.26.44-.15 1 .24 1.32l1.66 1.33c-.04.33-.07.66-.07 1s.03.7.08 1.03l-1.66 1.33c-.4.32-.5.88-.24 1.32l.77 1.31.76 1.32c.25.44.79.63 1.26.44l2.01-.79c.52.39 1.09.73 1.7.97l.33 2.14c.08.5.51.87 1.02.87h3.04c.51 0 .94-.37 1.02-.87l.33-2.16c.6-.25 1.15-.58 1.66-.97l2.05.8c.47.19 1.01 0 1.26-.44l.76-1.32.77-1.31c.26-.44.15-1-.24-1.32l-1.71-1.38Zm-2.03-1.7c.03.23.05.46.05.7s-.02.49-.06.72l-.15 1.14 1.92 1.55-.65 1.12-2.3-.9-.92.7c-.38.29-.79.53-1.2.7l-1.06.44-.37 2.42h-1.29l-.37-2.41-1.07-.44c-.43-.18-.84-.41-1.23-.71l-.92-.7-2.26.89-.65-1.12 1.88-1.51-.16-1.15c-.04-.3-.06-.53-.06-.75 0-.25.02-.49.06-.73l.15-1.14-1.87-1.5.65-1.12 2.23.88.92-.7c.39-.3.82-.55 1.26-.73l1.08-.44.36-2.37h1.29l.36 2.39 1.06.44c.42.18.84.42 1.23.72l.92.71 2.27-.89.65 1.12-1.91 1.54.15 1.14Z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.