Cube Tree icon
Used for shipping, production scenarios. The Cube Tree icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Cube Tree icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { CubeTree24Regular, CubeTree24Filled } from "@fluentui/react-icons";
export function Example() {
return <CubeTree24Regular aria-label="Cube Tree" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cube_tree_24_regular.svg" width="24" height="24" alt="Cube Tree"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.78849 5.51283C9.91947 5.11987 10.3442 4.9075 10.7372 5.03849L12 5.45943L13.2628 5.03849C13.6558 4.9075 14.0805 5.11987 14.2115 5.51283C14.3425 5.90579 14.1301 6.33053 13.7372 6.46151L12.75 6.79057V7.75C12.75 8.16421 12.4142 8.5 12 8.5C11.5858 8.5 11.25 8.16421 11.25 7.75V6.79057L10.2628 6.46151C9.86987 6.33053 9.6575 5.90579 9.78849 5.51283ZM12.2372 2.03849C12.0832 1.98717 11.9168 1.98717 11.7628 2.03849L8.01283 3.28849C7.70657 3.39057 7.5 3.67718 7.5 4V9C7.5 9.32282 7.70657 9.60943 8.01283 9.71151L11.25 10.7906V13H9.5C8.25736 13 7.25 14.0074 7.25 15.25V16.0945C5.95608 16.4275 5 17.6021 5 19C5 20.6569 6.34315 22 8 22C9.65685 22 11 20.6569 11 19C11 17.6021 10.0439 16.4275 8.75 16.0945V15.25C8.75 14.8358 9.08579 14.5 9.5 14.5H14.5C14.9142 14.5 15.25 14.8358 15.25 15.25V16.0945C13.9561 16.4275 13 17.6021 13 19C13 20.6569 14.3431 22 16 22C17.6569 22 19 20.6569 19 19C19 17.6021 18.0439 16.4275 16.75 16.0945V15.25C16.75 14.0074 15.7426 13 14.5 13H12.75V10.7906L15.9872 9.71151C16.2934 9.60943 16.5 9.32282 16.5 9V4C16.5 3.67718 16.2934 3.39057 15.9872 3.28849L12.2372 2.03849ZM9 8.45943V4.54057L12 3.54057L15 4.54057V8.45943L12 9.45943L9 8.45943ZM8 17.5C8.82843 17.5 9.5 18.1716 9.5 19C9.5 19.8284 8.82843 20.5 8 20.5C7.17157 20.5 6.5 19.8284 6.5 19C6.5 18.1716 7.17157 17.5 8 17.5ZM14.5 19C14.5 18.1716 15.1716 17.5 16 17.5C16.8284 17.5 17.5 18.1716 17.5 19C17.5 19.8284 16.8284 20.5 16 20.5C15.1716 20.5 14.5 19.8284 14.5 19Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/cube_tree_24_regular.svg";Details
| Name | Cube Tree |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cube_tree_24_regular.svg |
| Filled file | ic_fluent_cube_tree_24_filled.svg |
| React components | CubeTree24Regular, CubeTree24Filled |
| License | MIT (© Microsoft Corporation) |