Gentleface › Files & folders › folder-tree

folder-tree icon

Folder tree: folder tree, directory structure, file 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="M5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 4L5.5 4C5.641 4 5.759 4.048 5.856 4.144C5.952 4.241 6 4.359 6 4.5C6 4.641 5.952 4.759 5.856 4.856C5.759 4.952 5.641 5 5.5 5L3 5L3 12L5.5 12C5.641 12 5.759 12.048 5.856 12.144ZM9.638 1.168C9.908 1.28 10.147 1.439 10.354 1.646C10.589 1.882 10.874 2 11.207 2L14 2C14.276 2 14.512 2.098 14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L8 7C7.724 7 7.488 6.902 7.293 6.707C7.098 6.512 7 6.276 7 6L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L8.793 1C9.086 1 9.367 1.056 9.638 1.168ZM14 6L14 3L11.207 3C10.914 3 10.633 2.944 10.362 2.832C10.092 2.72 9.853 2.561 9.646 2.354C9.411 2.118 9.126 2 8.793 2L8 2L8 6L14 6ZM14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L8.793 9C9.086 9 9.367 9.056 9.638 9.168C9.908 9.28 10.147 9.439 10.354 9.646C10.589 9.882 10.874 10 11.207 10L14 10C14.276 10 14.512 10.098 14.707 10.293ZM11.207 11C10.914 11 10.633 10.944 10.362 10.832C10.092 10.72 9.853 10.561 9.646 10.354C9.411 10.118 9.126 10 8.793 10L8 10L8 14L14 14L14 11L11.207 11Z"/></svg>

React

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

export function FolderTreeIcon(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="M5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L2.5 13C2.359 13 2.241 12.952 2.144 12.856C2.048 12.759 2 12.641 2 12.5L2 1.5C2 1.359 2.048 1.241 2.144 1.144C2.241 1.048 2.359 1 2.5 1C2.641 1 2.759 1.048 2.856 1.144C2.952 1.241 3 1.359 3 1.5L3 4L5.5 4C5.641 4 5.759 4.048 5.856 4.144C5.952 4.241 6 4.359 6 4.5C6 4.641 5.952 4.759 5.856 4.856C5.759 4.952 5.641 5 5.5 5L3 5L3 12L5.5 12C5.641 12 5.759 12.048 5.856 12.144ZM9.638 1.168C9.908 1.28 10.147 1.439 10.354 1.646C10.589 1.882 10.874 2 11.207 2L14 2C14.276 2 14.512 2.098 14.707 2.293C14.902 2.488 15 2.724 15 3L15 6C15 6.276 14.902 6.512 14.707 6.707C14.512 6.902 14.276 7 14 7L8 7C7.724 7 7.488 6.902 7.293 6.707C7.098 6.512 7 6.276 7 6L7 2C7 1.724 7.098 1.488 7.293 1.293C7.488 1.098 7.724 1 8 1L8.793 1C9.086 1 9.367 1.056 9.638 1.168ZM14 6L14 3L11.207 3C10.914 3 10.633 2.944 10.362 2.832C10.092 2.72 9.853 2.561 9.646 2.354C9.411 2.118 9.126 2 8.793 2L8 2L8 6L14 6ZM14.707 10.293C14.902 10.488 15 10.724 15 11L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15L8 15C7.724 15 7.488 14.902 7.293 14.707C7.098 14.512 7 14.276 7 14L7 10C7 9.724 7.098 9.488 7.293 9.293C7.488 9.098 7.724 9 8 9L8.793 9C9.086 9 9.367 9.056 9.638 9.168C9.908 9.28 10.147 9.439 10.354 9.646C10.589 9.882 10.874 10 11.207 10L14 10C14.276 10 14.512 10.098 14.707 10.293ZM11.207 11C10.914 11 10.633 10.944 10.362 10.832C10.092 10.72 9.853 10.561 9.646 10.354C9.411 10.118 9.126 10 8.793 10L8 10L8 14L14 14L14 11L11.207 11Z" />
    </svg>
  );
}

Vue

Vue: see /icons/folder-tree.md

Svelte

Svelte: see /icons/folder-tree.md

HTML img

HTML img: see /icons/folder-tree.md

CSS

CSS: see /icons/folder-tree.md

Data URL

Data URL: see /icons/folder-tree.md

Sprite

Sprite: see /icons/folder-tree.md

SwiftUI

SwiftUI: see /icons/folder-tree.md

Compose

Compose: see /icons/folder-tree.md

Android XML

Android XML: see /icons/folder-tree.md

Flutter

Flutter: see /icons/folder-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.

With npm: import { FolderTreeIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

folder tree, directory structure, file tree

Alternatives

list-tree: a generic tree view or nested list (tree-view)
sitemap: the page structure of a website (site-structure)
hierarchy: an org chart (org-chart)

Also fits

sitemap: folders on disk (directory-structure)

Tags

directory, tree, hierarchy, structure, explorer, nested, subfolders, file-tree, navigator, folder

Category

Files & folders

Component name

FolderTreeIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 35

folder folder-alert folder-arrow-down folder-arrow-right folder-arrow-up folder-check folder-clock folder-cloud folder-code folder-dot folder-export folder-gear

More files & folders icons

archive archive-arrow-up archive-clock archive-lock archive-search book book-a book-arrow-down book-bookmark book-check book-clock book-headphones book-open book-plus book-search book-x · all files & folders icons

For agents

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

folder-tree icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp