Scratchpad icon

Use the Scratchpad 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 { Scratchpad24Regular, Scratchpad24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Scratchpad24Regular aria-label="Scratchpad" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_scratchpad_24_regular.svg" width="24" height="24" alt="Scratchpad">

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="M17.7832 2.00684C19.0259 2.00684 20 3.0076 20 4.25024V8.24512C19.6807 7.65745 19.1807 7.12522 18.5 6.64842V4.25684C18.5 3.84262 18.1974 3.50684 17.7832 3.50684H6.25709C5.84288 3.50684 5.50709 3.84262 5.50709 4.25684L5.5 19.7571C5.5 20.1713 5.84288 20.5021 6.25709 20.5002L7.61344 20.5001C8.36611 20.5023 9.13308 20.5069 9.99302 20.5054L11.3825 20.499C11.544 20.4993 11.6386 20.5011 11.7929 20.5014L13.3125 20.4985C13.8543 20.7629 14.385 20.8885 14.5005 20.9311C14.4804 21.4147 14.5382 21.7711 14.6739 22.0002H11.0866L9.49629 22.007C8.33742 22.0077 7.32978 22.0002 6.25709 22.0002C5.01445 22.0002 4 20.9998 4 19.7571L4.00709 4.25684C4.00709 3.0142 5.01445 2.00684 6.25709 2.00684H17.7832ZM21.25 13.0002C21.6297 13.0002 21.9435 13.2824 21.9932 13.6485L22 13.7502V14.5002C22 17.4215 19.8215 19.7494 17.0004 20.1035L17 21.2502C17 21.6645 16.6642 22.0002 16.25 22.0002C15.8703 22.0002 15.5565 21.7181 15.5068 21.352L15.5 21.2502L15.5006 20.1037C12.7553 19.7595 10.6183 17.5463 10.5047 14.7358L10.5 14.5002V13.7502C10.5 13.336 10.8358 13.0002 11.25 13.0002C11.6297 13.0002 11.9435 13.2824 11.9932 13.6485L12 13.7502V14.5002C12 16.8475 13.9028 18.6502 16.25 18.6502C18.5261 18.6502 20.3843 16.9551 20.4948 14.7121L20.5 14.5002V13.7502C20.5 13.336 20.8358 13.0002 21.25 13.0002ZM16.25 7.00024C18.0449 7.00024 19.5 8.45532 19.5 10.2502V14.2502C19.5 16.0452 18.0449 17.5002 16.25 17.5002C14.4551 17.5002 13 16.0452 13 14.2502V10.2502C13 8.45532 14.4551 7.00024 16.25 7.00024ZM16.25 8.50024C15.2835 8.50024 14.5 9.28374 14.5 10.2502V14.2502C14.5 15.2167 15.2835 16.0002 16.25 16.0002C17.2165 16.0002 18 15.2167 18 14.2502V10.2502C18 9.28374 17.2165 8.50024 16.25 8.50024ZM9.66531 13.0002C9.62857 13.0364 9.59013 13.1197 9.55 13.2502C9.5179 13.3547 9.50081 13.5035 9.49874 13.6969L9.49871 14.5002H8.25C7.83579 14.5002 7.5 14.1645 7.5 13.7502C7.5 13.3705 7.78215 13.0568 8.14823 13.0071L8.25 13.0002H9.66531ZM8.25 10.0002H12.0035L11.9959 11.5002H8.25C7.83579 11.5002 7.5 11.1645 7.5 10.7502C7.5 10.3705 7.78215 10.0568 8.14823 10.0071L8.25 10.0002ZM13.5 7.00024C13.1909 7.26426 12.9743 7.48093 12.85 7.65024C12.7612 7.77118 12.6508 7.95029 12.5188 8.18758L12.35 8.50024H8.25C7.83579 8.50024 7.5 8.16446 7.5 7.75024C7.5 7.37055 7.78215 7.05675 8.14823 7.00709L8.25 7.00024H13.5Z" 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/scratchpad_24_regular.svg";

Details

Keywords

recordingtemplatepaperdocument