People Star icon

Use the People 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 { PeopleStar24Regular, PeopleStar24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_people_star_24_regular.svg" width="24" height="24" alt="People 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="M5.5 7C5.5 5.61929 6.61929 4.5 8 4.5C9.38071 4.5 10.5 5.61929 10.5 7C10.5 8.38071 9.38071 9.5 8 9.5C6.61929 9.5 5.5 8.38071 5.5 7ZM8 3C5.79086 3 4 4.79086 4 7C4 9.20914 5.79086 11 8 11C10.2091 11 12 9.20914 12 7C12 4.79086 10.2091 3 8 3ZM15.5 8C15.5 7.17157 16.1716 6.5 17 6.5C17.8284 6.5 18.5 7.17157 18.5 8C18.5 8.82843 17.8284 9.5 17 9.5C16.1716 9.5 15.5 8.82843 15.5 8ZM17 5C15.3431 5 14 6.34315 14 8C14 9.65685 15.3431 11 17 11C18.6569 11 20 9.65685 20 8C20 6.34315 18.6569 5 17 5ZM4.25 13C3.00736 13 2 14.0074 2 15.25V15.5011L2 15.5022L2.00001 15.5048L2.00007 15.5111L2.00035 15.5277C2.00064 15.5406 2.00117 15.5571 2.0021 15.5771C2.00396 15.6169 2.00745 15.6705 2.01398 15.7358C2.02701 15.8661 2.05233 16.045 2.10165 16.2564C2.19995 16.6776 2.39654 17.2404 2.79183 17.8051C3.61066 18.9749 5.17178 20 8 20C9.36897 20 10.4411 19.7598 11.2758 19.3793C11.1268 18.8851 11.035 18.366 11.0082 17.8299C10.3633 18.2108 9.41267 18.5 8 18.5C5.57822 18.5 4.51434 17.6501 4.02067 16.9449C3.75971 16.5721 3.62818 16.1974 3.56241 15.9155C3.5297 15.7753 3.514 15.6612 3.50653 15.5865C3.50281 15.5493 3.50117 15.5222 3.50047 15.5072L3.5 15.4947V15.25C3.5 14.8358 3.83579 14.5 4.25 14.5H11.7322C11.9807 14.0233 12.2865 13.5813 12.6405 13.1831C12.3674 13.0653 12.0663 13 11.75 13H4.25ZM23 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/people_star_24_regular.svg";

Details

Keywords

humanpersonfavoriteleadershipcorner