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-solid-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-solid mi-pen" viewBox="0 0 24 24">
  <path d="m20.45 6.28-.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.02 7.8c-.29.29-.29.77 0 1.06s.77.29 1.06 0l4.26-4.26 1.08 1.08-8.98 8.97 3.75 3.75L20.45 7.14c.24-.24.24-.63 0-.87ZM2.97 17.33v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15l1.26-1.26-3.75-3.75-1.26 1.26a.5.5 0 0 0-.15.35Z"/>
</svg>

SVG CSS code

Use for embedding your icons in CSS with no dependency.