Clipboard Task List LTR icon

Use the Clipboard Task List LTR 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 { ClipboardTaskListLtr24Regular, ClipboardTaskListLtr24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClipboardTaskListLtr24Regular aria-label="Clipboard Task List LTR" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_task_list_ltr_24_regular.svg" width="24" height="24" alt="Clipboard Task List LTR">

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.5 10.25C12.5 9.83579 12.8358 9.5 13.25 9.5H16.75C17.1642 9.5 17.5 9.83579 17.5 10.25C17.5 10.6642 17.1642 11 16.75 11H13.25C12.8358 11 12.5 10.6642 12.5 10.25ZM13.2501 15C12.8358 15 12.5001 15.3358 12.5001 15.75C12.5001 16.1642 12.8358 16.5 13.2501 16.5H16.7499C17.1642 16.5 17.4999 16.1642 17.4999 15.75C17.4999 15.3358 17.1642 15 16.7499 15H13.2501ZM10.7803 9.78033C11.0732 9.48744 11.0732 9.01256 10.7803 8.71967C10.4874 8.42678 10.0126 8.42678 9.71967 8.71967L8.25 10.1893L7.78033 9.71967C7.48744 9.42678 7.01256 9.42678 6.71967 9.71967C6.42678 10.0126 6.42678 10.4874 6.71967 10.7803L7.71967 11.7803C8.01256 12.0732 8.48744 12.0732 8.78033 11.7803L10.7803 9.78033ZM10.7803 14.2197C11.0732 14.5126 11.0732 14.9874 10.7803 15.2803L8.78033 17.2803C8.48744 17.5732 8.01256 17.5732 7.71967 17.2803L6.71967 16.2803C6.42678 15.9874 6.42678 15.5126 6.71967 15.2197C7.01256 14.9268 7.48744 14.9268 7.78033 15.2197L8.25 15.6893L9.71967 14.2197C10.0126 13.9268 10.4874 13.9268 10.7803 14.2197ZM15.994 4.08449C15.9093 2.91913 14.937 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 22H17.75C18.9926 22 20 20.9926 20 19.75V6.25C20 5.00736 18.9926 4 17.75 4L15.9862 3.99944C15.9893 4.02764 15.9919 4.05599 15.994 4.08449ZM15.9948 4.09595L16 4.25C16 4.19822 15.9983 4.14685 15.9948 4.09595ZM10.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.25V19.75C18.5 20.1642 18.1642 20.5 17.75 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.5ZM10.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.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/clipboard_task_list_ltr_24_regular.svg";

Details