ribbon icon
ribbon-28-regular from Fluent UI System Icons by Microsoft Corporation · 28 Regular · MIT Free for personal and commercial use.
- Name
- ribbon-28-regular
- Set
- Fluent UI System Icons
- Style
- 28 Regular
- Viewbox
- 28×28
- License
- MIT
11 other variants in Fluent UI System Icons
The same icon in other sets
ribbonAkar IconsribbonEmoji One (Colored)ribbonFont Awesome 6 SolidribbonFont Awesome Solidribbon-16Fluent UI System Color IconsribbonFluent EmojiribbonFluent Emoji FlatribbonFluent Emoji High ContrastribbonHealth IconsribbonHuge IconsribbonIonIconsribbonLine AwesomeribbonLucideribbonMage IconsribbonMaterial Design IconsribbonMyna UI IconsribbonNoto EmojiribbonOpenMojiribbonStreamline EmojisribbonTwitter Emoji
Related icons in Fluent UI System Icons
Use the ribbon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M14 2a8.5 8.5 0 0 1 6 14.52v8.73a.75.75 0 0 1-1.166.624L14 22.651l-4.834 3.223A.75.75 0 0 1 8 25.25v-8.73A8.5 8.5 0 0 1 14 2m4.5 15.709A8.46 8.46 0 0 1 14 19a8.46 8.46 0 0 1-4.5-1.291v6.14l4.084-2.723l.098-.055a.75.75 0 0 1 .734.055l4.084 2.723zM14 3.5a7 7 0 1 0 0 14a7 7 0 0 0 0-14"/></svg>
React
import type { SVGProps } from "react";
export function FluentRibbon28Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M14 2a8.5 8.5 0 0 1 6 14.52v8.73a.75.75 0 0 1-1.166.624L14 22.651l-4.834 3.223A.75.75 0 0 1 8 25.25v-8.73A8.5 8.5 0 0 1 14 2m4.5 15.709A8.46 8.46 0 0 1 14 19a8.46 8.46 0 0 1-4.5-1.291v6.14l4.084-2.723l.098-.055a.75.75 0 0 1 .734.055l4.084 2.723zM14 3.5a7 7 0 1 0 0 14a7 7 0 0 0 0-14"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M14 2a8.5 8.5 0 0 1 6 14.52v8.73a.75.75 0 0 1-1.166.624L14 22.651l-4.834 3.223A.75.75 0 0 1 8 25.25v-8.73A8.5 8.5 0 0 1 14 2m4.5 15.709A8.46 8.46 0 0 1 14 19a8.46 8.46 0 0 1-4.5-1.291v6.14l4.084-2.723l.098-.055a.75.75 0 0 1 .734.055l4.084 2.723zM14 3.5a7 7 0 1 0 0 14a7 7 0 0 0 0-14"/></svg> </template>
CSS
.icon-ribbon-28-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%202a8.5%208.5%200%200%201%206%2014.52v8.73a.75.75%200%200%201-1.166.624L14%2022.651l-4.834%203.223A.75.75%200%200%201%208%2025.25v-8.73A8.5%208.5%200%200%201%2014%202m4.5%2015.709A8.46%208.46%200%200%201%2014%2019a8.46%208.46%200%200%201-4.5-1.291v6.14l4.084-2.723l.098-.055a.75.75%200%200%201%20.734.055l4.084%202.723zM14%203.5a7%207%200%201%200%200%2014a7%207%200%200%200%200-14%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%202a8.5%208.5%200%200%201%206%2014.52v8.73a.75.75%200%200%201-1.166.624L14%2022.651l-4.834%203.223A.75.75%200%200%201%208%2025.25v-8.73A8.5%208.5%200%200%201%2014%202m4.5%2015.709A8.46%208.46%200%200%201%2014%2019a8.46%208.46%200%200%201-4.5-1.291v6.14l4.084-2.723l.098-.055a.75.75%200%200%201%20.734.055l4.084%202.723zM14%203.5a7%207%200%201%200%200%2014a7%207%200%200%200%200-14%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ribbon-28-regular.svg?color=%231a73e8&size=48
