ribbon icon
ribbon-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- ribbon-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
3 other variants in Fluent UI System Color Icons
The same icon in other sets
ribbonAkar IconsribbonEmoji One (Colored)ribbonFont Awesome 6 SolidribbonFont Awesome Solidribbon-12-filledFluent UI System IconsribbonFluent EmojiribbonFluent Emoji FlatribbonFluent Emoji High ContrastribbonHealth IconsribbonHuge IconsribbonIonIconsribbonLine AwesomeribbonLucideribbonMage IconsribbonMaterial Design IconsribbonMyna UI IconsribbonNoto EmojiribbonOpenMojiribbonStreamline EmojisribbonTwitter Emoji
Related icons in Fluent UI System Color Icons
Use the ribbon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGGnGZmbVC)" d="M5 14.5V9.697c.883.51 1.907.803 3 .803a6 6 0 0 0 3-.803V14.5a.5.5 0 0 1-.757.429L8 13.583L5.757 14.93A.5.5 0 0 1 5 14.5"/><path fill="url(#SVGsiJuLbPl)" d="M8 1a5 5 0 1 0 0 10A5 5 0 0 0 8 1"/><defs><radialGradient id="SVGGnGZmbVC" cx="0" cy="0" r="1" gradientTransform="matrix(0 8.35723 -13.2443 0 8 8.87)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGsiJuLbPl" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 22.259 -34.273)scale(55.8175 47.8051)" gradientUnits="userSpaceOnUse"><stop offset=".772" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorRibbon16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGGnGZmbVC)" d="M5 14.5V9.697c.883.51 1.907.803 3 .803a6 6 0 0 0 3-.803V14.5a.5.5 0 0 1-.757.429L8 13.583L5.757 14.93A.5.5 0 0 1 5 14.5"/><path fill="url(#SVGsiJuLbPl)" d="M8 1a5 5 0 1 0 0 10A5 5 0 0 0 8 1"/><defs><radialGradient id="SVGGnGZmbVC" cx="0" cy="0" r="1" gradientTransform="matrix(0 8.35723 -13.2443 0 8 8.87)" gradientUnits="userSpaceOnUse"><stop stopColor="#163697"/><stop offset="1" stopColor="#29c3ff"/></radialGradient><radialGradient id="SVGsiJuLbPl" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 22.259 -34.273)scale(55.8175 47.8051)" gradientUnits="userSpaceOnUse"><stop offset=".772" stopColor="#ffcd0f"/><stop offset=".991" stopColor="#e67505"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGGnGZmbVC)" d="M5 14.5V9.697c.883.51 1.907.803 3 .803a6 6 0 0 0 3-.803V14.5a.5.5 0 0 1-.757.429L8 13.583L5.757 14.93A.5.5 0 0 1 5 14.5"/><path fill="url(#SVGsiJuLbPl)" d="M8 1a5 5 0 1 0 0 10A5 5 0 0 0 8 1"/><defs><radialGradient id="SVGGnGZmbVC" cx="0" cy="0" r="1" gradientTransform="matrix(0 8.35723 -13.2443 0 8 8.87)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGsiJuLbPl" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 22.259 -34.273)scale(55.8175 47.8051)" gradientUnits="userSpaceOnUse"><stop offset=".772" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></radialGradient></defs></g></svg> </template>
CSS
.icon-ribbon-16 {
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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGGnGZmbVC)%22%20d%3D%22M5%2014.5V9.697c.883.51%201.907.803%203%20.803a6%206%200%200%200%203-.803V14.5a.5.5%200%200%201-.757.429L8%2013.583L5.757%2014.93A.5.5%200%200%201%205%2014.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsiJuLbPl)%22%20d%3D%22M8%201a5%205%200%201%200%200%2010A5%205%200%200%200%208%201%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGGnGZmbVC%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%208.35723%20-13.2443%200%208%208.87)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23163697%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2329c3ff%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGsiJuLbPl%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2022.259%20-34.273)scale(55.8175%2047.8051)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.772%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%22.991%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGGnGZmbVC)%22%20d%3D%22M5%2014.5V9.697c.883.51%201.907.803%203%20.803a6%206%200%200%200%203-.803V14.5a.5.5%200%200%201-.757.429L8%2013.583L5.757%2014.93A.5.5%200%200%201%205%2014.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsiJuLbPl)%22%20d%3D%22M8%201a5%205%200%201%200%200%2010A5%205%200%200%200%208%201%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGGnGZmbVC%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%208.35723%20-13.2443%200%208%208.87)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23163697%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2329c3ff%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGsiJuLbPl%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2022.259%20-34.273)scale(55.8175%2047.8051)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.772%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%22.991%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/ribbon-16.svg?color=%231a73e8&size=48
