Calendar Link icon

Use the Calendar Link 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 { CalendarLink24Regular, CalendarLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M21 6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H11.5657C11.3179 20.5402 11.1437 20.035 11.0589 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V8.5H19.5V14.0065C20.0273 14.0338 20.5319 14.1472 21 14.3328V6.25ZM6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V7H4.5V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5ZM23 18.75C23 16.6789 21.3211 15 19.25 15L19.1482 15.0068C18.7822 15.0565 18.5 15.3703 18.5 15.75C18.5 16.1642 18.8358 16.5 19.25 16.5L19.404 16.5052C20.5748 16.5844 21.5 17.5591 21.5 18.75C21.5 19.9926 20.4926 21 19.25 21L19.2466 21.0046L19.1448 21.0119C18.779 21.0633 18.4983 21.3783 18.5 21.758C18.5019 22.1722 18.8392 22.5065 19.2534 22.5046V22.5L19.4523 22.4948C21.4276 22.3913 23 20.7543 23 18.75ZM16.5 15.75C16.5 15.3358 16.1642 15 15.75 15L15.5508 15.0052C13.5724 15.1087 12 16.7457 12 18.75C12 20.8211 13.6789 22.5 15.75 22.5L15.8518 22.4932C16.2178 22.4435 16.5 22.1297 16.5 21.75C16.5 21.3358 16.1642 21 15.75 21L15.596 20.9948C14.4252 20.9156 13.5 19.9409 13.5 18.75C13.5 17.5074 14.5074 16.5 15.75 16.5L15.8518 16.4932C16.2178 16.4435 16.5 16.1297 16.5 15.75ZM20 18.75C20 18.3358 19.6642 18 19.25 18H15.75L15.6482 18.0068C15.2822 18.0565 15 18.3703 15 18.75C15 19.1642 15.3358 19.5 15.75 19.5H19.25L19.3518 19.4932C19.7178 19.4435 20 19.1297 20 18.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_link_24_regular.svg";

Details

Keywords

timedateplanning