ribbon icon
ribbon-32-regular from Fluent UI System Icons by Microsoft Corporation · 32 Regular · MIT Free for personal and commercial use.
- Name
- ribbon-32-regular
- Set
- Fluent UI System Icons
- Style
- 32 Regular
- Viewbox
- 32×32
- 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 32 32"><path fill="currentColor" d="M16 2C10.477 2 6 6.477 6 12a9.99 9.99 0 0 0 4 8v9a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9a9.99 9.99 0 0 0 4-8c0-5.523-4.477-10-10-10M8 12a8 8 0 1 1 16 0a8 8 0 0 1-16 0m12 9.168v6.066l-3.485-2.092a1 1 0 0 0-1.03 0L12 27.234v-6.066A10 10 0 0 0 16 22a10 10 0 0 0 4-.832"/></svg>
React
import type { SVGProps } from "react";
export function FluentRibbon32Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2C10.477 2 6 6.477 6 12a9.99 9.99 0 0 0 4 8v9a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9a9.99 9.99 0 0 0 4-8c0-5.523-4.477-10-10-10M8 12a8 8 0 1 1 16 0a8 8 0 0 1-16 0m12 9.168v6.066l-3.485-2.092a1 1 0 0 0-1.03 0L12 27.234v-6.066A10 10 0 0 0 16 22a10 10 0 0 0 4-.832"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 2C10.477 2 6 6.477 6 12a9.99 9.99 0 0 0 4 8v9a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9a9.99 9.99 0 0 0 4-8c0-5.523-4.477-10-10-10M8 12a8 8 0 1 1 16 0a8 8 0 0 1-16 0m12 9.168v6.066l-3.485-2.092a1 1 0 0 0-1.03 0L12 27.234v-6.066A10 10 0 0 0 16 22a10 10 0 0 0 4-.832"/></svg> </template>
CSS
.icon-ribbon-32-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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%202C10.477%202%206%206.477%206%2012a9.99%209.99%200%200%200%204%208v9a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-9a9.99%209.99%200%200%200%204-8c0-5.523-4.477-10-10-10M8%2012a8%208%200%201%201%2016%200a8%208%200%200%201-16%200m12%209.168v6.066l-3.485-2.092a1%201%200%200%200-1.03%200L12%2027.234v-6.066A10%2010%200%200%200%2016%2022a10%2010%200%200%200%204-.832%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%202C10.477%202%206%206.477%206%2012a9.99%209.99%200%200%200%204%208v9a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-9a9.99%209.99%200%200%200%204-8c0-5.523-4.477-10-10-10M8%2012a8%208%200%201%201%2016%200a8%208%200%200%201-16%200m12%209.168v6.066l-3.485-2.092a1%201%200%200%200-1.03%200L12%2027.234v-6.066A10%2010%200%200%200%2016%2022a10%2010%200%200%200%204-.832%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ribbon-32-regular.svg?color=%231a73e8&size=48
