Notepad Person Off icon

Use the Notepad Person Off 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 { NotepadPersonOff24Regular, NotepadPersonOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <NotepadPersonOff24Regular aria-label="Notepad Person Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_notepad_person_off_24_regular.svg" width="24" height="24" alt="Notepad Person Off">

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="M2.21967 2.21973C2.51257 1.92698 2.98737 1.92688 3.28022 2.21973L21.9902 20.9297L22.041 20.9863C22.2814 21.2809 22.2648 21.7156 21.9902 21.9902C21.9507 22.0297 21.9065 22.062 21.8613 22.0908C21.1361 22.6375 20.0403 23 18.4999 23C15.2857 23 13.9999 21.4374 13.9999 19.875V19.7725C13.9999 18.7935 14.7935 18.0001 15.7724 18H16.9394L12.4394 13.5H8.24994C7.83573 13.5 7.49994 13.1642 7.49994 12.75C7.49994 12.3358 7.83573 12 8.24994 12H10.9394L8.4394 9.5H8.24994C7.83573 9.5 7.49994 9.16421 7.49994 8.75C7.49994 8.69173 7.50784 8.63538 7.52045 8.58105L5.49994 6.56055V19.75C5.49994 20.1642 5.83573 20.5 6.24994 20.5H13.0527C13.1408 21.0252 13.3413 21.5371 13.665 22H6.24994C5.0073 22 3.99994 20.9926 3.99994 19.75V6.25C3.99994 5.90282 4.08017 5.57482 4.22065 5.28125L2.21967 3.28027C1.92678 2.98738 1.92678 2.51262 2.21967 2.21973ZM21.2275 18C22.2063 18.0002 22.9999 18.7936 22.9999 19.7725V19.8359C22.9506 19.775 22.8975 19.7159 22.8408 19.6592L21.1816 18H21.2275ZM11.3271 16.0039C11.705 16.0426 11.9999 16.3619 11.9999 16.75C11.9999 17.1381 11.705 17.4574 11.3271 17.4961L11.2499 17.5H8.24994C7.83573 17.5 7.49994 17.1642 7.49994 16.75C7.49994 16.3358 7.83573 16 8.24994 16H11.2499L11.3271 16.0039ZM18.4999 12C19.8806 12.0001 20.9999 13.1193 20.9999 14.5C20.9999 15.4002 20.5224 16.1868 19.8085 16.627L16.372 13.1904C16.8122 12.4767 17.5998 12 18.4999 12ZM16.2499 2C16.6641 2.00009 16.9999 2.33584 16.9999 2.75V4H17.7499C18.9925 4.00009 19.9999 5.00742 19.9999 6.25V11.3359C19.5455 11.1201 19.0365 11 18.4999 11V6.25C18.4999 5.83584 18.1641 5.50009 17.7499 5.5H8.68158L6.99994 3.81836V2.75C6.99994 2.33579 7.33573 2 7.74994 2C8.16408 2.00009 8.49994 2.33584 8.49994 2.75V4H11.2499V2.75C11.2499 2.33579 11.5857 2 11.9999 2C12.4141 2.00009 12.7499 2.33584 12.7499 2.75V4H15.4999V2.75C15.4999 2.33579 15.8357 2 16.2499 2ZM15.7499 8C16.1641 8.00009 16.4999 8.33584 16.4999 8.75C16.4999 9.16416 16.1641 9.49991 15.7499 9.5H12.6816L11.1816 8H15.7499Z" 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/notepad_person_off_24_regular.svg";

Details