ribbon icon

ribbon from Font Awesome Solid by Dave Gandy · Solid · Charity · CC-BY-4.0 Attribution required.

Name
ribbon
Set
Font Awesome Solid
Style
Solid
Category
Charity
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

ribbonAkar IconsribbonEmoji One (Colored)ribbonFont Awesome 6 Solidribbon-12-filledFluent UI System Iconsribbon-16Fluent UI System Color IconsribbonFluent EmojiribbonFluent Emoji FlatribbonFluent Emoji High ContrastribbonHealth IconsribbonHuge IconsribbonIonIconsribbonLine AwesomeribbonLucideribbonMage IconsribbonMaterial Design IconsribbonMyna UI IconsribbonNoto EmojiribbonOpenMojiribbonStreamline EmojisribbonTwitter Emoji

More charity icons from Font Awesome Solid

dollar-signdonategifthand-holding-hearthand-holding-usdhand-holding-waterhands-helpinghandshakeheartleafparachute-boxpiggy-bankseedling

Use the ribbon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M363.1 64c33.4 0 64.5 17.4 81.9 45.9c1.2 2 13 21.3 35.3 57.8c21.1 34.5 18.3 78.5-7 110l-67 84L492.5 470c5.5 6.9 4.4 16.9-2.5 22.5l-80 64c-6.9 5.5-17 4.4-22.5-2.5L166.6 277.8c-25.3-31.5-28.1-75.5-7-110c22.4-36.6 34.1-55.9 35.4-57.9C212.4 81.4 243.4 64 276.9 64h86.3zM320 253.2l48.6-61.2h-97.3l48.6 61.2zm-117 147L289.2 508l-36.8 46c-5.5 6.9-15.6 8-22.5 2.5l-80-64c-6.9-5.5-8-15.6-2.5-22.5z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidRibbon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M363.1 64c33.4 0 64.5 17.4 81.9 45.9c1.2 2 13 21.3 35.3 57.8c21.1 34.5 18.3 78.5-7 110l-67 84L492.5 470c5.5 6.9 4.4 16.9-2.5 22.5l-80 64c-6.9 5.5-17 4.4-22.5-2.5L166.6 277.8c-25.3-31.5-28.1-75.5-7-110c22.4-36.6 34.1-55.9 35.4-57.9C212.4 81.4 243.4 64 276.9 64h86.3zM320 253.2l48.6-61.2h-97.3l48.6 61.2zm-117 147L289.2 508l-36.8 46c-5.5 6.9-15.6 8-22.5 2.5l-80-64c-6.9-5.5-8-15.6-2.5-22.5z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M363.1 64c33.4 0 64.5 17.4 81.9 45.9c1.2 2 13 21.3 35.3 57.8c21.1 34.5 18.3 78.5-7 110l-67 84L492.5 470c5.5 6.9 4.4 16.9-2.5 22.5l-80 64c-6.9 5.5-17 4.4-22.5-2.5L166.6 277.8c-25.3-31.5-28.1-75.5-7-110c22.4-36.6 34.1-55.9 35.4-57.9C212.4 81.4 243.4 64 276.9 64h86.3zM320 253.2l48.6-61.2h-97.3l48.6 61.2zm-117 147L289.2 508l-36.8 46c-5.5 6.9-15.6 8-22.5 2.5l-80-64c-6.9-5.5-8-15.6-2.5-22.5z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M363.1%2064c33.4%200%2064.5%2017.4%2081.9%2045.9c1.2%202%2013%2021.3%2035.3%2057.8c21.1%2034.5%2018.3%2078.5-7%20110l-67%2084L492.5%20470c5.5%206.9%204.4%2016.9-2.5%2022.5l-80%2064c-6.9%205.5-17%204.4-22.5-2.5L166.6%20277.8c-25.3-31.5-28.1-75.5-7-110c22.4-36.6%2034.1-55.9%2035.4-57.9C212.4%2081.4%20243.4%2064%20276.9%2064h86.3zM320%20253.2l48.6-61.2h-97.3l48.6%2061.2zm-117%20147L289.2%20508l-36.8%2046c-5.5%206.9-15.6%208-22.5%202.5l-80-64c-6.9-5.5-8-15.6-2.5-22.5z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M363.1%2064c33.4%200%2064.5%2017.4%2081.9%2045.9c1.2%202%2013%2021.3%2035.3%2057.8c21.1%2034.5%2018.3%2078.5-7%20110l-67%2084L492.5%20470c5.5%206.9%204.4%2016.9-2.5%2022.5l-80%2064c-6.9%205.5-17%204.4-22.5-2.5L166.6%20277.8c-25.3-31.5-28.1-75.5-7-110c22.4-36.6%2034.1-55.9%2035.4-57.9C212.4%2081.4%20243.4%2064%20276.9%2064h86.3zM320%20253.2l48.6-61.2h-97.3l48.6%2061.2zm-117%20147L289.2%20508l-36.8%2046c-5.5%206.9-15.6%208-22.5%202.5l-80-64c-6.9-5.5-8-15.6-2.5-22.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/ribbon.svg?color=%231a73e8&size=48