The Phosphor tree structure icon visually represents hierarchical data or relationships, commonly used in UIs to denote organizational charts, file systems, or nested categories.
Common uses
- Displaying file system navigation
- Illustrating organizational hierarchy
- Representing nested comment threads
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { TreeStructure } from '@phosphor-icons/react';
<TreeStructure size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<TreeStructure size={24} />thin
<TreeStructure size={24} weight="thin" />light
<TreeStructure size={24} weight="light" />bold
<TreeStructure size={24} weight="bold" />fill
<TreeStructure size={24} weight="fill" />duotone
<TreeStructure size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- technology & development
- Keywords
- data structuresfamily treegenealogyhierarchytaxonomychartsflowcharttechnology & developmentofficetreestructureorganization chartnested list
FAQ
- What is the tree structure icon used for?
- It's used to represent hierarchical data, like file systems, organizational charts, or nested lists.
- How do I use the tree structure icon in React?
- You can import and use it like this: import { TreeStructure } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor tree structure icon is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →