Calendar Note icon

Use the Calendar Note 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 { CalendarNote24Regular, CalendarNote24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.75 3C19.5449 3 21 4.45507 21 6.25V12H19.5V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11V21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM14 13C12.8954 13 12 13.8954 12 15V21C12 22.1046 12.8954 23 14 23H21C22.1046 23 23 22.1046 23 21V15C23 13.8954 22.1046 13 21 13H14ZM14 16.5C14 16.2239 14.2239 16 14.5 16H20.5C20.7761 16 21 16.2239 21 16.5C21 16.7761 20.7761 17 20.5 17H14.5C14.2239 17 14 16.7761 14 16.5ZM14 19.5C14 19.2239 14.2239 19 14.5 19H20.5C20.7761 19 21 19.2239 21 19.5C21 19.7761 20.7761 20 20.5 20H14.5C14.2239 20 14 19.7761 14 19.5Z" 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_note_24_regular.svg";

Details

Keywords

timedateplanning