Stack Star icon

Used to represent stacked content & collections. The Stack 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

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

Stack Star icon in React

npm install @fluentui/react-icons

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

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

Stack Star icon in SVG

npm install @fluentui/svg-icons

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

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

Stack 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.StackStar())" />

Stack Star icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.stack_star_24_regular)

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

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

Stack 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_stack_star_24_regular"></i>

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

Stack 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_stack_star_24_regular" />

// Kotlin
R.drawable.ic_fluent_stack_star_24_regular

Stack Star icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .stackStar24Regular)

Stack 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 Stack 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 { StackStar24Regular, StackStar24Filled } from "@fluentui/react-icons";

export function Example() {
  return <StackStar24Regular aria-label="Stack 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_stack_star_24_regular.svg" width="24" height="24" alt="Stack 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="M9.5 5.84998C9.78408 5.84998 10.0438 6.01048 10.1708 6.26457L10.9913 7.90555L12.593 8.10577C12.8895 8.14282 13.1357 8.35228 13.2197 8.63897C13.3038 8.92566 13.2096 9.23488 12.9801 9.42614L11.8313 10.3835L12.2321 12.1873C12.2977 12.4823 12.1798 12.7879 11.933 12.9624C11.6862 13.1369 11.3588 13.1462 11.1025 12.986L9.5 11.9844L7.8975 12.986C7.6412 13.1462 7.3138 13.1369 7.06702 12.9624C6.82023 12.7879 6.7023 12.4823 6.76786 12.1873L7.1687 10.3835L6.01986 9.42614C5.79035 9.23488 5.69624 8.92566 5.7803 8.63897C5.86435 8.35228 6.11053 8.14282 6.40698 8.10577L8.00869 7.90555L8.82918 6.26457C8.95623 6.01048 9.21592 5.84998 9.5 5.84998ZM4 4H15C16.1046 4 17 4.89543 17 6V13C17 14.1046 16.1046 15 15 15H4C2.89543 15 2 14.1046 2 13V6C2 4.89543 2.89543 4 4 4ZM15 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V13C3.5 13.2761 3.72386 13.5 4 13.5H15C15.2761 13.5 15.5 13.2761 15.5 13V6C15.5 5.72386 15.2761 5.5 15 5.5ZM4.56302 16C4.78504 16.8626 5.56809 17.5 6.50001 17.5H15.5C17.7091 17.5 19.5 15.7091 19.5 13.5V8.49998C19.5 7.56806 18.8626 6.78501 18 6.56299V13.5C18 14.8807 16.8807 16 15.5 16H4.56302ZM7.06302 18.5C7.28504 19.3626 8.06809 20 9.00001 20H16.25C19.4256 20 22 17.4256 22 14.25V11C22 10.0681 21.3626 9.28501 20.5 9.06299V14.25C20.5 16.5972 18.5972 18.5 16.25 18.5H7.06302Z" fill="currentColor"/></svg>

Details

NameStack Star
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_stack_star_24_regular.svg
Filled fileic_fluent_stack_star_24_filled.svg
React (Regular)StackStar16Regular, StackStar20Regular, StackStar24Regular
React (Filled)StackStar16Filled, StackStar20Filled, StackStar24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

contentlandscapecollectionfavoritelike

Related icons