Calendar Todo icon

The Calendar Todo icon is part of Microsoft's Fluent UI System Icons, available here in the light style on a 32 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Light

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Light, 32 px

ic_fluent_calendar_todo_32_light.svg

npm install @fluentui/react-icons

import { CalendarTodo32Light } from "@fluentui/react-icons";

export function Example() {
  return <CalendarTodo32Light aria-label="Calendar Todo" />;
}

Use the Calendar Todo 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 { CalendarTodo32Light } from "@fluentui/react-icons";

export function Example() {
  return <CalendarTodo32Light aria-label="Calendar Todo" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_todo_32_light.svg" width="32" height="32" alt="Calendar Todo">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M7.5 28h5.97l1 1H7.5A4.5 4.5 0 0 1 3 24.5v-17A4.5 4.5 0 0 1 7.5 3h17A4.5 4.5 0 0 1 29 7.5v6.97q-.46-.42-1-.66V11H4v13.5A3.5 3.5 0 0 0 7.5 28m0-24A3.5 3.5 0 0 0 4 7.5V10h24V7.5A3.5 3.5 0 0 0 24.5 4zm8.14 20.94q-.08.08-.13.15l-1.45-1.45a.2.2 0 0 1 0-.28l1.3-1.3a.2.2 0 0 1 .28 0l1.44 1.44zm4.15 1.85-1.15 1.15a.2.2 0 0 1-.28 0l-1.3-1.3a.2.2 0 0 1 0-.29l9.3-9.3a.2.2 0 0 1 .28 0l1.3 1.3a.2.2 0 0 1 0 .3zm-2.84 2.57a2.2 2.2 0 0 0 3.11 0l9.3-9.3a2.2 2.2 0 0 0 0-3.11l-1.3-1.31a2.2 2.2 0 0 0-3.12 0l-6.44 6.44-1.44-1.44a2.2 2.2 0 0 0-3.11 0l-1.3 1.3a2.2 2.2 0 0 0 0 3.12z"/></svg>

Details

Name	Calendar Todo
Styles	Light
Sizes	32 px
Light file	`ic_fluent_calendar_todo_32_light.svg`
React (Light)	`CalendarTodo32Light`
License	MIT (© Microsoft Corporation)

Calendar Todo icon

Every size and style