Task List Square Person icon
Used to represent a checklist, goals in task oriented scenarios. The Task List Square Person icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Task List Square Person 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 { TaskListSquarePerson24Regular, TaskListSquarePerson24Filled } from "@fluentui/react-icons";
export function Example() {
return <TaskListSquarePerson24Regular aria-label="Task List Square Person" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_task_list_square_person_24_regular.svg" width="24" height="24" alt="Task List Square Person"> 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="M20.2275 18C21.2065 18.0001 22 18.7935 22 19.7725V19.875C22 21.4315 20.7143 23 17.5 23C14.2857 23 13 21.4374 13 19.875V19.7725C13 18.7935 13.7935 18.0001 14.7725 18H20.2275ZM17.75 3C19.5449 3 21 4.45507 21 6.25V14.5C21 13.3107 20.4066 12.2604 19.5 11.6279V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H12.0137C12.005 19.5895 12 19.6807 12 19.7725V19.875C12 20.2542 12.0572 20.6333 12.1729 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.5 12C18.8807 12 20 13.1193 20 14.5C20 15.8807 18.8807 17 17.5 17C16.1193 17 15 15.8807 15 14.5C15 13.1193 16.1193 12 17.5 12ZM9.71973 13.2197C10.0126 12.9268 10.4874 12.9268 10.7803 13.2197C11.0732 13.5126 11.0732 13.9874 10.7803 14.2803L8.78027 16.2803C8.48738 16.5732 8.01262 16.5732 7.71973 16.2803L6.71973 15.2803C6.42683 14.9874 6.42683 14.5126 6.71973 14.2197C7.01262 13.9268 7.48738 13.9268 7.78027 14.2197L8.25 14.6895L9.71973 13.2197ZM14.0361 14C14.0128 14.1633 14 14.3302 14 14.5C14 14.8475 14.0512 15.1831 14.1455 15.5H13.25C12.8358 15.5 12.5 15.1642 12.5 14.75C12.5 14.3358 12.8358 14 13.25 14H14.0361ZM9.71973 7.71973C10.0126 7.42683 10.4874 7.42683 10.7803 7.71973C11.0732 8.01262 11.0732 8.48738 10.7803 8.78027L8.78027 10.7803C8.48738 11.0732 8.01262 11.0732 7.71973 10.7803L6.71973 9.78027C6.42683 9.48738 6.42683 9.01262 6.71973 8.71973C7.01262 8.42683 7.48738 8.42683 7.78027 8.71973L8.25 9.18945L9.71973 7.71973ZM16.75 8.5C17.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.25C12.5 8.83579 12.8358 8.5 13.25 8.5H16.75Z" 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_person_24_regular.svg";Details
| Name | Task List Square Person |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_task_list_square_person_24_regular.svg |
| Filled file | ic_fluent_task_list_square_person_24_filled.svg |
| React components | TaskListSquarePerson24Regular, TaskListSquarePerson24Filled |
| License | MIT (© Microsoft Corporation) |