Inking Tool icon
Used to represent pen details in drawing scenarios. The Inking Tool 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 Inking Tool 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 { InkingTool24Regular, InkingTool24Filled } from "@fluentui/react-icons";
export function Example() {
return <InkingTool24Regular aria-label="Inking Tool" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_inking_tool_24_regular.svg" width="24" height="24" alt="Inking Tool"> 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="M4.5 2.75C4.5 2.33579 4.16421 2 3.75 2C3.33579 2 3 2.33579 3 2.75V6.25C3 7.2165 3.7835 8 4.75 8H5.01506L9.05072 16.9681C9.25503 17.4222 9.63811 17.759 10.0949 17.9108C10.027 18.262 10 18.6334 10 19C10 19.6711 10.0908 20.3658 10.3633 20.9213C10.6549 21.5158 11.1927 22 12 22C12.8073 22 13.3451 21.5158 13.6367 20.9213C13.9092 20.3658 14 19.6711 14 19C14 18.6334 13.973 18.262 13.9051 17.9108C14.3619 17.759 14.745 17.4222 14.9493 16.9681L18.9849 8H19.25C20.2165 8 21 7.2165 21 6.25V2.75C21 2.33579 20.6642 2 20.25 2C19.8358 2 19.5 2.33579 19.5 2.75V6.25C19.5 6.38807 19.3881 6.5 19.25 6.5H18.5171C18.506 6.49975 18.4949 6.49975 18.4838 6.5H5.51619C5.50513 6.49975 5.49404 6.49975 5.48294 6.5H4.75C4.61193 6.5 4.5 6.38807 4.5 6.25V2.75ZM6.65994 8H17.3401L13.5814 16.3526C13.541 16.4423 13.4518 16.5 13.3534 16.5H10.6466C10.5482 16.5 10.459 16.4423 10.4186 16.3526L6.65994 8ZM11.6133 18H12.3867C12.4582 18.2558 12.5 18.5937 12.5 19C12.5 19.5715 12.417 20.0019 12.29 20.2607C12.1822 20.4805 12.095 20.5 12 20.5C11.905 20.5 11.8178 20.4805 11.71 20.2607C11.583 20.0019 11.5 19.5715 11.5 19C11.5 18.5937 11.5418 18.2558 11.6133 18Z" 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/inking_tool_24_regular.svg";Details
| Name | Inking Tool |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_inking_tool_24_regular.svg |
| Filled file | ic_fluent_inking_tool_24_filled.svg |
| React components | InkingTool24Regular, InkingTool24Filled |
| License | MIT (© Microsoft Corporation) |