Star icon

Microsoft uses it in general rating scenarios. The Star icon is tagged rating, vote and favorite. Similar Fluent icons include Star Add, Star Arrow Back and Star Arrow Right End.

Regular (outlined)

SVG

Filled

SVG
Star Color

Color

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

Star icon in React

npm install @fluentui/react-icons

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

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

Use the Star icon in React

Import Star24Regular and Star24Filled from Microsoft's @fluentui/react-icons package; the code tabs above have this and other platforms. Coding agents can look the component up through the Fluent Icons MCP server.

Details

NameStar
StylesRegular (outlined), Filled, Color
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_star_24_regular.svg
Filled fileic_fluent_star_24_filled.svg
Color fileic_fluent_star_24_color.svg
React (Regular)Star12Regular, Star16Regular, Star20Regular, Star24Regular, Star28Regular, Star32Regular, Star48Regular
React (Filled)Star12Filled, Star16Filled, Star20Filled, Star24Filled, Star28Filled, Star32Filled, Star48Filled
React (Color)Star16Color, Star20Color, Star24Color, Star28Color, Star32Color, Star48Color
Font glyph (Regular, 24 px)U+F710 · &#xF710;
Font glyph (Filled, 24 px)U+F719 · &#xF719;
LicenseMIT (© Microsoft Corporation)

Keywords

favoriteratingvote

Also in Material Symbols

Star iconStarGoogle's version of this icon, on Materialicons

Similar icons