Calendar Checkmark Center icon

Use the Calendar Checkmark Center 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 { CalendarCheckmarkCenter24Regular, CalendarCheckmarkCenter24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CalendarCheckmarkCenter24Regular aria-label="Calendar Checkmark Center" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_checkmark_center_24_regular.svg" width="24" height="24" alt="Calendar Checkmark Center">

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.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM4.5 17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V8.5H4.5V17.75ZM15.2197 10.7197C15.5126 10.4268 15.9874 10.4268 16.2803 10.7197C16.5732 11.0126 16.5732 11.4874 16.2803 11.7803L11.2803 16.7803C10.9874 17.0732 10.5126 17.0732 10.2197 16.7803L7.71973 14.2803C7.42683 13.9874 7.42683 13.5126 7.71973 13.2197C7.99433 12.9451 8.42905 12.9277 8.72363 13.168L8.78027 13.2197L10.75 15.1895L15.2197 10.7197ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.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_checkmark_center_24_regular.svg";

Details