tree icon

Tree: tree, deciduous tree. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7.856 14.856C7.759 14.952 7.641 15 7.5 15C7.359 15 7.241 14.952 7.144 14.856C7.048 14.759 7 14.641 7 14.5L7 11.965C6.635 11.913 6.283 11.803 5.944 11.635C5.594 11.461 5.283 11.237 5.012 10.963C4.647 11.017 4.281 11.013 3.912 10.95C3.396 10.862 2.923 10.668 2.494 10.368C2.065 10.068 1.721 9.69 1.461 9.236C1.225 8.823 1.079 8.38 1.024 7.907C0.969 7.435 1.008 6.971 1.142 6.514C1.289 6.012 1.537 5.565 1.885 5.174C2.233 4.782 2.648 4.484 3.13 4.279C3.422 4.155 3.722 4.072 4.031 4.031C4.069 3.751 4.14 3.478 4.246 3.212C4.424 2.762 4.683 2.367 5.025 2.025C5.367 1.683 5.762 1.424 6.212 1.246C6.625 1.082 7.055 1 7.5 1C7.945 1 8.375 1.082 8.788 1.246C9.238 1.424 9.633 1.683 9.975 2.025C10.317 2.367 10.576 2.762 10.754 3.212C10.86 3.478 10.931 3.751 10.969 4.031C11.278 4.072 11.578 4.155 11.87 4.279C12.352 4.484 12.767 4.782 13.115 5.174C13.463 5.565 13.711 6.012 13.858 6.514C13.992 6.971 14.031 7.435 13.976 7.907C13.921 8.38 13.775 8.823 13.539 9.236C13.279 9.69 12.935 10.068 12.506 10.368C12.077 10.668 11.604 10.862 11.088 10.95C10.719 11.013 10.353 11.017 9.988 10.963C9.717 11.237 9.406 11.461 9.056 11.635C8.717 11.803 8.365 11.913 8 11.965L8 14.5C8 14.641 7.952 14.759 7.856 14.856ZM7.144 8.144C7.241 8.048 7.359 8 7.5 8C7.641 8 7.759 8.048 7.856 8.144C7.952 8.241 8 8.359 8 8.5L8 9.293L9.146 8.146C9.246 8.047 9.364 7.997 9.5 7.997C9.636 7.997 9.754 8.047 9.854 8.146C9.953 8.246 10.003 8.364 10.003 8.5C10.003 8.636 9.953 8.754 9.854 8.854L8 10.707L8 10.95C8.21 10.908 8.414 10.837 8.611 10.74C8.926 10.583 9.197 10.37 9.422 10.099C9.483 10.025 9.558 9.974 9.648 9.944C9.737 9.914 9.829 9.91 9.922 9.932C10.252 10.011 10.585 10.022 10.92 9.964C11.289 9.902 11.626 9.763 11.933 9.549C12.239 9.334 12.485 9.065 12.671 8.74C12.839 8.445 12.943 8.129 12.983 7.791C13.022 7.454 12.994 7.122 12.899 6.796C12.793 6.437 12.616 6.118 12.368 5.838C12.119 5.559 11.823 5.346 11.479 5.2C11.166 5.067 10.84 5 10.5 5C10.359 5 10.24 4.952 10.144 4.856C10.048 4.759 10 4.641 10 4.5C10 4.182 9.941 3.875 9.824 3.58C9.697 3.259 9.512 2.976 9.268 2.732C9.024 2.488 8.741 2.303 8.42 2.176C8.125 2.059 7.818 2 7.5 2C7.182 2 6.875 2.059 6.58 2.176C6.259 2.303 5.976 2.488 5.732 2.732C5.488 2.976 5.303 3.259 5.176 3.58C5.059 3.875 5 4.182 5 4.5C5 4.641 4.952 4.759 4.856 4.856C4.76 4.952 4.641 5 4.5 5C4.16 5 3.834 5.067 3.521 5.2C3.177 5.346 2.881 5.559 2.632 5.838C2.384 6.118 2.207 6.437 2.101 6.796C2.006 7.122 1.978 7.454 2.017 7.791C2.057 8.129 2.161 8.445 2.329 8.74C2.515 9.065 2.761 9.334 3.067 9.549C3.374 9.763 3.711 9.902 4.08 9.964C4.415 10.022 4.748 10.011 5.078 9.932C5.171 9.91 5.263 9.914 5.352 9.944C5.442 9.974 5.517 10.025 5.578 10.099C5.803 10.37 6.074 10.583 6.389 10.74C6.586 10.837 6.79 10.908 7 10.95L7 8.5C7 8.359 7.048 8.241 7.144 8.144Z"/></svg>

React

// Gentleface "tree" (line-round), MIT. https://gentleface.com/icons/tree
import type { SVGProps } from 'react';

