Tree View Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
The Tree View icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/321102.svg" alt="Tree View icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/321102.svg" alt="Tree View icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/321102.svg" alt="Tree View icon" :width="24" :height="24" />
CSS background
.icon-tree-view {
background-image: url('https://proicons.com/icon/321102.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>tree-view</title>
<defs>
<polygon id="path-1" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<polygon id="path-3" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<polygon id="path-5" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<polygon id="path-7" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-9"></path>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-11"></path>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-13"></path>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-15"></path>
<polygon id="path-17" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<polygon id="path-19" points="5.28125 3.65625 8.53125 6.5 5.28125 9.34375"></polygon>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-21"></path>
<path d="M3.60133125,2.0625 C3.71099102,2.06268343 3.81402792,2.11500587 3.878875,2.2034375 L4.57472813,3.155625 L4.78070313,3.4375 L9.57213125,3.4375 C9.60366548,3.44077536 9.62699552,3.46835274 9.625,3.49999375 L9.625,8.87500625 C9.62699552,8.90664726 9.60366548,8.93422464 9.57213125,8.9375 L1.42786875,8.9375 C1.39633452,8.93422464 1.37300448,8.90664726 1.375,8.87500625 L1.375,2.12499375 C1.37300448,2.09335274 1.39633452,2.06577536 1.42786875,2.0625 L3.60133125,2.0625 L3.60133125,2.0625 Z M3.60133125,1.375 L1.42786875,1.375 C1.01632887,1.37768717 0.684871591,1.71345349 0.687484475,2.12499375 L0.687484475,8.875 C0.684871591,9.28654651 1.01632887,9.62231283 1.42786875,9.625 L9.57213125,9.625 C9.98367113,9.62231283 10.3151284,9.28654651 10.3125155,8.875 L10.3125155,3.49999375 C10.3151284,3.08845349 9.98367113,2.75268717 9.57213125,2.75 L5.12981563,2.75 L4.4339625,1.7978125 C4.23978701,1.53208721 3.93044225,1.375 3.60133125,1.375 Z" id="path-23"></path>
</defs>
<g id="tree-view" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon/navigation/caret/right/16-copy-4" transform="translate(102.000000, 36.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-1"></use>
</g>
<g id="icon/navigation/caret/right/16-copy-4" transform="translate(102.000000, 112.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-3"></use>
</g>
<g id="icon/navigation/caret/right/16-copy-4" transform="translate(102.000000, 131.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-5"></use>
</g>
<g id="Group" transform="translate(102.000000, 56.000000)">
<g id="icon/navigation/caret/right/16-copy-5" transform="translate(6.500000, 6.500000) rotate(90.000000) translate(-6.500000, -6.500000) ">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-7"></use>
</g>
</g>
<rect id="Rectangle-Copy-84" fill="#A8A8A8" x="132" y="40" width="65" height="5"></rect>
<rect id="Rectangle-Copy-85" fill="#A8A8A8" x="132" y="116" width="65" height="5"></rect>
<rect id="Rectangle-Copy-86" fill="#A8A8A8" x="132" y="135" width="65" height="5"></rect>
<rect id="Rectangle-Copy-192" fill="#A8A8A8" x="132" y="59" width="65" height="5"></rect>
<rect id="Rectangle-Copy-193" fill="#A8A8A8" x="151" y="78" width="66" height="5"></rect>
<rect id="Rectangle-Copy-195" fill="#A8A8A8" x="151" y="97" width="66" height="5"></rect>
<g id="icon/file/folder/20-copy-4" transform="translate(115.000000, 36.000000)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-9"></use>
</g>
<g id="icon/file/folder/20-copy-4" transform="translate(115.000000, 112.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-11"></use>
</g>
<g id="icon/file/folder/20-copy-4" transform="translate(115.000000, 131.000000)">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-13"></use>
</g>
<g id="icon/file/folder/20-copy-4" transform="translate(115.000000, 56.000000)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-15"></use>
</g>
<g id="icon/navigation/caret/right/16-copy-4" transform="translate(121.000000, 73.000000)">
<mask id="mask-18" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-17"></use>
</g>
<g id="icon/navigation/caret/right/16-copy-4" transform="translate(121.000000, 93.000000)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-19"></use>
</g>
<g id="icon/file/folder/20-copy-4" transform="translate(134.000000, 73.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-21"></use>
</g>
<g id="icon/file/folder/20-copy-4" transform="translate(134.000000, 93.000000)">
<mask id="mask-24" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<use id="icon-color" fill="#565656" xlink:href="#path-23"></use>
</g>
</g>
</svg>
More from Carbon Icons
View all
Tree View in other icon packs
Copied!