ribbon icon
ribbon from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- ribbon
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
ribbonAkar IconsribbonEmoji One (Colored)ribbonFont Awesome 6 SolidribbonFont Awesome Solidribbon-12-filledFluent UI System Iconsribbon-16Fluent UI System Color IconsribbonFluent EmojiribbonFluent Emoji FlatribbonFluent Emoji High ContrastribbonHealth IconsribbonHuge IconsribbonLine AwesomeribbonLucideribbonMage IconsribbonMaterial Design IconsribbonMyna UI IconsribbonNoto EmojiribbonOpenMojiribbonStreamline EmojisribbonTwitter Emoji
Related icons in IonIcons
Use the ribbon icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M269 335.61q-6.33.47-12.78.47c-5.23 0-10.4-.24-15.51-.69a176.11 176.11 0 0 1-127.67-72.94a4 4 0 0 0-6.77.35l-72 129.4c-2.74 5-3.17 11-.28 15.88A16.78 16.78 0 0 0 48.22 416h78a15.28 15.28 0 0 1 13.62 7.33L178.5 488a16.26 16.26 0 0 0 13.75 8c5.94-.33 12.09-4.19 14.56-9.6l66.11-145.15a4 4 0 0 0-3.92-5.64m208.64 56.27l-71.53-129.17a4 4 0 0 0-6.74-.36a176.5 176.5 0 0 1-78.31 61.42a16.1 16.1 0 0 0-8.72 8.25l-36.86 81.1a7.92 7.92 0 0 0 0 6.6l30.27 66.59c2.45 5.41 8.59 9.36 14.52 9.69a16.3 16.3 0 0 0 13.7-8.12l38.53-64.58c2.89-4.85 8.13-7.33 13.78-7.3h78.77c6.67 0 11.72-3.48 14-10a16.92 16.92 0 0 0-1.41-14.12"/><ellipse cx="256.26" cy="160" fill="currentColor" rx="48.01" ry="48"/><path fill="currentColor" d="M256.26 16c-79.42 0-144 64.59-144 144s64.61 144 144 144s144-64.6 144-144s-64.59-144-144-144m0 224a80 80 0 1 1 80-80a80.1 80.1 0 0 1-80 80"/></svg>
React
import type { SVGProps } from "react";
export function IonRibbon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M269 335.61q-6.33.47-12.78.47c-5.23 0-10.4-.24-15.51-.69a176.11 176.11 0 0 1-127.67-72.94a4 4 0 0 0-6.77.35l-72 129.4c-2.74 5-3.17 11-.28 15.88A16.78 16.78 0 0 0 48.22 416h78a15.28 15.28 0 0 1 13.62 7.33L178.5 488a16.26 16.26 0 0 0 13.75 8c5.94-.33 12.09-4.19 14.56-9.6l66.11-145.15a4 4 0 0 0-3.92-5.64m208.64 56.27l-71.53-129.17a4 4 0 0 0-6.74-.36a176.5 176.5 0 0 1-78.31 61.42a16.1 16.1 0 0 0-8.72 8.25l-36.86 81.1a7.92 7.92 0 0 0 0 6.6l30.27 66.59c2.45 5.41 8.59 9.36 14.52 9.69a16.3 16.3 0 0 0 13.7-8.12l38.53-64.58c2.89-4.85 8.13-7.33 13.78-7.3h78.77c6.67 0 11.72-3.48 14-10a16.92 16.92 0 0 0-1.41-14.12"/><ellipse cx="256.26" cy="160" fill="currentColor" rx="48.01" ry="48"/><path fill="currentColor" d="M256.26 16c-79.42 0-144 64.59-144 144s64.61 144 144 144s144-64.6 144-144s-64.59-144-144-144m0 224a80 80 0 1 1 80-80a80.1 80.1 0 0 1-80 80"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M269 335.61q-6.33.47-12.78.47c-5.23 0-10.4-.24-15.51-.69a176.11 176.11 0 0 1-127.67-72.94a4 4 0 0 0-6.77.35l-72 129.4c-2.74 5-3.17 11-.28 15.88A16.78 16.78 0 0 0 48.22 416h78a15.28 15.28 0 0 1 13.62 7.33L178.5 488a16.26 16.26 0 0 0 13.75 8c5.94-.33 12.09-4.19 14.56-9.6l66.11-145.15a4 4 0 0 0-3.92-5.64m208.64 56.27l-71.53-129.17a4 4 0 0 0-6.74-.36a176.5 176.5 0 0 1-78.31 61.42a16.1 16.1 0 0 0-8.72 8.25l-36.86 81.1a7.92 7.92 0 0 0 0 6.6l30.27 66.59c2.45 5.41 8.59 9.36 14.52 9.69a16.3 16.3 0 0 0 13.7-8.12l38.53-64.58c2.89-4.85 8.13-7.33 13.78-7.3h78.77c6.67 0 11.72-3.48 14-10a16.92 16.92 0 0 0-1.41-14.12"/><ellipse cx="256.26" cy="160" fill="currentColor" rx="48.01" ry="48"/><path fill="currentColor" d="M256.26 16c-79.42 0-144 64.59-144 144s64.61 144 144 144s144-64.6 144-144s-64.59-144-144-144m0 224a80 80 0 1 1 80-80a80.1 80.1 0 0 1-80 80"/></svg> </template>
CSS
.icon-ribbon {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M269%20335.61q-6.33.47-12.78.47c-5.23%200-10.4-.24-15.51-.69a176.11%20176.11%200%200%201-127.67-72.94a4%204%200%200%200-6.77.35l-72%20129.4c-2.74%205-3.17%2011-.28%2015.88A16.78%2016.78%200%200%200%2048.22%20416h78a15.28%2015.28%200%200%201%2013.62%207.33L178.5%20488a16.26%2016.26%200%200%200%2013.75%208c5.94-.33%2012.09-4.19%2014.56-9.6l66.11-145.15a4%204%200%200%200-3.92-5.64m208.64%2056.27l-71.53-129.17a4%204%200%200%200-6.74-.36a176.5%20176.5%200%200%201-78.31%2061.42a16.1%2016.1%200%200%200-8.72%208.25l-36.86%2081.1a7.92%207.92%200%200%200%200%206.6l30.27%2066.59c2.45%205.41%208.59%209.36%2014.52%209.69a16.3%2016.3%200%200%200%2013.7-8.12l38.53-64.58c2.89-4.85%208.13-7.33%2013.78-7.3h78.77c6.67%200%2011.72-3.48%2014-10a16.92%2016.92%200%200%200-1.41-14.12%22%2F%3E%3Cellipse%20cx%3D%22256.26%22%20cy%3D%22160%22%20fill%3D%22currentColor%22%20rx%3D%2248.01%22%20ry%3D%2248%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256.26%2016c-79.42%200-144%2064.59-144%20144s64.61%20144%20144%20144s144-64.6%20144-144s-64.59-144-144-144m0%20224a80%2080%200%201%201%2080-80a80.1%2080.1%200%200%201-80%2080%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M269%20335.61q-6.33.47-12.78.47c-5.23%200-10.4-.24-15.51-.69a176.11%20176.11%200%200%201-127.67-72.94a4%204%200%200%200-6.77.35l-72%20129.4c-2.74%205-3.17%2011-.28%2015.88A16.78%2016.78%200%200%200%2048.22%20416h78a15.28%2015.28%200%200%201%2013.62%207.33L178.5%20488a16.26%2016.26%200%200%200%2013.75%208c5.94-.33%2012.09-4.19%2014.56-9.6l66.11-145.15a4%204%200%200%200-3.92-5.64m208.64%2056.27l-71.53-129.17a4%204%200%200%200-6.74-.36a176.5%20176.5%200%200%201-78.31%2061.42a16.1%2016.1%200%200%200-8.72%208.25l-36.86%2081.1a7.92%207.92%200%200%200%200%206.6l30.27%2066.59c2.45%205.41%208.59%209.36%2014.52%209.69a16.3%2016.3%200%200%200%2013.7-8.12l38.53-64.58c2.89-4.85%208.13-7.33%2013.78-7.3h78.77c6.67%200%2011.72-3.48%2014-10a16.92%2016.92%200%200%200-1.41-14.12%22%2F%3E%3Cellipse%20cx%3D%22256.26%22%20cy%3D%22160%22%20fill%3D%22currentColor%22%20rx%3D%2248.01%22%20ry%3D%2248%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256.26%2016c-79.42%200-144%2064.59-144%20144s64.61%20144%20144%20144s144-64.6%20144-144s-64.59-144-144-144m0%20224a80%2080%200%201%201%2080-80a80.1%2080.1%200%200%201-80%2080%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/ribbon.svg?color=%231a73e8&size=48
