Calendar Multiple icon

Use the Calendar Multiple 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 { CalendarMultiple24Regular, CalendarMultiple24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M19.9935 5.00676L19.9983 5.12836L20 5.25V16.35C20 18.3658 18.3658 20 16.35 20H5.25C5.16844 20 5.08742 19.9977 5.007 19.9932C5.58285 20.8988 6.59621 21.5 7.75 21.5H16.35C19.1943 21.5 21.5 19.1943 21.5 16.35V7.75C21.5 6.59664 20.8992 5.5836 19.9935 5.00676ZM5.25 2C3.45507 2 2 3.45507 2 5.25V15.75C2 17.5449 3.45507 19 5.25 19H15.75C17.5449 19 19 17.5449 19 15.75V5.25C19 3.45507 17.5449 2 15.75 2H5.25ZM3.5 7.5H17.5V15.75C17.5 16.7165 16.7165 17.5 15.75 17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V7.5ZM5.25 3.5H15.75C16.7165 3.5 17.5 4.2835 17.5 5.25V6H3.5V5.25C3.5 4.2835 4.2835 3.5 5.25 3.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_multiple_24_regular.svg";

Details

Keywords

timedateplanning