Person Ribbon icon
Used to represent a person, ribbon, reward, award, bonus. The Person Ribbon 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 Person Ribbon 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 { PersonRibbon24Regular, PersonRibbon24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonRibbon24Regular aria-label="Person Ribbon" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_ribbon_24_regular.svg" width="24" height="24" alt="Person Ribbon"> 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="M15 15.5043C15 14.9782 15.0903 14.4731 15.2562 14.0038H6.25278C5.01076 14.0038 4.00391 15.011 4.00391 16.2535V16.8313C4.00391 17.7244 4.32242 18.5882 4.90219 19.2674C6.46849 21.1022 8.8545 22.0077 12.0004 22.0077C13.5106 22.0077 14.846 21.799 16 21.3791V19.7584C14.9185 20.256 13.5892 20.5072 12.0004 20.5072C9.26206 20.5072 7.29618 19.7611 6.04287 18.2929C5.69502 17.8855 5.50391 17.3672 5.50391 16.8313V16.2535C5.50391 15.8397 5.83919 15.5043 6.25278 15.5043H15ZM12.0004 2.00439C14.7618 2.00439 17.0004 4.24374 17.0004 7.00611C17.0004 9.76849 14.7618 12.0078 12.0004 12.0078C9.23894 12.0078 7.00036 9.76849 7.00036 7.00611C7.00036 4.24374 9.23894 2.00439 12.0004 2.00439ZM12.0004 3.50491C10.0674 3.50491 8.50036 5.07245 8.50036 7.00611C8.50036 8.93977 10.0674 10.5073 12.0004 10.5073C13.9334 10.5073 15.5004 8.93977 15.5004 7.00611C15.5004 5.07245 13.9334 3.50491 12.0004 3.50491ZM23 15.5046C23 17.4383 21.433 19.0058 19.5 19.0058C17.567 19.0058 16 17.4383 16 15.5046C16 13.571 17.567 12.0034 19.5 12.0034C21.433 12.0034 23 13.571 23 15.5046ZM22 19.2481C21.285 19.7269 20.4251 20.0061 19.5 20.0061C18.5749 20.0061 17.715 19.7269 17 19.2481V22.7539C17 22.9554 17.226 23.0741 17.3919 22.9598L19.5 21.5067L21.6082 22.9598C21.774 23.0741 22 22.9554 22 22.7539V19.2481Z" 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/person_ribbon_24_regular.svg";Details
| Name | Person Ribbon |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_ribbon_24_regular.svg |
| Filled file | ic_fluent_person_ribbon_24_filled.svg |
| React components | PersonRibbon24Regular, PersonRibbon24Filled |
| License | MIT (© Microsoft Corporation) |