Calendar Play icon
Used in calendar scenarios. The Calendar Play icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Calendar Play 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 { CalendarPlay24Regular, CalendarPlay24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarPlay24Regular aria-label="Calendar Play" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_play_24_regular.svg" width="24" height="24" alt="Calendar Play"> 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.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.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.5ZM17.5 23C20.5376 23 23 20.5377 23 17.5C23 14.4623 20.5376 12 17.5 12C14.4624 12 12 14.4623 12 17.5C12 20.5377 14.4624 23 17.5 23ZM16.5964 15.0001C16.7124 15.0001 16.8181 15.0323 16.9134 15.097L19.7199 16.9372C19.807 16.9933 19.8754 17.0676 19.9251 17.1604C19.9748 17.2511 19.9997 17.3502 19.9997 17.4579C19.9997 17.5615 19.9759 17.6605 19.9282 17.7554C19.9159 17.7799 19.9025 17.8029 19.8878 17.8247C19.8453 17.8879 19.7924 17.9401 19.7293 17.9819L16.9228 19.8967C16.8853 19.9215 16.8475 19.9421 16.809 19.9579C16.7941 19.9641 16.7792 19.9695 16.7642 19.9743C16.7124 19.9913 16.6565 19.9999 16.5964 19.9999C16.5177 19.9999 16.442 19.9838 16.3695 19.9516C16.297 19.917 16.2328 19.8716 16.1768 19.8158C16.1229 19.7574 16.0795 19.6905 16.0463 19.6153C16.0152 19.5398 15.9997 19.461 15.9997 19.379V15.621C15.9997 15.5369 16.0152 15.4572 16.0463 15.3817C16.0795 15.3062 16.1229 15.2406 16.1768 15.1845C16.2307 15.1284 16.2939 15.0842 16.3664 15.0517C16.4389 15.0174 16.5156 15.0001 16.5964 15.0001Z" 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_play_24_regular.svg";Details
| Name | Calendar Play |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_play_24_regular.svg |
| Filled file | ic_fluent_calendar_play_24_filled.svg |
| React components | CalendarPlay24Regular, CalendarPlay24Filled |
| License | MIT (© Microsoft Corporation) |