Task List Square Database icon
Used to represent a checklist, goals in task oriented scenarios. The Task List Square Database 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 Database 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 { TaskListSquareDatabase24Regular, TaskListSquareDatabase24Filled } from "@fluentui/react-icons";
export function Example() {
return <TaskListSquareDatabase24Regular aria-label="Task List Square Database" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_task_list_square_database_24_regular.svg" width="24" height="24" alt="Task List Square Database"> 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.25ZM10.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 21H12.0553C12.0195 20.84 12 20.6731 12 20.5V19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V11.1034C19.552 11.1108 19.6037 11.1185 19.6551 11.1266C20.1271 11.2007 20.5787 11.3065 21 11.4415V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM21 12.4998C20.5523 12.3317 20.0464 12.2003 19.5 12.1144C19.0265 12.0401 18.5226 12 18 12C15.2386 12 13 13.1193 13 14.5C13 15.8807 15.2386 17 18 17C18.5226 17 19.0265 16.9599 19.5 16.8855C20.0464 16.7997 20.5523 16.6683 21 16.5002C22.2144 16.0441 23 15.3179 23 14.5C23 13.6821 22.2144 12.9559 21 12.4998ZM21 17.5585C20.5336 17.708 20.0293 17.8219 19.5 17.8965C19.0174 17.9646 18.5141 18 18 18C16.4977 18 15.0882 17.6977 14.0173 17.1622C13.6632 16.9852 13.3098 16.7619 13 16.4917V20.5C13 20.8556 13.1484 21.1938 13.416 21.5C14.1876 22.383 15.9497 23 18 23C20.7614 23 23 21.8807 23 20.5V16.4917C22.6902 16.7619 22.3368 16.9852 21.9827 17.1622C21.6803 17.3134 21.3509 17.446 21 17.5585Z" 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_database_24_regular.svg";Details
| Name | Task List Square Database |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_task_list_square_database_24_regular.svg |
| Filled file | ic_fluent_task_list_square_database_24_filled.svg |
| React components | TaskListSquareDatabase24Regular, TaskListSquareDatabase24Filled |
| License | MIT (© Microsoft Corporation) |