Star One Quarter icon

Use the Star One 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 { StarOneQuarter24Regular, StarOneQuarter24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_star_one_quarter_24_regular.svg" width="24" height="24" alt="Star One 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.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.17443 20.7894 5.86428 21.4968 6.64865 21.5001C6.85853 21.5012 7.07524 21.452 7.28448 21.342L9 20.4401V20.4391L11.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 18.7444V9.28234C9.31955 9.16352 9.58608 8.92647 9.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.4983L9 18.7444Z" 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_one_quarter_24_regular.svg";

Details

Keywords

favoriteratingvote