Fluent Icons

Star Emphasis icon

Used in general rating scenarios. The Star Emphasis icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 32 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_star_emphasis_24_regular.svg

Star Emphasis icon in React

npm install @fluentui/react-icons

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

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

Star Emphasis icon in SVG

npm install @fluentui/svg-icons

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

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

Star Emphasis icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Star Emphasis icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.star_emphasis_24_regular)

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

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

Star Emphasis 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_star_emphasis_24_regular"></i>

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

Star Emphasis icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_star_emphasis_24_regular

Star Emphasis icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .starEmphasis24Regular)

Star Emphasis 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 Star Emphasis 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 { StarEmphasis24Regular, StarEmphasis24Filled } from "@fluentui/react-icons";

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

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_star_emphasis_24_regular.svg" width="24" height="24" alt="Star Emphasis">

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="M13.209 3.10215C12.7138 2.09876 11.283 2.09877 10.7878 3.10215L8.42988 7.87987L3.15735 8.64601C2.05005 8.80691 1.60791 10.1677 2.40916 10.9487L6.2244 14.6676L5.32374 19.9189C5.13459 21.0217 6.29213 21.8627 7.28252 21.342L11.9984 18.8627L16.7143 21.342C17.7047 21.8627 18.8622 21.0217 18.6731 19.9189L17.7724 14.6676L21.5877 10.9487C22.3889 10.1677 21.9468 8.80691 20.8395 8.64601L15.567 7.87987L13.209 3.10215ZM9.74008 8.61443L11.9984 4.03854L14.2568 8.61443C14.4534 9.01288 14.8335 9.28904 15.2732 9.35294L20.323 10.0867L16.6689 13.6486C16.3508 13.9587 16.2056 14.4055 16.2807 14.8435L17.1433 19.8729L12.6266 17.4983C12.2333 17.2915 11.7635 17.2915 11.3702 17.4983L6.85353 19.8729L7.71614 14.8435C7.79125 14.4055 7.64606 13.9587 7.32788 13.6486L3.67382 10.0867L8.72361 9.35294C9.16332 9.28904 9.54344 9.01288 9.74008 8.61443ZM1.16438 3.78102C0.905619 4.10446 0.95806 4.57643 1.28151 4.83519L3.78151 6.83519C4.10495 7.09395 4.57692 7.04151 4.83568 6.71806C5.09444 6.39461 5.042 5.92265 4.71855 5.66389L2.21855 3.66389C1.8951 3.40513 1.42313 3.45757 1.16438 3.78102ZM22.8357 18.2181C23.0945 17.8946 23.042 17.4226 22.7186 17.1639L20.2186 15.1639C19.8951 14.9051 19.4232 14.9576 19.1644 15.281C18.9056 15.6045 18.9581 16.0764 19.2815 16.3352L21.7815 18.3352C22.105 18.5939 22.5769 18.5415 22.8357 18.2181ZM1.28151 17.1639C0.95806 17.4226 0.905619 17.8946 1.16438 18.2181C1.42313 18.5415 1.8951 18.5939 2.21855 18.3352L4.71855 16.3352C5.042 16.0764 5.09444 15.6045 4.83568 15.281C4.57692 14.9576 4.10495 14.9051 3.78151 15.1639L1.28151 17.1639ZM22.8357 3.78102C23.0945 4.10446 23.042 4.57643 22.7186 4.83519L20.2186 6.83519C19.8951 7.09395 19.4232 7.04151 19.1644 6.71806C18.9056 6.39461 18.9581 5.92265 19.2815 5.66389L21.7815 3.66389C22.105 3.40513 22.5769 3.45757 22.8357 3.78102Z" fill="currentColor"/></svg>

Details

NameStar Emphasis
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_star_emphasis_24_regular.svg
Filled fileic_fluent_star_emphasis_24_filled.svg
React (Regular)StarEmphasis16Regular, StarEmphasis20Regular, StarEmphasis24Regular, StarEmphasis32Regular
React (Filled)StarEmphasis16Filled, StarEmphasis20Filled, StarEmphasis24Filled, StarEmphasis32Filled
LicenseMIT (© Microsoft Corporation)

Keywords

favoriteratingvotealert

Related icons

StarStar AddStar Arrow BackStar Arrow Right EndStar Arrow Right StartStar DismissStar EditStar HalfStar Line Horizontal 3Star OffStar One QuarterStar Prohibited