Ribbon icon

Use the 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 { Ribbon24Regular, Ribbon24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Ribbon24Regular aria-label="Ribbon" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_ribbon_24_regular.svg" width="24" height="24" alt="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="M12 2C15.866 2 19 5.13401 19 9C19 10.907 18.2374 12.6359 17.0006 13.8983L16.9992 21.2502C16.9992 21.8221 16.3926 22.1706 15.907 21.918L15.8175 21.8635L11.9991 19.1757L8.18265 21.8634C7.71499 22.1927 7.08074 21.8973 7.00774 21.3547L7.0008 21.2502L6.99937 13.8983C5.76256 12.6359 5 10.907 5 9C5 5.13401 8.13401 2 12 2ZM15.4992 19.8051L15.4994 15.0639C14.4699 15.6592 13.2748 16 12 16C10.7252 16 9.53006 15.6592 8.50058 15.0639L8.5008 19.8047L11.5671 17.6453C11.7937 17.4857 12.0866 17.4657 12.3298 17.5853L12.4306 17.6452L15.4992 19.8051L15.4994 15.0639L15.4992 19.8051ZM12 3.5C8.96243 3.5 6.5 5.96243 6.5 9C6.5 12.0376 8.96243 14.5 12 14.5C15.0376 14.5 17.5 12.0376 17.5 9C17.5 5.96243 15.0376 3.5 12 3.5Z" 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_24_regular.svg";

Details

Keywords

medalearnaccoladeawardbenefitbonus