Star Arrow Right Start icon
Used in general rating scenarios. The Star Arrow Right Start 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 Start 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 { StarArrowRightStart24Regular, StarArrowRightStart24Filled } from "@fluentui/react-icons";
export function Example() {
return <StarArrowRightStart24Regular aria-label="Star Arrow Right Start" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_star_arrow_right_start_24_regular.svg" width="24" height="24" alt="Star Arrow Right Start"> 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.9487L17.7724 14.6676L18.6731 19.9189C18.8622 21.0217 17.7047 21.8627 16.7143 21.342L12.7582 19.2621C12.899 18.761 12.9813 18.2354 12.9972 17.6931L17.1433 19.8729L16.2807 14.8435C16.2056 14.4055 16.3508 13.9587 16.6689 13.6486L20.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.0867L4.83188 11.2155C4.29604 11.3574 3.78734 11.566 3.31521 11.8319L2.40916 10.9487C1.60791 10.1677 2.05005 8.80691 3.15735 8.64601L8.42988 7.87987L10.7878 3.10215ZM12 17.4995C12 20.5371 9.53757 22.9995 6.5 22.9995C3.46243 22.9995 1 20.5371 1 17.4995C1 14.4619 3.46243 11.9995 6.5 11.9995C9.53757 11.9995 12 14.4619 12 17.4995ZM3.5 16.9995C3.22386 16.9995 3 17.2234 3 17.4995C3 17.7757 3.22386 17.9995 3.5 17.9995L8.29289 17.9995L6.64645 19.646C6.45118 19.8412 6.45118 20.1578 6.64645 20.3531C6.84171 20.5483 7.15829 20.5483 7.35355 20.3531L9.85355 17.8531C10.0488 17.6578 10.0488 17.3412 9.85355 17.146L7.35355 14.646C7.15829 14.4507 6.84171 14.4507 6.64645 14.646C6.45118 14.8412 6.45119 15.1578 6.64645 15.3531L8.29289 16.9995L3.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_start_24_regular.svg";Details
| Name | Star Arrow Right Start |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_star_arrow_right_start_24_regular.svg |
| Filled file | ic_fluent_star_arrow_right_start_24_filled.svg |
| React components | StarArrowRightStart24Regular, StarArrowRightStart24Filled |
| License | MIT (© Microsoft Corporation) |