Clipboard Task List RTL icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.2803 8.71967C17.5732 9.01256 17.5732 9.48744 17.2803 9.78033L15.2803 11.7803C14.9874 12.0732 14.5126 12.0732 14.2197 11.7803L13.2197 10.7803C12.9268 10.4874 12.9268 10.0126 13.2197 9.71967C13.5126 9.42678 13.9874 9.42678 14.2803 9.71967L14.75 10.1893L16.2197 8.71967C16.5126 8.42678 16.9874 8.42678 17.2803 8.71967ZM17.2803 15.2803C17.5732 14.9874 17.5732 14.5126 17.2803 14.2197C16.9874 13.9268 16.5126 13.9268 16.2197 14.2197L14.75 15.6893L14.2803 15.2197C13.9874 14.9268 13.5126 14.9268 13.2197 15.2197C12.9268 15.5126 12.9268 15.9874 13.2197 16.2803L14.2197 17.2803C14.5126 17.5732 14.9874 17.5732 15.2803 17.2803L17.2803 15.2803ZM7 10.25C7 9.83579 7.33579 9.5 7.75 9.5H11.2501C11.6643 9.5 12.0001 9.83579 12.0001 10.25C12.0001 10.6642 11.6643 11 11.2501 11H7.75C7.33579 11 7 10.6642 7 10.25ZM7.75006 15C7.33585 15 7.00006 15.3358 7.00006 15.75C7.00006 16.1642 7.33585 16.5 7.75006 16.5H11.25C11.6642 16.5 12 16.1642 12 15.75C12 15.3358 11.6642 15 11.25 15H7.75006ZM15.9863 4.00068C15.8623 2.87537 14.9084 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.99944L15.9863 4.00068ZM10.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_rtl_24_regular.svg";

Details