Star Three Quarter icon

Use the Star Three Quarter 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 { StarThreeQuarter24Regular, StarThreeQuarter24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_star_three_quarter_24_regular.svg" width="24" height="24" alt="Star Three Quarter">

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.211 3.10215L15 6.72713V6.73109L15.567 7.87987L20.8395 8.64601C21.9468 8.80691 22.3889 10.1677 21.5877 10.9487L17.7724 14.6676L18.6731 19.9189C18.8622 21.0217 17.7047 21.8627 16.7143 21.342L11.9994 18.8632L7.28448 21.342C7.07736 21.4509 6.86293 21.5002 6.65504 21.5001C5.86803 21.5007 5.17402 20.7918 5.32374 19.9189L6.2244 14.6676L2.40916 10.9487C1.60791 10.1677 2.05005 8.80691 3.15735 8.64601L8.42988 7.87987L10.7878 3.10215C11.0356 2.60012 11.5176 2.34928 11.9994 2.34961C12.4812 2.34926 12.9632 2.60011 13.211 3.10215ZM15 9.28352V18.7461L17.1433 19.8729L16.2807 14.8435C16.2056 14.4055 16.3508 13.9587 16.6689 13.6486L20.323 10.0867L15.2732 9.35294C15.179 9.33925 15.0875 9.31581 15 9.28352Z" 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_three_quarter_24_regular.svg";

Details

Keywords

favoriteratingvote