Calendar Agenda Clock icon (Filled & Regular)

The Calendar Agenda Clock 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 Calendar Agenda Clock 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 { CalendarAgendaClock24Regular, CalendarAgendaClock24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CalendarAgendaClock24Regular aria-label="Calendar Agenda Clock" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_agenda_clock_24_regular.svg" width="24" height="24" alt="Calendar Agenda Clock">

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM17.75 3C19.5449 3 21 4.45507 21 6.25V12.0244C20.5365 11.7276 20.0338 11.4869 19.5 11.3145V6.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.5H11.3145C11.4869 20.0338 11.7276 20.5365 12.0244 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.5 14C17.2239 14 17 14.2239 17 14.5V17.5C17 17.7761 17.2239 18 17.5 18H20C20.2761 18 20.5 17.7761 20.5 17.5C20.5 17.2239 20.2761 17 20 17H18V14.5C18 14.2239 17.7761 14 17.5 14ZM11.3145 15.5C11.1599 15.9782 11.06 16.4805 11.0205 17H7.75C7.33579 17 7 16.6642 7 16.25C7 15.8703 7.28236 15.5565 7.64844 15.5068L7.75 15.5H11.3145ZM15.7168 11.25C14.7125 11.536 13.8079 12.0566 13.0654 12.75H7.75C7.33579 12.75 7 12.4142 7 12C7 11.6203 7.28236 11.3065 7.64844 11.2568L7.75 11.25H15.7168ZM16.25 7C16.6642 7 17 7.33579 17 7.75C17 8.1297 16.7176 8.4435 16.3516 8.49316L16.25 8.5H7.75C7.33579 8.5 7 8.16421 7 7.75C7 7.3703 7.28236 7.0565 7.64844 7.00684L7.75 7H16.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/calendar_agenda_clock_24_regular.svg";

Details

Name	Calendar Agenda Clock
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_calendar_agenda_clock_24_regular.svg`
Filled file	`ic_fluent_calendar_agenda_clock_24_filled.svg`
React components	`CalendarAgendaClock24Regular, CalendarAgendaClock24Filled`
License	MIT (© Microsoft Corporation)

Calendar Agenda Clock icon

Use the Calendar Agenda Clock icon in React

Use it in HTML

Use it from the SVG package

Details

Related icons