ribbon icon
ribbon from Mage Icons by MageIcons · Outline · Apache-2.0 Free for personal and commercial use.
- Name
- ribbon
- Set
- Mage Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Mage Icons
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 IconsribbonIonIconsribbonLine AwesomeribbonLucideribbonMaterial Design IconsribbonMyna UI IconsribbonNoto EmojiribbonOpenMojiribbonStreamline EmojisribbonTwitter Emoji
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" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M14.432 10.606L17.14 12.3a2.844 2.844 0 0 0 3.964-.97c.259-.44.395-.94.396-1.449V6.853a2.86 2.86 0 0 0-1.47-2.496a2.84 2.84 0 0 0-2.89.077L14.432 6.13m-4.864 0L6.861 4.434a2.845 2.845 0 0 0-3.965.97c-.259.44-.395.94-.396 1.45v3.028a2.86 2.86 0 0 0 .942 2.14a2.85 2.85 0 0 0 2.222.717a2.7 2.7 0 0 0 1.197-.419l2.707-1.695"/><path d="M14.85 7.377v1.981c.001.42-.136.828-.39 1.162l-.066.086a1.9 1.9 0 0 1-1.444.657h-1.9a1.9 1.9 0 0 1-1.444-.657a1.3 1.3 0 0 1-.142-.2a1.9 1.9 0 0 1-.314-1.048v-1.98a1.907 1.907 0 0 1 1.9-1.906h1.9a1.9 1.9 0 0 1 1.9 1.905m3.8 5.363l1.51 5.637a.19.19 0 0 1-.177.239a.2.2 0 0 1-.108-.03l-3.087-1.79l-1.748 3.105a.19.19 0 0 1-.294.05a.2.2 0 0 1-.058-.098L12.4 11.282"/><path d="M9.426 10.406q.06.106.142.2L6.861 12.3c-.36.233-.771.376-1.197.42l-1.51 5.656a.19.19 0 0 0 .275.21l3.097-1.79L9.312 19.9a.19.19 0 0 0 .192.097a.19.19 0 0 0 .159-.145l2.29-8.571m4.797-2.913h-1.862m-5.776 0H7.25"/></g></svg>
React
import type { SVGProps } from "react";
export function MageRibbon(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" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"><path d="M14.432 10.606L17.14 12.3a2.844 2.844 0 0 0 3.964-.97c.259-.44.395-.94.396-1.449V6.853a2.86 2.86 0 0 0-1.47-2.496a2.84 2.84 0 0 0-2.89.077L14.432 6.13m-4.864 0L6.861 4.434a2.845 2.845 0 0 0-3.965.97c-.259.44-.395.94-.396 1.45v3.028a2.86 2.86 0 0 0 .942 2.14a2.85 2.85 0 0 0 2.222.717a2.7 2.7 0 0 0 1.197-.419l2.707-1.695"/><path d="M14.85 7.377v1.981c.001.42-.136.828-.39 1.162l-.066.086a1.9 1.9 0 0 1-1.444.657h-1.9a1.9 1.9 0 0 1-1.444-.657a1.3 1.3 0 0 1-.142-.2a1.9 1.9 0 0 1-.314-1.048v-1.98a1.907 1.907 0 0 1 1.9-1.906h1.9a1.9 1.9 0 0 1 1.9 1.905m3.8 5.363l1.51 5.637a.19.19 0 0 1-.177.239a.2.2 0 0 1-.108-.03l-3.087-1.79l-1.748 3.105a.19.19 0 0 1-.294.05a.2.2 0 0 1-.058-.098L12.4 11.282"/><path d="M9.426 10.406q.06.106.142.2L6.861 12.3c-.36.233-.771.376-1.197.42l-1.51 5.656a.19.19 0 0 0 .275.21l3.097-1.79L9.312 19.9a.19.19 0 0 0 .192.097a.19.19 0 0 0 .159-.145l2.29-8.571m4.797-2.913h-1.862m-5.776 0H7.25"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M14.432 10.606L17.14 12.3a2.844 2.844 0 0 0 3.964-.97c.259-.44.395-.94.396-1.449V6.853a2.86 2.86 0 0 0-1.47-2.496a2.84 2.84 0 0 0-2.89.077L14.432 6.13m-4.864 0L6.861 4.434a2.845 2.845 0 0 0-3.965.97c-.259.44-.395.94-.396 1.45v3.028a2.86 2.86 0 0 0 .942 2.14a2.85 2.85 0 0 0 2.222.717a2.7 2.7 0 0 0 1.197-.419l2.707-1.695"/><path d="M14.85 7.377v1.981c.001.42-.136.828-.39 1.162l-.066.086a1.9 1.9 0 0 1-1.444.657h-1.9a1.9 1.9 0 0 1-1.444-.657a1.3 1.3 0 0 1-.142-.2a1.9 1.9 0 0 1-.314-1.048v-1.98a1.907 1.907 0 0 1 1.9-1.906h1.9a1.9 1.9 0 0 1 1.9 1.905m3.8 5.363l1.51 5.637a.19.19 0 0 1-.177.239a.2.2 0 0 1-.108-.03l-3.087-1.79l-1.748 3.105a.19.19 0 0 1-.294.05a.2.2 0 0 1-.058-.098L12.4 11.282"/><path d="M9.426 10.406q.06.106.142.2L6.861 12.3c-.36.233-.771.376-1.197.42l-1.51 5.656a.19.19 0 0 0 .275.21l3.097-1.79L9.312 19.9a.19.19 0 0 0 .192.097a.19.19 0 0 0 .159-.145l2.29-8.571m4.797-2.913h-1.862m-5.776 0H7.25"/></g></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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M14.432%2010.606L17.14%2012.3a2.844%202.844%200%200%200%203.964-.97c.259-.44.395-.94.396-1.449V6.853a2.86%202.86%200%200%200-1.47-2.496a2.84%202.84%200%200%200-2.89.077L14.432%206.13m-4.864%200L6.861%204.434a2.845%202.845%200%200%200-3.965.97c-.259.44-.395.94-.396%201.45v3.028a2.86%202.86%200%200%200%20.942%202.14a2.85%202.85%200%200%200%202.222.717a2.7%202.7%200%200%200%201.197-.419l2.707-1.695%22%2F%3E%3Cpath%20d%3D%22M14.85%207.377v1.981c.001.42-.136.828-.39%201.162l-.066.086a1.9%201.9%200%200%201-1.444.657h-1.9a1.9%201.9%200%200%201-1.444-.657a1.3%201.3%200%200%201-.142-.2a1.9%201.9%200%200%201-.314-1.048v-1.98a1.907%201.907%200%200%201%201.9-1.906h1.9a1.9%201.9%200%200%201%201.9%201.905m3.8%205.363l1.51%205.637a.19.19%200%200%201-.177.239a.2.2%200%200%201-.108-.03l-3.087-1.79l-1.748%203.105a.19.19%200%200%201-.294.05a.2.2%200%200%201-.058-.098L12.4%2011.282%22%2F%3E%3Cpath%20d%3D%22M9.426%2010.406q.06.106.142.2L6.861%2012.3c-.36.233-.771.376-1.197.42l-1.51%205.656a.19.19%200%200%200%20.275.21l3.097-1.79L9.312%2019.9a.19.19%200%200%200%20.192.097a.19.19%200%200%200%20.159-.145l2.29-8.571m4.797-2.913h-1.862m-5.776%200H7.25%22%2F%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%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M14.432%2010.606L17.14%2012.3a2.844%202.844%200%200%200%203.964-.97c.259-.44.395-.94.396-1.449V6.853a2.86%202.86%200%200%200-1.47-2.496a2.84%202.84%200%200%200-2.89.077L14.432%206.13m-4.864%200L6.861%204.434a2.845%202.845%200%200%200-3.965.97c-.259.44-.395.94-.396%201.45v3.028a2.86%202.86%200%200%200%20.942%202.14a2.85%202.85%200%200%200%202.222.717a2.7%202.7%200%200%200%201.197-.419l2.707-1.695%22%2F%3E%3Cpath%20d%3D%22M14.85%207.377v1.981c.001.42-.136.828-.39%201.162l-.066.086a1.9%201.9%200%200%201-1.444.657h-1.9a1.9%201.9%200%200%201-1.444-.657a1.3%201.3%200%200%201-.142-.2a1.9%201.9%200%200%201-.314-1.048v-1.98a1.907%201.907%200%200%201%201.9-1.906h1.9a1.9%201.9%200%200%201%201.9%201.905m3.8%205.363l1.51%205.637a.19.19%200%200%201-.177.239a.2.2%200%200%201-.108-.03l-3.087-1.79l-1.748%203.105a.19.19%200%200%201-.294.05a.2.2%200%200%201-.058-.098L12.4%2011.282%22%2F%3E%3Cpath%20d%3D%22M9.426%2010.406q.06.106.142.2L6.861%2012.3c-.36.233-.771.376-1.197.42l-1.51%205.656a.19.19%200%200%200%20.275.21l3.097-1.79L9.312%2019.9a.19.19%200%200%200%20.192.097a.19.19%200%200%200%20.159-.145l2.29-8.571m4.797-2.913h-1.862m-5.776%200H7.25%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/ribbon.svg?color=%231a73e8&size=48
