Person Star icon
Used to represent people who are set to favorites, very important person, etc. The Person Star icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Person 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 { PersonStar24Regular, PersonStar24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonStar24Regular aria-label="Person Star" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_star_24_regular.svg" width="24" height="24" alt="Person 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="M11.3138 15.4992C11.4862 14.9657 11.7257 14.4624 12.0223 13.9992H5.25278C4.01076 13.9992 3.00391 15.0061 3.00391 16.2481V16.8258C3.00391 17.7185 3.32242 18.582 3.90219 19.2609C5.46849 21.0952 7.8545 22.0004 11.0004 22.0004C11.6003 22.0004 12.1726 21.9674 12.7169 21.9014C12.3259 21.4767 11.9906 20.9997 11.7229 20.4821C11.4883 20.4943 11.2475 20.5004 11.0004 20.5004C8.26206 20.5004 6.29618 19.7546 5.04287 18.2869C4.69502 17.8795 4.50391 17.3614 4.50391 16.8258V16.2481C4.50391 15.8345 4.83919 15.4992 5.25278 15.4992H11.3138ZM11.0004 2.00391C13.7618 2.00391 16.0004 4.24248 16.0004 7.00391C16.0004 9.76533 13.7618 12.0039 11.0004 12.0039C8.23894 12.0039 6.00036 9.76533 6.00036 7.00391C6.00036 4.24248 8.23894 2.00391 11.0004 2.00391ZM11.0004 3.50391C9.06737 3.50391 7.50036 5.07091 7.50036 7.00391C7.50036 8.9369 9.06737 10.5039 11.0004 10.5039C12.9334 10.5039 14.5004 8.9369 14.5004 7.00391C14.5004 5.07091 12.9334 3.50391 11.0004 3.50391ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM18.0554 14.4206C17.8806 13.8598 17.1194 13.8598 16.9446 14.4206L16.3876 16.2077H14.5851C14.0194 16.2077 13.7842 16.9623 14.2418 17.3089L15.7001 18.4134L15.1431 20.2004C14.9683 20.7612 15.584 21.2276 16.0417 20.881L17.5 19.7766L18.9583 20.881C19.416 21.2276 20.0317 20.7612 19.8569 20.2004L19.2999 18.4134L20.7582 17.3089C21.2158 16.9623 20.9806 16.2077 20.4149 16.2077H18.6124L18.0554 14.4206Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/person_star_24_regular.svg";Details
| Name | Person Star |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_star_24_regular.svg |
| Filled file | ic_fluent_person_star_24_filled.svg |
| React components | PersonStar24Regular, PersonStar24Filled |
| License | MIT (© Microsoft Corporation) |