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 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 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" />;
}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>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/leaf_three_24_regular.svg";Details
| Name | Leaf Three |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_leaf_three_24_regular.svg |
| Filled file | ic_fluent_leaf_three_24_filled.svg |
| React components | LeafThree24Regular, LeafThree24Filled |
| License | MIT (© Microsoft Corporation) |