ribbon icon
ribbon-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.
- Name
- ribbon-20
- Set
- Fluent UI System Color Icons
- Style
- 20
- Viewbox
- 20×20
- 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 20 20"><g fill="none"><path fill="url(#SVGJD9SXcWZ)" d="M10 12.755a6.97 6.97 0 0 0 4-1.255v6a.5.5 0 0 1-.79.407L10 16l-3.21 1.907A.5.5 0 0 1 6 17.5v-6a6.97 6.97 0 0 0 4 1.255"/><path fill="url(#SVG8zWLjcZH)" d="M16 8A6 6 0 1 1 4 8a6 6 0 0 1 12 0"/><defs><radialGradient id="SVGJD9SXcWZ" cx="0" cy="0" r="1" gradientTransform="matrix(0 10.2442 -17.6591 0 10 10.486)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVG8zWLjcZH" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 26.168 -40.357)scale(66.981 57.3661)" 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 FluentColorRibbon20(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGJD9SXcWZ)" d="M10 12.755a6.97 6.97 0 0 0 4-1.255v6a.5.5 0 0 1-.79.407L10 16l-3.21 1.907A.5.5 0 0 1 6 17.5v-6a6.97 6.97 0 0 0 4 1.255"/><path fill="url(#SVG8zWLjcZH)" d="M16 8A6 6 0 1 1 4 8a6 6 0 0 1 12 0"/><defs><radialGradient id="SVGJD9SXcWZ" cx="0" cy="0" r="1" gradientTransform="matrix(0 10.2442 -17.6591 0 10 10.486)" gradientUnits="userSpaceOnUse"><stop stopColor="#163697"/><stop offset="1" stopColor="#29c3ff"/></radialGradient><radialGradient id="SVG8zWLjcZH" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 26.168 -40.357)scale(66.981 57.3661)" 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 20 20"><g fill="none"><path fill="url(#SVGJD9SXcWZ)" d="M10 12.755a6.97 6.97 0 0 0 4-1.255v6a.5.5 0 0 1-.79.407L10 16l-3.21 1.907A.5.5 0 0 1 6 17.5v-6a6.97 6.97 0 0 0 4 1.255"/><path fill="url(#SVG8zWLjcZH)" d="M16 8A6 6 0 1 1 4 8a6 6 0 0 1 12 0"/><defs><radialGradient id="SVGJD9SXcWZ" cx="0" cy="0" r="1" gradientTransform="matrix(0 10.2442 -17.6591 0 10 10.486)" gradientUnits="userSpaceOnUse"><stop stop-color="#163697"/><stop offset="1" stop-color="#29c3ff"/></radialGradient><radialGradient id="SVG8zWLjcZH" cx="0" cy="0" r="1" gradientTransform="rotate(56.615 26.168 -40.357)scale(66.981 57.3661)" gradientUnits="userSpaceOnUse"><stop offset=".772" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></radialGradient></defs></g></svg> </template>
CSS
.icon-ribbon-20 {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGJD9SXcWZ)%22%20d%3D%22M10%2012.755a6.97%206.97%200%200%200%204-1.255v6a.5.5%200%200%201-.79.407L10%2016l-3.21%201.907A.5.5%200%200%201%206%2017.5v-6a6.97%206.97%200%200%200%204%201.255%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8zWLjcZH)%22%20d%3D%22M16%208A6%206%200%201%201%204%208a6%206%200%200%201%2012%200%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGJD9SXcWZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2010.2442%20-17.6591%200%2010%2010.486)%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%22SVG8zWLjcZH%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2026.168%20-40.357)scale(66.981%2057.3661)%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGJD9SXcWZ)%22%20d%3D%22M10%2012.755a6.97%206.97%200%200%200%204-1.255v6a.5.5%200%200%201-.79.407L10%2016l-3.21%201.907A.5.5%200%200%201%206%2017.5v-6a6.97%206.97%200%200%200%204%201.255%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8zWLjcZH)%22%20d%3D%22M16%208A6%206%200%201%201%204%208a6%206%200%200%201%2012%200%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGJD9SXcWZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%2010.2442%20-17.6591%200%2010%2010.486)%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%22SVG8zWLjcZH%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(56.615%2026.168%20-40.357)scale(66.981%2057.3661)%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-20.svg?color=%231a73e8&size=48
