ribbon icon
ribbon-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.
- Name
- ribbon-sharp
- Set
- IonIcons
- Style
- Sharp
- 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="M256 336c-5.22 0-10.4-.24-15.51-.69a176.12 176.12 0 0 1-131.29-78.37L20 416h115l58 96l82.53-177.09A178 178 0 0 1 256 336m147-79.26a176.9 176.9 0 0 1-88.18 69.14L273.7 415.5L319 512l58-96h115Z"/><circle cx="256.02" cy="160" r="48" fill="currentColor"/><path fill="currentColor" d="M256 16c-79.4 0-144 64.6-144 144s64.6 144 144 144s144-64.6 144-144S335.4 16 256 16m0 224a80 80 0 1 1 80-80a80.09 80.09 0 0 1-80 80"/></svg>
React
import type { SVGProps } from "react";
export function IonRibbonSharp(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="M256 336c-5.22 0-10.4-.24-15.51-.69a176.12 176.12 0 0 1-131.29-78.37L20 416h115l58 96l82.53-177.09A178 178 0 0 1 256 336m147-79.26a176.9 176.9 0 0 1-88.18 69.14L273.7 415.5L319 512l58-96h115Z"/><circle cx="256.02" cy="160" r="48" fill="currentColor"/><path fill="currentColor" d="M256 16c-79.4 0-144 64.6-144 144s64.6 144 144 144s144-64.6 144-144S335.4 16 256 16m0 224a80 80 0 1 1 80-80a80.09 80.09 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="M256 336c-5.22 0-10.4-.24-15.51-.69a176.12 176.12 0 0 1-131.29-78.37L20 416h115l58 96l82.53-177.09A178 178 0 0 1 256 336m147-79.26a176.9 176.9 0 0 1-88.18 69.14L273.7 415.5L319 512l58-96h115Z"/><circle cx="256.02" cy="160" r="48" fill="currentColor"/><path fill="currentColor" d="M256 16c-79.4 0-144 64.6-144 144s64.6 144 144 144s144-64.6 144-144S335.4 16 256 16m0 224a80 80 0 1 1 80-80a80.09 80.09 0 0 1-80 80"/></svg> </template>
CSS
.icon-ribbon-sharp {
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%22M256%20336c-5.22%200-10.4-.24-15.51-.69a176.12%20176.12%200%200%201-131.29-78.37L20%20416h115l58%2096l82.53-177.09A178%20178%200%200%201%20256%20336m147-79.26a176.9%20176.9%200%200%201-88.18%2069.14L273.7%20415.5L319%20512l58-96h115Z%22%2F%3E%3Ccircle%20cx%3D%22256.02%22%20cy%3D%22160%22%20r%3D%2248%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%2016c-79.4%200-144%2064.6-144%20144s64.6%20144%20144%20144s144-64.6%20144-144S335.4%2016%20256%2016m0%20224a80%2080%200%201%201%2080-80a80.09%2080.09%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%22M256%20336c-5.22%200-10.4-.24-15.51-.69a176.12%20176.12%200%200%201-131.29-78.37L20%20416h115l58%2096l82.53-177.09A178%20178%200%200%201%20256%20336m147-79.26a176.9%20176.9%200%200%201-88.18%2069.14L273.7%20415.5L319%20512l58-96h115Z%22%2F%3E%3Ccircle%20cx%3D%22256.02%22%20cy%3D%22160%22%20r%3D%2248%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%2016c-79.4%200-144%2064.6-144%20144s64.6%20144%20144%20144s144-64.6%20144-144S335.4%2016%20256%2016m0%20224a80%2080%200%201%201%2080-80a80.09%2080.09%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-sharp.svg?color=%231a73e8&size=48
