Tasks App icon

Use the Tasks App 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 { TasksApp24Regular, TasksApp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TasksApp24Regular aria-label="Tasks App" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tasks_app_24_regular.svg" width="24" height="24" alt="Tasks App">

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="M19.9947 4.09693C19.9155 2.92614 18.9407 2.00098 17.7499 2.00098H6.25L6.09595 2.00617C4.92516 2.08533 4 3.06011 4 4.25098V19.749L4.00519 19.9031C4.08436 21.0739 5.05914 21.999 6.25 21.999H13.8175L12.3188 20.499H6.25L6.14823 20.4922C5.78215 20.4425 5.5 20.1287 5.5 19.749V4.25098L5.50685 4.14921C5.55651 3.78313 5.8703 3.50098 6.25 3.50098H17.7499L17.8516 3.50782C18.2177 3.55749 18.4999 3.87128 18.4999 4.25098V15.8178L19.6587 14.659C19.7651 14.5526 19.8794 14.4591 19.9999 14.3785V4.25098L19.9947 4.09693ZM16.2876 21.999C16.2749 21.9997 16.2622 22 16.2495 22C16.2369 22 16.2243 21.9997 16.2118 21.999C16.0266 21.9897 15.8508 21.9119 15.7191 21.7801L13.2194 19.2783C12.9267 18.9853 12.9269 18.5104 13.2199 18.2176C13.5129 17.9248 13.9878 17.925 14.2806 18.2181L16.2499 20.1891L20.7194 15.7197C21.0122 15.4268 21.4871 15.4268 21.78 15.7197C22.0729 16.0126 22.0729 16.4874 21.78 16.7803L16.78 21.7803C16.6483 21.912 16.4727 21.9897 16.2876 21.999ZM13.8413 16.5C13.7805 16.4976 13.7195 16.4976 13.6587 16.5H11.2461C10.8319 16.5 10.4961 16.1642 10.4961 15.75C10.4961 15.3358 10.8319 15 11.2461 15H16.2499C16.6642 15 16.9999 15.3358 16.9999 15.75C16.9999 16.1642 16.6642 16.5 16.2499 16.5H13.8413ZM9 7.75162C9 8.3039 8.55229 8.75162 8 8.75162C7.44772 8.75162 7 8.3039 7 7.75162C7 7.19933 7.44772 6.75162 8 6.75162C8.55229 6.75162 9 7.19933 9 7.75162ZM10.4961 7.75001C10.4961 7.3358 10.8319 7.00001 11.2461 7.00001H16.2499C16.6642 7.00001 16.9999 7.3358 16.9999 7.75001C16.9999 8.16422 16.6642 8.50001 16.2499 8.50001H11.2461C10.8319 8.50001 10.4961 8.16422 10.4961 7.75001ZM11.2461 11C10.8319 11 10.4961 11.3358 10.4961 11.75C10.4961 12.1642 10.8319 12.5 11.2461 12.5H16.2499C16.6642 12.5 16.9999 12.1642 16.9999 11.75C16.9999 11.3358 16.6642 11 16.2499 11H11.2461ZM8 12.75C8.55229 12.75 9 12.3023 9 11.75C9 11.1977 8.55229 10.75 8 10.75C7.44772 10.75 7 11.1977 7 11.75C7 12.3023 7.44772 12.75 8 12.75ZM9 15.748C9 16.3003 8.55229 16.748 8 16.748C7.44772 16.748 7 16.3003 7 15.748C7 15.1957 7.44772 14.748 8 14.748C8.55229 14.748 9 15.1957 9 15.748Z" 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/tasks_app_24_regular.svg";

Details

Keywords

checklistcheckmarkcheckgoalstodoapp