tree icon

tree-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: tree-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

tree tree-bold tree-duotone tree-fill tree-thin

The same icon in other sets

treeBootstrap Icons treeBoxIcons v2 Solid treeCarbon treeFramework7 Icons treeFont Awesome 6 Solid treecss.gg treeIconoir treeJam Icons treeLine Awesome treeMaterial Design Icons tree-fillMingCute Icon treePixelarticons tree-fillRemix Icon treeTabler Icons

Related icons in Phosphor

tree-evergreen tree-palm tree-structure tree-view

Use the tree icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M196.55 64.09a74 74 0 0 0-137.1 0A69.71 69.71 0 0 0 18 127.8c-.1 37.11 31.13 69.2 68.19 70.2a70.3 70.3 0 0 0 35.81-8.84V232a6 6 0 0 0 12 0v-42.84a70.1 70.1 0 0 0 34 8.84h1.77c37.1-1 68.33-33.1 68.23-70.2a69.71 69.71 0 0 0-41.45-63.71M169.5 186a57.88 57.88 0 0 1-35.5-11v-43.29l44.68-22.34a6 6 0 1 0-5.36-10.74L134 118.29V88a6 6 0 0 0-12 0v54.29l-39.32-19.66a6 6 0 0 0-5.36 10.74L122 155.71V175a58.1 58.1 0 0 1-35.5 11c-30.71-.77-56.58-27.4-56.5-58.14a57.78 57.78 0 0 1 36.37-53.67a6 6 0 0 0 3.39-3.51a62 62 0 0 1 116.48 0a6 6 0 0 0 3.39 3.51A57.77 57.77 0 0 1 226 127.83c.08 30.75-25.79 57.37-56.5 58.17"/></svg>

React

import type { SVGProps } from "react";

export function PhTreeLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M196.55 64.09a74 74 0 0 0-137.1 0A69.71 69.71 0 0 0 18 127.8c-.1 37.11 31.13 69.2 68.19 70.2a70.3 70.3 0 0 0 35.81-8.84V232a6 6 0 0 0 12 0v-42.84a70.1 70.1 0 0 0 34 8.84h1.77c37.1-1 68.33-33.1 68.23-70.2a69.71 69.71 0 0 0-41.45-63.71M169.5 186a57.88 57.88 0 0 1-35.5-11v-43.29l44.68-22.34a6 6 0 1 0-5.36-10.74L134 118.29V88a6 6 0 0 0-12 0v54.29l-39.32-19.66a6 6 0 0 0-5.36 10.74L122 155.71V175a58.1 58.1 0 0 1-35.5 11c-30.71-.77-56.58-27.4-56.5-58.14a57.78 57.78 0 0 1 36.37-53.67a6 6 0 0 0 3.39-3.51a62 62 0 0 1 116.48 0a6 6 0 0 0 3.39 3.51A57.77 57.77 0 0 1 226 127.83c.08 30.75-25.79 57.37-56.5 58.17"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M196.55 64.09a74 74 0 0 0-137.1 0A69.71 69.71 0 0 0 18 127.8c-.1 37.11 31.13 69.2 68.19 70.2a70.3 70.3 0 0 0 35.81-8.84V232a6 6 0 0 0 12 0v-42.84a70.1 70.1 0 0 0 34 8.84h1.77c37.1-1 68.33-33.1 68.23-70.2a69.71 69.71 0 0 0-41.45-63.71M169.5 186a57.88 57.88 0 0 1-35.5-11v-43.29l44.68-22.34a6 6 0 1 0-5.36-10.74L134 118.29V88a6 6 0 0 0-12 0v54.29l-39.32-19.66a6 6 0 0 0-5.36 10.74L122 155.71V175a58.1 58.1 0 0 1-35.5 11c-30.71-.77-56.58-27.4-56.5-58.14a57.78 57.78 0 0 1 36.37-53.67a6 6 0 0 0 3.39-3.51a62 62 0 0 1 116.48 0a6 6 0 0 0 3.39 3.51A57.77 57.77 0 0 1 226 127.83c.08 30.75-25.79 57.37-56.5 58.17"/></svg>
</template>

CSS

.icon-tree-light {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M196.55%2064.09a74%2074%200%200%200-137.1%200A69.71%2069.71%200%200%200%2018%20127.8c-.1%2037.11%2031.13%2069.2%2068.19%2070.2a70.3%2070.3%200%200%200%2035.81-8.84V232a6%206%200%200%200%2012%200v-42.84a70.1%2070.1%200%200%200%2034%208.84h1.77c37.1-1%2068.33-33.1%2068.23-70.2a69.71%2069.71%200%200%200-41.45-63.71M169.5%20186a57.88%2057.88%200%200%201-35.5-11v-43.29l44.68-22.34a6%206%200%201%200-5.36-10.74L134%20118.29V88a6%206%200%200%200-12%200v54.29l-39.32-19.66a6%206%200%200%200-5.36%2010.74L122%20155.71V175a58.1%2058.1%200%200%201-35.5%2011c-30.71-.77-56.58-27.4-56.5-58.14a57.78%2057.78%200%200%201%2036.37-53.67a6%206%200%200%200%203.39-3.51a62%2062%200%200%201%20116.48%200a6%206%200%200%200%203.39%203.51A57.77%2057.77%200%200%201%20226%20127.83c.08%2030.75-25.79%2057.37-56.5%2058.17%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M196.55%2064.09a74%2074%200%200%200-137.1%200A69.71%2069.71%200%200%200%2018%20127.8c-.1%2037.11%2031.13%2069.2%2068.19%2070.2a70.3%2070.3%200%200%200%2035.81-8.84V232a6%206%200%200%200%2012%200v-42.84a70.1%2070.1%200%200%200%2034%208.84h1.77c37.1-1%2068.33-33.1%2068.23-70.2a69.71%2069.71%200%200%200-41.45-63.71M169.5%20186a57.88%2057.88%200%200%201-35.5-11v-43.29l44.68-22.34a6%206%200%201%200-5.36-10.74L134%20118.29V88a6%206%200%200%200-12%200v54.29l-39.32-19.66a6%206%200%200%200-5.36%2010.74L122%20155.71V175a58.1%2058.1%200%200%201-35.5%2011c-30.71-.77-56.58-27.4-56.5-58.14a57.78%2057.78%200%200%201%2036.37-53.67a6%206%200%200%200%203.39-3.51a62%2062%200%200%201%20116.48%200a6%206%200%200%200%203.39%203.51A57.77%2057.77%200%200%201%20226%20127.83c.08%2030.75-25.79%2057.37-56.5%2058.17%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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