ribbon icon
ribbon-32-filled from Fluent UI System Icons by Microsoft Corporation · 32 Filled · MIT Free for personal and commercial use.
- Name
- ribbon-32-filled
- Set
- Fluent UI System Icons
- Style
- 32 Filled
- 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="M10 21.813V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-7.187a11.45 11.45 0 0 1-6 1.687c-2.199 0-4.253-.617-6-1.687M22 20a9.96 9.96 0 0 1-6 2a9.96 9.96 0 0 1-6.36-2.283A9.98 9.98 0 0 1 6 12C6 6.477 10.477 2 16 2s10 4.477 10 10a9.99 9.99 0 0 1-4 8"/></svg>
React
import type { SVGProps } from "react";
export function FluentRibbon32Filled(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="M10 21.813V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-7.187a11.45 11.45 0 0 1-6 1.687c-2.199 0-4.253-.617-6-1.687M22 20a9.96 9.96 0 0 1-6 2a9.96 9.96 0 0 1-6.36-2.283A9.98 9.98 0 0 1 6 12C6 6.477 10.477 2 16 2s10 4.477 10 10a9.99 9.99 0 0 1-4 8"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M10 21.813V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-7.187a11.45 11.45 0 0 1-6 1.687c-2.199 0-4.253-.617-6-1.687M22 20a9.96 9.96 0 0 1-6 2a9.96 9.96 0 0 1-6.36-2.283A9.98 9.98 0 0 1 6 12C6 6.477 10.477 2 16 2s10 4.477 10 10a9.99 9.99 0 0 1-4 8"/></svg> </template>
CSS
.icon-ribbon-32-filled {
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%22M10%2021.813V29a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-7.187a11.45%2011.45%200%200%201-6%201.687c-2.199%200-4.253-.617-6-1.687M22%2020a9.96%209.96%200%200%201-6%202a9.96%209.96%200%200%201-6.36-2.283A9.98%209.98%200%200%201%206%2012C6%206.477%2010.477%202%2016%202s10%204.477%2010%2010a9.99%209.99%200%200%201-4%208%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%22M10%2021.813V29a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-7.187a11.45%2011.45%200%200%201-6%201.687c-2.199%200-4.253-.617-6-1.687M22%2020a9.96%209.96%200%200%201-6%202a9.96%209.96%200%200%201-6.36-2.283A9.98%209.98%200%200%201%206%2012C6%206.477%2010.477%202%2016%202s10%204.477%2010%2010a9.99%209.99%200%200%201-4%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ribbon-32-filled.svg?color=%231a73e8&size=48
