tree icon
tree-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- tree-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
treeBootstrap IconstreeBoxIcons v2 SolidtreeCarbontreeFramework7 IconstreeFont Awesome 6 SolidtreeFont Awesome Solidtreecss.ggtreeIconParktreeIconPark OutlinetreeIconoirtreeJam IconstreeLine AwesometreeMaterial Icon ThemetreeMaterial Design Iconstree-fillMingCute IcontreeMyna UI IconstreePixelarticonstree-fillRemix IcontreeTabler IconstreeWeb3 Icons Branded
Related icons in Phosphor
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="M195 65.59a72 72 0 0 0-134 0a67.72 67.72 0 0 0-41 62.22c-.1 36 30.24 67.26 66.25 68.17A68.24 68.24 0 0 0 124 185.66V232a4 4 0 0 0 8 0v-46.33A68.1 68.1 0 0 0 168 196h1.72c36-.91 66.34-32.13 66.24-68.17A67.73 67.73 0 0 0 195 65.59M169.55 188A60.15 60.15 0 0 1 132 176v-45.5l45.79-22.89a4 4 0 1 0-3.58-7.16L132 121.53V88a4 4 0 0 0-8 0v57.53l-42.21-21.11a4 4 0 1 0-3.58 7.16L124 154.47V176a60 60 0 0 1-37.55 12c-31.77-.8-58.54-28.35-58.45-60.15a59.77 59.77 0 0 1 37.62-55.5A4 4 0 0 0 67.88 70a64 64 0 0 1 120.24 0a4 4 0 0 0 2.26 2.33a59.79 59.79 0 0 1 37.62 55.5c.09 31.8-26.68 59.35-58.45 60.17"/></svg>
React
import type { SVGProps } from "react";
export function PhTreeThin(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="M195 65.59a72 72 0 0 0-134 0a67.72 67.72 0 0 0-41 62.22c-.1 36 30.24 67.26 66.25 68.17A68.24 68.24 0 0 0 124 185.66V232a4 4 0 0 0 8 0v-46.33A68.1 68.1 0 0 0 168 196h1.72c36-.91 66.34-32.13 66.24-68.17A67.73 67.73 0 0 0 195 65.59M169.55 188A60.15 60.15 0 0 1 132 176v-45.5l45.79-22.89a4 4 0 1 0-3.58-7.16L132 121.53V88a4 4 0 0 0-8 0v57.53l-42.21-21.11a4 4 0 1 0-3.58 7.16L124 154.47V176a60 60 0 0 1-37.55 12c-31.77-.8-58.54-28.35-58.45-60.15a59.77 59.77 0 0 1 37.62-55.5A4 4 0 0 0 67.88 70a64 64 0 0 1 120.24 0a4 4 0 0 0 2.26 2.33a59.79 59.79 0 0 1 37.62 55.5c.09 31.8-26.68 59.35-58.45 60.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="M195 65.59a72 72 0 0 0-134 0a67.72 67.72 0 0 0-41 62.22c-.1 36 30.24 67.26 66.25 68.17A68.24 68.24 0 0 0 124 185.66V232a4 4 0 0 0 8 0v-46.33A68.1 68.1 0 0 0 168 196h1.72c36-.91 66.34-32.13 66.24-68.17A67.73 67.73 0 0 0 195 65.59M169.55 188A60.15 60.15 0 0 1 132 176v-45.5l45.79-22.89a4 4 0 1 0-3.58-7.16L132 121.53V88a4 4 0 0 0-8 0v57.53l-42.21-21.11a4 4 0 1 0-3.58 7.16L124 154.47V176a60 60 0 0 1-37.55 12c-31.77-.8-58.54-28.35-58.45-60.15a59.77 59.77 0 0 1 37.62-55.5A4 4 0 0 0 67.88 70a64 64 0 0 1 120.24 0a4 4 0 0 0 2.26 2.33a59.79 59.79 0 0 1 37.62 55.5c.09 31.8-26.68 59.35-58.45 60.17"/></svg> </template>
CSS
.icon-tree-thin {
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%22M195%2065.59a72%2072%200%200%200-134%200a67.72%2067.72%200%200%200-41%2062.22c-.1%2036%2030.24%2067.26%2066.25%2068.17A68.24%2068.24%200%200%200%20124%20185.66V232a4%204%200%200%200%208%200v-46.33A68.1%2068.1%200%200%200%20168%20196h1.72c36-.91%2066.34-32.13%2066.24-68.17A67.73%2067.73%200%200%200%20195%2065.59M169.55%20188A60.15%2060.15%200%200%201%20132%20176v-45.5l45.79-22.89a4%204%200%201%200-3.58-7.16L132%20121.53V88a4%204%200%200%200-8%200v57.53l-42.21-21.11a4%204%200%201%200-3.58%207.16L124%20154.47V176a60%2060%200%200%201-37.55%2012c-31.77-.8-58.54-28.35-58.45-60.15a59.77%2059.77%200%200%201%2037.62-55.5A4%204%200%200%200%2067.88%2070a64%2064%200%200%201%20120.24%200a4%204%200%200%200%202.26%202.33a59.79%2059.79%200%200%201%2037.62%2055.5c.09%2031.8-26.68%2059.35-58.45%2060.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%22M195%2065.59a72%2072%200%200%200-134%200a67.72%2067.72%200%200%200-41%2062.22c-.1%2036%2030.24%2067.26%2066.25%2068.17A68.24%2068.24%200%200%200%20124%20185.66V232a4%204%200%200%200%208%200v-46.33A68.1%2068.1%200%200%200%20168%20196h1.72c36-.91%2066.34-32.13%2066.24-68.17A67.73%2067.73%200%200%200%20195%2065.59M169.55%20188A60.15%2060.15%200%200%201%20132%20176v-45.5l45.79-22.89a4%204%200%201%200-3.58-7.16L132%20121.53V88a4%204%200%200%200-8%200v57.53l-42.21-21.11a4%204%200%201%200-3.58%207.16L124%20154.47V176a60%2060%200%200%201-37.55%2012c-31.77-.8-58.54-28.35-58.45-60.15a59.77%2059.77%200%200%201%2037.62-55.5A4%204%200%200%200%2067.88%2070a64%2064%200%200%201%20120.24%200a4%204%200%200%200%202.26%202.33a59.79%2059.79%200%200%201%2037.62%2055.5c.09%2031.8-26.68%2059.35-58.45%2060.17%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/tree-thin.svg?color=%231a73e8&size=48
