Fluent Icons

Calendar Star icon

Used in calendar scenarios. The Calendar Star icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 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_star_24_regular.svg

Calendar Star icon in React

npm install @fluentui/react-icons

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

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

Calendar Star icon in SVG

npm install @fluentui/svg-icons

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

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

Calendar Star icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Calendar Star icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.calendar_star_24_regular)

Calendar Star 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="&#xF237;" FontSize="24" />

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

Calendar Star 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_star_24_regular"></i>

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

Calendar Star 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_star_24_regular" />

// Kotlin
R.drawable.ic_fluent_calendar_star_24_regular

Calendar Star icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .calendarStar24Regular)

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

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_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>

Details

NameCalendar Star
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_calendar_star_24_regular.svg
Filled fileic_fluent_calendar_star_24_filled.svg
React (Regular)CalendarStar16Regular, CalendarStar20Regular, CalendarStar24Regular
React (Filled)CalendarStar16Filled, CalendarStar20Filled, CalendarStar24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

timedateplanning

Related icons

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