Fluent Icons

Calendar Play icon

Used in calendar scenarios. The Calendar Play icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_calendar_play_24_regular.svg

Calendar Play icon in React

npm install @fluentui/react-icons

import { CalendarPlay24Regular } from "@fluentui/react-icons";

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

Calendar Play icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/calendar_play_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/calendar_play_24_regular.svg" width="24" height="24" alt="Calendar Play">

Calendar Play icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.CalendarPlay())" />

Calendar Play icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.calendar_play_24_regular)

Calendar Play icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF0AF;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF0AF;" FontSize="24" />

Calendar Play icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_calendar_play_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f0af";
  font-size: 24px;
}

Calendar Play icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_calendar_play_24_regular" />

// Kotlin
R.drawable.ic_fluent_calendar_play_24_regular

Calendar Play icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .calendarPlay24Regular)

Calendar Play icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameCalendar Play
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_calendar_play_24_regular.svg
Filled fileic_fluent_calendar_play_24_filled.svg
React (Regular)CalendarPlay16Regular, CalendarPlay20Regular, CalendarPlay24Regular, CalendarPlay28Regular
React (Filled)CalendarPlay16Filled, CalendarPlay20Filled, CalendarPlay24Filled, CalendarPlay28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

timedateplanningplay

Related icons

CalendarCalendar 3 DayCalendar AddCalendar AgendaCalendar Arrow CounterclockwiseCalendar Arrow DownCalendar Arrow Repeat AllCalendar Arrow RightCalendar AssistantCalendar CancelCalendar ChatCalendar Checkmark