Star Arrow Right End icon
Used in general rating scenarios. The Star Arrow Right End 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 Arrow Right End 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 { StarArrowRightEnd24Regular, StarArrowRightEnd24Filled } from "@fluentui/react-icons";
export function Example() {
return <StarArrowRightEnd24Regular aria-label="Star Arrow Right End" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_star_arrow_right_end_24_regular.svg" width="24" height="24" alt="Star Arrow Right End"> 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="M10.7878 3.10215C11.283 2.09877 12.7138 2.09876 13.209 3.10215L15.567 7.87987L20.8395 8.64601C21.9468 8.80691 22.3889 10.1677 21.5877 10.9487L20.6828 11.8307C20.2105 11.565 19.7016 11.3566 19.1656 11.2149L20.323 10.0867L15.2732 9.35294C14.8335 9.28904 14.4534 9.01288 14.2568 8.61443L11.9984 4.03854L9.74008 8.61443C9.54344 9.01288 9.16332 9.28904 8.72361 9.35294L3.67382 10.0867L7.32788 13.6486C7.64606 13.9587 7.79125 14.4055 7.71614 14.8435L6.85353 19.8729L11.0028 17.6915C11.0185 18.2338 11.1007 18.7595 11.2414 19.2607L7.28252 21.342C6.29213 21.8627 5.13459 21.0217 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.10215ZM23 17.4995C23 20.5371 20.5376 22.9995 17.5 22.9995C14.4624 22.9995 12 20.5371 12 17.4995C12 14.4619 14.4624 11.9995 17.5 11.9995C20.5376 11.9995 23 14.4619 23 17.4995ZM14.5 16.9995C14.2239 16.9995 14 17.2234 14 17.4995C14 17.7757 14.2239 17.9995 14.5 17.9995L19.2929 17.9995L17.6464 19.646C17.4512 19.8412 17.4512 20.1578 17.6464 20.3531C17.8417 20.5483 18.1583 20.5483 18.3536 20.3531L20.8536 17.8531C21.0488 17.6578 21.0488 17.3412 20.8536 17.146L18.3536 14.646C18.1583 14.4507 17.8417 14.4507 17.6464 14.646C17.4512 14.8412 17.4512 15.1578 17.6464 15.3531L19.2929 16.9995L14.5 16.9995Z" 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_arrow_right_end_24_regular.svg";Details
| Name | Star Arrow Right End |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_star_arrow_right_end_24_regular.svg |
| Filled file | ic_fluent_star_arrow_right_end_24_filled.svg |
| React components | StarArrowRightEnd24Regular, StarArrowRightEnd24Filled |
| License | MIT (© Microsoft Corporation) |