Star Emphasis icon

Use the Star Emphasis 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 { StarEmphasis24Regular, StarEmphasis24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_star_emphasis_24_regular.svg" width="24" height="24" alt="Star Emphasis">

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="M13.209 3.10215C12.7138 2.09876 11.283 2.09877 10.7878 3.10215L8.42988 7.87987L3.15735 8.64601C2.05005 8.80691 1.60791 10.1677 2.40916 10.9487L6.2244 14.6676L5.32374 19.9189C5.13459 21.0217 6.29213 21.8627 7.28252 21.342L11.9984 18.8627L16.7143 21.342C17.7047 21.8627 18.8622 21.0217 18.6731 19.9189L17.7724 14.6676L21.5877 10.9487C22.3889 10.1677 21.9468 8.80691 20.8395 8.64601L15.567 7.87987L13.209 3.10215ZM9.74008 8.61443L11.9984 4.03854L14.2568 8.61443C14.4534 9.01288 14.8335 9.28904 15.2732 9.35294L20.323 10.0867L16.6689 13.6486C16.3508 13.9587 16.2056 14.4055 16.2807 14.8435L17.1433 19.8729L12.6266 17.4983C12.2333 17.2915 11.7635 17.2915 11.3702 17.4983L6.85353 19.8729L7.71614 14.8435C7.79125 14.4055 7.64606 13.9587 7.32788 13.6486L3.67382 10.0867L8.72361 9.35294C9.16332 9.28904 9.54344 9.01288 9.74008 8.61443ZM1.16438 3.78102C0.905619 4.10446 0.95806 4.57643 1.28151 4.83519L3.78151 6.83519C4.10495 7.09395 4.57692 7.04151 4.83568 6.71806C5.09444 6.39461 5.042 5.92265 4.71855 5.66389L2.21855 3.66389C1.8951 3.40513 1.42313 3.45757 1.16438 3.78102ZM22.8357 18.2181C23.0945 17.8946 23.042 17.4226 22.7186 17.1639L20.2186 15.1639C19.8951 14.9051 19.4232 14.9576 19.1644 15.281C18.9056 15.6045 18.9581 16.0764 19.2815 16.3352L21.7815 18.3352C22.105 18.5939 22.5769 18.5415 22.8357 18.2181ZM1.28151 17.1639C0.95806 17.4226 0.905619 17.8946 1.16438 18.2181C1.42313 18.5415 1.8951 18.5939 2.21855 18.3352L4.71855 16.3352C5.042 16.0764 5.09444 15.6045 4.83568 15.281C4.57692 14.9576 4.10495 14.9051 3.78151 15.1639L1.28151 17.1639ZM22.8357 3.78102C23.0945 4.10446 23.042 4.57643 22.7186 4.83519L20.2186 6.83519C19.8951 7.09395 19.4232 7.04151 19.1644 6.71806C18.9056 6.39461 18.9581 5.92265 19.2815 5.66389L21.7815 3.66389C22.105 3.40513 22.5769 3.45757 22.8357 3.78102Z" 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/star_emphasis_24_regular.svg";

Details

Keywords

favoriteratingvotemotiontransitionalert