Star Off icon
Used in general rating scenarios. The Star Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Star Off 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 { StarOff24Regular, StarOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <StarOff24Regular aria-label="Star Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_star_off_24_regular.svg" width="24" height="24" alt="Star Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L7.0238 8.08456L3.15735 8.64639C2.05005 8.80729 1.60791 10.1681 2.40916 10.9491L6.2244 14.668L5.32374 19.9192C5.13459 21.0221 6.29213 21.8631 7.28252 21.3424L11.9984 18.8631L16.7143 21.3424C17.7047 21.8631 18.8622 21.0221 18.6731 19.9192L18.6348 19.6958L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM16.7978 17.8587L17.1433 19.8732L12.6266 17.4987C12.2333 17.2919 11.7635 17.2919 11.3702 17.4987L6.85353 19.8732L7.71614 14.8439C7.79125 14.4059 7.64606 13.9591 7.32788 13.6489L3.67382 10.0871L8.34722 9.40801L16.7978 17.8587ZM20.323 10.0871L16.751 13.569L17.8117 14.6297L21.5877 10.9491C22.3889 10.168 21.9468 8.80728 20.8395 8.64639L15.567 7.88024L13.209 3.10252C12.7138 2.09914 11.283 2.09914 10.7878 3.10252L9.29978 6.11763L10.4198 7.23764L11.9984 4.03892L14.2568 8.61481C14.4534 9.01325 14.8335 9.28942 15.2732 9.35331L20.323 10.0871Z" 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_off_24_regular.svg";Details
| Name | Star Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_star_off_24_regular.svg |
| Filled file | ic_fluent_star_off_24_filled.svg |
| React components | StarOff24Regular, StarOff24Filled |
| License | MIT (© Microsoft Corporation) |