leaf icon

leaf from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.

Name
leaf
Set
BoxIcons v2
Style
Regular
Viewbox
24×24
License
MIT
Aliases
bx-leaf

The same icon in other sets

leafAkar IconsleafBootstrap IconsleafBoxIcons v2 SolidleafFont Awesome 6 Solidleaf-20-filledFluent UI System IconsleafIconoirleafIonIconsleafJam IconsleafLine AwesomeleafLucideleafMaterial Design Iconsleaf-fillMingCute IconleafPhosphorleafPixelarticonsleaf-fillRemix Iconleaf-boldSolarleafTabler Icons

Use the leaf icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m21.88 2.15l-1.2.4a13.84 13.84 0 0 1-6.41.64a11.87 11.87 0 0 0-6.68.9A7.23 7.23 0 0 0 3.3 9.5a8.65 8.65 0 0 0 1.47 6.6c-.06.21-.12.42-.17.63A22.6 22.6 0 0 0 4 22h2a31 31 0 0 1 .59-4.32a9.25 9.25 0 0 0 4.52 1.11a11 11 0 0 0 4.28-.87C23 14.67 22 3.86 22 3.41zm-7.27 13.93c-2.61 1.11-5.73.92-7.48-.45a13.8 13.8 0 0 1 1.21-2.84A10.2 10.2 0 0 1 9.73 11a9 9 0 0 1 1.81-1.42A12 12 0 0 1 16 8V7a11.4 11.4 0 0 0-5.26 1.08a10.3 10.3 0 0 0-4.12 3.65a15 15 0 0 0-1 1.87a7 7 0 0 1-.38-3.73a5.24 5.24 0 0 1 3.14-4a8.9 8.9 0 0 1 3.82-.84c.62 0 1.23.06 1.87.11a16.2 16.2 0 0 0 6-.35C20 7.55 19.5 14 14.61 16.08"/></svg>

React

import type { SVGProps } from "react";

export function BxLeaf(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.88 2.15l-1.2.4a13.84 13.84 0 0 1-6.41.64a11.87 11.87 0 0 0-6.68.9A7.23 7.23 0 0 0 3.3 9.5a8.65 8.65 0 0 0 1.47 6.6c-.06.21-.12.42-.17.63A22.6 22.6 0 0 0 4 22h2a31 31 0 0 1 .59-4.32a9.25 9.25 0 0 0 4.52 1.11a11 11 0 0 0 4.28-.87C23 14.67 22 3.86 22 3.41zm-7.27 13.93c-2.61 1.11-5.73.92-7.48-.45a13.8 13.8 0 0 1 1.21-2.84A10.2 10.2 0 0 1 9.73 11a9 9 0 0 1 1.81-1.42A12 12 0 0 1 16 8V7a11.4 11.4 0 0 0-5.26 1.08a10.3 10.3 0 0 0-4.12 3.65a15 15 0 0 0-1 1.87a7 7 0 0 1-.38-3.73a5.24 5.24 0 0 1 3.14-4a8.9 8.9 0 0 1 3.82-.84c.62 0 1.23.06 1.87.11a16.2 16.2 0 0 0 6-.35C20 7.55 19.5 14 14.61 16.08"/></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.88 2.15l-1.2.4a13.84 13.84 0 0 1-6.41.64a11.87 11.87 0 0 0-6.68.9A7.23 7.23 0 0 0 3.3 9.5a8.65 8.65 0 0 0 1.47 6.6c-.06.21-.12.42-.17.63A22.6 22.6 0 0 0 4 22h2a31 31 0 0 1 .59-4.32a9.25 9.25 0 0 0 4.52 1.11a11 11 0 0 0 4.28-.87C23 14.67 22 3.86 22 3.41zm-7.27 13.93c-2.61 1.11-5.73.92-7.48-.45a13.8 13.8 0 0 1 1.21-2.84A10.2 10.2 0 0 1 9.73 11a9 9 0 0 1 1.81-1.42A12 12 0 0 1 16 8V7a11.4 11.4 0 0 0-5.26 1.08a10.3 10.3 0 0 0-4.12 3.65a15 15 0 0 0-1 1.87a7 7 0 0 1-.38-3.73a5.24 5.24 0 0 1 3.14-4a8.9 8.9 0 0 1 3.82-.84c.62 0 1.23.06 1.87.11a16.2 16.2 0 0 0 6-.35C20 7.55 19.5 14 14.61 16.08"/></svg>
</template>

CSS

.icon-leaf {
  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.88%202.15l-1.2.4a13.84%2013.84%200%200%201-6.41.64a11.87%2011.87%200%200%200-6.68.9A7.23%207.23%200%200%200%203.3%209.5a8.65%208.65%200%200%200%201.47%206.6c-.06.21-.12.42-.17.63A22.6%2022.6%200%200%200%204%2022h2a31%2031%200%200%201%20.59-4.32a9.25%209.25%200%200%200%204.52%201.11a11%2011%200%200%200%204.28-.87C23%2014.67%2022%203.86%2022%203.41zm-7.27%2013.93c-2.61%201.11-5.73.92-7.48-.45a13.8%2013.8%200%200%201%201.21-2.84A10.2%2010.2%200%200%201%209.73%2011a9%209%200%200%201%201.81-1.42A12%2012%200%200%201%2016%208V7a11.4%2011.4%200%200%200-5.26%201.08a10.3%2010.3%200%200%200-4.12%203.65a15%2015%200%200%200-1%201.87a7%207%200%200%201-.38-3.73a5.24%205.24%200%200%201%203.14-4a8.9%208.9%200%200%201%203.82-.84c.62%200%201.23.06%201.87.11a16.2%2016.2%200%200%200%206-.35C20%207.55%2019.5%2014%2014.61%2016.08%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.88%202.15l-1.2.4a13.84%2013.84%200%200%201-6.41.64a11.87%2011.87%200%200%200-6.68.9A7.23%207.23%200%200%200%203.3%209.5a8.65%208.65%200%200%200%201.47%206.6c-.06.21-.12.42-.17.63A22.6%2022.6%200%200%200%204%2022h2a31%2031%200%200%201%20.59-4.32a9.25%209.25%200%200%200%204.52%201.11a11%2011%200%200%200%204.28-.87C23%2014.67%2022%203.86%2022%203.41zm-7.27%2013.93c-2.61%201.11-5.73.92-7.48-.45a13.8%2013.8%200%200%201%201.21-2.84A10.2%2010.2%200%200%201%209.73%2011a9%209%200%200%201%201.81-1.42A12%2012%200%200%201%2016%208V7a11.4%2011.4%200%200%200-5.26%201.08a10.3%2010.3%200%200%200-4.12%203.65a15%2015%200%200%200-1%201.87a7%207%200%200%201-.38-3.73a5.24%205.24%200%200%201%203.14-4a8.9%208.9%200%200%201%203.82-.84c.62%200%201.23.06%201.87.11a16.2%2016.2%200%200%200%206-.35C20%207.55%2019.5%2014%2014.61%2016.08%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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