Skip to main content

Pen


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">pen</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#pen" />
</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-pen" viewBox="0 0 24 24">
  <path d="M3.32 17.09a.5.5 0 0 0-.15.35v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15l1.26-1.26-3.75-3.75-1.26 1.26Zm6.07 1.42L20.65 7.25c.24-.24.24-.63 0-.87l-.44-.44.35-.35c.33-.33.33-.88 0-1.21l-.79-.79a.863.863 0 0 0-1.21 0l-.35.35-.44-.44a.616.616 0 0 0-.87 0l-1.23 1.23-1.43-1.44a.996.996 0 0 0-1.41 0L8.22 7.9c-.29.29-.29.77 0 1.06s.77.29 1.06 0l4.26-4.26 1.08 1.08-8.98 8.98zm7.44-11.77c.2-.2.51-.2.71 0s.2.51 0 .71l-8 8c-.2.2-.51.2-.71 0s-.2-.51 0-.71z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.