Clipboard Text Edit icon

Use the Clipboard Text Edit 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 { ClipboardTextEdit24Regular, ClipboardTextEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClipboardTextEdit24Regular aria-label="Clipboard Text Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_text_edit_24_regular.svg" width="24" height="24" alt="Clipboard Text Edit">

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="M15.9862 3.99944C15.8616 2.87472 14.9079 2 13.75 2H10.25C9.09205 2 8.13841 2.87472 8.01379 3.99944L6.25 4C5.00736 4 4 5.00736 4 6.25V19.75C4 20.9926 5.00736 22 6.25 22H11.0014C10.9942 21.8075 11.0139 21.6088 11.0642 21.4075L11.2911 20.5H6.25C5.83579 20.5 5.5 20.1642 5.5 19.75V6.25C5.5 5.83579 5.83579 5.5 6.25 5.5L8.37902 5.5002C8.78267 6.1031 9.46997 6.5 10.25 6.5H13.75C14.53 6.5 15.2174 6.10307 15.621 5.50016L17.75 5.5C18.1642 5.5 18.5 5.83579 18.5 6.25V11.8606C18.9371 11.4604 19.4561 11.1998 20 11.0788V6.25C20 5.00736 18.9926 4 17.75 4L15.9862 3.99944ZM15.9948 4.09595L16 4.25C16 4.19822 15.9983 4.14685 15.9948 4.09595ZM10.25 3.5H13.75C14.1642 3.5 14.5 3.83579 14.5 4.25C14.5 4.66421 14.1642 5 13.75 5H10.25C9.83579 5 9.5 4.66421 9.5 4.25C9.5 3.83579 9.83579 3.5 10.25 3.5ZM13.356 17H8C7.58579 17 7.25 17.3358 7.25 17.75C7.25 18.1642 7.58579 18.5 8 18.5H11.983C12.1278 18.2712 12.298 18.058 12.4912 17.8648L13.356 17ZM12 14.5H8C7.58579 14.5 7.25 14.1642 7.25 13.75C7.25 13.3358 7.58579 13 8 13H12C12.4142 13 12.75 13.3358 12.75 13.75C12.75 14.1642 12.4142 14.5 12 14.5ZM16 10.5H8C7.58579 10.5 7.25 10.1642 7.25 9.75C7.25 9.33579 7.58579 9 8 9H16C16.4142 9 16.75 9.33579 16.75 9.75C16.75 10.1642 16.4142 10.5 16 10.5ZM19.0999 12.6695L13.1974 18.5719C12.8533 18.916 12.6092 19.3472 12.4911 19.8194L12.0334 21.6501C11.8344 22.4462 12.5556 23.1674 13.3517 22.9683L15.1824 22.5106C15.6545 22.3926 16.0857 22.1485 16.4299 21.8043L22.3323 15.9019C23.2249 15.0093 23.2249 13.5621 22.3323 12.6695C21.4397 11.7768 19.9925 11.7768 19.0999 12.6695Z" 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/clipboard_text_edit_24_regular.svg";

Details

Keywords

notebooknotesupdatescopymemoryanalog