star icon
star-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- star-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
starAkar Iconsstar-filledAnt Design IconsstarBootstrap IconsstarBoxIcons v2starBoxIcons v2 SolidstarCarbonstarEmoji One (Colored)starElement Plusstar-fillEva IconsstarFramework7 IconsstarFont Awesome 6 RegularstarFont Awesome 6 SolidstarFont Awesome RegularstarFont Awesome SolidstarFeather Iconsstar-outlineFlowbite Iconsstar-12-filledFluent UI System IconsstarFluent EmojistarFluent Emoji FlatstarFluent Emoji High ContraststarFirefox OS EmojistarHeroIconsstarHuge IconsstarHumbleicons
Related icons in Fluent UI System Color Icons
Use the star icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGjNz5nrLd)" d="M10.788 3.103c.495-1.004 1.926-1.004 2.421 0l2.358 4.777l5.273.766c1.107.161 1.549 1.522.748 2.303l-3.816 3.72l.901 5.25c.19 1.103-.968 1.944-1.959 1.424l-4.716-2.48l-4.715 2.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25l-3.815-3.72c-.801-.78-.359-2.142.748-2.302L8.43 7.88z"/><defs><linearGradient id="SVGjNz5nrLd" x1="21.994" x2="1.427" y1="21.928" y2="2.53" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorStar24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGjNz5nrLd)" d="M10.788 3.103c.495-1.004 1.926-1.004 2.421 0l2.358 4.777l5.273.766c1.107.161 1.549 1.522.748 2.303l-3.816 3.72l.901 5.25c.19 1.103-.968 1.944-1.959 1.424l-4.716-2.48l-4.715 2.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25l-3.815-3.72c-.801-.78-.359-2.142.748-2.302L8.43 7.88z"/><defs><linearGradient id="SVGjNz5nrLd" x1="21.994" x2="1.427" y1="21.928" y2="2.53" gradientUnits="userSpaceOnUse"><stop stopColor="#ff6f47"/><stop offset="1" stopColor="#ffcd0f"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGjNz5nrLd)" d="M10.788 3.103c.495-1.004 1.926-1.004 2.421 0l2.358 4.777l5.273.766c1.107.161 1.549 1.522.748 2.303l-3.816 3.72l.901 5.25c.19 1.103-.968 1.944-1.959 1.424l-4.716-2.48l-4.715 2.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25l-3.815-3.72c-.801-.78-.359-2.142.748-2.302L8.43 7.88z"/><defs><linearGradient id="SVGjNz5nrLd" x1="21.994" x2="1.427" y1="21.928" y2="2.53" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient></defs></g></svg> </template>
CSS
.icon-star-24 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGjNz5nrLd)%22%20d%3D%22M10.788%203.103c.495-1.004%201.926-1.004%202.421%200l2.358%204.777l5.273.766c1.107.161%201.549%201.522.748%202.303l-3.816%203.72l.901%205.25c.19%201.103-.968%201.944-1.959%201.424l-4.716-2.48l-4.715%202.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25l-3.815-3.72c-.801-.78-.359-2.142.748-2.302L8.43%207.88z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGjNz5nrLd%22%20x1%3D%2221.994%22%20x2%3D%221.427%22%20y1%3D%2221.928%22%20y2%3D%222.53%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGjNz5nrLd)%22%20d%3D%22M10.788%203.103c.495-1.004%201.926-1.004%202.421%200l2.358%204.777l5.273.766c1.107.161%201.549%201.522.748%202.303l-3.816%203.72l.901%205.25c.19%201.103-.968%201.944-1.959%201.424l-4.716-2.48l-4.715%202.48c-.99.52-2.148-.32-1.96-1.424l.901-5.25l-3.815-3.72c-.801-.78-.359-2.142.748-2.302L8.43%207.88z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGjNz5nrLd%22%20x1%3D%2221.994%22%20x2%3D%221.427%22%20y1%3D%2221.928%22%20y2%3D%222.53%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/star-24.svg?color=%231a73e8&size=48
