Stack Star icon

Use the Stack 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 { StackStar24Regular, StackStar24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_stack_star_24_regular.svg" width="24" height="24" alt="Stack 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="M9.5 5.84998C9.78408 5.84998 10.0438 6.01048 10.1708 6.26457L10.9913 7.90555L12.593 8.10577C12.8895 8.14282 13.1357 8.35228 13.2197 8.63897C13.3038 8.92566 13.2096 9.23488 12.9801 9.42614L11.8313 10.3835L12.2321 12.1873C12.2977 12.4823 12.1798 12.7879 11.933 12.9624C11.6862 13.1369 11.3588 13.1462 11.1025 12.986L9.5 11.9844L7.8975 12.986C7.6412 13.1462 7.3138 13.1369 7.06702 12.9624C6.82023 12.7879 6.7023 12.4823 6.76786 12.1873L7.1687 10.3835L6.01986 9.42614C5.79035 9.23488 5.69624 8.92566 5.7803 8.63897C5.86435 8.35228 6.11053 8.14282 6.40698 8.10577L8.00869 7.90555L8.82918 6.26457C8.95623 6.01048 9.21592 5.84998 9.5 5.84998ZM4 4H15C16.1046 4 17 4.89543 17 6V13C17 14.1046 16.1046 15 15 15H4C2.89543 15 2 14.1046 2 13V6C2 4.89543 2.89543 4 4 4ZM15 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V13C3.5 13.2761 3.72386 13.5 4 13.5H15C15.2761 13.5 15.5 13.2761 15.5 13V6C15.5 5.72386 15.2761 5.5 15 5.5ZM4.56302 16C4.78504 16.8626 5.56809 17.5 6.50001 17.5H15.5C17.7091 17.5 19.5 15.7091 19.5 13.5V8.49998C19.5 7.56806 18.8626 6.78501 18 6.56299V13.5C18 14.8807 16.8807 16 15.5 16H4.56302ZM7.06302 18.5C7.28504 19.3626 8.06809 20 9.00001 20H16.25C19.4256 20 22 17.4256 22 14.25V11C22 10.0681 21.3626 9.28501 20.5 9.06299V14.25C20.5 16.5972 18.5972 18.5 16.25 18.5H7.06302Z" 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/stack_star_24_regular.svg";

Details

Keywords

contentlandscapecollectionfavoritelike