Calendar Star icon

Use the Calendar Star 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 { CalendarStar24Regular, CalendarStar24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM17.75 3C19.5449 3 21 4.45507 21 6.25L21.0012 12.0226C20.5378 11.7258 20.0342 11.4861 19.5004 11.3136L19.5 8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5L11.3136 19.5004C11.4861 20.0342 11.7258 20.5378 12.0226 21.0012L6.25 21C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM16.984 14.0455L16.9446 14.1441L16.3876 15.9311H14.5851C14.0527 15.9311 13.813 16.5995 14.1682 16.9671L14.2418 17.0323L15.7001 18.1368L15.1431 19.9238C14.978 20.4535 15.5181 20.8989 15.9641 20.6548L16.0417 20.6044L17.5 19.5L18.9583 20.6044C19.3905 20.9318 19.9638 20.534 19.8789 20.0163L19.8569 19.9238L19.2999 18.1368L20.7582 17.0323C21.1889 16.7061 21.0059 16.0185 20.5113 15.9387L20.4149 15.9311H18.6124L18.0554 14.1441C17.8915 13.6183 17.2123 13.5854 16.984 14.0455ZM17.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.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_star_24_regular.svg";

Details

Keywords

timedateplanning