leaf three icon

leaf-three-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name
leaf-three-20-regular
Set
Fluent UI System Icons
Style
20 Regular
Viewbox
20×20
License
MIT

5 other variants in Fluent UI System Icons

leaf-three-16-filledleaf-three-16-regularleaf-three-20-filledleaf-three-24-filledleaf-three-24-regular

Related icons in Fluent UI System Icons

leaf-one-16-filledleaf-two-16-filled

Use the leaf three icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16 7q0 .514-.1 1h.765C17.402 8 18 8.598 18 9.335V13a5 5 0 0 1-8.164 3.872l-.982.982a.5.5 0 0 1-.707-.708l.982-.982a5 5 0 0 1-.788-1.346A5 5 0 0 1 2 10V6.335A1.334 1.334 0 0 1 3.334 5h3.081A5 5 0 0 1 11 2h3.665C15.402 2 16 2.598 16 3.335zM7.52 5.027a5 5 0 0 1 4.14 3.155A5 5 0 0 1 13 8h1.874q.125-.481.126-1V3.335A.335.335 0 0 0 14.665 3H11a4 4 0 0 0-3.48 2.027m3.027 11.133A4 4 0 0 0 17 13V9.335A.335.335 0 0 0 16.665 9H13a4 4 0 0 0-3.16 6.453l3.307-3.307a.5.5 0 0 1 .707.708zM8 13q.002-.6.135-1.158L5.646 9.354a.5.5 0 1 1 .708-.708l2.154 2.155a5.02 5.02 0 0 1 2.22-2.256A4 4 0 0 0 7 6H3.335A.335.335 0 0 0 3 6.335V10a4 4 0 0 0 5.073 3.855A5 5 0 0 1 8 13"/></svg>

React

import type { SVGProps } from "react";

export function FluentLeafThree20Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16 7q0 .514-.1 1h.765C17.402 8 18 8.598 18 9.335V13a5 5 0 0 1-8.164 3.872l-.982.982a.5.5 0 0 1-.707-.708l.982-.982a5 5 0 0 1-.788-1.346A5 5 0 0 1 2 10V6.335A1.334 1.334 0 0 1 3.334 5h3.081A5 5 0 0 1 11 2h3.665C15.402 2 16 2.598 16 3.335zM7.52 5.027a5 5 0 0 1 4.14 3.155A5 5 0 0 1 13 8h1.874q.125-.481.126-1V3.335A.335.335 0 0 0 14.665 3H11a4 4 0 0 0-3.48 2.027m3.027 11.133A4 4 0 0 0 17 13V9.335A.335.335 0 0 0 16.665 9H13a4 4 0 0 0-3.16 6.453l3.307-3.307a.5.5 0 0 1 .707.708zM8 13q.002-.6.135-1.158L5.646 9.354a.5.5 0 1 1 .708-.708l2.154 2.155a5.02 5.02 0 0 1 2.22-2.256A4 4 0 0 0 7 6H3.335A.335.335 0 0 0 3 6.335V10a4 4 0 0 0 5.073 3.855A5 5 0 0 1 8 13"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16 7q0 .514-.1 1h.765C17.402 8 18 8.598 18 9.335V13a5 5 0 0 1-8.164 3.872l-.982.982a.5.5 0 0 1-.707-.708l.982-.982a5 5 0 0 1-.788-1.346A5 5 0 0 1 2 10V6.335A1.334 1.334 0 0 1 3.334 5h3.081A5 5 0 0 1 11 2h3.665C15.402 2 16 2.598 16 3.335zM7.52 5.027a5 5 0 0 1 4.14 3.155A5 5 0 0 1 13 8h1.874q.125-.481.126-1V3.335A.335.335 0 0 0 14.665 3H11a4 4 0 0 0-3.48 2.027m3.027 11.133A4 4 0 0 0 17 13V9.335A.335.335 0 0 0 16.665 9H13a4 4 0 0 0-3.16 6.453l3.307-3.307a.5.5 0 0 1 .707.708zM8 13q.002-.6.135-1.158L5.646 9.354a.5.5 0 1 1 .708-.708l2.154 2.155a5.02 5.02 0 0 1 2.22-2.256A4 4 0 0 0 7 6H3.335A.335.335 0 0 0 3 6.335V10a4 4 0 0 0 5.073 3.855A5 5 0 0 1 8 13"/></svg>
</template>

CSS

.icon-leaf-three-20-regular {
  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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%207q0%20.514-.1%201h.765C17.402%208%2018%208.598%2018%209.335V13a5%205%200%200%201-8.164%203.872l-.982.982a.5.5%200%200%201-.707-.708l.982-.982a5%205%200%200%201-.788-1.346A5%205%200%200%201%202%2010V6.335A1.334%201.334%200%200%201%203.334%205h3.081A5%205%200%200%201%2011%202h3.665C15.402%202%2016%202.598%2016%203.335zM7.52%205.027a5%205%200%200%201%204.14%203.155A5%205%200%200%201%2013%208h1.874q.125-.481.126-1V3.335A.335.335%200%200%200%2014.665%203H11a4%204%200%200%200-3.48%202.027m3.027%2011.133A4%204%200%200%200%2017%2013V9.335A.335.335%200%200%200%2016.665%209H13a4%204%200%200%200-3.16%206.453l3.307-3.307a.5.5%200%200%201%20.707.708zM8%2013q.002-.6.135-1.158L5.646%209.354a.5.5%200%201%201%20.708-.708l2.154%202.155a5.02%205.02%200%200%201%202.22-2.256A4%204%200%200%200%207%206H3.335A.335.335%200%200%200%203%206.335V10a4%204%200%200%200%205.073%203.855A5%205%200%200%201%208%2013%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%207q0%20.514-.1%201h.765C17.402%208%2018%208.598%2018%209.335V13a5%205%200%200%201-8.164%203.872l-.982.982a.5.5%200%200%201-.707-.708l.982-.982a5%205%200%200%201-.788-1.346A5%205%200%200%201%202%2010V6.335A1.334%201.334%200%200%201%203.334%205h3.081A5%205%200%200%201%2011%202h3.665C15.402%202%2016%202.598%2016%203.335zM7.52%205.027a5%205%200%200%201%204.14%203.155A5%205%200%200%201%2013%208h1.874q.125-.481.126-1V3.335A.335.335%200%200%200%2014.665%203H11a4%204%200%200%200-3.48%202.027m3.027%2011.133A4%204%200%200%200%2017%2013V9.335A.335.335%200%200%200%2016.665%209H13a4%204%200%200%200-3.16%206.453l3.307-3.307a.5.5%200%200%201%20.707.708zM8%2013q.002-.6.135-1.158L5.646%209.354a.5.5%200%201%201%20.708-.708l2.154%202.155a5.02%205.02%200%200%201%202.22-2.256A4%204%200%200%200%207%206H3.335A.335.335%200%200%200%203%206.335V10a4%204%200%200%200%205.073%203.855A5%205%200%200%201%208%2013%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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