Task List LTR icon

Use the 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 { TaskListLtr24Regular, TaskListLtr24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_task_list_ltr_24_regular.svg" width="24" height="24" alt="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="M6.78033 4.78033C7.07322 4.48744 7.07322 4.01256 6.78033 3.71967C6.48744 3.42678 6.01256 3.42678 5.71967 3.71967L3.75 5.68934L3.28033 5.21967C2.98744 4.92678 2.51256 4.92678 2.21967 5.21967C1.92678 5.51256 1.92678 5.98744 2.21967 6.28033L3.21967 7.28033C3.51256 7.57322 3.98744 7.57322 4.28033 7.28033L6.78033 4.78033ZM21.25 18.0068H9.75L9.64823 18.0137C9.28215 18.0634 9 18.3772 9 18.7568C9 19.1711 9.33579 19.5068 9.75 19.5068H21.25L21.3518 19.5C21.7178 19.4503 22 19.1365 22 18.7568C22 18.3426 21.6642 18.0068 21.25 18.0068ZM21.25 11.5H9.75L9.64823 11.5068C9.28215 11.5565 9 11.8703 9 12.25C9 12.6642 9.33579 13 9.75 13H21.25L21.3518 12.9932C21.7178 12.9435 22 12.6297 22 12.25C22 11.8358 21.6642 11.5 21.25 11.5ZM21.25 5H9.75L9.64823 5.00685C9.28215 5.05651 9 5.3703 9 5.75C9 6.16421 9.33579 6.5 9.75 6.5H21.25L21.3518 6.49315C21.7178 6.44349 22 6.1297 22 5.75C22 5.33579 21.6642 5 21.25 5ZM6.78033 17.7803C7.07322 17.4874 7.07322 17.0126 6.78033 16.7197C6.48744 16.4268 6.01256 16.4268 5.71967 16.7197L3.75 18.6893L3.28033 18.2197C2.98744 17.9268 2.51256 17.9268 2.21967 18.2197C1.92678 18.5126 1.92678 18.9874 2.21967 19.2803L3.21967 20.2803C3.51256 20.5732 3.98744 20.5732 4.28033 20.2803L6.78033 17.7803ZM6.78033 10.2197C7.07322 10.5126 7.07322 10.9874 6.78033 11.2803L4.28033 13.7803C3.98744 14.0732 3.51256 14.0732 3.21967 13.7803L2.21967 12.7803C1.92678 12.4874 1.92678 12.0126 2.21967 11.7197C2.51256 11.4268 2.98744 11.4268 3.28033 11.7197L3.75 12.1893L5.71967 10.2197C6.01256 9.92678 6.48744 9.92678 6.78033 10.2197Z" 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/task_list_ltr_24_regular.svg";

Details