ribbon icon
ribbon-24-regular from Fluent UI System Icons by Microsoft Corporation · 24 Regular · MIT Free for personal and commercial use.
- Name
- ribbon-24-regular
- Set
- Fluent UI System Icons
- Style
- 24 Regular
- Viewbox
- 24×24
- 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 24 24"><path fill="currentColor" d="M12 2a7 7 0 0 1 5 11.898v7.352a.75.75 0 0 1-1.093.668l-.09-.055L12 19.176l-3.816 2.687a.75.75 0 0 1-1.175-.508L7 21.25l-.002-7.352A7 7 0 0 1 12 2m3.5 17.805v-4.741A6.97 6.97 0 0 1 12 16c-1.275 0-2.47-.34-3.5-.936v4.74l3.067-2.159a.75.75 0 0 1 .763-.06l.1.06zv-4.741zM12 3.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/></svg>
React
import type { SVGProps } from "react";
export function FluentRibbon24Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a7 7 0 0 1 5 11.898v7.352a.75.75 0 0 1-1.093.668l-.09-.055L12 19.176l-3.816 2.687a.75.75 0 0 1-1.175-.508L7 21.25l-.002-7.352A7 7 0 0 1 12 2m3.5 17.805v-4.741A6.97 6.97 0 0 1 12 16c-1.275 0-2.47-.34-3.5-.936v4.74l3.067-2.159a.75.75 0 0 1 .763-.06l.1.06zv-4.741zM12 3.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a7 7 0 0 1 5 11.898v7.352a.75.75 0 0 1-1.093.668l-.09-.055L12 19.176l-3.816 2.687a.75.75 0 0 1-1.175-.508L7 21.25l-.002-7.352A7 7 0 0 1 12 2m3.5 17.805v-4.741A6.97 6.97 0 0 1 12 16c-1.275 0-2.47-.34-3.5-.936v4.74l3.067-2.159a.75.75 0 0 1 .763-.06l.1.06zv-4.741zM12 3.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/></svg> </template>
CSS
.icon-ribbon-24-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202a7%207%200%200%201%205%2011.898v7.352a.75.75%200%200%201-1.093.668l-.09-.055L12%2019.176l-3.816%202.687a.75.75%200%200%201-1.175-.508L7%2021.25l-.002-7.352A7%207%200%200%201%2012%202m3.5%2017.805v-4.741A6.97%206.97%200%200%201%2012%2016c-1.275%200-2.47-.34-3.5-.936v4.74l3.067-2.159a.75.75%200%200%201%20.763-.06l.1.06zv-4.741zM12%203.5a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202a7%207%200%200%201%205%2011.898v7.352a.75.75%200%200%201-1.093.668l-.09-.055L12%2019.176l-3.816%202.687a.75.75%200%200%201-1.175-.508L7%2021.25l-.002-7.352A7%207%200%200%201%2012%202m3.5%2017.805v-4.741A6.97%206.97%200%200%201%2012%2016c-1.275%200-2.47-.34-3.5-.936v4.74l3.067-2.159a.75.75%200%200%201%20.763-.06l.1.06zv-4.741zM12%203.5a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ribbon-24-regular.svg?color=%231a73e8&size=48
