ribbon icon
ribbon-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- ribbon-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- 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 20 20"><path fill="currentColor" d="M16 8a6 6 0 0 1-2 4.472V17.5a.5.5 0 0 1-.748.434L10 16.076l-3.252 1.858A.5.5 0 0 1 6 17.5v-5.028A6 6 0 1 1 16 8m-6 6a6 6 0 0 1-3-.803v3.442l2.752-1.573a.5.5 0 0 1 .496 0L13 16.64v-3.442A6 6 0 0 1 10 14m0-1a5 5 0 1 0 0-10a5 5 0 0 0 0 10"/></svg>
React
import type { SVGProps } from "react";
export function FluentRibbon20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16 8a6 6 0 0 1-2 4.472V17.5a.5.5 0 0 1-.748.434L10 16.076l-3.252 1.858A.5.5 0 0 1 6 17.5v-5.028A6 6 0 1 1 16 8m-6 6a6 6 0 0 1-3-.803v3.442l2.752-1.573a.5.5 0 0 1 .496 0L13 16.64v-3.442A6 6 0 0 1 10 14m0-1a5 5 0 1 0 0-10a5 5 0 0 0 0 10"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16 8a6 6 0 0 1-2 4.472V17.5a.5.5 0 0 1-.748.434L10 16.076l-3.252 1.858A.5.5 0 0 1 6 17.5v-5.028A6 6 0 1 1 16 8m-6 6a6 6 0 0 1-3-.803v3.442l2.752-1.573a.5.5 0 0 1 .496 0L13 16.64v-3.442A6 6 0 0 1 10 14m0-1a5 5 0 1 0 0-10a5 5 0 0 0 0 10"/></svg> </template>
CSS
.icon-ribbon-20-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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%208a6%206%200%200%201-2%204.472V17.5a.5.5%200%200%201-.748.434L10%2016.076l-3.252%201.858A.5.5%200%200%201%206%2017.5v-5.028A6%206%200%201%201%2016%208m-6%206a6%206%200%200%201-3-.803v3.442l2.752-1.573a.5.5%200%200%201%20.496%200L13%2016.64v-3.442A6%206%200%200%201%2010%2014m0-1a5%205%200%201%200%200-10a5%205%200%200%200%200%2010%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%208a6%206%200%200%201-2%204.472V17.5a.5.5%200%200%201-.748.434L10%2016.076l-3.252%201.858A.5.5%200%200%201%206%2017.5v-5.028A6%206%200%201%201%2016%208m-6%206a6%206%200%200%201-3-.803v3.442l2.752-1.573a.5.5%200%200%201%20.496%200L13%2016.64v-3.442A6%206%200%200%201%2010%2014m0-1a5%205%200%201%200%200-10a5%205%200%200%200%200%2010%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ribbon-20-regular.svg?color=%231a73e8&size=48
