Fluent Icons

Ribbon Star icon

Used to represent a reward or a certificate (physical or digital). The Ribbon Star icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 3 sizes from 20 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
Ribbon Star Color

Color

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_ribbon_star_24_regular.svg

Ribbon Star icon in React

npm install @fluentui/react-icons

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

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

Ribbon Star icon in SVG

npm install @fluentui/svg-icons

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

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

Ribbon 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.RibbonStar())" />

Ribbon Star icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.ribbon_star_24_regular)

Ribbon 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="&#xEA30;" FontSize="24" />

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

Ribbon 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_ribbon_star_24_regular"></i>

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

Ribbon 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_ribbon_star_24_regular" />

// Kotlin
R.drawable.ic_fluent_ribbon_star_24_regular

Ribbon Star icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .ribbonStar24Regular)

Ribbon 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 Ribbon 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 { RibbonStar24Regular, RibbonStar24Filled } from "@fluentui/react-icons";

export function Example() {
  return <RibbonStar24Regular aria-label="Ribbon 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_ribbon_star_24_regular.svg" width="24" height="24" alt="Ribbon 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="M12.2288 5.64234L13.1414 7.495L15.1853 7.79036C15.3946 7.8206 15.4783 8.07783 15.3268 8.22543L13.8485 9.66589L14.1975 11.7013C14.2332 11.9097 14.0144 12.0686 13.8273 11.97L12.0001 11.0076L10.1728 11.97C9.98566 12.0686 9.76674 11.9096 9.80266 11.7011L10.1534 9.66589L8.67339 8.22553C8.52177 8.07798 8.60539 7.82061 8.81478 7.79036L10.8587 7.495L11.7713 5.64234C11.8648 5.45255 12.1354 5.45255 12.2288 5.64234ZM19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 10.907 5.76256 12.6359 6.99937 13.8983L7.0008 21.2502L7.00774 21.3547C7.08074 21.8973 7.71499 22.1927 8.18265 21.8634L11.9991 19.1757L15.8175 21.8635L15.907 21.918C16.3926 22.1706 16.9992 21.8221 16.9992 21.2502L17.0006 13.8983C18.2374 12.6359 19 10.907 19 9ZM15.4994 15.0639L15.4992 19.8051L12.4306 17.6452L12.3298 17.5853C12.0866 17.4657 11.7937 17.4857 11.5671 17.6453L8.5008 19.8047L8.50058 15.0639C9.53006 15.6592 10.7252 16 12 16C13.2748 16 14.4699 15.6592 15.4994 15.0639ZM6.5 9C6.5 5.96243 8.96243 3.5 12 3.5C15.0376 3.5 17.5 5.96243 17.5 9C17.5 12.0376 15.0376 14.5 12 14.5C8.96243 14.5 6.5 12.0376 6.5 9Z" fill="currentColor"/></svg>

Details

NameRibbon Star
StylesRegular (outlined), Filled, Color
Sizes20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_ribbon_star_24_regular.svg
Filled fileic_fluent_ribbon_star_24_filled.svg
Color fileic_fluent_ribbon_star_24_color.svg
React (Regular)RibbonStar20Regular, RibbonStar24Regular, RibbonStar32Regular
React (Filled)RibbonStar20Filled, RibbonStar24Filled, RibbonStar32Filled
React (Color)RibbonStar20Color, RibbonStar24Color, RibbonStar32Color
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

Person RibbonRibbonRibbon AddRibbon OffRewardBook StarCalendar StarContact Card RibbonData Bar Vertical StarDocument RibbonGlobe StarLock Closed Ribbon