Calendar Edit icon

Use the Calendar Edit 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 { CalendarEdit24Regular, CalendarEdit24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.7487 3C19.5435 3 20.9984 4.45495 20.9984 6.24971V11.0115C20.492 10.9678 19.9774 11.0412 19.4985 11.2317V8.49952H4.49987V17.7487C4.49987 18.7151 5.2833 19.4985 6.24971 19.4985H11.5402C11.5333 19.5241 11.5266 19.5497 11.5202 19.5754L11.1644 20.9984H6.24971C4.45495 20.9984 3 19.5435 3 17.7487V6.24971C3 4.45495 4.45495 3 6.24971 3H17.7487ZM17.7487 4.49987H6.24971C5.2833 4.49987 4.49987 5.2833 4.49987 6.24971V6.99965H19.4985V6.24971C19.4985 5.2833 18.7151 4.49987 17.7487 4.49987ZM13.1965 18.5705L19.0984 12.6686C19.991 11.7761 21.4381 11.7761 22.3306 12.6686C23.2231 13.5611 23.2231 15.0082 22.3306 15.9008L16.4287 21.8027C16.0846 22.1468 15.6534 22.3909 15.1813 22.5089L13.3508 22.9666C12.5547 23.1656 11.8336 22.4445 12.0327 21.6484L12.4903 19.8179C12.6083 19.3458 12.8524 18.9146 13.1965 18.5705ZM9 15.75C9 15.0596 8.44036 14.5 7.75 14.5C7.05964 14.5 6.5 15.0596 6.5 15.75C6.5 16.4404 7.05964 17 7.75 17C8.44036 17 9 16.4404 9 15.75ZM13.25 15.75C13.25 15.0596 12.6904 14.5 12 14.5C11.3096 14.5 10.75 15.0596 10.75 15.75C10.75 16.4404 11.3096 17 12 17C12.6904 17 13.25 16.4404 13.25 15.75ZM9 11.75C9 11.0596 8.44036 10.5 7.75 10.5C7.05964 10.5 6.5 11.0596 6.5 11.75C6.5 12.4404 7.05964 13 7.75 13C8.44036 13 9 12.4404 9 11.75ZM13.25 11.75C13.25 11.0596 12.6904 10.5 12 10.5C11.3096 10.5 10.75 11.0596 10.75 11.75C10.75 12.4404 11.3096 13 12 13C12.6904 13 13.25 12.4404 13.25 11.75ZM17.5 11.75C17.5 11.0596 16.9404 10.5 16.25 10.5C15.5596 10.5 15 11.0596 15 11.75C15 12.4404 15.5596 13 16.25 13C16.9404 13 17.5 12.4404 17.5 11.75Z" 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_edit_24_regular.svg";

Details

Keywords

timedateplanning