ribbon icon
ribbon-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- ribbon-fill
- Set
- Mage Icons
- Style
- Fill
- 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"><path fill="currentColor" d="M21.778 5.024a3.67 3.67 0 0 0-1.364-1.321a3.5 3.5 0 0 0-1.845-.45a3.6 3.6 0 0 0-1.815.54l-2.277 1.421a2.6 2.6 0 0 0-1.524-.49h-1.876c-.553 0-1.093.17-1.544.49L7.266 3.793a3.6 3.6 0 0 0-1.815-.54a3.5 3.5 0 0 0-1.845.45A3.62 3.62 0 0 0 1.75 6.856v3.003c-.007.51.096 1.015.301 1.481c.204.468.51.885.893 1.222c.376.342.82.6 1.304.76q.22.077.45.11l-1.273 4.775a.86.86 0 0 0 0 .51c.056.176.164.33.311.441c.145.11.32.177.502.19a.9.9 0 0 0 .541-.12l2.457-1.411L8.64 20.25a.88.88 0 0 0 .411.4c.132.063.276.098.422.1h.12a.92.92 0 0 0 .782-.7l1.796-6.708l1.785 6.667a.94.94 0 0 0 .27.49c.149.135.334.222.532.251h.12q.233-.008.442-.11a1 1 0 0 0 .38-.37l1.385-2.453l2.417 1.401a1 1 0 0 0 .521.14a.87.87 0 0 0 .522-.17a.9.9 0 0 0 .33-.44a.9.9 0 0 0 0-.57l-1.293-4.826q.421-.119.802-.33A3.61 3.61 0 0 0 22.25 9.87V6.866a3.64 3.64 0 0 0-.472-1.842m-6.167 2.593h1.153a.753.753 0 0 1 .752.75a.75.75 0 0 1-.752.751H15.61zm-8.375 0H8.39v1.471H7.236a.753.753 0 0 1-.752-.75a.75.75 0 0 1 .752-.751zm2.006 10.75l-1.112-1.93a.75.75 0 0 0-1.003-.28l-1.936 1.12l1.003-3.883c.357-.091.695-.24 1.003-.441l2.257-1.411q.195.137.41.24c.318.14.658.22 1.004.24zm1.765-7.847a1.1 1.1 0 0 1-.481-.1a1.14 1.14 0 0 1-.391-.3l-.08-.121a1.1 1.1 0 0 1-.191-.64V7.355a1.16 1.16 0 0 1 1.153-1.15h1.906a1.15 1.15 0 0 1 .812.34c.215.215.337.506.341.81v2.002c-.003.249-.054.49-.202.691l-.029.06a1 1 0 0 1-.39.3a1.1 1.1 0 0 1-.482.1zm6.138 5.635a.75.75 0 0 0-.572-.07a.74.74 0 0 0-.461.35l-1.073 1.913l-1.705-6.357q.36-.06.692-.21q.227-.106.431-.25l2.267 1.411c.4.25.847.418 1.313.49l1.003 3.834z"/></svg>
React
import type { SVGProps } from "react";
export function MageRibbonFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.778 5.024a3.67 3.67 0 0 0-1.364-1.321a3.5 3.5 0 0 0-1.845-.45a3.6 3.6 0 0 0-1.815.54l-2.277 1.421a2.6 2.6 0 0 0-1.524-.49h-1.876c-.553 0-1.093.17-1.544.49L7.266 3.793a3.6 3.6 0 0 0-1.815-.54a3.5 3.5 0 0 0-1.845.45A3.62 3.62 0 0 0 1.75 6.856v3.003c-.007.51.096 1.015.301 1.481c.204.468.51.885.893 1.222c.376.342.82.6 1.304.76q.22.077.45.11l-1.273 4.775a.86.86 0 0 0 0 .51c.056.176.164.33.311.441c.145.11.32.177.502.19a.9.9 0 0 0 .541-.12l2.457-1.411L8.64 20.25a.88.88 0 0 0 .411.4c.132.063.276.098.422.1h.12a.92.92 0 0 0 .782-.7l1.796-6.708l1.785 6.667a.94.94 0 0 0 .27.49c.149.135.334.222.532.251h.12q.233-.008.442-.11a1 1 0 0 0 .38-.37l1.385-2.453l2.417 1.401a1 1 0 0 0 .521.14a.87.87 0 0 0 .522-.17a.9.9 0 0 0 .33-.44a.9.9 0 0 0 0-.57l-1.293-4.826q.421-.119.802-.33A3.61 3.61 0 0 0 22.25 9.87V6.866a3.64 3.64 0 0 0-.472-1.842m-6.167 2.593h1.153a.753.753 0 0 1 .752.75a.75.75 0 0 1-.752.751H15.61zm-8.375 0H8.39v1.471H7.236a.753.753 0 0 1-.752-.75a.75.75 0 0 1 .752-.751zm2.006 10.75l-1.112-1.93a.75.75 0 0 0-1.003-.28l-1.936 1.12l1.003-3.883c.357-.091.695-.24 1.003-.441l2.257-1.411q.195.137.41.24c.318.14.658.22 1.004.24zm1.765-7.847a1.1 1.1 0 0 1-.481-.1a1.14 1.14 0 0 1-.391-.3l-.08-.121a1.1 1.1 0 0 1-.191-.64V7.355a1.16 1.16 0 0 1 1.153-1.15h1.906a1.15 1.15 0 0 1 .812.34c.215.215.337.506.341.81v2.002c-.003.249-.054.49-.202.691l-.029.06a1 1 0 0 1-.39.3a1.1 1.1 0 0 1-.482.1zm6.138 5.635a.75.75 0 0 0-.572-.07a.74.74 0 0 0-.461.35l-1.073 1.913l-1.705-6.357q.36-.06.692-.21q.227-.106.431-.25l2.267 1.411c.4.25.847.418 1.313.49l1.003 3.834z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.778 5.024a3.67 3.67 0 0 0-1.364-1.321a3.5 3.5 0 0 0-1.845-.45a3.6 3.6 0 0 0-1.815.54l-2.277 1.421a2.6 2.6 0 0 0-1.524-.49h-1.876c-.553 0-1.093.17-1.544.49L7.266 3.793a3.6 3.6 0 0 0-1.815-.54a3.5 3.5 0 0 0-1.845.45A3.62 3.62 0 0 0 1.75 6.856v3.003c-.007.51.096 1.015.301 1.481c.204.468.51.885.893 1.222c.376.342.82.6 1.304.76q.22.077.45.11l-1.273 4.775a.86.86 0 0 0 0 .51c.056.176.164.33.311.441c.145.11.32.177.502.19a.9.9 0 0 0 .541-.12l2.457-1.411L8.64 20.25a.88.88 0 0 0 .411.4c.132.063.276.098.422.1h.12a.92.92 0 0 0 .782-.7l1.796-6.708l1.785 6.667a.94.94 0 0 0 .27.49c.149.135.334.222.532.251h.12q.233-.008.442-.11a1 1 0 0 0 .38-.37l1.385-2.453l2.417 1.401a1 1 0 0 0 .521.14a.87.87 0 0 0 .522-.17a.9.9 0 0 0 .33-.44a.9.9 0 0 0 0-.57l-1.293-4.826q.421-.119.802-.33A3.61 3.61 0 0 0 22.25 9.87V6.866a3.64 3.64 0 0 0-.472-1.842m-6.167 2.593h1.153a.753.753 0 0 1 .752.75a.75.75 0 0 1-.752.751H15.61zm-8.375 0H8.39v1.471H7.236a.753.753 0 0 1-.752-.75a.75.75 0 0 1 .752-.751zm2.006 10.75l-1.112-1.93a.75.75 0 0 0-1.003-.28l-1.936 1.12l1.003-3.883c.357-.091.695-.24 1.003-.441l2.257-1.411q.195.137.41.24c.318.14.658.22 1.004.24zm1.765-7.847a1.1 1.1 0 0 1-.481-.1a1.14 1.14 0 0 1-.391-.3l-.08-.121a1.1 1.1 0 0 1-.191-.64V7.355a1.16 1.16 0 0 1 1.153-1.15h1.906a1.15 1.15 0 0 1 .812.34c.215.215.337.506.341.81v2.002c-.003.249-.054.49-.202.691l-.029.06a1 1 0 0 1-.39.3a1.1 1.1 0 0 1-.482.1zm6.138 5.635a.75.75 0 0 0-.572-.07a.74.74 0 0 0-.461.35l-1.073 1.913l-1.705-6.357q.36-.06.692-.21q.227-.106.431-.25l2.267 1.411c.4.25.847.418 1.313.49l1.003 3.834z"/></svg> </template>
CSS
.icon-ribbon-fill {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.778%205.024a3.67%203.67%200%200%200-1.364-1.321a3.5%203.5%200%200%200-1.845-.45a3.6%203.6%200%200%200-1.815.54l-2.277%201.421a2.6%202.6%200%200%200-1.524-.49h-1.876c-.553%200-1.093.17-1.544.49L7.266%203.793a3.6%203.6%200%200%200-1.815-.54a3.5%203.5%200%200%200-1.845.45A3.62%203.62%200%200%200%201.75%206.856v3.003c-.007.51.096%201.015.301%201.481c.204.468.51.885.893%201.222c.376.342.82.6%201.304.76q.22.077.45.11l-1.273%204.775a.86.86%200%200%200%200%20.51c.056.176.164.33.311.441c.145.11.32.177.502.19a.9.9%200%200%200%20.541-.12l2.457-1.411L8.64%2020.25a.88.88%200%200%200%20.411.4c.132.063.276.098.422.1h.12a.92.92%200%200%200%20.782-.7l1.796-6.708l1.785%206.667a.94.94%200%200%200%20.27.49c.149.135.334.222.532.251h.12q.233-.008.442-.11a1%201%200%200%200%20.38-.37l1.385-2.453l2.417%201.401a1%201%200%200%200%20.521.14a.87.87%200%200%200%20.522-.17a.9.9%200%200%200%20.33-.44a.9.9%200%200%200%200-.57l-1.293-4.826q.421-.119.802-.33A3.61%203.61%200%200%200%2022.25%209.87V6.866a3.64%203.64%200%200%200-.472-1.842m-6.167%202.593h1.153a.753.753%200%200%201%20.752.75a.75.75%200%200%201-.752.751H15.61zm-8.375%200H8.39v1.471H7.236a.753.753%200%200%201-.752-.75a.75.75%200%200%201%20.752-.751zm2.006%2010.75l-1.112-1.93a.75.75%200%200%200-1.003-.28l-1.936%201.12l1.003-3.883c.357-.091.695-.24%201.003-.441l2.257-1.411q.195.137.41.24c.318.14.658.22%201.004.24zm1.765-7.847a1.1%201.1%200%200%201-.481-.1a1.14%201.14%200%200%201-.391-.3l-.08-.121a1.1%201.1%200%200%201-.191-.64V7.355a1.16%201.16%200%200%201%201.153-1.15h1.906a1.15%201.15%200%200%201%20.812.34c.215.215.337.506.341.81v2.002c-.003.249-.054.49-.202.691l-.029.06a1%201%200%200%201-.39.3a1.1%201.1%200%200%201-.482.1zm6.138%205.635a.75.75%200%200%200-.572-.07a.74.74%200%200%200-.461.35l-1.073%201.913l-1.705-6.357q.36-.06.692-.21q.227-.106.431-.25l2.267%201.411c.4.25.847.418%201.313.49l1.003%203.834z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.778%205.024a3.67%203.67%200%200%200-1.364-1.321a3.5%203.5%200%200%200-1.845-.45a3.6%203.6%200%200%200-1.815.54l-2.277%201.421a2.6%202.6%200%200%200-1.524-.49h-1.876c-.553%200-1.093.17-1.544.49L7.266%203.793a3.6%203.6%200%200%200-1.815-.54a3.5%203.5%200%200%200-1.845.45A3.62%203.62%200%200%200%201.75%206.856v3.003c-.007.51.096%201.015.301%201.481c.204.468.51.885.893%201.222c.376.342.82.6%201.304.76q.22.077.45.11l-1.273%204.775a.86.86%200%200%200%200%20.51c.056.176.164.33.311.441c.145.11.32.177.502.19a.9.9%200%200%200%20.541-.12l2.457-1.411L8.64%2020.25a.88.88%200%200%200%20.411.4c.132.063.276.098.422.1h.12a.92.92%200%200%200%20.782-.7l1.796-6.708l1.785%206.667a.94.94%200%200%200%20.27.49c.149.135.334.222.532.251h.12q.233-.008.442-.11a1%201%200%200%200%20.38-.37l1.385-2.453l2.417%201.401a1%201%200%200%200%20.521.14a.87.87%200%200%200%20.522-.17a.9.9%200%200%200%20.33-.44a.9.9%200%200%200%200-.57l-1.293-4.826q.421-.119.802-.33A3.61%203.61%200%200%200%2022.25%209.87V6.866a3.64%203.64%200%200%200-.472-1.842m-6.167%202.593h1.153a.753.753%200%200%201%20.752.75a.75.75%200%200%201-.752.751H15.61zm-8.375%200H8.39v1.471H7.236a.753.753%200%200%201-.752-.75a.75.75%200%200%201%20.752-.751zm2.006%2010.75l-1.112-1.93a.75.75%200%200%200-1.003-.28l-1.936%201.12l1.003-3.883c.357-.091.695-.24%201.003-.441l2.257-1.411q.195.137.41.24c.318.14.658.22%201.004.24zm1.765-7.847a1.1%201.1%200%200%201-.481-.1a1.14%201.14%200%200%201-.391-.3l-.08-.121a1.1%201.1%200%200%201-.191-.64V7.355a1.16%201.16%200%200%201%201.153-1.15h1.906a1.15%201.15%200%200%201%20.812.34c.215.215.337.506.341.81v2.002c-.003.249-.054.49-.202.691l-.029.06a1%201%200%200%201-.39.3a1.1%201.1%200%200%201-.482.1zm6.138%205.635a.75.75%200%200%200-.572-.07a.74.74%200%200%200-.461.35l-1.073%201.913l-1.705-6.357q.36-.06.692-.21q.227-.106.431-.25l2.267%201.411c.4.25.847.418%201.313.49l1.003%203.834z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/ribbon-fill.svg?color=%231a73e8&size=48