export function TreeIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M7.856 14.856C7.759 14.952 7.641 15 7.5 15C7.359 15 7.241 14.952 7.144 14.856C7.048 14.759 7 14.641 7 14.5L7 11.965C6.635 11.913 6.283 11.803 5.944 11.635C5.594 11.461 5.283 11.237 5.012 10.963C4.647 11.017 4.281 11.013 3.912 10.95C3.396 10.862 2.923 10.668 2.494 10.368C2.065 10.068 1.721 9.69 1.461 9.236C1.225 8.823 1.079 8.38 1.024 7.907C0.969 7.435 1.008 6.971 1.142 6.514C1.289 6.012 1.537 5.565 1.885 5.174C2.233 4.782 2.648 4.484 3.13 4.279C3.422 4.155 3.722 4.072 4.031 4.031C4.069 3.751 4.14 3.478 4.246 3.212C4.424 2.762 4.683 2.367 5.025 2.025C5.367 1.683 5.762 1.424 6.212 1.246C6.625 1.082 7.055 1 7.5 1C7.945 1 8.375 1.082 8.788 1.246C9.238 1.424 9.633 1.683 9.975 2.025C10.317 2.367 10.576 2.762 10.754 3.212C10.86 3.478 10.931 3.751 10.969 4.031C11.278 4.072 11.578 4.155 11.87 4.279C12.352 4.484 12.767 4.782 13.115 5.174C13.463 5.565 13.711 6.012 13.858 6.514C13.992 6.971 14.031 7.435 13.976 7.907C13.921 8.38 13.775 8.823 13.539 9.236C13.279 9.69 12.935 10.068 12.506 10.368C12.077 10.668 11.604 10.862 11.088 10.95C10.719 11.013 10.353 11.017 9.988 10.963C9.717 11.237 9.406 11.461 9.056 11.635C8.717 11.803 8.365 11.913 8 11.965L8 14.5C8 14.641 7.952 14.759 7.856 14.856ZM7.144 8.144C7.241 8.048 7.359 8 7.5 8C7.641 8 7.759 8.048 7.856 8.144C7.952 8.241 8 8.359 8 8.5L8 9.293L9.146 8.146C9.246 8.047 9.364 7.997 9.5 7.997C9.636 7.997 9.754 8.047 9.854 8.146C9.953 8.246 10.003 8.364 10.003 8.5C10.003 8.636 9.953 8.754 9.854 8.854L8 10.707L8 10.95C8.21 10.908 8.414 10.837 8.611 10.74C8.926 10.583 9.197 10.37 9.422 10.099C9.483 10.025 9.558 9.974 9.648 9.944C9.737 9.914 9.829 9.91 9.922 9.932C10.252 10.011 10.585 10.022 10.92 9.964C11.289 9.902 11.626 9.763 11.933 9.549C12.239 9.334 12.485 9.065 12.671 8.74C12.839 8.445 12.943 8.129 12.983 7.791C13.022 7.454 12.994 7.122 12.899 6.796C12.793 6.437 12.616 6.118 12.368 5.838C12.119 5.559 11.823 5.346 11.479 5.2C11.166 5.067 10.84 5 10.5 5C10.359 5 10.24 4.952 10.144 4.856C10.048 4.759 10 4.641 10 4.5C10 4.182 9.941 3.875 9.824 3.58C9.697 3.259 9.512 2.976 9.268 2.732C9.024 2.488 8.741 2.303 8.42 2.176C8.125 2.059 7.818 2 7.5 2C7.182 2 6.875 2.059 6.58 2.176C6.259 2.303 5.976 2.488 5.732 2.732C5.488 2.976 5.303 3.259 5.176 3.58C5.059 3.875 5 4.182 5 4.5C5 4.641 4.952 4.759 4.856 4.856C4.76 4.952 4.641 5 4.5 5C4.16 5 3.834 5.067 3.521 5.2C3.177 5.346 2.881 5.559 2.632 5.838C2.384 6.118 2.207 6.437 2.101 6.796C2.006 7.122 1.978 7.454 2.017 7.791C2.057 8.129 2.161 8.445 2.329 8.74C2.515 9.065 2.761 9.334 3.067 9.549C3.374 9.763 3.711 9.902 4.08 9.964C4.415 10.022 4.748 10.011 5.078 9.932C5.171 9.91 5.263 9.914 5.352 9.944C5.442 9.974 5.517 10.025 5.578 10.099C5.803 10.37 6.074 10.583 6.389 10.74C6.586 10.837 6.79 10.908 7 10.95L7 8.5C7 8.359 7.048 8.241 7.144 8.144Z" />
    </svg>
  );
}

Vue

Vue: see /icons/tree.md

Svelte

Svelte: see /icons/tree.md

HTML img

HTML img: see /icons/tree.md

CSS

CSS: see /icons/tree.md

Data URL

Data URL: see /icons/tree.md

Sprite

Sprite: see /icons/tree.md

SwiftUI

SwiftUI: see /icons/tree.md

Compose

Compose: see /icons/tree.md

Android XML

Android XML: see /icons/tree.md

Flutter

Flutter: see /icons/tree.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

tree, deciduous tree

Alternatives

trees: a forest or woods
tree-evergreen: a pine or conifer
list-tree: a tree view or hierarchy in an app

Also fits

nature: a tree, a park or the forest
pine tree: a tree in general
forest: a single tree or a park
park: nature or a single tree

Tags

tree, forest, park, woods, deciduous, nature, outdoors, environment

Category

Nature & animals

Component name

TreeIcon

History

2026-10-14 added

Family 2

tree-evergreen trees

More nature & animals icons

cactus cat clover dog feather fish fish-off flower horse leaf mountain paw paw-off potted-plant rabbit recycle · all nature & animals icons

For agents

Metadata: /icons/tree.json · Markdown: /icons/tree.md · SVG: https://gentleface.com/svg/{style}/16/tree.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/tree.png

tree icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp