Ribbon Star icon
Used to represent a reward or a certificate (physical or digital). The Ribbon Star 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 Ribbon 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 { RibbonStar24Regular, RibbonStar24Filled } from "@fluentui/react-icons";
export function Example() {
return <RibbonStar24Regular aria-label="Ribbon Star" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ribbon_star_24_regular.svg" width="24" height="24" alt="Ribbon 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="M12.2288 5.64234L13.1414 7.495L15.1853 7.79036C15.3946 7.8206 15.4783 8.07783 15.3268 8.22543L13.8485 9.66589L14.1975 11.7013C14.2332 11.9097 14.0144 12.0686 13.8273 11.97L12.0001 11.0076L10.1728 11.97C9.98566 12.0686 9.76674 11.9096 9.80266 11.7011L10.1534 9.66589L8.67339 8.22553C8.52177 8.07798 8.60539 7.82061 8.81478 7.79036L10.8587 7.495L11.7713 5.64234C11.8648 5.45255 12.1354 5.45255 12.2288 5.64234ZM19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 10.907 5.76256 12.6359 6.99937 13.8983L7.0008 21.2502L7.00774 21.3547C7.08074 21.8973 7.71499 22.1927 8.18265 21.8634L11.9991 19.1757L15.8175 21.8635L15.907 21.918C16.3926 22.1706 16.9992 21.8221 16.9992 21.2502L17.0006 13.8983C18.2374 12.6359 19 10.907 19 9ZM15.4994 15.0639L15.4992 19.8051L12.4306 17.6452L12.3298 17.5853C12.0866 17.4657 11.7937 17.4857 11.5671 17.6453L8.5008 19.8047L8.50058 15.0639C9.53006 15.6592 10.7252 16 12 16C13.2748 16 14.4699 15.6592 15.4994 15.0639ZM6.5 9C6.5 5.96243 8.96243 3.5 12 3.5C15.0376 3.5 17.5 5.96243 17.5 9C17.5 12.0376 15.0376 14.5 12 14.5C8.96243 14.5 6.5 12.0376 6.5 9Z" 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/ribbon_star_24_regular.svg";Details
| Name | Ribbon Star |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ribbon_star_24_regular.svg |
| Filled file | ic_fluent_ribbon_star_24_filled.svg |
| React components | RibbonStar24Regular, RibbonStar24Filled |
| License | MIT (© Microsoft Corporation) |