Notepad Sparkle icon

Use the Notepad Sparkle 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 { NotepadSparkle24Regular, NotepadSparkle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <NotepadSparkle24Regular aria-label="Notepad Sparkle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_notepad_sparkle_24_regular.svg" width="24" height="24" alt="Notepad Sparkle">

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="M12 2C12.4142 2 12.75 2.33579 12.75 2.75V3.76855L12.0498 3.99902C11.4247 4.22211 11.0019 4.80262 11 5.46875C11 5.47908 11.0007 5.48967 11.001 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H14V18.25C14 17.0074 15.0074 16 16.25 16H18.5V12.9717C18.7192 13.0568 18.9094 13.1824 18.9805 13.3994C19.1772 14.0223 19.3889 14.7327 20 14.9678V16.6895C20 17.0872 19.8418 17.4687 19.5605 17.75L15.75 21.5605C15.4687 21.8418 15.0872 22 14.6895 22H6.25C5.00736 22 4 20.9926 4 19.75V6.25C4 5.00736 5.00736 4 6.25 4H7V2.75C7 2.33579 7.33579 2 7.75 2C8.16421 2 8.5 2.33579 8.5 2.75V4H11.25V2.75C11.25 2.33579 11.5858 2 12 2ZM16.25 17.5C15.8358 17.5 15.5 17.8358 15.5 18.25V19.6895L17.6895 17.5H16.25ZM11.3271 16.0039C11.7051 16.0425 12 16.3618 12 16.75C12 17.1382 11.7051 17.4575 11.3271 17.4961L11.25 17.5H8.25C7.83579 17.5 7.5 17.1642 7.5 16.75C7.5 16.3358 7.83579 16 8.25 16H11.25L11.3271 16.0039ZM20.4844 9C20.5469 9 20.6081 9.01957 20.6592 9.05566C20.7101 9.09167 20.7487 9.14242 20.7695 9.20117L21.0186 9.9668C21.0959 10.1992 21.2271 10.4108 21.4004 10.584C21.5737 10.757 21.7851 10.8876 22.0176 10.9648L22.7832 11.2129L22.7979 11.2168C22.8568 11.2376 22.9082 11.2762 22.9443 11.3271C22.9805 11.3782 23 11.4394 23 11.502C23 11.5645 22.9805 11.6257 22.9443 11.6768C22.9082 11.7276 22.8567 11.7664 22.7979 11.7871L22.0332 12.0352C21.8005 12.1124 21.5884 12.2428 21.415 12.416C21.2417 12.5892 21.1116 12.8008 21.0342 13.0332L20.7852 13.7988C20.7643 13.8575 20.7257 13.9083 20.6748 13.9443C20.6237 13.9804 20.5626 14 20.5 14C20.4374 14 20.3763 13.9804 20.3252 13.9443C20.2743 13.9083 20.2357 13.8575 20.2148 13.7988L19.9658 13.0332C19.889 12.8002 19.7592 12.5879 19.5859 12.4141C19.4125 12.2401 19.1999 12.1089 18.9668 12.0312L18.2021 11.7832C18.1432 11.7624 18.0918 11.7238 18.0557 11.6729C18.0195 11.6218 18 11.5606 18 11.498C18 11.4355 18.0195 11.3743 18.0557 11.3232C18.0918 11.2724 18.1433 11.2337 18.2021 11.2129L18.9668 10.9648C19.1966 10.8855 19.4056 10.7542 19.5762 10.5811C19.7468 10.4079 19.8753 10.1976 19.9512 9.9668L20.1992 9.20117C20.22 9.14249 20.2588 9.0917 20.3096 9.05566C20.3606 9.01962 20.4219 9.00006 20.4844 9ZM15.75 12C16.1642 12 16.5 12.3358 16.5 12.75C16.5 13.1642 16.1642 13.5 15.75 13.5H8.25C7.83579 13.5 7.5 13.1642 7.5 12.75C7.5 12.3358 7.83579 12 8.25 12H15.75ZM16.4727 1C16.5852 1.00004 16.6952 1.03465 16.7871 1.09961C16.879 1.1646 16.9479 1.25719 16.9854 1.36328L17.4336 2.73926C17.5728 3.15781 17.808 3.5387 18.1201 3.85059C18.4322 4.16235 18.8127 4.39703 19.2314 4.53613L20.6094 4.9834L20.6367 4.99023C20.7429 5.02767 20.8353 5.0976 20.9004 5.18945C20.9653 5.28125 21 5.39149 21 5.50391C20.9999 5.61615 20.9652 5.72572 20.9004 5.81738C20.8353 5.90923 20.7429 5.97917 20.6367 6.0166L19.2588 6.46387C18.8401 6.603 18.4595 6.83765 18.1475 7.14941C17.8353 7.4613 17.6002 7.84219 17.4609 8.26074L17.0137 9.63672C17.0096 9.64816 17.0048 9.65981 17 9.6709C16.9605 9.7627 16.8965 9.84241 16.8145 9.90039C16.7225 9.96535 16.6126 10 16.5 10C16.3874 10 16.2775 9.96535 16.1855 9.90039C16.0936 9.83539 16.0238 9.74283 15.9863 9.63672L15.5391 8.26074C15.4379 7.95368 15.2848 7.66647 15.0879 7.41211C15.0157 7.3188 14.9373 7.22953 14.8535 7.14551C14.5415 6.83257 14.1606 6.59683 13.7412 6.45703L12.3633 6.00977C12.2571 5.97233 12.1647 5.9024 12.0996 5.81055C12.0347 5.71875 12 5.60851 12 5.49609C12.0001 5.38386 12.0348 5.27428 12.0996 5.18262C12.1647 5.09077 12.2571 5.02083 12.3633 4.9834L13.7412 4.53613C14.1548 4.39339 14.5299 4.15721 14.8369 3.8457C15.1356 3.54257 15.3623 3.17566 15.5 2.77344L15.5117 2.73926L15.959 1.36328C15.9964 1.25717 16.0663 1.16461 16.1582 1.09961C16.2501 1.03471 16.3601 1 16.4727 1ZM14.252 8C14.4016 8.15949 14.521 8.34344 14.5898 8.54883L14.8584 9.5H8.25C7.83579 9.5 7.5 9.16421 7.5 8.75C7.5 8.33579 7.83579 8 8.25 8H14.252Z" 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_sparkle_24_regular.svg";

Details

Keywords

remindersketchjournaldiarytextai