Pen Sync icon
Used to represent a device drawing input. The Pen Sync icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Pen Sync 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 { PenSync24Regular, PenSync24Filled } from "@fluentui/react-icons";
export function Example() {
return <PenSync24Regular aria-label="Pen Sync" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_pen_sync_24_regular.svg" width="24" height="24" alt="Pen Sync"> 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="M20.9519 3.04712C19.5543 1.6496 17.2885 1.64967 15.8911 3.04727L3.94103 14.9987C3.5347 15.4051 3.2491 15.9162 3.116 16.4753L2.02041 21.0767C1.96009 21.3301 2.03552 21.5966 2.21968 21.7808C2.40385 21.9649 2.67037 22.0404 2.92373 21.98L7.52498 20.8845C8.08418 20.7514 8.59546 20.4656 9.00191 20.0591L10.153 18.9079C10.0528 18.4545 10 17.9832 10 17.4997C10 17.3021 10.0088 17.1065 10.0261 16.9134L7.94119 18.9985C7.73104 19.2087 7.46668 19.3564 7.17755 19.4253L3.76191 20.2385L4.57521 16.8227C4.64402 16.5337 4.79168 16.2694 5.00175 16.0593L16.9518 4.10787C17.7634 3.29611 19.0795 3.29607 19.8912 4.10778C20.7028 4.91942 20.7029 6.23534 19.8913 7.04704L15.913 11.0258C16.1063 11.0085 16.3021 10.9997 16.5 10.9997C16.9833 10.9997 17.4543 11.0524 17.9075 11.1525L20.952 8.10763C22.3493 6.71015 22.3493 4.44453 20.9519 3.04712ZM11 17.5C11 20.5376 13.4624 23 16.5 23C19.5376 23 22 20.5376 22 17.5C22 14.4624 19.5376 12 16.5 12C13.4624 12 11 14.4624 11 17.5ZM19.5 14C19.7761 14 20 14.2239 20 14.5V16.5C20 16.7761 19.7761 17 19.5 17H17.5C17.2239 17 17 16.7761 17 16.5C17 16.2239 17.2239 16 17.5 16H18.5003C18.0436 15.392 17.3174 15 16.5 15C15.6666 15 14.9283 15.4073 14.4733 16.036C14.3113 16.2597 13.9987 16.3098 13.775 16.1478C13.5514 15.9859 13.5013 15.6733 13.6632 15.4496C14.2982 14.5724 15.3323 14 16.5 14C17.4798 14 18.3651 14.4027 19 15.0506V14.5C19 14.2239 19.2239 14 19.5 14ZM14 19.9494V20.5C14 20.7761 13.7761 21 13.5 21C13.2239 21 13 20.7761 13 20.5V18.5C13 18.2239 13.2239 18 13.5 18H15.5C15.7761 18 16 18.2239 16 18.5C16 18.7761 15.7761 19 15.5 19H14.4998C14.9564 19.608 15.6827 20 16.5 20C17.2663 20 17.9518 19.6558 18.4112 19.1118C18.5893 18.9008 18.9048 18.8742 19.1158 19.0523C19.3268 19.2305 19.3534 19.546 19.1752 19.7569C18.534 20.5164 17.5732 21 16.5 21C15.5203 21 14.6349 20.5973 14 19.9494Z" 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/pen_sync_24_regular.svg";Details
| Name | Pen Sync |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_pen_sync_24_regular.svg |
| Filled file | ic_fluent_pen_sync_24_filled.svg |
| React components | PenSync24Regular, PenSync24Filled |
| License | MIT (© Microsoft Corporation) |