Task List Square RTL icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_task_list_square_rtl_24_regular.svg" width="24" height="24" alt="Task List Square 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="M7.25 14C6.83579 14 6.5 14.3358 6.5 14.75C6.5 15.1642 6.83579 15.5 7.25 15.5H10.75C11.1642 15.5 11.5 15.1642 11.5 14.75C11.5 14.3358 11.1642 14 10.75 14H7.25ZM6.5 9.25C6.5 8.83579 6.83579 8.5 7.25 8.5H10.75C11.1642 8.5 11.5 8.83579 11.5 9.25C11.5 9.66421 11.1642 10 10.75 10H7.25C6.83579 10 6.5 9.66421 6.5 9.25ZM17.7803 8.78033C18.0732 8.48744 18.0732 8.01256 17.7803 7.71967C17.4874 7.42678 17.0126 7.42678 16.7197 7.71967L15.25 9.18934L14.7803 8.71967C14.4874 8.42678 14.0126 8.42678 13.7197 8.71967C13.4268 9.01256 13.4268 9.48744 13.7197 9.78033L14.7197 10.7803C15.0126 11.0732 15.4874 11.0732 15.7803 10.7803L17.7803 8.78033ZM17.7803 13.2197C18.0732 13.5126 18.0732 13.9874 17.7803 14.2803L15.7803 16.2803C15.4874 16.5732 15.0126 16.5732 14.7197 16.2803L13.7197 15.2803C13.4268 14.9874 13.4268 14.5126 13.7197 14.2197C14.0126 13.9268 14.4874 13.9268 14.7803 14.2197L15.25 14.6893L16.7197 13.2197C17.0126 12.9268 17.4874 12.9268 17.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_rtl_24_regular.svg";

Details