Inking Tool Accent icon
Used to represent pen details in drawing scenarios. The Inking Tool Accent icon is part of Microsoft's Fluent UI System Icons, available here in the filled style 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.
Filled
Use the Inking Tool Accent 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 { InkingToolAccent24Filled } from "@fluentui/react-icons";
export function Example() {
return <InkingToolAccent24Filled aria-label="Inking Tool Accent" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_inking_tool_accent_24_filled.svg" width="24" height="24" alt="Inking Tool Accent"> 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 7H20.25C20.3683 7 20.4675 6.91777 20.4934 6.80732L20.5 6.75V3L3.75 3V6.75C3.75 6.86835 3.83223 6.96749 3.94268 6.9934L4 7ZM11.9759 13.9457L14.6171 7.9987L15.5 7.5L16.2584 7.9987L13.3467 14.5546C13.2264 14.8255 12.9578 15.0002 12.6613 15.0002C12.1186 15.0002 11.7556 14.4417 11.9759 13.9457ZM13 19C13 20.1046 12.5523 21 12 21C11.4477 21 11 20.1046 11 19C11 17.8954 11.4477 17 12 17C12.5523 17 13 17.8954 13 19Z" 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_accent_24_filled.svg";Details
| Name | Inking Tool Accent |
|---|---|
| Styles | Filled |
| Size | 24 × 24 px (scalable SVG) |
| Filled file | ic_fluent_inking_tool_accent_24_filled.svg |
| React components | InkingToolAccent24Filled |
| License | MIT (© Microsoft Corporation) |