Task List Square LTR icon

Use the Task List Square 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 { TaskListSquareLtr24Regular, TaskListSquareLtr24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_task_list_square_ltr_24_regular.svg" width="24" height="24" alt="Task List Square 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 9.25C12.5 8.83579 12.8358 8.5 13.25 8.5H16.75C17.1642 8.5 17.5 8.83579 17.5 9.25C17.5 9.66421 17.1642 10 16.75 10H13.25C12.8358 10 12.5 9.66421 12.5 9.25ZM13.2501 14C12.8358 14 12.5001 14.3358 12.5001 14.75C12.5001 15.1642 12.8358 15.5 13.2501 15.5H16.7499C17.1642 15.5 17.4999 15.1642 17.4999 14.75C17.4999 14.3358 17.1642 14 16.7499 14H13.2501ZM10.7803 8.78033C11.0732 8.48744 11.0732 8.01256 10.7803 7.71967C10.4874 7.42678 10.0126 7.42678 9.71967 7.71967L8.25 9.18934L7.78033 8.71967C7.48744 8.42678 7.01256 8.42678 6.71967 8.71967C6.42678 9.01256 6.42678 9.48744 6.71967 9.78033L7.71967 10.7803C8.01256 11.0732 8.48744 11.0732 8.78033 10.7803L10.7803 8.78033ZM10.7803 13.2197C11.0732 13.5126 11.0732 13.9874 10.7803 14.2803L8.78033 16.2803C8.48744 16.5732 8.01256 16.5732 7.71967 16.2803L6.71967 15.2803C6.42678 14.9874 6.42678 14.5126 6.71967 14.2197C7.01256 13.9268 7.48744 13.9268 7.78033 14.2197L8.25 14.6893L9.71967 13.2197C10.0126 12.9268 10.4874 12.9268 10.7803 13.2197ZM6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25Z" 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_square_ltr_24_regular.svg";

Details