Calligraphy Pen icon

Use the Calligraphy Pen icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { CalligraphyPen24Regular, CalligraphyPen24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CalligraphyPen24Regular aria-label="Calligraphy Pen" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calligraphy_pen_24_regular.svg" width="24" height="24" alt="Calligraphy Pen">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 2.75C7.5 2.33579 7.16421 2 6.75 2C6.33579 2 6 2.33579 6 2.75V5.75C6 6.64648 6.67409 7.38552 7.54305 7.48789L6.52732 9.99292C6.11943 10.9988 6.16369 12.1753 6.64554 13.1355L10.6354 21.0866C10.9193 21.6524 11.4386 22 12 22C12.5614 22 13.0807 21.6524 13.3646 21.0866L17.3545 13.1355C17.8363 12.1753 17.8806 10.9988 17.4727 9.99292L16.4569 7.48789C17.3259 7.38552 18 6.64648 18 5.75V2.75C18 2.33579 17.6642 2 17.25 2C16.8358 2 16.5 2.33579 16.5 2.75V5.75C16.5 5.88807 16.3881 6 16.25 6H7.75C7.61193 6 7.5 5.88807 7.5 5.75V2.75ZM14.8432 7.5L16.0826 10.5566C16.3302 11.1672 16.2997 11.8929 16.0138 12.4628L12.75 18.9669V12.2993C13.1984 12.04 13.5 11.5552 13.5 11C13.5 10.1716 12.8284 9.5 12 9.5C11.1716 9.5 10.5 10.1716 10.5 11C10.5 11.5552 10.8016 12.04 11.25 12.2993V18.9669L7.98622 12.4628C7.70026 11.8929 7.66979 11.1672 7.91739 10.5566L9.15676 7.5H14.8432Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/calligraphy_pen_24_regular.svg";

Details

Keywords

editinkdraw