tree icon
tree from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- tree
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
treeBootstrap IconstreeBoxIcons v2 SolidtreeCarbontreeFont Awesome 6 SolidtreeFont Awesome Solidtreecss.ggtreeIconParktreeIconPark OutlinetreeIconoirtreeJam IconstreeLine AwesometreeMaterial Icon ThemetreeMaterial Design Iconstree-fillMingCute IcontreeMyna UI IconstreePhosphortreePixelarticonstree-fillRemix IcontreeTabler IconstreeWeb3 Icons Branded
Use the tree icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fill-rule="evenodd" d="M31.8 36.237q-1.376 5.14-.074 8.574c1.595 4.208 7.2 5.419 7.464 6.522S31.726 53 27.358 53c-4.367 0-9.724-.833-9.724-1.667c0-.833 5.084-1.939 6.629-6.6q1.35-4.076-.296-9.361a2.8 2.8 0 0 1-.845.128c-1.191 0-2.183-.73-2.397-1.694c-.822.54-1.852.86-2.969.86c-2.41 0-4.411-1.492-4.807-3.454a4.5 4.5 0 0 1-1.047.121C9.747 31.333 8 29.841 8 28c0-1.243.796-2.327 1.977-2.9c-.607-.379-1.001-.992-1.001-1.683q.002-.362.135-.686C8.442 22.434 8 21.92 8 21.333c0-.727.682-1.345 1.632-1.573C8.637 19.15 8 18.214 8 17.167c0-1.663 1.603-3.04 3.699-3.293a3.37 3.37 0 0 1-.772-2.124c0-2.071 1.965-3.75 4.39-3.75q.366 0 .718.05c.585-1.483 2.227-2.55 4.16-2.55c.537 0 1.051.082 1.527.233C22.052 4.179 23.646 3 25.56 3c1.958 0 3.58 1.232 3.86 2.837c.715-.716 1.78-1.17 2.97-1.17c2.155 0 3.902 1.492 3.902 3.333c0 .62-.199 1.201-.544 1.699q.266-.032.544-.032c2.006 0 3.66 1.293 3.878 2.958a4.4 4.4 0 0 1 1.975-.458c2.156 0 3.903 1.492 3.903 3.333c0 1.255-.812 2.348-2.012 2.917c1.2.568 2.012 1.661 2.012 2.916c0 1.09-.613 2.059-1.56 2.667c.366.418.584.937.584 1.5q-.001.325-.092.624c1.8.853 3.019 2.493 3.019 4.376c0 2.761-2.62 5-5.854 5a6.7 6.7 0 0 1-2.362-.424c-.886.776-2.123 1.257-3.491 1.257a5.4 5.4 0 0 1-2.955-.85c-.42.357-.948.621-1.538.754"/></svg>
React
import type { SVGProps } from "react";
export function F7Tree(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fillRule="evenodd" d="M31.8 36.237q-1.376 5.14-.074 8.574c1.595 4.208 7.2 5.419 7.464 6.522S31.726 53 27.358 53c-4.367 0-9.724-.833-9.724-1.667c0-.833 5.084-1.939 6.629-6.6q1.35-4.076-.296-9.361a2.8 2.8 0 0 1-.845.128c-1.191 0-2.183-.73-2.397-1.694c-.822.54-1.852.86-2.969.86c-2.41 0-4.411-1.492-4.807-3.454a4.5 4.5 0 0 1-1.047.121C9.747 31.333 8 29.841 8 28c0-1.243.796-2.327 1.977-2.9c-.607-.379-1.001-.992-1.001-1.683q.002-.362.135-.686C8.442 22.434 8 21.92 8 21.333c0-.727.682-1.345 1.632-1.573C8.637 19.15 8 18.214 8 17.167c0-1.663 1.603-3.04 3.699-3.293a3.37 3.37 0 0 1-.772-2.124c0-2.071 1.965-3.75 4.39-3.75q.366 0 .718.05c.585-1.483 2.227-2.55 4.16-2.55c.537 0 1.051.082 1.527.233C22.052 4.179 23.646 3 25.56 3c1.958 0 3.58 1.232 3.86 2.837c.715-.716 1.78-1.17 2.97-1.17c2.155 0 3.902 1.492 3.902 3.333c0 .62-.199 1.201-.544 1.699q.266-.032.544-.032c2.006 0 3.66 1.293 3.878 2.958a4.4 4.4 0 0 1 1.975-.458c2.156 0 3.903 1.492 3.903 3.333c0 1.255-.812 2.348-2.012 2.917c1.2.568 2.012 1.661 2.012 2.916c0 1.09-.613 2.059-1.56 2.667c.366.418.584.937.584 1.5q-.001.325-.092.624c1.8.853 3.019 2.493 3.019 4.376c0 2.761-2.62 5-5.854 5a6.7 6.7 0 0 1-2.362-.424c-.886.776-2.123 1.257-3.491 1.257a5.4 5.4 0 0 1-2.955-.85c-.42.357-.948.621-1.538.754"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fill-rule="evenodd" d="M31.8 36.237q-1.376 5.14-.074 8.574c1.595 4.208 7.2 5.419 7.464 6.522S31.726 53 27.358 53c-4.367 0-9.724-.833-9.724-1.667c0-.833 5.084-1.939 6.629-6.6q1.35-4.076-.296-9.361a2.8 2.8 0 0 1-.845.128c-1.191 0-2.183-.73-2.397-1.694c-.822.54-1.852.86-2.969.86c-2.41 0-4.411-1.492-4.807-3.454a4.5 4.5 0 0 1-1.047.121C9.747 31.333 8 29.841 8 28c0-1.243.796-2.327 1.977-2.9c-.607-.379-1.001-.992-1.001-1.683q.002-.362.135-.686C8.442 22.434 8 21.92 8 21.333c0-.727.682-1.345 1.632-1.573C8.637 19.15 8 18.214 8 17.167c0-1.663 1.603-3.04 3.699-3.293a3.37 3.37 0 0 1-.772-2.124c0-2.071 1.965-3.75 4.39-3.75q.366 0 .718.05c.585-1.483 2.227-2.55 4.16-2.55c.537 0 1.051.082 1.527.233C22.052 4.179 23.646 3 25.56 3c1.958 0 3.58 1.232 3.86 2.837c.715-.716 1.78-1.17 2.97-1.17c2.155 0 3.902 1.492 3.902 3.333c0 .62-.199 1.201-.544 1.699q.266-.032.544-.032c2.006 0 3.66 1.293 3.878 2.958a4.4 4.4 0 0 1 1.975-.458c2.156 0 3.903 1.492 3.903 3.333c0 1.255-.812 2.348-2.012 2.917c1.2.568 2.012 1.661 2.012 2.916c0 1.09-.613 2.059-1.56 2.667c.366.418.584.937.584 1.5q-.001.325-.092.624c1.8.853 3.019 2.493 3.019 4.376c0 2.761-2.62 5-5.854 5a6.7 6.7 0 0 1-2.362-.424c-.886.776-2.123 1.257-3.491 1.257a5.4 5.4 0 0 1-2.955-.85c-.42.357-.948.621-1.538.754"/></svg> </template>
CSS
.icon-tree {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M31.8%2036.237q-1.376%205.14-.074%208.574c1.595%204.208%207.2%205.419%207.464%206.522S31.726%2053%2027.358%2053c-4.367%200-9.724-.833-9.724-1.667c0-.833%205.084-1.939%206.629-6.6q1.35-4.076-.296-9.361a2.8%202.8%200%200%201-.845.128c-1.191%200-2.183-.73-2.397-1.694c-.822.54-1.852.86-2.969.86c-2.41%200-4.411-1.492-4.807-3.454a4.5%204.5%200%200%201-1.047.121C9.747%2031.333%208%2029.841%208%2028c0-1.243.796-2.327%201.977-2.9c-.607-.379-1.001-.992-1.001-1.683q.002-.362.135-.686C8.442%2022.434%208%2021.92%208%2021.333c0-.727.682-1.345%201.632-1.573C8.637%2019.15%208%2018.214%208%2017.167c0-1.663%201.603-3.04%203.699-3.293a3.37%203.37%200%200%201-.772-2.124c0-2.071%201.965-3.75%204.39-3.75q.366%200%20.718.05c.585-1.483%202.227-2.55%204.16-2.55c.537%200%201.051.082%201.527.233C22.052%204.179%2023.646%203%2025.56%203c1.958%200%203.58%201.232%203.86%202.837c.715-.716%201.78-1.17%202.97-1.17c2.155%200%203.902%201.492%203.902%203.333c0%20.62-.199%201.201-.544%201.699q.266-.032.544-.032c2.006%200%203.66%201.293%203.878%202.958a4.4%204.4%200%200%201%201.975-.458c2.156%200%203.903%201.492%203.903%203.333c0%201.255-.812%202.348-2.012%202.917c1.2.568%202.012%201.661%202.012%202.916c0%201.09-.613%202.059-1.56%202.667c.366.418.584.937.584%201.5q-.001.325-.092.624c1.8.853%203.019%202.493%203.019%204.376c0%202.761-2.62%205-5.854%205a6.7%206.7%200%200%201-2.362-.424c-.886.776-2.123%201.257-3.491%201.257a5.4%205.4%200%200%201-2.955-.85c-.42.357-.948.621-1.538.754%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M31.8%2036.237q-1.376%205.14-.074%208.574c1.595%204.208%207.2%205.419%207.464%206.522S31.726%2053%2027.358%2053c-4.367%200-9.724-.833-9.724-1.667c0-.833%205.084-1.939%206.629-6.6q1.35-4.076-.296-9.361a2.8%202.8%200%200%201-.845.128c-1.191%200-2.183-.73-2.397-1.694c-.822.54-1.852.86-2.969.86c-2.41%200-4.411-1.492-4.807-3.454a4.5%204.5%200%200%201-1.047.121C9.747%2031.333%208%2029.841%208%2028c0-1.243.796-2.327%201.977-2.9c-.607-.379-1.001-.992-1.001-1.683q.002-.362.135-.686C8.442%2022.434%208%2021.92%208%2021.333c0-.727.682-1.345%201.632-1.573C8.637%2019.15%208%2018.214%208%2017.167c0-1.663%201.603-3.04%203.699-3.293a3.37%203.37%200%200%201-.772-2.124c0-2.071%201.965-3.75%204.39-3.75q.366%200%20.718.05c.585-1.483%202.227-2.55%204.16-2.55c.537%200%201.051.082%201.527.233C22.052%204.179%2023.646%203%2025.56%203c1.958%200%203.58%201.232%203.86%202.837c.715-.716%201.78-1.17%202.97-1.17c2.155%200%203.902%201.492%203.902%203.333c0%20.62-.199%201.201-.544%201.699q.266-.032.544-.032c2.006%200%203.66%201.293%203.878%202.958a4.4%204.4%200%200%201%201.975-.458c2.156%200%203.903%201.492%203.903%203.333c0%201.255-.812%202.348-2.012%202.917c1.2.568%202.012%201.661%202.012%202.916c0%201.09-.613%202.059-1.56%202.667c.366.418.584.937.584%201.5q-.001.325-.092.624c1.8.853%203.019%202.493%203.019%204.376c0%202.761-2.62%205-5.854%205a6.7%206.7%200%200%201-2.362-.424c-.886.776-2.123%201.257-3.491%201.257a5.4%205.4%200%200%201-2.955-.85c-.42.357-.948.621-1.538.754%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/tree.svg?color=%231a73e8&size=48
