Calendar Today icon

Use the Calendar Today 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 { CalendarToday24Regular, CalendarToday24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_today_24_regular.svg" width="24" height="24" alt="Calendar Today">

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="M21 6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H10.25C10.25 21 10.25 20.5184 10.25 20.25V19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V8.5H19.5V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H13.75V20.25C13.75 20.5184 13.75 21 13.75 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25ZM6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V7H4.5V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5ZM13.25 11.75C13.25 12.4404 12.6904 13 12 13C11.3096 13 10.75 12.4404 10.75 11.75C10.75 11.0596 11.3096 10.5 12 10.5C12.6904 10.5 13.25 11.0596 13.25 11.75ZM13.7517 18.3106C14.0613 18.5857 14.5353 18.5579 14.8105 18.2483C15.0857 17.9387 15.0578 17.4646 14.7482 17.1894L12.4982 15.1894C12.2141 14.9369 11.7858 14.9369 11.5017 15.1894L9.25167 17.1894C8.94209 17.4646 8.9142 17.9387 9.18939 18.2483C9.46458 18.5579 9.93863 18.5857 10.2482 18.3106L11.25 17.4201V21.25C11.25 21.6642 11.5857 22 12 22C12.4142 22 12.75 21.6642 12.75 21.25V17.4201L13.7517 18.3106Z" 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_today_24_regular.svg";

Details

Keywords

timedateplanning