Leaf Three icon
Used in scenarios representing travel (parks, etc), eco-friendly pledges, and also as an abstract example of zoom in photo modes. The Leaf Three icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_leaf_three_24_regular.svg
Leaf Three icon in React
npm install @fluentui/react-icons
import { LeafThree24Regular } from "@fluentui/react-icons";
export function Example() {
return <LeafThree24Regular aria-label="Leaf Three" />;
}Use the Leaf Three 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 { LeafThree24Regular, LeafThree24Filled } from "@fluentui/react-icons";
export function Example() {
return <LeafThree24Regular aria-label="Leaf Three" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_leaf_three_24_regular.svg" width="24" height="24" alt="Leaf Three"> 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="M19 7.5C19 8.02001 18.9278 8.52317 18.7929 9H20.4136C21.2898 9 22 9.71024 22 10.5864V15.5C22 19.0899 19.0899 22 15.5 22C13.9753 22 12.5733 21.4751 11.4647 20.5961L10.2804 21.7803C9.98755 22.0732 9.51268 22.0732 9.21978 21.7803C8.92689 21.4874 8.92689 21.0126 9.21978 20.7197L10.404 19.5354C10.0093 19.0376 9.68602 18.4807 9.44956 17.8801C9.06196 17.9587 8.6608 18 8.25 18C4.93629 18 2.25 15.3137 2.25 12V7.51364C2.25 6.67768 2.92768 6 3.76364 6H8.207C8.85993 3.6915 10.9824 2 13.5 2H17.5591C18.3549 2 19 2.64512 19 3.44091V7.5ZM9.72221 6.18195C11.4168 6.60942 12.8247 7.75785 13.6005 9.28195C14.2013 9.09862 14.8392 9 15.5 9H17.2092C17.3967 8.53678 17.5 8.03045 17.5 7.5V3.5H13.5C11.7526 3.5 10.267 4.62038 9.72221 6.18195ZM12.5346 19.5261C13.3643 20.1382 14.3899 20.5 15.5 20.5C18.2614 20.5 20.5 18.2614 20.5 15.5V10.5864C20.5 10.5387 20.4613 10.5 20.4136 10.5H15.5C12.7386 10.5 10.5 12.7386 10.5 15.5C10.5 16.6102 10.8618 17.6358 11.474 18.4655L15.7198 14.2197C16.0127 13.9268 16.4876 13.9268 16.7804 14.2197C17.0733 14.5126 17.0733 14.9874 16.7804 15.2803L12.5346 19.5261ZM9 15.5C9 14.9076 9.07924 14.3338 9.22769 13.7885L6.46956 11.0303C6.17666 10.7374 6.17666 10.2626 6.46956 9.96967C6.76245 9.67678 7.23732 9.67678 7.53022 9.96967L9.84805 12.2875C10.4145 11.2931 11.2358 10.4627 12.2231 9.88522C11.4661 8.46595 9.97086 7.5 8.25 7.5H3.76364C3.76037 7.5 3.75856 7.50076 3.75856 7.50076C3.75856 7.50076 3.75577 7.50222 3.75399 7.50399C3.75222 7.50577 3.75076 7.50856 3.75076 7.50856C3.75076 7.50856 3.75 7.51037 3.75 7.51364V12C3.75 14.4853 5.76472 16.5 8.25 16.5C8.52847 16.5 8.80102 16.4747 9.0655 16.4263C9.02234 16.1237 9 15.8145 9 15.5Z" fill="currentColor"/></svg>Details
| Name | Leaf Three |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 16 px, 20 px, 24 px |
| Regular (outlined) file | ic_fluent_leaf_three_24_regular.svg |
| Filled file | ic_fluent_leaf_three_24_filled.svg |
| React (Regular) | LeafThree16Regular, LeafThree20Regular, LeafThree24Regular |
| React (Filled) | LeafThree16Filled, LeafThree20Filled, LeafThree24Filled |
| License | MIT (© Microsoft Corporation) |