Tree Deciduous icon
Used to represent nature themed events and topics. The Tree Deciduous 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 Tree Deciduous 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 { TreeDeciduous24Regular, TreeDeciduous24Filled } from "@fluentui/react-icons";
export function Example() {
return <TreeDeciduous24Regular aria-label="Tree Deciduous" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_tree_deciduous_24_regular.svg" width="24" height="24" alt="Tree Deciduous"> 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="M12 2C10.1553 2 8.58637 3.17468 7.9981 4.81638C6.00929 5.17156 4.5 6.90934 4.5 9C4.5 9.36664 4.54659 9.72309 4.63432 10.0634C3.35949 10.7966 2.5 12.1722 2.5 13.75C2.5 15.9526 4.17511 17.7633 6.3214 17.9786C6.37864 17.9926 6.43845 18 6.5 18H9.5V20.25C9.5 21.2165 10.2835 22 11.25 22H12.75C13.7165 22 14.5 21.2165 14.5 20.25V18H17.5C17.5615 18 17.6214 17.9926 17.6786 17.9786C19.8249 17.7633 21.5 15.9526 21.5 13.75C21.5 12.1722 20.6405 10.7966 19.3657 10.0634C19.4534 9.7231 19.5 9.36664 19.5 9C19.5 6.90933 17.9907 5.17156 16.0019 4.81638C15.4136 3.17468 13.8447 2 12 2ZM13 18V20.25C13 20.3881 12.8881 20.5 12.75 20.5H11.25C11.1119 20.5 11 20.3881 11 20.25V18H13ZM6.61472 16.5C6.59435 16.4969 6.5737 16.4945 6.5528 16.4931C5.12643 16.3924 4 15.2024 4 13.75C4 12.5589 4.75764 11.5429 5.81967 11.1611C6.01718 11.0901 6.17592 10.9396 6.2573 10.7462C6.33869 10.5527 6.33529 10.334 6.24792 10.1431C6.08897 9.79596 6 9.40939 6 9C6 7.5263 7.15954 6.32299 8.61556 6.25321C8.95467 6.23696 9.24057 5.99494 9.31259 5.66317C9.58111 4.42616 10.6833 3.5 12 3.5C13.3167 3.5 14.4189 4.42616 14.6874 5.66317C14.7594 5.99494 15.0453 6.23696 15.3844 6.25321C16.8405 6.32299 18 7.5263 18 9C18 9.40939 17.911 9.79596 17.7521 10.1431C17.6647 10.334 17.6613 10.5527 17.7427 10.7462C17.8241 10.9396 17.9828 11.0901 18.1803 11.1611C19.2424 11.5429 20 12.5589 20 13.75C20 15.2024 18.8736 16.3924 17.4472 16.4931C17.4263 16.4945 17.4056 16.4969 17.3853 16.5H6.61472Z" 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/tree_deciduous_24_regular.svg";Details
| Name | Tree Deciduous |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_tree_deciduous_24_regular.svg |
| Filled file | ic_fluent_tree_deciduous_24_filled.svg |
| React components | TreeDeciduous24Regular, TreeDeciduous24Filled |
| License | MIT (© Microsoft Corporation) |