Ribbon Add icon
Used to represent a reward or a certificate (physical or digital). The Ribbon Add 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 Add 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 { RibbonAdd24Regular, RibbonAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <RibbonAdd24Regular aria-label="Ribbon Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ribbon_add_24_regular.svg" width="24" height="24" alt="Ribbon Add"> 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="M23 6.49961C23 3.46226 20.5376 1 17.5 1C14.4624 1 12 3.46226 12 6.49961C12 9.53696 14.4624 11.9992 17.5 11.9992C20.5376 11.9992 23 9.53696 23 6.49961ZM18.0006 6.99958L18.0011 9.50291C18.0011 9.77903 17.7773 10.0029 17.5011 10.0029C17.225 10.0029 17.0011 9.77903 17.0011 9.50291L17.0006 6.99958H14.4956C14.2197 6.99958 13.9961 6.77574 13.9961 6.49962C13.9961 6.22349 14.2197 5.99965 14.4956 5.99965H17.0005L17 3.49909C17 3.22297 17.2239 2.99912 17.5 2.99912C17.7761 2.99912 18 3.22297 18 3.49909L18.0005 5.99965H20.4966C20.7725 5.99965 20.9961 6.22349 20.9961 6.49962C20.9961 6.77574 20.7725 6.99958 20.4966 6.99958H18.0006ZM11 1.99993C11.5623 1.99993 12.1091 2.06622 12.633 2.19141C12.271 2.6 11.9597 3.0545 11.7088 3.54507C11.4768 3.51522 11.2402 3.49982 11 3.49982C7.96243 3.49982 5.5 5.96208 5.5 8.99943C5.5 12.0368 7.96243 14.499 11 14.499C12.6732 14.499 14.1719 13.7519 15.1806 12.5732C15.6844 12.7656 16.2182 12.8972 16.7731 12.959C16.5429 13.294 16.2842 13.608 16.0006 13.8974L15.9992 21.2487C15.9992 21.8206 15.3926 22.1691 14.907 21.9165L14.8175 21.862L10.9991 19.1744L7.18265 21.8619C6.71499 22.1912 6.08074 21.8958 6.00774 21.3533L6.0008 21.2487L5.99937 13.8974C4.76256 12.635 4 10.9063 4 8.99943C4 5.13371 7.13401 1.99993 11 1.99993ZM14.4992 19.8038L14.4994 15.0629C13.4699 15.6582 12.2748 15.9989 11 15.9989C9.72524 15.9989 8.53006 15.6582 7.50058 15.0629L7.5008 19.8033L10.5671 17.6441C10.7937 17.4845 11.0866 17.4645 11.3298 17.5841L11.4306 17.644L14.4992 19.8038Z" 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_add_24_regular.svg";Details
| Name | Ribbon Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ribbon_add_24_regular.svg |
| Filled file | ic_fluent_ribbon_add_24_filled.svg |
| React components | RibbonAdd24Regular, RibbonAdd24Filled |
| License | MIT (© Microsoft Corporation) |