Leaf One icon

Use the Leaf One 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 { LeafOne24Regular, LeafOne24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LeafOne24Regular aria-label="Leaf One" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_leaf_one_24_regular.svg" width="24" height="24" alt="Leaf One">

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="M13.2375 3.27233C12.554 2.58891 11.446 2.58891 10.7626 3.27233L7.05121 6.98371C4.31805 9.71686 4.31805 14.1482 7.05121 16.8813C8.22675 18.0569 9.71643 18.7268 11.25 18.8911V21.2496C11.25 21.6638 11.5858 21.9996 12 21.9996C12.4142 21.9996 12.75 21.6638 12.75 21.2496V18.8911C14.2836 18.7268 15.7733 18.0569 16.9488 16.8813C19.682 14.1482 19.682 9.71686 16.9488 6.98371L13.2375 3.27233ZM12.75 17.3801V11.7496C12.75 11.3354 12.4142 10.9996 12 10.9996C11.5858 10.9996 11.25 11.3354 11.25 11.7496V17.3801C10.1021 17.223 8.99433 16.7031 8.11187 15.8207C5.9645 13.6733 5.9645 10.1917 8.11187 8.04437L11.8232 4.33299C11.9209 4.23536 12.0792 4.23536 12.1768 4.33299L15.8882 8.04437C18.0355 10.1917 18.0355 13.6733 15.8882 15.8207C15.0057 16.7031 13.8979 17.223 12.75 17.3801Z" 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_one_24_regular.svg";

Details

Keywords

eco-friendlynaturetreezoom