Calendar Assistant icon

Use the Calendar Assistant 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 { CalendarAssistant24Regular, CalendarAssistant24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.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.5ZM17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23ZM17.0965 14H18.5285C18.8776 14 19.1192 14.3487 18.9967 14.6756L18.5 16H19.1345C19.5072 16 19.7314 16.4132 19.5283 16.7257L16.9032 20.7643C16.8077 20.9113 16.6442 21 16.4688 21C16.1152 21 15.8655 20.6535 15.9773 20.3181L16.75 18H15.9715C15.6224 18 15.3808 17.6513 15.5033 17.3244L16.6283 14.3244C16.7015 14.1293 16.8881 14 17.0965 14Z" 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_assistant_24_regular.svg";

Details

Keywords

timedateplanningai