Skip to main content

Widgets


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">widgets</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#widgets" />
</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-widgets" viewBox="0 0 24 24">
  <path d="M10 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1m0 10H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1m11.48-7.25-3.24-3.24c-.69-.69-1.81-.69-2.49 0l-3.24 3.24c-.33.33-.52.78-.52 1.25s.18.91.52 1.25l3.24 3.24c.34.34.79.51 1.25.51s.9-.17 1.25-.52l3.24-3.24c.33-.33.52-.78.52-1.25s-.18-.91-.52-1.25ZM17 9.9 14.1 7 17 4.1 19.9 7zm3 3.1h-6c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.