ribbon icon
ribbon-32 from Fluent UI System Color Icons by Microsoft Corporation · 32 · MIT Free for personal and commercial use.
- Name
- ribbon-32
- Set
- Fluent UI System Color Icons
- Style
- 32
- Viewbox
- 32×32
- 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 32 32"><g fill="none"><path fill="url(#SVGn8wrxdYY)" d="M10 19.313V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9.687A11.45 11.45 0 0 1 16 21c-2.199 0-4.253-.617-6-1.687"/><path fill="url(#SVGdw2MdzHB)" d="M22 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"/><defs><radialGradient id="SVGn8wrxdYY" cx="0" cy="0" r="1" gradientTransform="matrix(0 16.8444 -26.4886 0 16 17.645)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGdw2MdzHB" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 44.518 -68.546)scale(111.635 95.6102)" 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 FluentColorRibbon32(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGn8wrxdYY)" d="M10 19.313V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9.687A11.45 11.45 0 0 1 16 21c-2.199 0-4.253-.617-6-1.687"/><path fill="url(#SVGdw2MdzHB)" d="M22 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"/><defs><radialGradient id="SVGn8wrxdYY" cx="0" cy="0" r="1" gradientTransform="matrix(0 16.8444 -26.4886 0 16 17.645)" gradientUnits="userSpaceOnUse"><stop stopColor="#163697"/><stop offset="1" stopColor="#29c3ff"/></radialGradient><radialGradient id="SVGdw2MdzHB" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 44.518 -68.546)scale(111.635 95.6102)" 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 32 32"><g fill="none"><path fill="url(#SVGn8wrxdYY)" d="M10 19.313V29a1 1 0 0 0 1.515.858L16 27.166l4.485 2.692A1 1 0 0 0 22 29v-9.687A11.45 11.45 0 0 1 16 21c-2.199 0-4.253-.617-6-1.687"/><path fill="url(#SVGdw2MdzHB)" d="M22 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"/><defs><radialGradient id="SVGn8wrxdYY" cx="0" cy="0" r="1" gradientTransform="matrix(0 16.8444 -26.4886 0 16 17.645)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVGdw2MdzHB" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 44.518 -68.546)scale(111.635 95.6102)" gradientUnits="userSpaceOnUse"><stop offset=".772" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></radialGradient></defs></g></svg> </template>
CSS
.icon-ribbon-32 {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGn8wrxdYY)%22%20d%3D%22M10%2019.313V29a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-9.687A11.45%2011.45%200%200%201%2016%2021c-2.199%200-4.253-.617-6-1.687%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdw2MdzHB)%22%20d%3D%22M22%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%3Cdefs%3E%3CradialGradient%20id%3D%22SVGn8wrxdYY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2016.8444%20-26.4886%200%2016%2017.645)%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%22SVGdw2MdzHB%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2044.518%20-68.546)scale(111.635%2095.6102)%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGn8wrxdYY)%22%20d%3D%22M10%2019.313V29a1%201%200%200%200%201.515.858L16%2027.166l4.485%202.692A1%201%200%200%200%2022%2029v-9.687A11.45%2011.45%200%200%201%2016%2021c-2.199%200-4.253-.617-6-1.687%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdw2MdzHB)%22%20d%3D%22M22%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%3Cdefs%3E%3CradialGradient%20id%3D%22SVGn8wrxdYY%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2016.8444%20-26.4886%200%2016%2017.645)%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%22SVGdw2MdzHB%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2044.518%20-68.546)scale(111.635%2095.6102)%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-32.svg?color=%231a73e8&size=48
