# folder-tree icon

Folder tree. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/folder-tree

- Category: Files & folders
- Use it for: folder tree, directory structure, file tree
- Tags: directory, tree, hierarchy, structure, explorer, nested, subfolders, file-tree, navigator, folder
- Family: 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, folder-git, folder-heart, folder-import, folder-info, folder-kanban, folder-link, folder-lock, folder-music, folder-off, folder-open, folder-pencil, folder-plus, folder-search, folder-shield, folder-sparkle, folder-star, folder-symlink, folder-sync, folder-user, folder-video, folder-x, folder-zip, folders
- Component name: FolderTreeIcon
- Added: 2026-10-29
- Since: version 0.2.0
- npm: `import { FolderTreeIcon } from '@gentleface/react';` (@gentleface/react 0.2.0)
- Changed: 2026-10-30 (added)

## 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)

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/folder-tree.svg · PNG https://gentleface.com/png/line-round/16/folder-tree.png · https://gentleface.com/png/line-round/32/folder-tree.png · https://gentleface.com/png/line-round/48/folder-tree.png
- line-soft: https://gentleface.com/svg/line-soft/16/folder-tree.svg · PNG https://gentleface.com/png/line-soft/16/folder-tree.png · https://gentleface.com/png/line-soft/32/folder-tree.png · https://gentleface.com/png/line-soft/48/folder-tree.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/folder-tree.svg · PNG https://gentleface.com/png/line-sharp/16/folder-tree.png · https://gentleface.com/png/line-sharp/32/folder-tree.png · https://gentleface.com/png/line-sharp/48/folder-tree.png
- solid-round: https://gentleface.com/svg/solid-round/16/folder-tree.svg · PNG https://gentleface.com/png/solid-round/16/folder-tree.png · https://gentleface.com/png/solid-round/32/folder-tree.png · https://gentleface.com/png/solid-round/48/folder-tree.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/folder-tree.svg · PNG https://gentleface.com/png/solid-soft/16/folder-tree.png · https://gentleface.com/png/solid-soft/32/folder-tree.png · https://gentleface.com/png/solid-soft/48/folder-tree.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/folder-tree.svg · PNG https://gentleface.com/png/solid-sharp/16/folder-tree.png · https://gentleface.com/png/solid-sharp/32/folder-tree.png · https://gentleface.com/png/solid-sharp/48/folder-tree.png

The SVG of every style: https://gentleface.com/icons/folder-tree.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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

```tsx
// 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
<!-- Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree -->
<script>
  let props = $props();
</script>

<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>
```

### HTML img

```html
<!-- Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/folder-tree.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree. Takes the text color. */
.icon-folder-tree {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#folder-tree"/></svg>
```

### SwiftUI

