ribbon icon
ribbon-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- ribbon-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- 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 24 24"><g fill="none"><path fill="url(#SVGOwcFceMY)" d="M17.002 13.244v8.001a.75.75 0 0 1-1.183.613l-3.818-2.687l-3.816 2.687a.75.75 0 0 1-1.182-.613l-.002-8a7.97 7.97 0 0 0 5 1.755a7.97 7.97 0 0 0 5-1.756"/><path fill="url(#SVGaQ1yDcNu)" d="M12 2a7 7 0 1 1 0 14a7 7 0 0 1 0-14"/><defs><radialGradient id="SVGOwcFceMY" cx="0" cy="0" r="1" gradientTransform="matrix(0 13.7943 -22.0759 0 12.001 11.879)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGaQ1yDcNu" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 31.006 -46.94)scale(78.1445 66.9271)" 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 FluentColorRibbon24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGOwcFceMY)" d="M17.002 13.244v8.001a.75.75 0 0 1-1.183.613l-3.818-2.687l-3.816 2.687a.75.75 0 0 1-1.182-.613l-.002-8a7.97 7.97 0 0 0 5 1.755a7.97 7.97 0 0 0 5-1.756"/><path fill="url(#SVGaQ1yDcNu)" d="M12 2a7 7 0 1 1 0 14a7 7 0 0 1 0-14"/><defs><radialGradient id="SVGOwcFceMY" cx="0" cy="0" r="1" gradientTransform="matrix(0 13.7943 -22.0759 0 12.001 11.879)" gradientUnits="userSpaceOnUse"><stop stopColor="#163697"/><stop offset="1" stopColor="#29c3ff"/></radialGradient><radialGradient id="SVGaQ1yDcNu" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 31.006 -46.94)scale(78.1445 66.9271)" 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 24 24"><g fill="none"><path fill="url(#SVGOwcFceMY)" d="M17.002 13.244v8.001a.75.75 0 0 1-1.183.613l-3.818-2.687l-3.816 2.687a.75.75 0 0 1-1.182-.613l-.002-8a7.97 7.97 0 0 0 5 1.755a7.97 7.97 0 0 0 5-1.756"/><path fill="url(#SVGaQ1yDcNu)" d="M12 2a7 7 0 1 1 0 14a7 7 0 0 1 0-14"/><defs><radialGradient id="SVGOwcFceMY" cx="0" cy="0" r="1" gradientTransform="matrix(0 13.7943 -22.0759 0 12.001 11.879)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGaQ1yDcNu" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 31.006 -46.94)scale(78.1445 66.9271)" gradientUnits="userSpaceOnUse"><stop offset=".772" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></radialGradient></defs></g></svg> </template>
CSS
.icon-ribbon-24 {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGOwcFceMY)%22%20d%3D%22M17.002%2013.244v8.001a.75.75%200%200%201-1.183.613l-3.818-2.687l-3.816%202.687a.75.75%200%200%201-1.182-.613l-.002-8a7.97%207.97%200%200%200%205%201.755a7.97%207.97%200%200%200%205-1.756%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGaQ1yDcNu)%22%20d%3D%22M12%202a7%207%200%201%201%200%2014a7%207%200%200%201%200-14%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGOwcFceMY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2013.7943%20-22.0759%200%2012.001%2011.879)%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%22SVGaQ1yDcNu%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2031.006%20-46.94)scale(78.1445%2066.9271)%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGOwcFceMY)%22%20d%3D%22M17.002%2013.244v8.001a.75.75%200%200%201-1.183.613l-3.818-2.687l-3.816%202.687a.75.75%200%200%201-1.182-.613l-.002-8a7.97%207.97%200%200%200%205%201.755a7.97%207.97%200%200%200%205-1.756%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGaQ1yDcNu)%22%20d%3D%22M12%202a7%207%200%201%201%200%2014a7%207%200%200%201%200-14%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGOwcFceMY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2013.7943%20-22.0759%200%2012.001%2011.879)%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%22SVGaQ1yDcNu%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2031.006%20-46.94)scale(78.1445%2066.9271)%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-24.svg?color=%231a73e8&size=48
