Ribbon Off icon
Used to represent a reward or a certificate (physical or digital). The Ribbon Off 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 Off 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 { RibbonOff24Regular, RibbonOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <RibbonOff24Regular aria-label="Ribbon Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ribbon_off_24_regular.svg" width="24" height="24" alt="Ribbon Off"> 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="M5.45401 6.51474L2.21966 3.28032C1.92677 2.98743 1.92678 2.51255 2.21968 2.21966C2.51257 1.92677 2.98745 1.92678 3.28034 2.21968L21.7801 20.7198C22.073 21.0127 22.073 21.4876 21.7801 21.7805C21.4872 22.0734 21.0123 22.0734 20.7194 21.7805L16.9998 18.0608L16.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 8.12477 5.16063 7.28706 5.45401 6.51474ZM15.4993 16.5603L14.4851 15.546C13.7128 15.8394 12.8752 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.4993 16.5603ZM13.2876 14.3485L6.65157 7.71232C6.55248 8.12537 6.5 8.55656 6.5 9C6.5 12.0376 8.96243 14.5 12 14.5C12.4434 14.5 12.8746 14.4475 13.2876 14.3485ZM17.5 9C17.5 10.4726 16.9213 11.8099 15.9789 12.7971L17.0398 13.858C18.2535 12.5992 19 10.8868 19 9C19 5.13401 15.866 2 12 2C10.1133 2 8.4009 2.74644 7.14206 3.96011L8.20293 5.02101C9.19013 4.07867 10.5275 3.5 12 3.5C15.0376 3.5 17.5 5.96243 17.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_off_24_regular.svg";Details
| Name | Ribbon Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ribbon_off_24_regular.svg |
| Filled file | ic_fluent_ribbon_off_24_filled.svg |
| React components | RibbonOff24Regular, RibbonOff24Filled |
| License | MIT (© Microsoft Corporation) |