```swift
// Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree
import SwiftUI

struct FolderTreeIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 5.856, y: 12.144))
        p.addCurve(to: CGPoint(x: 6, y: 12.5), control1: CGPoint(x: 5.952, y: 12.241), control2: CGPoint(x: 6, y: 12.359))
        p.addCurve(to: CGPoint(x: 5.856, y: 12.856), control1: CGPoint(x: 6, y: 12.641), control2: CGPoint(x: 5.952, y: 12.759))
        p.addCurve(to: CGPoint(x: 5.5, y: 13), control1: CGPoint(x: 5.759, y: 12.952), control2: CGPoint(x: 5.641, y: 13))
        p.addLine(to: CGPoint(x: 2.5, y: 13))
        p.addCurve(to: CGPoint(x: 2.144, y: 12.856), control1: CGPoint(x: 2.359, y: 13), control2: CGPoint(x: 2.241, y: 12.952))
        p.addCurve(to: CGPoint(x: 2, y: 12.5), control1: CGPoint(x: 2.048, y: 12.759), control2: CGPoint(x: 2, y: 12.641))
        p.addLine(to: CGPoint(x: 2, y: 1.5))
        p.addCurve(to: CGPoint(x: 2.144, y: 1.144), control1: CGPoint(x: 2, y: 1.359), control2: CGPoint(x: 2.048, y: 1.241))
        p.addCurve(to: CGPoint(x: 2.5, y: 1), control1: CGPoint(x: 2.241, y: 1.048), control2: CGPoint(x: 2.359, y: 1))
        p.addCurve(to: CGPoint(x: 2.856, y: 1.144), control1: CGPoint(x: 2.641, y: 1), control2: CGPoint(x: 2.759, y: 1.048))
        p.addCurve(to: CGPoint(x: 3, y: 1.5), control1: CGPoint(x: 2.952, y: 1.241), control2: CGPoint(x: 3, y: 1.359))
        p.addLine(to: CGPoint(x: 3, y: 4))
        p.addLine(to: CGPoint(x: 5.5, y: 4))
        p.addCurve(to: CGPoint(x: 5.856, y: 4.144), control1: CGPoint(x: 5.641, y: 4), control2: CGPoint(x: 5.759, y: 4.048))
        p.addCurve(to: CGPoint(x: 6, y: 4.5), control1: CGPoint(x: 5.952, y: 4.241), control2: CGPoint(x: 6, y: 4.359))
        p.addCurve(to: CGPoint(x: 5.856, y: 4.856), control1: CGPoint(x: 6, y: 4.641), control2: CGPoint(x: 5.952, y: 4.759))
        p.addCurve(to: CGPoint(x: 5.5, y: 5), control1: CGPoint(x: 5.759, y: 4.952), control2: CGPoint(x: 5.641, y: 5))
        p.addLine(to: CGPoint(x: 3, y: 5))
        p.addLine(to: CGPoint(x: 3, y: 12))
        p.addLine(to: CGPoint(x: 5.5, y: 12))
        p.addCurve(to: CGPoint(x: 5.856, y: 12.144), control1: CGPoint(x: 5.641, y: 12), control2: CGPoint(x: 5.759, y: 12.048))
        p.closeSubpath()
        p.move(to: CGPoint(x: 9.638, y: 1.168))
        p.addCurve(to: CGPoint(x: 10.354, y: 1.646), control1: CGPoint(x: 9.908, y: 1.28), control2: CGPoint(x: 10.147, y: 1.439))
        p.addCurve(to: CGPoint(x: 11.207, y: 2), control1: CGPoint(x: 10.589, y: 1.882), control2: CGPoint(x: 10.874, y: 2))
        p.addLine(to: CGPoint(x: 14, y: 2))
        p.addCurve(to: CGPoint(x: 14.707, y: 2.293), control1: CGPoint(x: 14.276, y: 2), control2: CGPoint(x: 14.512, y: 2.098))
        p.addCurve(to: CGPoint(x: 15, y: 3), control1: CGPoint(x: 14.902, y: 2.488), control2: CGPoint(x: 15, y: 2.724))
        p.addLine(to: CGPoint(x: 15, y: 6))
        p.addCurve(to: CGPoint(x: 14.707, y: 6.707), control1: CGPoint(x: 15, y: 6.276), control2: CGPoint(x: 14.902, y: 6.512))
        p.addCurve(to: CGPoint(x: 14, y: 7), control1: CGPoint(x: 14.512, y: 6.902), control2: CGPoint(x: 14.276, y: 7))
        p.addLine(to: CGPoint(x: 8, y: 7))
        p.addCurve(to: CGPoint(x: 7.293, y: 6.707), control1: CGPoint(x: 7.724, y: 7), control2: CGPoint(x: 7.488, y: 6.902))
        p.addCurve(to: CGPoint(x: 7, y: 6), control1: CGPoint(x: 7.098, y: 6.512), control2: CGPoint(x: 7, y: 6.276))
        p.addLine(to: CGPoint(x: 7, y: 2))
        p.addCurve(to: CGPoint(x: 7.293, y: 1.293), control1: CGPoint(x: 7, y: 1.724), control2: CGPoint(x: 7.098, y: 1.488))
        p.addCurve(to: CGPoint(x: 8, y: 1), control1: CGPoint(x: 7.488, y: 1.098), control2: CGPoint(x: 7.724, y: 1))
        p.addLine(to: CGPoint(x: 8.793, y: 1))
        p.addCurve(to: CGPoint(x: 9.638, y: 1.168), control1: CGPoint(x: 9.086, y: 1), control2: CGPoint(x: 9.367, y: 1.056))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14, y: 6))
        p.addLine(to: CGPoint(x: 14, y: 3))
        p.addLine(to: CGPoint(x: 11.207, y: 3))
        p.addCurve(to: CGPoint(x: 10.362, y: 2.832), control1: CGPoint(x: 10.914, y: 3), control2: CGPoint(x: 10.633, y: 2.944))
        p.addCurve(to: CGPoint(x: 9.646, y: 2.354), control1: CGPoint(x: 10.092, y: 2.72), control2: CGPoint(x: 9.853, y: 2.561))
        p.addCurve(to: CGPoint(x: 8.793, y: 2), control1: CGPoint(x: 9.411, y: 2.118), control2: CGPoint(x: 9.126, y: 2))
        p.addLine(to: CGPoint(x: 8, y: 2))
        p.addLine(to: CGPoint(x: 8, y: 6))
        p.addLine(to: CGPoint(x: 14, y: 6))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14.707, y: 10.293))
        p.addCurve(to: CGPoint(x: 15, y: 11), control1: CGPoint(x: 14.902, y: 10.488), control2: CGPoint(x: 15, y: 10.724))
        p.addLine(to: CGPoint(x: 15, y: 14))
        p.addCurve(to: CGPoint(x: 14.707, y: 14.707), control1: CGPoint(x: 15, y: 14.276), control2: CGPoint(x: 14.902, y: 14.512))
        p.addCurve(to: CGPoint(x: 14, y: 15), control1: CGPoint(x: 14.512, y: 14.902), control2: CGPoint(x: 14.276, y: 15))
        p.addLine(to: CGPoint(x: 8, y: 15))
        p.addCurve(to: CGPoint(x: 7.293, y: 14.707), control1: CGPoint(x: 7.724, y: 15), control2: CGPoint(x: 7.488, y: 14.902))
        p.addCurve(to: CGPoint(x: 7, y: 14), control1: CGPoint(x: 7.098, y: 14.512), control2: CGPoint(x: 7, y: 14.276))
        p.addLine(to: CGPoint(x: 7, y: 10))
        p.addCurve(to: CGPoint(x: 7.293, y: 9.293), control1: CGPoint(x: 7, y: 9.724), control2: CGPoint(x: 7.098, y: 9.488))
        p.addCurve(to: CGPoint(x: 8, y: 9), control1: CGPoint(x: 7.488, y: 9.098), control2: CGPoint(x: 7.724, y: 9))
        p.addLine(to: CGPoint(x: 8.793, y: 9))
        p.addCurve(to: CGPoint(x: 9.638, y: 9.168), control1: CGPoint(x: 9.086, y: 9), control2: CGPoint(x: 9.367, y: 9.056))
        p.addCurve(to: CGPoint(x: 10.354, y: 9.646), control1: CGPoint(x: 9.908, y: 9.28), control2: CGPoint(x: 10.147, y: 9.439))
        p.addCurve(to: CGPoint(x: 11.207, y: 10), control1: CGPoint(x: 10.589, y: 9.882), control2: CGPoint(x: 10.874, y: 10))
        p.addLine(to: CGPoint(x: 14, y: 10))
        p.addCurve(to: CGPoint(x: 14.707, y: 10.293), control1: CGPoint(x: 14.276, y: 10), control2: CGPoint(x: 14.512, y: 10.098))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.207, y: 11))
        p.addCurve(to: CGPoint(x: 10.362, y: 10.832), control1: CGPoint(x: 10.914, y: 11), control2: CGPoint(x: 10.633, y: 10.944))
        p.addCurve(to: CGPoint(x: 9.646, y: 10.354), control1: CGPoint(x: 10.092, y: 10.72), control2: CGPoint(x: 9.853, y: 10.561))
        p.addCurve(to: CGPoint(x: 8.793, y: 10), control1: CGPoint(x: 9.411, y: 10.118), control2: CGPoint(x: 9.126, y: 10))
        p.addLine(to: CGPoint(x: 8, y: 10))
        p.addLine(to: CGPoint(x: 8, y: 14))
        p.addLine(to: CGPoint(x: 14, y: 14))
        p.addLine(to: CGPoint(x: 14, y: 11))
        p.addLine(to: CGPoint(x: 11.207, y: 11))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// FolderTreeIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val FolderTreeIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "folder-tree", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(FolderTreeIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_folder_tree.xml · Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "folder-tree" (line-round), MIT. https://gentleface.com/icons/folder-tree
import 'package:flutter/widgets.dart';

class FolderTreeIcon extends StatelessWidget {
  const FolderTreeIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _FolderTreeIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _FolderTreeIconPainter extends CustomPainter {
  _FolderTreeIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(5.856, 12.144)
      ..cubicTo(5.952, 12.241, 6, 12.359, 6, 12.5)
      ..cubicTo(6, 12.641, 5.952, 12.759, 5.856, 12.856)
      ..cubicTo(5.759, 12.952, 5.641, 13, 5.5, 13)
      ..lineTo(2.5, 13)
      ..cubicTo(2.359, 13, 2.241, 12.952, 2.144, 12.856)
      ..cubicTo(2.048, 12.759, 2, 12.641, 2, 12.5)
      ..lineTo(2, 1.5)
      ..cubicTo(2, 1.359, 2.048, 1.241, 2.144, 1.144)
      ..cubicTo(2.241, 1.048, 2.359, 1, 2.5, 1)
      ..cubicTo(2.641, 1, 2.759, 1.048, 2.856, 1.144)
      ..cubicTo(2.952, 1.241, 3, 1.359, 3, 1.5)
      ..lineTo(3, 4)
      ..lineTo(5.5, 4)
      ..cubicTo(5.641, 4, 5.759, 4.048, 5.856, 4.144)
      ..cubicTo(5.952, 4.241, 6, 4.359, 6, 4.5)
      ..cubicTo(6, 4.641, 5.952, 4.759, 5.856, 4.856)
      ..cubicTo(5.759, 4.952, 5.641, 5, 5.5, 5)
      ..lineTo(3, 5)
      ..lineTo(3, 12)
      ..lineTo(5.5, 12)
      ..cubicTo(5.641, 12, 5.759, 12.048, 5.856, 12.144)
      ..close()
      ..moveTo(9.638, 1.168)
      ..cubicTo(9.908, 1.28, 10.147, 1.439, 10.354, 1.646)
      ..cubicTo(10.589, 1.882, 10.874, 2, 11.207, 2)
      ..lineTo(14, 2)
      ..cubicTo(14.276, 2, 14.512, 2.098, 14.707, 2.293)
      ..cubicTo(14.902, 2.488, 15, 2.724, 15, 3)
      ..lineTo(15, 6)
      ..cubicTo(15, 6.276, 14.902, 6.512, 14.707, 6.707)
      ..cubicTo(14.512, 6.902, 14.276, 7, 14, 7)
      ..lineTo(8, 7)
      ..cubicTo(7.724, 7, 7.488, 6.902, 7.293, 6.707)
      ..cubicTo(7.098, 6.512, 7, 6.276, 7, 6)
      ..lineTo(7, 2)
      ..cubicTo(7, 1.724, 7.098, 1.488, 7.293, 1.293)
      ..cubicTo(7.488, 1.098, 7.724, 1, 8, 1)
      ..lineTo(8.793, 1)
      ..cubicTo(9.086, 1, 9.367, 1.056, 9.638, 1.168)
      ..close()
      ..moveTo(14, 6)
      ..lineTo(14, 3)
      ..lineTo(11.207, 3)
      ..cubicTo(10.914, 3, 10.633, 2.944, 10.362, 2.832)
      ..cubicTo(10.092, 2.72, 9.853, 2.561, 9.646, 2.354)
      ..cubicTo(9.411, 2.118, 9.126, 2, 8.793, 2)
      ..lineTo(8, 2)
      ..lineTo(8, 6)
      ..lineTo(14, 6)
      ..close()
      ..moveTo(14.707, 10.293)
      ..cubicTo(14.902, 10.488, 15, 10.724, 15, 11)
      ..lineTo(15, 14)
      ..cubicTo(15, 14.276, 14.902, 14.512, 14.707, 14.707)
      ..cubicTo(14.512, 14.902, 14.276, 15, 14, 15)
      ..lineTo(8, 15)
      ..cubicTo(7.724, 15, 7.488, 14.902, 7.293, 14.707)
      ..cubicTo(7.098, 14.512, 7, 14.276, 7, 14)
      ..lineTo(7, 10)
      ..cubicTo(7, 9.724, 7.098, 9.488, 7.293, 9.293)
      ..cubicTo(7.488, 9.098, 7.724, 9, 8, 9)
      ..lineTo(8.793, 9)
      ..cubicTo(9.086, 9, 9.367, 9.056, 9.638, 9.168)
      ..cubicTo(9.908, 9.28, 10.147, 9.439, 10.354, 9.646)
      ..cubicTo(10.589, 9.882, 10.874, 10, 11.207, 10)
      ..lineTo(14, 10)
      ..cubicTo(14.276, 10, 14.512, 10.098, 14.707, 10.293)
      ..close()
      ..moveTo(11.207, 11)
      ..cubicTo(10.914, 11, 10.633, 10.944, 10.362, 10.832)
      ..cubicTo(10.092, 10.72, 9.853, 10.561, 9.646, 10.354)
      ..cubicTo(9.411, 10.118, 9.126, 10, 8.793, 10)
      ..lineTo(8, 10)
      ..lineTo(8, 14)
      ..lineTo(14, 14)
      ..lineTo(14, 11)
      ..lineTo(11.207, 11)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_FolderTreeIconPainter old) => old.color != color;
}
```